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

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>
<div class="grid">
<div class="col-12 md:col-6">
@@ -142,32 +171,3 @@
</div>
</div>
</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>
import { ref, watch } from 'vue';
import { useLayoutService } from '@/layout/composables/layoutService';
@@ -347,3 +310,40 @@ watch(
{ immediate: true }
);
</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>
<div class="grid">
<div class="col-12">
@@ -11,13 +21,3 @@
</div>
</div>
</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>
<div class="card">
<h5>Float Label</h5>
@@ -70,46 +113,3 @@
</div>
</div>
</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>
<div class="grid">
<div class="col-12 md:col-6">
@@ -107,15 +119,3 @@
</div>
</div>
</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>
<div>
<div class="card">
@@ -96,40 +130,6 @@ export default {
</div>
</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>
@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>
<div class="grid p-fluid">
<div class="col-12 md:col-6">
@@ -218,80 +295,3 @@
</div>
</div>
</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>
<div class="grid p-fluid">
<div class="col">
@@ -54,47 +98,3 @@
</div>
</div>
</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>
<div class="grid">
<div class="col-12">
@@ -90,65 +149,6 @@
</div>
</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">
@import '@/assets/demo/styles/badges.scss';
</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>
<div class="grid p-fluid">
<div class="col-12">
@@ -54,58 +106,6 @@
</div>
</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>
@import '@/assets/demo/styles/badges.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>
import { ref } from 'vue';
@@ -527,3 +438,92 @@ const onContextRightClick = (event) => {
contextMenu.value.show(event);
};
</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>
<div class="grid">
<div class="col-12 lg:col-6">
@@ -59,42 +98,3 @@
</div>
</div>
</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>
<div class="grid">
<div class="col-12">
@@ -149,32 +178,3 @@
</div>
</div>
</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>
<div class="grid">
<div class="col-12 lg:col-6">
@@ -110,78 +185,3 @@
</div>
</div>
</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>
<div class="grid">
<div class="col-12">
@@ -182,36 +215,3 @@
</div>
</div>
</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>
<div class="grid">
<div class="col-12">
@@ -275,109 +378,6 @@
</div>
</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">
@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>
<div class="grid">
<div class="col-12">
@@ -19,19 +35,3 @@
</div>
</div>
</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>
</div>
</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>
</div>
</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>
</div>
</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>
</div>
</template>
<script>
export default {
}
</script>