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

All demos added

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-04 02:27:06 +03:00
parent 1ee46af467
commit 3e45c1cf61
11 changed files with 1323 additions and 973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/AppMenuItem.vue
View File

@@ -27,11 +27,11 @@ defineProps({
<span class="layout-menuitem-text">{{ item.label }}</span> <span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i> <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
</a> </a>
<a v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event)" :class="item.class" tabindex="0" :to="item.to"> <router-link v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event)" :class="[item.class, { 'active-route': active }]" tabindex="0" :to="item.to">
<i :class="item.icon" class="layout-menuitem-icon"></i> <i :class="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{ item.label }}</span> <span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i> <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
</a> </router-link>
<Transition class="layout-submenu"> <Transition class="layout-submenu">
<ul v-if="item.items && item.visible !== false"> <ul v-if="item.items && item.visible !== false">
<app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item> <app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item>

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

@@ -1,11 +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(d => d.root); .then(res => res.json())
.then(d => d.root);
} }
getTreeNodes() { getTreeNodes () {
return fetch('data/treenodes.json').then(res => res.json()).then(d => d.root); return fetch('/data/treenodes.json')
.then(res => res.json())
.then(d => d.root);
} }
} }

8
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);
} }
} }

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

@@ -1,15 +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(d => d.data); .then(res => res.json())
} .then(d => d.data);
getProducts() {
return fetch('data/products.json').then(res => res.json()).then(d => d.data);
} }
getProductsWithOrdersSmall() { getProducts () {
return fetch('data/products-orders-small.json').then(res => res.json()).then(d => d.data); return fetch('/data/products.json')
} .then(res => res.json())
.then(d => d.data);
}
getProductsWithOrdersSmall () {
return fetch('/data/products-orders-small.json')
.then(res => res.json())
.then(d => d.data);
}
} }

48
src/router/index.js
View File

@@ -9,65 +9,85 @@ const router = createRouter({
component: AppLayout, component: AppLayout,
children: [ children: [
{ {
path: '', path: '/',
name: 'dashboard', name: 'dashboard',
component: () => import('@/views/Dashboard.vue') component: () => import('@/views/Dashboard.vue')
}, },
{ {
path: '/formlayout', path: '/uikit/formlayout',
name: 'formlayout', name: 'formlayout',
component: () => import('@/views/demo/FormLayout.vue') component: () => import('@/views/demo/FormLayout.vue')
}, },
{ {
path: '/input', path: '/uikit/input',
name: 'input', name: 'input',
component: () => import('@/views/demo/Input.vue') component: () => import('@/views/demo/Input.vue')
}, },
{ {
path: '/floatlabel', path: '/uikit/floatlabel',
name: 'floatlabel', name: 'floatlabel',
component: () => import('@/views/demo/FloatLabel.vue') component: () => import('@/views/demo/FloatLabel.vue')
}, },
{ {
path: '/invalidstate', path: '/uikit/invalidstate',
name: 'invalidstate', name: 'invalidstate',
component: () => import('@/views/demo/InvalidState.vue') component: () => import('@/views/demo/InvalidState.vue')
}, },
{ {
path: '/button', path: '/uikit/button',
name: 'button', name: 'button',
component: () => import('@/views/demo/Button.vue') component: () => import('@/views/demo/Button.vue')
}, },
{ {
path: '/table', path: '/uikit/table',
name: 'table', name: 'table',
component: () => import('@/views/demo/Table.vue') component: () => import('@/views/demo/Table.vue')
}, },
{ {
path: '/list', path: '/uikit/list',
name: 'list', name: 'list',
component: () => import('@/views/demo/List.vue') component: () => import('@/views/demo/List.vue')
}, },
{ {
path: '/tree', path: '/uikit/tree',
name: 'tree', name: 'tree',
component: () => import('@/views/demo/Tree.vue') component: () => import('@/views/demo/Tree.vue')
}, },
{ {
path: '/panel', path: '/uikit/panel',
name: 'panel', name: 'panel',
component: () => import('@/views/demo/Panels.vue') component: () => import('@/views/demo/Panels.vue')
}, },
{ {
path: '/overlay', path: '/uikit/overlay',
name: 'overlay', name: 'overlay',
component: () => import('@/views/demo/Overlay.vue') component: () => import('@/views/demo/Overlay.vue')
}, },
{ {
path: '/media', path: '/uikit/media',
name: 'media', name: 'media',
component: () => import('@/views/demo/Media.vue') component: () => import('@/views/demo/Media.vue')
},
{
path: '/uikit/menu',
name: 'menu',
component: () => import('@/views/demo/Menu.vue')
},
{
path: '/uikit/message',
name: 'message',
component: () => import('@/views/demo/Messages.vue')
},
{
path: '/uikit/file',
name: 'file',
component: () => import('@/views/demo/File.vue')
},
{
path: '/uikit/misc',
name: 'misc',
component: () => import('@/views/demo/Misc.vue')
} }
/* /*
@@ -75,12 +95,12 @@ const router = createRouter({
{ {
path: '/overlay', path: '/uikit/overlay',
name: 'overlay', name: 'overlay',
component: () => import('./components/OverlayDemo.vue') component: () => import('./components/OverlayDemo.vue')
}, },
{ {
path: '/media', path: '/uikit/media',
name: 'media', name: 'media',
component: () => import('./components/MediaDemo.vue') component: () => import('./components/MediaDemo.vue')
} */ } */

357
src/views/demo/Chart.vue Normal file
View File

@@ -0,0 +1,357 @@
<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>
import EventBus from '@/AppEventBus';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
if (event.dark) this.applyDarkTheme();
else this.applyLightTheme();
};
EventBus.on('change-theme', this.themeChangeListener);
if (this.isDarkTheme()) {
this.applyDarkTheme();
} else {
this.applyLightTheme();
}
},
beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener);
},
data() {
return {
lineData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
tension: 0.4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
tension: 0.4
}
]
},
pieData: {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}
]
},
polarData: {
datasets: [
{
data: [11, 16, 7, 3, 14],
backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
label: 'My dataset'
}
],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
},
barData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: '#2f4860',
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: '#00bb7e',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
},
radarData: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
},
lineOptions: null,
pieOptions: null,
polarOptions: null,
barOptions: null,
radarOptions: null
};
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;
},
applyLightTheme() {
this.lineOptions = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
this.barOptions = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
this.pieOptions = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
}
};
this.polarOptions = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
r: {
grid: {
color: '#ebedef'
}
}
}
};
this.radarOptions = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
r: {
grid: {
color: '#ebedef'
}
}
}
};
},
applyDarkTheme() {
this.lineOptions = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
},
scales: {
x: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)'
}
},
y: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)'
}
}
}
};
this.barOptions = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
},
scales: {
x: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)'
}
},
y: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)'
}
}
}
};
this.pieOptions = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
}
};
this.polarOptions = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
},
scales: {
r: {
grid: {
color: 'rgba(160, 167, 181, .3)'
}
}
}
};
this.radarOptions = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
},
scales: {
r: {
grid: {
color: 'rgba(160, 167, 181, .3)'
}
}
}
};
}
}
};
</script>

36
src/views/demo/File.vue
View File

@@ -1,23 +1,23 @@
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000"/> <FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
<h5>Basic</h5> <h5>Basic</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" /> <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script setup>
export default { import { useToast } from 'primevue/usetoast';
methods: {
onUpload() { const toast = useToast();
this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
} const onUpload = () => {
} toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
} };
</script> </script>

227
src/views/demo/FormLayout.vue
View File

@@ -1,124 +1,121 @@
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="field"> <div class="field">
<label for="name1">Name</label> <label for="name1">Name</label>
<InputText id="name1" type="text" /> <InputText id="name1" type="text" />
</div> </div>
<div class="field"> <div class="field">
<label for="email1">Email</label> <label for="email1">Email</label>
<InputText id="email1" type="text" /> <InputText id="email1" type="text" />
</div> </div>
<div class="field"> <div class="field">
<label for="age1">Age</label> <label for="age1">Age</label>
<InputText id="age1" type="text" /> <InputText id="age1" type="text" />
</div> </div>
</div> </div>
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Vertical Grid</h5> <h5>Vertical Grid</h5>
<div class="formgrid grid"> <div class="formgrid grid">
<div class="field col"> <div class="field col">
<label for="name2">Name</label> <label for="name2">Name</label>
<InputText id="name2" type="text" /> <InputText id="name2" type="text" />
</div> </div>
<div class="field col"> <div class="field col">
<label for="email2">Email</label> <label for="email2">Email</label>
<InputText id="email2" type="text" /> <InputText id="email2" type="text" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Horizontal</h5> <h5>Horizontal</h5>
<div class="field grid"> <div class="field grid">
<label for="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label> <label for="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
<div class="col-12 md:col-10"> <div class="col-12 md:col-10">
<InputText id="name3" type="text" /> <InputText id="name3" type="text" />
</div> </div>
</div> </div>
<div class="field grid"> <div class="field grid">
<label for="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label> <label for="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
<div class="col-12 md:col-10"> <div class="col-12 md:col-10">
<InputText id="email3" type="text" /> <InputText id="email3" type="text" />
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<div class="formgroup-inline"> <div class="formgroup-inline">
<div class="field"> <div class="field">
<label for="firstname1" class="p-sr-only">Firstname</label> <label for="firstname1" class="p-sr-only">Firstname</label>
<InputText id="firstname1" type="text" placeholder="Firstname"/> <InputText id="firstname1" type="text" placeholder="Firstname" />
</div> </div>
<div class="field"> <div class="field">
<label for="lastname1" class="p-sr-only">Lastname</label> <label for="lastname1" class="p-sr-only">Lastname</label>
<InputText id="lastname1" type="text" placeholder="Lastname"/> <InputText id="lastname1" type="text" placeholder="Lastname" />
</div> </div>
<Button label="Submit"></Button> <Button label="Submit"></Button>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="field p-fluid"> <div class="field p-fluid">
<label for="username">Username</label> <label for="username">Username</label>
<InputText id="username" type="text" /> <InputText id="username" type="text" />
<small>Enter your username to reset your password.</small> <small>Enter your username to reset your password.</small>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<div class="p-fluid formgrid grid"> <div class="p-fluid formgrid grid">
<div class="field col-12 md:col-6"> <div class="field col-12 md:col-6">
<label for="firstname2">Firstname</label> <label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text"/> <InputText id="firstname2" type="text" />
</div> </div>
<div class="field col-12 md:col-6"> <div class="field col-12 md:col-6">
<label for="lastname2">Lastname</label> <label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text"/> <InputText id="lastname2" type="text" />
</div> </div>
<div class="field col-12"> <div class="field col-12">
<label for="address">Address</label> <label for="address">Address</label>
<Textarea id="address" rows="4"/> <Textarea id="address" rows="4" />
</div> </div>
<div class="field col-12 md:col-6"> <div class="field col-12 md:col-6">
<label for="city">City</label> <label for="city">City</label>
<InputText id="city" type="text" /> <InputText id="city" type="text" />
</div> </div>
<div class="field col-12 md:col-3"> <div class="field col-12 md:col-3">
<label for="state">State</label> <label for="state">State</label>
<Dropdown id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One"></Dropdown> <Dropdown id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One"></Dropdown>
</div> </div>
<div class="field col-12 md:col-3"> <div class="field col-12 md:col-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<InputText id="zip" type="text"/> <InputText id="zip" type="text" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script setup>
export default { import { ref } from 'vue';
data() {
return { const dropdownItems = ref([
dropdownItems: [ { name: 'Option 1', code: 'Option 1' },
{name: 'Option 1', code: 'Option 1'}, { name: 'Option 2', code: 'Option 2' },
{name: 'Option 2', code: 'Option 2'}, { name: 'Option 3', code: 'Option 3' }
{name: 'Option 3', code: 'Option 3'} ]);
],
dropdownItem: null const dropdownItem = ref(null);
}
}
}
</script> </script>

1037
src/views/demo/Menu.vue
View File

File diff suppressed because it is too large Load Diff

180
src/views/demo/Messages.vue
View File

@@ -1,101 +1,99 @@
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
<div class="card"> <div class="card">
<h5>Toast</h5> <h5>Toast</h5>
<Toast /> <Toast />
<Button @click="showSuccess()" label="Success" class="p-button-success mr-2" /> <Button @click="showSuccess()" label="Success" class="p-button-success mr-2" />
<Button @click="showInfo()" label="Info" class="p-button-info mr-2" /> <Button @click="showInfo()" label="Info" class="p-button-info mr-2" />
<Button @click="showWarn()" label="Warn" class="p-button-warning mr-2" /> <Button @click="showWarn()" label="Warn" class="p-button-warning mr-2" />
<Button @click="showError()" label="Error" class="p-button-danger mr-2" /> <Button @click="showError()" label="Error" class="p-button-danger mr-2" />
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
<div class="card"> <div class="card">
<h5>Messages</h5> <h5>Messages</h5>
<Button label="Success" @click="addMessage('success')" class="p-button-success mr-2"/> <Button label="Success" @click="addMessage('success')" class="p-button-success mr-2" />
<Button label="Info" @click="addMessage('info')" class="p-button-info mr-2"/> <Button label="Info" @click="addMessage('info')" class="p-button-info mr-2" />
<Button label="Warn" @click="addMessage('warn')" class="p-button-warning mr-2"/> <Button label="Warn" @click="addMessage('warn')" class="p-button-warning mr-2" />
<Button label="Error" @click="addMessage('error')" class="p-button-danger mr-2"/> <Button label="Error" @click="addMessage('error')" class="p-button-danger mr-2" />
<transition-group name="p-message" tag="div"> <transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message> <Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group> </transition-group>
</div> </div>
</div> </div>
<div class="col-12 lg:col-8"> <div class="col-12 lg:col-8">
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<div class="field grid"> <div class="field grid">
<label for="username1" class="col-fixed w-9rem">Username</label> <label for="username1" class="col-fixed w-9rem">Username</label>
<div class="col"> <div class="col">
<InputText id="username1" v-model="username" :required="true" class="p-invalid mr-2"></InputText> <InputText id="username1" v-model="username" :required="true" class="p-invalid mr-2"></InputText>
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
</div> </div>
<div class="field grid"> <div class="field grid">
<label for="email" class="col-fixed w-9rem">Email</label> <label for="email" class="col-fixed w-9rem">Email</label>
<div class="col"> <div class="col">
<InputText id="email" v-model="email" :required="true" class="p-invalid mr-2"></InputText> <InputText id="email" v-model="email" :required="true" class="p-invalid mr-2"></InputText>
<InlineMessage/> <InlineMessage />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-4"> <div class="col-12 lg:col-4">
<div class="card"> <div class="card">
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="field p-fluid"> <div class="field p-fluid">
<label for="username2">Username</label> <label for="username2">Username</label>
<InputText id="username2" type="username" class="p-error" aria-describedby="username-help" /> <InputText id="username2" type="username" class="p-error" aria-describedby="username-help" />
<small id="username-help" class="p-error">Enter your username to reset your password.</small> <small id="username-help" class="p-error">Enter your username to reset your password.</small>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script setup>
export default { import { ref } from 'vue';
data() { import { useToast } from 'primevue/usetoast';
return {
message: [], const toast = useToast();
username:null, const message = ref([]);
email:null const username = ref(null);
} const email = ref(null);
},
methods: { const addMessage = (type) => {
addMessage(type) { if (type === 'success') {
if(type === 'success') { this.message = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: this.count++ }];
this.message = [{severity: 'success', detail: 'Success Message', content: 'Message sent', id: this.count++}] } else if (type === 'info') {
} this.message = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: this.count++ }];
else if(type === 'info') { } else if (type === 'warn') {
this.message = [{severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: this.count++}] this.message = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: this.count++ }];
} } else if (type === 'error') {
else if(type === 'warn') { this.message = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: this.count++ }];
this.message = [{severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: this.count++}] }
} };
else if(type === 'error') {
this.message = [{severity: 'error', detail: 'Error Message', content: 'Validation failed', id: this.count++}] const showSuccess = () => {
} toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
}, };
showSuccess() {
this.$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 });
showInfo() { };
this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Detail', life: 3000});
}, const showWarn = () => {
showWarn() { toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Detail', life: 3000}); };
},
showError() { const showError = () => {
this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Detail', life: 3000}); toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
}, };
}
}
</script> </script>

351
src/views/demo/Misc.vue
View File

@@ -1,191 +1,180 @@
<template> <template>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<h5>ProgressBar</h5> <h5>ProgressBar</h5>
<div class="grid"> <div class="grid">
<div class="col"> <div class="col">
<ProgressBar :value="value"></ProgressBar> <ProgressBar :value="value"></ProgressBar>
</div> </div>
<div class="col"> <div class="col">
<ProgressBar :value="50" :showValue="false"></ProgressBar> <ProgressBar :value="50" :showValue="false"></ProgressBar>
</div>
</div>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h4>Badge</h4>
<h5>Numbers</h5>
<div class="badges">
<Badge :value="2" class="mr-2"></Badge>
<Badge :value="8" severity="success" class="mr-2"></Badge>
<Badge :value="4" severity="info" class="mr-2"></Badge>
<Badge :value="12" severity="warning" class="mr-2"></Badge>
<Badge :value="3" severity="danger"></Badge>
</div>
<h5>Positioned Badge</h5>
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Inline Button Badge</h5>
<Button label="Emails" badge="8" class="mr-2"></Button>
<Button label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></Button>
<h5>Sizes</h5>
<div class="badges">
<Badge :value="2" class="mr-2"></Badge>
<Badge :value="4" size="large" severity="warning" class="mr-2"></Badge>
<Badge :value="6" size="xlarge" severity="success"></Badge>
</div>
</div>
<div class="card">
<h4>Avatar</h4>
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<Avatar image="images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
<Avatar label="+2" shape="circle" size="large" :style="{'background-color':'#9c27b0', 'color': '#ffffff'}"></Avatar>
</AvatarGroup>
<h5>Label - Circle</h5>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar>
<Avatar label="V" class="mr-2" size="large" :style="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></Avatar>
<Avatar label="U" class="mr-2" :style="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></Avatar>
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" v-badge.success="4"></Avatar>
</div>
<div class="card">
<h4>ScrollTop</h4>
<ScrollPanel :style="{width: '250px', height: '200px'}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
<ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up"></ScrollTop>
</ScrollPanel>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h4>Tag</h4>
<h5>Tags</h5>
<Tag class="mr-2" value="Primary"></Tag>
<Tag class="mr-2" severity="success" value="Success"></Tag>
<Tag class="mr-2" severity="info" value="Info"></Tag>
<Tag class="mr-2" severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<h5>Pills</h5>
<Tag class="mr-2" value="Primary" :rounded="true"></Tag>
<Tag class="mr-2" severity="success" value="Success" :rounded="true"></Tag>
<Tag class="mr-2" severity="info" value="Info" :rounded="true"></Tag>
<Tag class="mr-2" severity="warning" value="Warning" :rounded="true"></Tag>
<Tag severity="danger" value="Danger" :rounded="true"></Tag>
<h5>Icons</h5>
<Tag class="mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag class="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag class="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag class="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
</div>
<div class="card">
<h4>Chip</h4>
<h5>Basic</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Action" class="mr-2 mb-2"></Chip>
<Chip label="Comedy" class="mr-2 mb-2"></Chip>
<Chip label="Mystery" class="mr-2 mb-2"></Chip>
<Chip label="Thriller" :removable="true" class="mb-2"></Chip>
</div>
<h5>Icon</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip>
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip>
<Chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></Chip>
<Chip label="Microsoft" icon="pi pi-microsoft" :removable="true" class="mb-2"></Chip>
</div>
<h5>Image</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Amy Elsner" image="images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" image="images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" image="images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
</div>
</div>
<div class="card">
<h4>Skeleton</h4>
<div class="border-round border-1 surface-border p-4">
<div class="flex mb-3">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
</div> </div>
</div> </div>
<Skeleton width="100%" height="150px"></Skeleton> </div>
<div class="flex justify-content-between mt-3"> </div>
<Skeleton width="4rem" height="2rem"></Skeleton> <div class="col-12 lg:col-6">
<Skeleton width="4rem" height="2rem"></Skeleton> <div class="card">
<h4>Badge</h4>
<h5>Numbers</h5>
<div class="badges">
<Badge :value="2" class="mr-2"></Badge>
<Badge :value="8" severity="success" class="mr-2"></Badge>
<Badge :value="4" severity="info" class="mr-2"></Badge>
<Badge :value="12" severity="warning" class="mr-2"></Badge>
<Badge :value="3" severity="danger"></Badge>
</div>
<h5>Positioned Badge</h5>
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Inline Button Badge</h5>
<Button label="Emails" badge="8" class="mr-2"></Button>
<Button label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></Button>
<h5>Sizes</h5>
<div class="badges">
<Badge :value="2" class="mr-2"></Badge>
<Badge :value="4" size="large" severity="warning" class="mr-2"></Badge>
<Badge :value="6" size="xlarge" severity="success"></Badge>
</div>
</div>
<div class="card">
<h4>Avatar</h4>
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<Avatar image="images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
<Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
</AvatarGroup>
<h5>Label - Circle</h5>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar>
<Avatar label="V" class="mr-2" size="large" :style="{ 'background-color': '#2196F3', color: '#ffffff' }" shape="circle"></Avatar>
<Avatar label="U" class="mr-2" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }" shape="circle"></Avatar>
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" v-badge.success="4"></Avatar>
</div>
<div class="card">
<h4>ScrollTop</h4>
<ScrollPanel :style="{ width: '250px', height: '200px' }">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
</p>
<ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up"></ScrollTop>
</ScrollPanel>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h4>Tag</h4>
<h5>Tags</h5>
<Tag class="mr-2" value="Primary"></Tag>
<Tag class="mr-2" severity="success" value="Success"></Tag>
<Tag class="mr-2" severity="info" value="Info"></Tag>
<Tag class="mr-2" severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<h5>Pills</h5>
<Tag class="mr-2" value="Primary" :rounded="true"></Tag>
<Tag class="mr-2" severity="success" value="Success" :rounded="true"></Tag>
<Tag class="mr-2" severity="info" value="Info" :rounded="true"></Tag>
<Tag class="mr-2" severity="warning" value="Warning" :rounded="true"></Tag>
<Tag severity="danger" value="Danger" :rounded="true"></Tag>
<h5>Icons</h5>
<Tag class="mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag class="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag class="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag class="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
</div>
<div class="card">
<h4>Chip</h4>
<h5>Basic</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Action" class="mr-2 mb-2"></Chip>
<Chip label="Comedy" class="mr-2 mb-2"></Chip>
<Chip label="Mystery" class="mr-2 mb-2"></Chip>
<Chip label="Thriller" :removable="true" class="mb-2"></Chip>
</div>
<h5>Icon</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip>
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip>
<Chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></Chip>
<Chip label="Microsoft" icon="pi pi-microsoft" :removable="true" class="mb-2"></Chip>
</div>
<h5>Image</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Amy Elsner" image="images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" image="images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" image="images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
</div>
</div>
<div class="card">
<h4>Skeleton</h4>
<div class="border-round border-1 surface-border p-4">
<div class="flex mb-3">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="flex justify-content-between mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script setup>
export default { import { ref, onMounted, onBeforeUnmount } from 'vue';
data() {
return { const value = ref(0);
value: 0 let interval = null;
}
}, const startProgress = () => {
interval: null, interval = setInterval(() => {
methods: { let newValue = value.value + Math.floor(Math.random() * 10) + 1;
startProgress() { if (newValue >= 100) {
this.interval = setInterval(() => { newValue = 100;
let newValue = this.value + Math.floor(Math.random() * 10) + 1; }
if (newValue >= 100) { value.value = newValue;
newValue = 100; }, 2000);
} };
this.value = newValue; const endProgress = () => {
}, 2000); clearInterval(interval);
}, interval = null;
endProgress() { };
clearInterval(this.interval);
this.interval = null; onMounted(() => {
} startProgress();
}, });
mounted() {
this.startProgress(); onBeforeUnmount(() => {
}, endProgress();
beforeUnmount() { });
this.endProgress();
}
}
</script> </script>