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

components tag order added

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-07 15:13:51 +03:00
parent 98f567478e
commit 001de2be44
41 changed files with 1677 additions and 1695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.cjs
View File

@@ -9,6 +9,12 @@ module.exports = {
}, },
rules: { rules: {
'vue/multi-word-component-names': 'off', 'vue/multi-word-component-names': 'off',
'vue/no-reserved-component-names': 'off' 'vue/no-reserved-component-names': 'off',
'vue/component-tags-order': [
'error',
{
order: ['script', 'template', 'style']
}
]
} }
}; };

88
src/layout/AppConfig.vue
View File

@@ -1,3 +1,47 @@
<script setup>
import { ref } from 'vue';
import { useLayoutService } from '@/layout/composables/layoutService';
const scales = ref([12, 13, 14, 15, 16]);
const visible = ref(false);
const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
const onConfigButtonClick = () => {
visible.value = !visible.value;
};
const onChangeTheme = (theme, mode) => {
const elementId = 'theme-css';
const linkElement = document.getElementById(elementId);
const cloneLinkElement = linkElement.cloneNode(true);
const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
cloneLinkElement.setAttribute('id', elementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', elementId);
});
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
changeThemeSettings(theme, mode === 'dark');
};
const decrementScale = () => {
setScale(layoutConfig.scale.value - 1);
applyScale();
};
const incrementScale = () => {
setScale(layoutConfig.scale.value + 1);
console.log(layoutConfig.scale);
applyScale();
};
const applyScale = () => {
document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
};
</script>
<template> <template>
<button class="layout-config-button p-link" type="button" @click="onConfigButtonClick()"> <button class="layout-config-button p-link" type="button" @click="onConfigButtonClick()">
<i class="pi pi-cog"></i> <i class="pi pi-cog"></i>
@@ -242,48 +286,4 @@
</Sidebar> </Sidebar>
</template> </template>
<script setup>
import { ref } from 'vue';
import { useLayoutService } from '@/layout/composables/layoutService';
const scales = ref([12, 13, 14, 15, 16]);
const visible = ref(false);
const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
const onConfigButtonClick = () => {
visible.value = !visible.value;
};
const onChangeTheme = (theme, mode) => {
const elementId = 'theme-css';
const linkElement = document.getElementById(elementId);
const cloneLinkElement = linkElement.cloneNode(true);
const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
cloneLinkElement.setAttribute('id', elementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', elementId);
});
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
changeThemeSettings(theme, mode === 'dark');
};
const decrementScale = () => {
setScale(layoutConfig.scale.value - 1);
applyScale();
};
const incrementScale = () => {
setScale(layoutConfig.scale.value + 1);
console.log(layoutConfig.scale);
applyScale();
};
const applyScale = () => {
document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
};
</script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

16
src/layout/AppFooter.vue
View File

@@ -1,11 +1,3 @@
<template>
<div class="layout-footer">
<img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
by
<span class="font-medium ml-2">PrimeNG</span>
</div>
</template>
<script setup> <script setup>
import { useLayoutService } from '@/layout/composables/layoutService'; import { useLayoutService } from '@/layout/composables/layoutService';
@@ -15,4 +7,12 @@ const logoUrl = () => {
return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href; return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
}; };
</script> </script>
<template>
<div class="layout-footer">
<img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
by
<span class="font-medium ml-2">PrimeNG</span>
</div>
</template>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

34
src/layout/AppLayout.vue
View File

@@ -1,20 +1,3 @@
<template>
<div class="layout-wrapper" :class="containerClass">
<app-topbar></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
</div>
<div class="layout-main-container">
<div class="layout-main">
<router-view></router-view>
</div>
<app-footer></app-footer>
</div>
<app-config></app-config>
<div class="layout-mask"></div>
</div>
</template>
<script setup> <script setup>
import { computed, watch, ref } from 'vue'; import { computed, watch, ref } from 'vue';
import AppTopbar from './AppTopbar.vue'; import AppTopbar from './AppTopbar.vue';
@@ -74,4 +57,21 @@ const isOutsideClicked = (event) => {
}; };
</script> </script>
<template>
<div class="layout-wrapper" :class="containerClass">
<app-topbar></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
</div>
<div class="layout-main-container">
<div class="layout-main">
<router-view></router-view>
</div>
<app-footer></app-footer>
</div>
<app-config></app-config>
<div class="layout-mask"></div>
</div>
</template>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

44
src/layout/AppTopbar.vue
View File

@@ -1,3 +1,25 @@
<script setup>
import { ref, computed } from 'vue';
import { useLayoutService } from '@/layout/composables/layoutService';
const { layoutConfig, onMenuToggle } = useLayoutService();
const topbarMenuActive = ref(false);
const logoUrl = () => {
return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
};
const onTopBarMenuButton = () => {
topbarMenuActive.value = !topbarMenuActive.value;
};
const topbarMenuClasses = computed(() => {
return {
'layout-topbar-menu-mobile-active': topbarMenuActive.value
};
});
</script>
<template> <template>
<div class="layout-topbar"> <div class="layout-topbar">
<router-link to="/" class="layout-topbar-logo"> <router-link to="/" class="layout-topbar-logo">
@@ -30,26 +52,4 @@
</div> </div>
</template> </template>
<script setup>
import { ref, computed } from 'vue';
import { useLayoutService } from '@/layout/composables/layoutService';
const { layoutConfig, onMenuToggle } = useLayoutService();
const topbarMenuActive = ref(false);
const logoUrl = () => {
return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
};
const onTopBarMenuButton = () => {
topbarMenuActive.value = !topbarMenuActive.value;
};
const topbarMenuClasses = computed(() => {
return {
'layout-topbar-menu-mobile-active': topbarMenuActive.value
};
});
</script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

56
src/layout/BlockViewer.vue
View File

@@ -1,31 +1,3 @@
<template>
<div class="block-section">
<div class="block-header">
<span class="block-title">
<span>{{ header }}</span>
<span class="badge-new" v-if="recent">New</span>
</span>
<div class="block-actions">
<a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }" @click="activateView($event, BlockView.CODE)">
<span>Code</span>
</a>
<a :tabindex="0" class="block-action-copy" @click="copyCode($event)" v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
</div>
</div>
<div class="block-content">
<div :class="containerClass" :style="previewStyle" v-if="blockView == BlockView.PREVIEW">
<slot></slot>
</div>
<div v-if="blockView === BlockView.CODE">
<pre v-code><code>{{code}}
</code></pre>
</div>
</div>
</div>
</template>
<script> <script>
export default { export default {
props: { props: {
@@ -63,6 +35,34 @@ export default {
}; };
</script> </script>
<template>
<div class="block-section">
<div class="block-header">
<span class="block-title">
<span>{{ header }}</span>
<span class="badge-new" v-if="recent">New</span>
</span>
<div class="block-actions">
<a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }" @click="activateView($event, BlockView.CODE)">
<span>Code</span>
</a>
<a :tabindex="0" class="block-action-copy" @click="copyCode($event)" v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
</div>
</div>
<div class="block-content">
<div :class="containerClass" :style="previewStyle" v-if="blockView == BlockView.PREVIEW">
<slot></slot>
</div>
<div v-if="blockView === BlockView.CODE">
<pre v-code><code>{{code}}
</code></pre>
</div>
</div>
</div>
</template>
<style scoped lang="scss"> <style scoped lang="scss">
.block-section { .block-section {
margin-bottom: 4rem; margin-bottom: 4rem;

4
src/layout/composables/layoutService.js
View File

@@ -25,11 +25,11 @@ export function useLayoutService () {
layoutConfig.darkTheme = darkTheme; layoutConfig.darkTheme = darkTheme;
}; };
const setScale = scale => { const setScale = (scale) => {
layoutConfig.scale = scale; layoutConfig.scale = scale;
}; };
const setActiveMenuItem = item => { const setActiveMenuItem = (item) => {
layoutConfig.activeMenuItem = item.value || item; layoutConfig.activeMenuItem = item.value || item;
}; };

4
src/layout/service/CountryService.js
View File

@@ -1,7 +1,7 @@
export default class CountryService { export default class CountryService {
getCountries() { getCountries() {
return fetch('/data/countries.json') return fetch('/data/countries.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
} }

20
src/layout/service/CustomerService.js
View File

@@ -1,32 +1,32 @@
export default class CustomerService { export default class CustomerService {
getCustomersSmall() { getCustomersSmall() {
return fetch('/data/customers-small.json') return fetch('/data/customers-small.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
getCustomersMedium() { getCustomersMedium() {
return fetch('/data/customers-medium.json') return fetch('/data/customers-medium.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
getCustomersLarge() { getCustomersLarge() {
return fetch('/data/customers-large.json') return fetch('/data/customers-large.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
getCustomersXLarge() { getCustomersXLarge() {
return fetch('/data/customers-xlarge.json') return fetch('/data/customers-xlarge.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
getCustomers(params) { getCustomers(params) {
const queryParams = Object.keys(params) const queryParams = Object.keys(params)
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])) .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
.join('&'); .join('&');
return fetch('https://www.primefaces.org//data/customers?' + queryParams).then(res => res.json()); return fetch('https://www.primefaces.org//data/customers?' + queryParams).then((res) => res.json());
} }
} }

8
src/layout/service/NodeService.js
View File

@@ -1,13 +1,13 @@
export default class NodeService { export default class NodeService {
getTreeTableNodes() { getTreeTableNodes() {
return fetch('/data/treetablenodes.json') return fetch('/data/treetablenodes.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.root); .then((d) => d.root);
} }
getTreeNodes() { getTreeNodes() {
return fetch('/data/treenodes.json') return fetch('/data/treenodes.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.root); .then((d) => d.root);
} }
} }

4
src/layout/service/PhotoService.js
View File

@@ -1,7 +1,7 @@
export default class PhotoService { export default class PhotoService {
getImages() { getImages() {
return fetch('/data/photos.json') return fetch('/data/photos.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
} }

12
src/layout/service/ProductService.js
View File

@@ -1,19 +1,19 @@
export default class ProductService { export default class ProductService {
getProductsSmall() { getProductsSmall() {
return fetch('/data/products-small.json') return fetch('/data/products-small.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
getProducts() { getProducts() {
return fetch('/data/products.json') return fetch('/data/products.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
getProductsWithOrdersSmall() { getProductsWithOrdersSmall() {
return fetch('/data/products-orders-small.json') return fetch('/data/products-orders-small.json')
.then(res => res.json()) .then((res) => res.json())
.then(d => d.data); .then((d) => d.data);
} }
} }

232
src/views/Dashboard.vue
View File

@@ -1,3 +1,119 @@
<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import ProductService from '@/layout/service/ProductService';
import { useLayoutService } from '@/layout/composables/layoutService';
const { isDarkTheme } = useLayoutService();
const products = ref(null);
const lineData = reactive({
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Revenue',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
tension: 0.4
},
{
label: 'Sales',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
tension: 0.4
}
]
});
const items = ref([
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
]);
const lineOptions = ref(null);
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
});
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const applyLightTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
const applyDarkTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
watch(
isDarkTheme,
(val) => {
if (val) {
applyDarkTheme();
} else {
applyLightTheme();
}
},
{ immediate: true }
);
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-12 lg:col-6 xl:col-3">
@@ -239,119 +355,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import ProductService from '@/layout/service/ProductService';
import { useLayoutService } from '@/layout/composables/layoutService';
const { isDarkTheme } = useLayoutService();
const products = ref(null);
const lineData = reactive({
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Revenue',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
tension: 0.4
},
{
label: 'Sales',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
tension: 0.4
}
]
});
const items = ref([
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
]);
const lineOptions = ref(null);
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
});
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const applyLightTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
const applyDarkTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
watch(
isDarkTheme,
(val) => {
if (val) {
applyDarkTheme();
} else {
applyLightTheme();
}
},
{ immediate: true }
);
</script>

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

@@ -1,3 +1,128 @@
<script setup>
import { FilterMatchMode } from 'primevue/api';
import { ref, onMounted, onBeforeMount } from 'vue';
import ProductService from '@/layout/service/ProductService';
import { useToast } from 'primevue/usetoast';
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>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@@ -187,131 +312,6 @@
</div> </div>
</template> </template>
<script setup>
import { FilterMatchMode } from 'primevue/api';
import { ref, onMounted, onBeforeMount } from 'vue';
import ProductService from '@/layout/service/ProductService';
import { useToast } from 'primevue/usetoast';
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"> <style scoped lang="scss">
@import '@/assets/demo/styles/badges.scss'; @import '@/assets/demo/styles/badges.scss';
</style> </style>

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

@@ -1,3 +1,19 @@
<script setup>
import { useLayoutService } from '@/layout/composables/layoutService';
const { isDarkTheme } = useLayoutService();
const smoothScroll = (id) => {
document.querySelector(id).scrollIntoView({
behavior: 'smooth'
});
};
const logoUrl = () => {
return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
};
</script>
<template> <template>
<div class="surface-0 overflow-hidden"> <div class="surface-0 overflow-hidden">
<div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static"> <div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static">
@@ -361,22 +377,6 @@
</div> </div>
</template> </template>
<script setup>
import { useLayoutService } from '@/layout/composables/layoutService';
const { isDarkTheme } = useLayoutService();
const smoothScroll = (id) => {
document.querySelector(id).scrollIntoView({
behavior: 'smooth'
});
};
const logoUrl = () => {
return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
};
</script>
<style scoped> <style scoped>
#hero { #hero {
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%); background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%);

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

@@ -1,3 +1,37 @@
<script setup>
import { ref } from 'vue';
const customEvents = ref([
{
status: 'Ordered',
date: '15/10/2020 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/10/2020 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/10/2020 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/10/2020 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
]);
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-6"> <div class="col-6">
@@ -98,40 +132,6 @@
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
const customEvents = ref([
{
status: 'Ordered',
date: '15/10/2020 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/10/2020 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/10/2020 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/10/2020 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
]);
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {
::v-deep(.customized-timeline) { ::v-deep(.customized-timeline) {

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

@@ -1,3 +1,18 @@
<script setup>
import { useLayoutService } from '@/layout/composables/layoutService';
import { ref } from 'vue';
const { isDarkTheme } = useLayoutService();
const email = ref('');
const password = ref('');
const checked = ref(false);
const logoUrl = () => {
return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
};
</script>
<template> <template>
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> <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="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
@@ -34,21 +49,6 @@
</div> </div>
</template> </template>
<script setup>
import { useLayoutService } from '@/layout/composables/layoutService';
import { ref } from 'vue';
const { isDarkTheme } = useLayoutService();
const email = ref('');
const password = ref('');
const checked = ref(false);
const logoUrl = () => {
return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
};
</script>
<style scoped> <style scoped>
.pi-eye { .pi-eye {
transform: scale(1.6); transform: scale(1.6);

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

@@ -1,3 +1,32 @@
<script setup>
import { ref } from 'vue';
const items = ref([
{
label: 'Update',
icon: 'pi pi-refresh'
},
{
label: 'Delete',
icon: 'pi pi-times'
},
{
separator: true
},
{
label: 'Home',
icon: 'pi pi-home'
}
]);
const loading = ref([false, false, false]);
const load = (index) => {
loading.value[index] = true;
setTimeout(() => (loading.value[index] = false), 1000);
};
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
@@ -142,32 +171,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
const items = ref([
{
label: 'Update',
icon: 'pi pi-refresh'
},
{
label: 'Delete',
icon: 'pi pi-times'
},
{
separator: true
},
{
label: 'Home',
icon: 'pi pi-home'
}
]);
const loading = ref([false, false, false]);
const load = (index) => {
loading.value[index] = true;
setTimeout(() => (loading.value[index] = false), 1000);
};
</script>

74
src/views/uikit/Chart.vue
View File

@@ -1,40 +1,3 @@
<template>
<div class="grid p-fluid">
<div class="col-12 lg:col-6">
<div class="card">
<h5>Linear Chart</h5>
<Chart type="line" :data="lineData" :options="lineOptions" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Pie Chart</h5>
<Chart type="pie" :data="pieData" :options="pieOptions" style="width: 50%" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Polar Area Chart</h5>
<Chart type="polarArea" :data="polarData" :options="polarOptions" style="width: 50%" />
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h5>Bar Chart</h5>
<Chart type="bar" :data="barData" :options="barOptions" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Doughnut Chart</h5>
<Chart type="doughnut" :data="pieData" :options="pieOptions" style="width: 50%" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Radar Chart</h5>
<Chart type="radar" :data="radarData" :options="radarOptions" style="width: 50%" />
</div>
</div>
</div>
</template>
<script setup> <script setup>
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { useLayoutService } from '@/layout/composables/layoutService'; import { useLayoutService } from '@/layout/composables/layoutService';
@@ -347,3 +310,40 @@ watch(
{ immediate: true } { immediate: true }
); );
</script> </script>
<template>
<div class="grid p-fluid">
<div class="col-12 lg:col-6">
<div class="card">
<h5>Linear Chart</h5>
<Chart type="line" :data="lineData" :options="lineOptions" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Pie Chart</h5>
<Chart type="pie" :data="pieData" :options="pieOptions" style="width: 50%" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Polar Area Chart</h5>
<Chart type="polarArea" :data="polarData" :options="polarOptions" style="width: 50%" />
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h5>Bar Chart</h5>
<Chart type="bar" :data="barData" :options="barOptions" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Doughnut Chart</h5>
<Chart type="doughnut" :data="pieData" :options="pieOptions" style="width: 50%" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Radar Chart</h5>
<Chart type="radar" :data="radarData" :options="radarOptions" style="width: 50%" />
</div>
</div>
</div>
</template>

20
src/views/uikit/File.vue
View File

@@ -1,3 +1,13 @@
<script setup>
import { useToast } from 'primevue/usetoast';
const toast = useToast();
const onUpload = () => {
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
};
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@@ -11,13 +21,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { useToast } from 'primevue/usetoast';
const toast = useToast();
const onUpload = () => {
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
};
</script>

86
src/views/uikit/FloatLabel.vue
View File

@@ -1,3 +1,46 @@
<script setup>
import { ref, onMounted } from 'vue';
import CountryService from '@/layout/service/CountryService';
const countries = ref([]);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const filteredCountries = ref(null);
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const value4 = ref(null);
const value5 = ref(null);
const value6 = ref(null);
const value7 = ref(null);
const value8 = ref(null);
const value9 = ref(null);
const value10 = ref(null);
const countryService = new CountryService();
onMounted(() => {
countryService.getCountries().then((data) => (countries.value = data));
});
const searchCountry = (event) => {
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
const filtered = [];
const query = event.query;
for (let i = 0; i < this.countries.length; i++) {
const country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
filteredCountries.value = filtered;
};
</script>
<template> <template>
<div class="card"> <div class="card">
<h5>Float Label</h5> <h5>Float Label</h5>
@@ -70,46 +113,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { ref, onMounted } from 'vue';
import CountryService from '@/layout/service/CountryService';
const countries = ref([]);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const filteredCountries = ref(null);
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const value4 = ref(null);
const value5 = ref(null);
const value6 = ref(null);
const value7 = ref(null);
const value8 = ref(null);
const value9 = ref(null);
const value10 = ref(null);
const countryService = new CountryService();
onMounted(() => {
countryService.getCountries().then((data) => (countries.value = data));
});
const searchCountry = (event) => {
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
const filtered = [];
const query = event.query;
for (let i = 0; i < this.countries.length; i++) {
const country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
filteredCountries.value = filtered;
};
</script>

24
src/views/uikit/FormLayout.vue
View File

@@ -1,3 +1,15 @@
<script setup>
import { ref } from 'vue';
const dropdownItems = ref([
{ name: 'Option 1', code: 'Option 1' },
{ name: 'Option 2', code: 'Option 2' },
{ name: 'Option 3', code: 'Option 3' }
]);
const dropdownItem = ref(null);
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
@@ -107,15 +119,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
const dropdownItems = ref([
{ name: 'Option 1', code: 'Option 1' },
{ name: 'Option 2', code: 'Option 2' },
{ name: 'Option 3', code: 'Option 3' }
]);
const dropdownItem = ref(null);
</script>

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

@@ -1,3 +1,37 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
const icons = ref(null);
const filter = ref(null);
onMounted(() => {
fetch('/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let icons = d.icons;
let data = icons.filter((value) => {
return value.icon.tags.indexOf('deprecate') === -1;
});
data.sort((icon1, icon2) => {
if (icon1.properties.name < icon2.properties.name) return -1;
else if (icon1.properties.name > icon2.properties.name) return 1;
else return 0;
});
icons.value = data;
});
});
const filteredIcons = computed(() => {
if (filter.value) {
return icons.value.filter((icon) => {
return icon.properties.name.toLowerCase().indexOf(filter.value.toLowerCase()) > -1;
});
} else {
return icons.value;
}
});
</script>
<template> <template>
<div> <div>
<div class="card"> <div class="card">
@@ -96,40 +130,6 @@ export default {
</div> </div>
</template> </template>
<script setup>
import { ref, onMounted, computed } from 'vue';
const icons = ref(null);
const filter = ref(null);
onMounted(() => {
fetch('/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let icons = d.icons;
let data = icons.filter((value) => {
return value.icon.tags.indexOf('deprecate') === -1;
});
data.sort((icon1, icon2) => {
if (icon1.properties.name < icon2.properties.name) return -1;
else if (icon1.properties.name > icon2.properties.name) return 1;
else return 0;
});
icons.value = data;
});
});
const filteredIcons = computed(() => {
if (filter.value) {
return icons.value.filter((icon) => {
return icon.properties.name.toLowerCase().indexOf(filter.value.toLowerCase()) > -1;
});
} else {
return icons.value;
}
});
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/demo/documentation.scss'; @import '@/assets/demo/documentation.scss';

154
src/views/uikit/Input.vue
View File

@@ -1,3 +1,80 @@
<script setup>
import { ref, onMounted } from 'vue';
import CountryService from '@/layout/service/CountryService';
import NodeService from '@/layout/service/NodeService';
const floatValue = ref(null);
const autoValue = ref(null);
const selectedAutoValue = ref(null);
const autoFilteredValue = ref([]);
const calendarValue = ref(null);
const inputNumberValue = ref(null);
const chipsValue = ref(null);
const sliderValue = ref(50);
const ratingValue = ref(null);
const colorValue = ref('#1976D2');
const radioValue = ref(null);
const checkboxValue = ref([]);
const switchValue = ref(false);
const listboxValues = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const listboxValue = ref(null);
const dropdownValues = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const dropdownValue = ref(null);
const multiselectValues = ref([
{ name: 'Australia', code: 'AU' },
{ name: 'Brazil', code: 'BR' },
{ name: 'China', code: 'CN' },
{ name: 'Egypt', code: 'EG' },
{ name: 'France', code: 'FR' },
{ name: 'Germany', code: 'DE' },
{ name: 'India', code: 'IN' },
{ name: 'Japan', code: 'JP' },
{ name: 'Spain', code: 'ES' },
{ name: 'United States', code: 'US' }
]);
const multiselectValue = ref(null);
const toggleValue = ref(false);
const selectButtonValue1 = ref(null);
const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const selectButtonValue2 = ref(null);
const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const knobValue = ref(50);
const inputGroupValue = ref(false);
const treeSelectNodes = ref(null);
const selectedNode = ref(null);
const countryService = new CountryService();
const nodeService = new NodeService();
onMounted(() => {
countryService.getCountries().then((data) => (autoValue.value = data));
nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
});
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
this.autoFilteredValue = [...this.autoValue];
} else {
this.autoFilteredValue = this.autoValue.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
};
</script>
<template> <template>
<div class="grid p-fluid"> <div class="grid p-fluid">
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
@@ -218,80 +295,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { ref, onMounted } from 'vue';
import CountryService from '@/layout/service/CountryService';
import NodeService from '@/layout/service/NodeService';
const floatValue = ref(null);
const autoValue = ref(null);
const selectedAutoValue = ref(null);
const autoFilteredValue = ref([]);
const calendarValue = ref(null);
const inputNumberValue = ref(null);
const chipsValue = ref(null);
const sliderValue = ref(50);
const ratingValue = ref(null);
const colorValue = ref('#1976D2');
const radioValue = ref(null);
const checkboxValue = ref([]);
const switchValue = ref(false);
const listboxValues = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const listboxValue = ref(null);
const dropdownValues = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const dropdownValue = ref(null);
const multiselectValues = ref([
{ name: 'Australia', code: 'AU' },
{ name: 'Brazil', code: 'BR' },
{ name: 'China', code: 'CN' },
{ name: 'Egypt', code: 'EG' },
{ name: 'France', code: 'FR' },
{ name: 'Germany', code: 'DE' },
{ name: 'India', code: 'IN' },
{ name: 'Japan', code: 'JP' },
{ name: 'Spain', code: 'ES' },
{ name: 'United States', code: 'US' }
]);
const multiselectValue = ref(null);
const toggleValue = ref(false);
const selectButtonValue1 = ref(null);
const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const selectButtonValue2 = ref(null);
const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const knobValue = ref(50);
const inputGroupValue = ref(false);
const treeSelectNodes = ref(null);
const selectedNode = ref(null);
const countryService = new CountryService();
const nodeService = new NodeService();
onMounted(() => {
countryService.getCountries().then((data) => (autoValue.value = data));
nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
});
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
this.autoFilteredValue = [...this.autoValue];
} else {
this.autoFilteredValue = this.autoValue.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
};
</script>

88
src/views/uikit/InvalidState.vue
View File

@@ -1,3 +1,47 @@
<script setup>
import { ref, onMounted } from 'vue';
import CountryService from '@/layout/service/CountryService';
const countries = ref(null);
const filteredCountries = ref(null);
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const value4 = ref(null);
const value5 = ref(null);
const value6 = ref(null);
const value7 = ref(null);
const value8 = ref(null);
const value9 = ref(null);
const value10 = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const countryService = new CountryService();
onMounted(() => {
countryService.getCountries().then((data) => {
countries.value = data;
});
});
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
filteredCountries.value = [...countries];
} else {
filteredCountries.value = countries.value.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
};
</script>
<template> <template>
<div class="grid p-fluid"> <div class="grid p-fluid">
<div class="col"> <div class="col">
@@ -54,47 +98,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { ref, onMounted } from 'vue';
import CountryService from '@/layout/service/CountryService';
const countries = ref(null);
const filteredCountries = ref(null);
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const value4 = ref(null);
const value5 = ref(null);
const value6 = ref(null);
const value7 = ref(null);
const value8 = ref(null);
const value9 = ref(null);
const value10 = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const countryService = new CountryService();
onMounted(() => {
countryService.getCountries().then((data) => {
countries.value = data;
});
});
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
filteredCountries.value = [...countries];
} else {
filteredCountries.value = countries.value.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
};
</script>

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

@@ -1,3 +1,62 @@
<script setup>
import { ref, onMounted } from 'vue';
import ProductService from '@/layout/service/ProductService';
const picklistValue = ref([
[
{ name: 'San Francisco', code: 'SF' },
{ name: 'London', code: 'LDN' },
{ name: 'Paris', code: 'PRS' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Berlin', code: 'BRL' },
{ name: 'Barcelona', code: 'BRC' },
{ name: 'Rome', code: 'RM' }
],
[]
]);
const orderlistValue = ref([
{ name: 'San Francisco', code: 'SF' },
{ name: 'London', code: 'LDN' },
{ name: 'Paris', code: 'PRS' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Berlin', code: 'BRL' },
{ name: 'Barcelona', code: 'BRC' },
{ name: 'Rome', code: 'RM' }
]);
const dataviewValue = ref(null);
const layout = ref('grid');
const sortKey = ref(null);
const sortOrder = ref(null);
const sortField = ref(null);
const sortOptions = ref([
{ label: 'Price High to Low', value: '!price' },
{ label: 'Price Low to High', value: 'price' }
]);
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => (dataviewValue.value = data));
});
const onSortChange = (event) => {
const value = event.value.value;
const sortValue = event.value;
if (value.indexOf('!') === 0) {
sortOrder.value = -1;
sortField.value = value.substring(1, value.length);
sortKey.value = sortValue;
} else {
sortOrder.value = 1;
sortField.value = value;
sortKey.value = sortValue;
}
};
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@@ -90,65 +149,6 @@
</div> </div>
</template> </template>
<script setup>
import { ref, onMounted } from 'vue';
import ProductService from '@/layout/service/ProductService';
const picklistValue = ref([
[
{ name: 'San Francisco', code: 'SF' },
{ name: 'London', code: 'LDN' },
{ name: 'Paris', code: 'PRS' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Berlin', code: 'BRL' },
{ name: 'Barcelona', code: 'BRC' },
{ name: 'Rome', code: 'RM' }
],
[]
]);
const orderlistValue = ref([
{ name: 'San Francisco', code: 'SF' },
{ name: 'London', code: 'LDN' },
{ name: 'Paris', code: 'PRS' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Berlin', code: 'BRL' },
{ name: 'Barcelona', code: 'BRC' },
{ name: 'Rome', code: 'RM' }
]);
const dataviewValue = ref(null);
const layout = ref('grid');
const sortKey = ref(null);
const sortOrder = ref(null);
const sortField = ref(null);
const sortOptions = ref([
{ label: 'Price High to Low', value: '!price' },
{ label: 'Price Low to High', value: 'price' }
]);
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => (dataviewValue.value = data));
});
const onSortChange = (event) => {
const value = event.value.value;
const sortValue = event.value;
if (value.indexOf('!') === 0) {
sortOrder.value = -1;
sortField.value = value.substring(1, value.length);
sortKey.value = sortValue;
} else {
sortOrder.value = 1;
sortField.value = value;
sortKey.value = sortValue;
}
};
</script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/assets/demo/styles/badges.scss'; @import '@/assets/demo/styles/badges.scss';
</style> </style>

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

@@ -1,3 +1,55 @@
<script setup>
import ProductService from '@/layout/service/ProductService';
import PhotoService from '@/layout/service/PhotoService';
import { ref, onMounted } from 'vue';
const products = ref([]);
const images = ref([]);
const galleriaResponsiveOptions = ref([
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '960px',
numVisible: 4
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
]);
const carouselResponsiveOptions = ref([
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '768px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '560px',
numVisible: 1,
numScroll: 1
}
]);
const productService = new ProductService();
const photoService = new PhotoService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
photoService.getImages().then((data) => (images.value = data));
});
</script>
<template> <template>
<div class="grid p-fluid"> <div class="grid p-fluid">
<div class="col-12"> <div class="col-12">
@@ -54,58 +106,6 @@
</div> </div>
</template> </template>
<script setup>
import ProductService from '@/layout/service/ProductService';
import PhotoService from '@/layout/service/PhotoService';
import { ref, onMounted } from 'vue';
const products = ref([]);
const images = ref([]);
const galleriaResponsiveOptions = ref([
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '960px',
numVisible: 4
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
]);
const carouselResponsiveOptions = ref([
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '768px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '560px',
numVisible: 1,
numScroll: 1
}
]);
const productService = new ProductService();
const photoService = new PhotoService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
photoService.getImages().then((data) => (images.value = data));
});
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/demo/styles/badges.scss'; @import '@/assets/demo/styles/badges.scss';
@import '@/assets/demo/styles/items.scss'; @import '@/assets/demo/styles/items.scss';

178
src/views/uikit/Menu.vue
View File

@@ -1,92 +1,3 @@
<template>
<div class="grid p-fluid">
<div class="col-12">
<div class="card card-w-title">
<h5>Menubar</h5>
<Menubar :model="nestedMenuitems">
<template #end>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText type="text" placeholder="Search" />
</span>
</template>
</Menubar>
</div>
</div>
<div class="col-12">
<div class="card card-w-title">
<h5>Breadcrumb</h5>
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
</div>
</div>
<div class="col-12 md:col-6">
<div class="card card-w-title">
<h5>Steps</h5>
<p>Steps and TabMenu are integrated with the same child routes.</p>
<Steps :model="nestedRouteItems" :readonly="false" />
<router-view />
</div>
</div>
<div class="col-12 md:col-6">
<div class="card card-w-title">
<h5>TabMenu</h5>
<p>Steps and TabMenu are integrated with the same child routes.</p>
<TabMenu :model="nestedRouteItems" />
<router-view />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Tiered Menu</h5>
<TieredMenu :model="tieredMenuItems" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Plain Menu</h5>
<Menu :model="menuitems" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Overlay Menu</h5>
<Menu ref="menu" :model="overlayMenuItems" :popup="true" />
<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
</div>
<div class="card" @contextmenu="onContextRightClick">
<h5>ContextMenu</h5>
Right click to display.
<ContextMenu ref="contextMenu" :model="contextMenuItems" />
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>MegaMenu - Horizontal</h5>
<MegaMenu :model="megamenuItems" />
<h5 style="margin-top: 1.55em">MegaMenu - Vertical</h5>
<MegaMenu :model="megamenuItems" orientation="vertical" />
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>PanelMenu</h5>
<PanelMenu :model="panelMenuitems" />
</div>
</div>
</div>
</template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
@@ -527,3 +438,92 @@ const onContextRightClick = (event) => {
contextMenu.value.show(event); contextMenu.value.show(event);
}; };
</script> </script>
<template>
<div class="grid p-fluid">
<div class="col-12">
<div class="card card-w-title">
<h5>Menubar</h5>
<Menubar :model="nestedMenuitems">
<template #end>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText type="text" placeholder="Search" />
</span>
</template>
</Menubar>
</div>
</div>
<div class="col-12">
<div class="card card-w-title">
<h5>Breadcrumb</h5>
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
</div>
</div>
<div class="col-12 md:col-6">
<div class="card card-w-title">
<h5>Steps</h5>
<p>Steps and TabMenu are integrated with the same child routes.</p>
<Steps :model="nestedRouteItems" :readonly="false" />
<router-view />
</div>
</div>
<div class="col-12 md:col-6">
<div class="card card-w-title">
<h5>TabMenu</h5>
<p>Steps and TabMenu are integrated with the same child routes.</p>
<TabMenu :model="nestedRouteItems" />
<router-view />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Tiered Menu</h5>
<TieredMenu :model="tieredMenuItems" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Plain Menu</h5>
<Menu :model="menuitems" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Overlay Menu</h5>
<Menu ref="menu" :model="overlayMenuItems" :popup="true" />
<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
</div>
<div class="card" @contextmenu="onContextRightClick">
<h5>ContextMenu</h5>
Right click to display.
<ContextMenu ref="contextMenu" :model="contextMenuItems" />
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>MegaMenu - Horizontal</h5>
<MegaMenu :model="megamenuItems" />
<h5 style="margin-top: 1.55em">MegaMenu - Vertical</h5>
<MegaMenu :model="megamenuItems" orientation="vertical" />
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>PanelMenu</h5>
<PanelMenu :model="panelMenuitems" />
</div>
</div>
</div>
</template>

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

@@ -1,3 +1,42 @@
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
const toast = useToast();
const message = ref([]);
const username = ref(null);
const email = ref(null);
const count = ref(0);
const addMessage = (type) => {
if (type === 'success') {
message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
} else if (type === 'info') {
message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
} else if (type === 'warn') {
message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
} else if (type === 'error') {
message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
}
};
const showSuccess = () => {
toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
};
const showInfo = () => {
toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
};
const showWarn = () => {
toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
};
const showError = () => {
toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
};
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
@@ -59,42 +98,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
const toast = useToast();
const message = ref([]);
const username = ref(null);
const email = ref(null);
const count = ref(0);
const addMessage = (type) => {
if (type === 'success') {
message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
} else if (type === 'info') {
message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
} else if (type === 'warn') {
message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
} else if (type === 'error') {
message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
}
};
const showSuccess = () => {
toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
};
const showInfo = () => {
toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
};
const showWarn = () => {
toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
};
const showError = () => {
toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
};
</script>

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

@@ -1,3 +1,32 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
const value = ref(0);
let interval = null;
const startProgress = () => {
interval = setInterval(() => {
let newValue = value.value + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
}
value.value = newValue;
}, 2000);
};
const endProgress = () => {
clearInterval(interval);
interval = null;
};
onMounted(() => {
startProgress();
});
onBeforeUnmount(() => {
endProgress();
});
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@@ -149,32 +178,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
const value = ref(0);
let interval = null;
const startProgress = () => {
interval = setInterval(() => {
let newValue = value.value + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
}
value.value = newValue;
}, 2000);
};
const endProgress = () => {
clearInterval(interval);
interval = null;
};
onMounted(() => {
startProgress();
});
onBeforeUnmount(() => {
endProgress();
});
</script>

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

@@ -1,3 +1,78 @@
<script setup>
import ProductService from '@/layout/service/ProductService';
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
const display = ref(false);
const displayConfirmation = ref(false);
const visibleLeft = ref(false);
const visibleRight = ref(false);
const visibleTop = ref(false);
const visibleBottom = ref(false);
const visibleFull = ref(false);
const products = ref(null);
const selectedProduct = ref(null);
const op = ref(null);
const op2 = ref(null);
const popup = ref(null);
const productService = new ProductService();
const toast = useToast();
const confirmPopup = useConfirm();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
});
const open = () => {
display.value = true;
};
const close = () => {
display.value = false;
};
const openConfirmation = () => {
displayConfirmation.value = true;
};
const closeConfirmation = () => {
displayConfirmation.value = false;
};
const toggle = (event) => {
op.value.toggle(event);
};
const toggleDataTable = (event) => {
op2.value.toggle(event);
};
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const onProductSelect = (event) => {
op.value.hide();
toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
};
const confirm = (event) => {
confirmPopup.require({
target: event.target,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
};
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
@@ -110,78 +185,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import ProductService from '@/layout/service/ProductService';
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
const display = ref(false);
const displayConfirmation = ref(false);
const visibleLeft = ref(false);
const visibleRight = ref(false);
const visibleTop = ref(false);
const visibleBottom = ref(false);
const visibleFull = ref(false);
const products = ref(null);
const selectedProduct = ref(null);
const op = ref(null);
const op2 = ref(null);
const popup = ref(null);
const productService = new ProductService();
const toast = useToast();
const confirmPopup = useConfirm();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
});
const open = () => {
display.value = true;
};
const close = () => {
display.value = false;
};
const openConfirmation = () => {
displayConfirmation.value = true;
};
const closeConfirmation = () => {
displayConfirmation.value = false;
};
const toggle = (event) => {
op.value.toggle(event);
};
const toggleDataTable = (event) => {
op2.value.toggle(event);
};
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const onProductSelect = (event) => {
op.value.hide();
toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
};
const confirm = (event) => {
confirmPopup.require({
target: event.target,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
};
</script>

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

@@ -1,3 +1,36 @@
<script setup>
import { ref } from 'vue';
const toolbarItems = ref([
{
label: 'Save',
icon: 'pi pi-check'
},
{
label: 'Update',
icon: 'pi pi-upload'
},
{
label: 'Delete',
icon: 'pi pi-trash'
},
{
label: 'Home Page',
icon: 'pi pi-home'
}
]);
const cardMenu = ref([
{ label: 'Save', icon: 'pi pi-fw pi-check' },
{ label: 'Update', icon: 'pi pi-fw pi-refresh' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
]);
const menuRef = ref(null);
const toggle = () => {
menuRef.value.toggle(event);
};
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@@ -182,36 +215,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
const toolbarItems = ref([
{
label: 'Save',
icon: 'pi pi-check'
},
{
label: 'Update',
icon: 'pi pi-upload'
},
{
label: 'Delete',
icon: 'pi pi-trash'
},
{
label: 'Home Page',
icon: 'pi pi-home'
}
]);
const cardMenu = ref([
{ label: 'Save', icon: 'pi pi-fw pi-check' },
{ label: 'Update', icon: 'pi pi-fw pi-refresh' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
]);
const menuRef = ref(null);
const toggle = () => {
menuRef.value.toggle(event);
};
</script>

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

@@ -1,3 +1,106 @@
<script setup>
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '@/layout/service/CustomerService';
import ProductService from '@/layout/service/ProductService';
import { ref, onMounted } from 'vue';
const customer1 = ref(null);
const customer2 = ref(null);
const customer3 = ref(null);
const filters1 = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
representative: { value: null, matchMode: FilterMatchMode.IN },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
});
const loading1 = ref(null);
const loading2 = ref(null);
const idFrozen = ref(false);
const products = ref(null);
const expandedRows = ref([]);
const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
const representatives = ref([
{ name: 'Amy Elsner', image: 'amyelsner.png' },
{ name: 'Anna Fali', image: 'annafali.png' },
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
]);
const customerService = new CustomerService();
const productService = new ProductService();
onMounted(() => {
productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
customerService.getCustomersLarge().then((data) => {
customer1.value = data;
loading1.value = false;
customer1.value.forEach((customer) => (customer.date = new Date(customer.date)));
});
customerService.getCustomersLarge().then((data) => (customer2.value = data));
customerService.getCustomersMedium().then((data) => (customer3.value = data));
loading2.value = false;
});
const initFilters1 = () => {
filters1.value = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
representative: { value: null, matchMode: FilterMatchMode.IN },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
};
console.log(filters1);
};
const clearFilter1 = () => {
initFilters1();
};
const expandAll = () => {
expandedRows.value = products.value.filter((p) => p.id);
};
const collapseAll = () => {
expandedRows.value = null;
};
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const formatDate = (value) => {
return value.toLocaleDateString('en-US', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
const calculateCustomerTotal = (name) => {
let total = 0;
if (customer3.value) {
for (let customer of customer3.value) {
if (customer.representative.name === name) {
total++;
}
}
}
return total;
};
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@@ -275,109 +378,6 @@
</div> </div>
</template> </template>
<script setup>
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '@/layout/service/CustomerService';
import ProductService from '@/layout/service/ProductService';
import { ref, onMounted } from 'vue';
const customer1 = ref(null);
const customer2 = ref(null);
const customer3 = ref(null);
const filters1 = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
representative: { value: null, matchMode: FilterMatchMode.IN },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
});
const loading1 = ref(null);
const loading2 = ref(null);
const idFrozen = ref(false);
const products = ref(null);
const expandedRows = ref([]);
const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
const representatives = ref([
{ name: 'Amy Elsner', image: 'amyelsner.png' },
{ name: 'Anna Fali', image: 'annafali.png' },
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
]);
const customerService = new CustomerService();
const productService = new ProductService();
onMounted(() => {
productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
customerService.getCustomersLarge().then((data) => {
customer1.value = data;
loading1.value = false;
customer1.value.forEach((customer) => (customer.date = new Date(customer.date)));
});
customerService.getCustomersLarge().then((data) => (customer2.value = data));
customerService.getCustomersMedium().then((data) => (customer3.value = data));
loading2.value = false;
});
const initFilters1 = () => {
filters1.value = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
representative: { value: null, matchMode: FilterMatchMode.IN },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
};
console.log(filters1);
};
const clearFilter1 = () => {
initFilters1();
};
const expandAll = () => {
expandedRows.value = products.value.filter((p) => p.id);
};
const collapseAll = () => {
expandedRows.value = null;
};
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const formatDate = (value) => {
return value.toLocaleDateString('en-US', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
const calculateCustomerTotal = (name) => {
let total = 0;
if (customer3.value) {
for (let customer of customer3.value) {
if (customer.representative.name === name) {
total++;
}
}
}
return total;
};
</script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/assets/demo/styles/badges.scss'; @import '@/assets/demo/styles/badges.scss';

32
src/views/uikit/Tree.vue
View File

@@ -1,3 +1,19 @@
<script setup>
import NodeService from '@/layout/service/NodeService';
import { onMounted, ref } from 'vue';
const treeValue = ref(null);
const selectedTreeValue = ref(null);
const treeTableValue = ref(null);
const selectedTreeTableValue = ref(null);
const nodeService = new NodeService();
onMounted(() => {
nodeService.getTreeNodes().then((data) => (treeValue.value = data));
nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
});
</script>
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@@ -19,19 +35,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup>
import NodeService from '@/layout/service/NodeService';
import { onMounted, ref } from 'vue';
const treeValue = ref(null);
const selectedTreeValue = ref(null);
const treeTableValue = ref(null);
const selectedTreeTableValue = ref(null);
const nodeService = new NodeService();
onMounted(() => {
nodeService.getTreeNodes().then((data) => (treeValue.value = data));
nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
});
</script>

6
src/views/uikit/menu/ConfirmationDemo.vue
View File

@@ -4,9 +4,3 @@
<p class="m-0 text-lg">Confirmation Component Content via Child Route</p> <p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
</div> </div>
</template> </template>
<script>
export default {
}
</script>

6
src/views/uikit/menu/PaymentDemo.vue
View File

@@ -4,9 +4,3 @@
<p class="m-0 text-lg">Payment Component Content via Child Route</p> <p class="m-0 text-lg">Payment Component Content via Child Route</p>
</div> </div>
</template> </template>
<script>
export default {
}
</script>

6
src/views/uikit/menu/PersonalDemo.vue
View File

@@ -4,9 +4,3 @@
<p class="m-0 text-lg">Personal Component Content via Child Route</p> <p class="m-0 text-lg">Personal Component Content via Child Route</p>
</div> </div>
</template> </template>
<script>
export default {
}
</script>

6
src/views/uikit/menu/SeatDemo.vue
View File

@@ -4,9 +4,3 @@
<p class="m-0 text-lg">Seat Component Content via Child Route</p> <p class="m-0 text-lg">Seat Component Content via Child Route</p>
</div> </div>
</template> </template>
<script>
export default {
}
</script>

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

@@ -1,3 +1,397 @@
<script setup>
import { ref } from 'vue';
const block1 = ref(`
<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<Button label="Learn More" type="button" class="mr-3 p-button-raised"></Button>
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
</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%)">
</div>
</div>`);
const block2 = ref(`
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
<div class="mb-3 font-bold text-2xl">
<span class="text-900">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid">
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Built for Developers</div>
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Easy to Use</div>
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Open Source</div>
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>`);
const block3 = ref(`
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid">
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Basic</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$9</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
<Button label="Buy Now" class="p-3 w-full mt-auto"></Button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Premium</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$29</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<Button label="Buy Now" class="p-3 w-full"></Button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$49</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<Button label="Buy Now" class="p-3 w-full p-button-outlined"></Button>
</div>
</div>
</div>
</div>
</div>`);
const block4 = ref(`
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></Button>
</div>
</div>`);
const block5 = ref(`
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
<div class="font-bold mr-8">🔥 Hot Deals!</div>
<div class="align-items-center hidden lg:flex">
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex align-items-center ml-2 mr-8">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a v-ripple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>`);
const block6 = ref(`
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-500 line-height-3"></i>
</li>
<li>
<span class="text-900 line-height-3">Analytics</span>
</li>
</ul>
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-900">Customers</div>
<div class="flex align-items-center text-700 flex-wrap">
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex align-items-center mt-3">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-3 lg:mt-0">
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
<Button label="Save" icon="pi pi-check"></Button>
</div>
</div>
</div>`);
const block7 = ref(`
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
<div class="grid">
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Orders</span>
<div class="text-900 font-medium text-xl">152</div>
</div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-500">since last visit</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Revenue</span>
<div class="text-900 font-medium text-xl">$2.100</div>
</div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Customers</span>
<div class="text-900 font-medium text-xl">28441</div>
</div>
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Comments</span>
<div class="text-900 font-medium text-xl">152 Unread</div>
</div>
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-500">responded</span>
</div>
</div>
</div>
</div>`);
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">
<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>
</div>
<div>
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
<InputText id="email1" type="text" class="w-full mb-3" />
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
<InputText id="password1" type="password" class="w-full mb-3" />
<div class="flex align-items-center justify-content-between mb-6">
<div class="flex align-items-center">
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
</div>
</div>`);
const block9 = ref(`
<div class="surface-section">
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
<Chip label="Crime" class="mr-2"></Chip>
<Chip label="Drama" class="mr-2"></Chip>
<Chip label="Thriller"></Chip>
</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
A group of professional bank robbers start to feel the heat from police
when they unknowingly leave a clue at their latest heist.</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
</ul>
</div>`);
const block10 = ref(`
<div class="surface-card p-4 shadow-2 border-round">
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
</div>`);
const checked = ref(false);
</script>
<template> <template>
<div> <div>
<BlockViewer header="Hero" :code="block1"> <BlockViewer header="Hero" :code="block1">
@@ -408,397 +802,3 @@
</BlockViewer> </BlockViewer>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
const block1 = ref(`
<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<Button label="Learn More" type="button" class="mr-3 p-button-raised"></Button>
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
</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%)">
</div>
</div>`);
const block2 = ref(`
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
<div class="mb-3 font-bold text-2xl">
<span class="text-900">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid">
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Built for Developers</div>
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Easy to Use</div>
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Open Source</div>
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>`);
const block3 = ref(`
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid">
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Basic</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$9</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
<Button label="Buy Now" class="p-3 w-full mt-auto"></Button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Premium</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$29</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<Button label="Buy Now" class="p-3 w-full"></Button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$49</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<Button label="Buy Now" class="p-3 w-full p-button-outlined"></Button>
</div>
</div>
</div>
</div>
</div>`);
const block4 = ref(`
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></Button>
</div>
</div>`);
const block5 = ref(`
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
<div class="font-bold mr-8">🔥 Hot Deals!</div>
<div class="align-items-center hidden lg:flex">
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex align-items-center ml-2 mr-8">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a v-ripple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>`);
const block6 = ref(`
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-500 line-height-3"></i>
</li>
<li>
<span class="text-900 line-height-3">Analytics</span>
</li>
</ul>
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-900">Customers</div>
<div class="flex align-items-center text-700 flex-wrap">
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex align-items-center mt-3">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-3 lg:mt-0">
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
<Button label="Save" icon="pi pi-check"></Button>
</div>
</div>
</div>`);
const block7 = ref(`
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
<div class="grid">
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Orders</span>
<div class="text-900 font-medium text-xl">152</div>
</div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-500">since last visit</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Revenue</span>
<div class="text-900 font-medium text-xl">$2.100</div>
</div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Customers</span>
<div class="text-900 font-medium text-xl">28441</div>
</div>
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Comments</span>
<div class="text-900 font-medium text-xl">152 Unread</div>
</div>
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-500">responded</span>
</div>
</div>
</div>
</div>`);
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">
<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>
</div>
<div>
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
<InputText id="email1" type="text" class="w-full mb-3" />
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
<InputText id="password1" type="password" class="w-full mb-3" />
<div class="flex align-items-center justify-content-between mb-6">
<div class="flex align-items-center">
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
</div>
</div>`);
const block9 = ref(`
<div class="surface-section">
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
<Chip label="Crime" class="mr-2"></Chip>
<Chip label="Drama" class="mr-2"></Chip>
<Chip label="Thriller"></Chip>
</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
A group of professional bank robbers start to feel the heat from police
when they unknowingly leave a clue at their latest heist.</div>
<div class="w-6 md:w-2 flex justify-content-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
</ul>
</div>`);
const block10 = ref(`
<div class="surface-card p-4 shadow-2 border-round">
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
</div>`);
const checked = ref(false);
</script>

60
src/views/utilities/Icons.vue
View File

@@ -1,3 +1,33 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
const icons = ref(null);
const filter = ref(null);
const filteredIcons = computed(() => {
if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
else return icons.value;
});
onMounted(() => {
fetch('data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let icons = d.icons;
let data = icons.filter((value) => {
return value.icon.tags.indexOf('deprecate') === -1;
});
data.sort((icon1, icon2) => {
if (icon1.properties.name < icon2.properties.name) return -1;
else if (icon1.properties.name > icon2.properties.name) return 1;
else return 0;
});
icons.value = data;
});
});
</script>
<template> <template>
<div> <div>
<div class="card"> <div class="card">
@@ -96,36 +126,6 @@ data() {
</div> </div>
</template> </template>
<script setup>
import { ref, onMounted, computed } from 'vue';
const icons = ref(null);
const filter = ref(null);
const filteredIcons = computed(() => {
if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
else return icons.value;
});
onMounted(() => {
fetch('data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let icons = d.icons;
let data = icons.filter((value) => {
return value.icon.tags.indexOf('deprecate') === -1;
});
data.sort((icon1, icon2) => {
if (icon1.properties.name < icon2.properties.name) return -1;
else if (icon1.properties.name > icon2.properties.name) return 1;
else return 0;
});
icons.value = data;
});
});
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/demo/styles/documentation.scss'; @import '@/assets/demo/styles/documentation.scss';