add primevue package
This commit is contained in:
Amir
Generated
+38
@@ -17,6 +17,9 @@
|
||||
"bootstrap-icons": "^1.8.1",
|
||||
"core-js": "^3.8.3",
|
||||
"postcss": "^8",
|
||||
"primeflex": "^3.2.1",
|
||||
"primeicons": "^6.0.1",
|
||||
"primevue": "^3.17.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.14",
|
||||
"vue-sweetalert2": "^5.0.5",
|
||||
@@ -8083,6 +8086,25 @@
|
||||
"renderkid": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/primeflex": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.2.1.tgz",
|
||||
"integrity": "sha512-sGDJ4mh2fG19xa1yc4IPGSQ8MUMyu5nU+tYnl27AFuFHhX8XwEA7fWCtWyBbclclVhXtre+Kf9WobWPnfxWAEQ=="
|
||||
},
|
||||
"node_modules/primeicons": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
|
||||
"integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
|
||||
},
|
||||
"node_modules/primevue": {
|
||||
"version": "3.17.0",
|
||||
"resolved": "https://registry.npmjs.org/primevue/-/primevue-3.17.0.tgz",
|
||||
"integrity": "sha512-z7ZCHk4kgkHJ29hg0izN1M8Xst2MOObimq62waE2TDE8ztH9mp2sAdGGsQu1shMa4/23dZ+fcN4t+KpYNICRyQ==",
|
||||
"peerDependencies": {
|
||||
"primeicons": "^5.0.0",
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
@@ -16216,6 +16238,22 @@
|
||||
"renderkid": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"primeflex": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.2.1.tgz",
|
||||
"integrity": "sha512-sGDJ4mh2fG19xa1yc4IPGSQ8MUMyu5nU+tYnl27AFuFHhX8XwEA7fWCtWyBbclclVhXtre+Kf9WobWPnfxWAEQ=="
|
||||
},
|
||||
"primeicons": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
|
||||
"integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
|
||||
},
|
||||
"primevue": {
|
||||
"version": "3.17.0",
|
||||
"resolved": "https://registry.npmjs.org/primevue/-/primevue-3.17.0.tgz",
|
||||
"integrity": "sha512-z7ZCHk4kgkHJ29hg0izN1M8Xst2MOObimq62waE2TDE8ztH9mp2sAdGGsQu1shMa4/23dZ+fcN4t+KpYNICRyQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
"bootstrap-icons": "^1.8.1",
|
||||
"core-js": "^3.8.3",
|
||||
"postcss": "^8",
|
||||
"primeflex": "^3.2.1",
|
||||
"primeicons": "^6.0.1",
|
||||
"primevue": "^3.17.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.14",
|
||||
"vue-sweetalert2": "^5.0.5",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -17,7 +17,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
#app {
|
||||
font-family: Inter, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
+254
-3
@@ -1,11 +1,262 @@
|
||||
<template>
|
||||
<div id="style">
|
||||
<!-- <div id="style">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div> -->
|
||||
<the-template>
|
||||
<div
|
||||
class="
|
||||
bg-yellow-300
|
||||
text-dark-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-blue" href="#"
|
||||
><span class="underline font-bold">Learn More</span></a
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="surface-section 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>
|
||||
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
justify-content-center
|
||||
flex-wrap
|
||||
card-container
|
||||
yellow-container
|
||||
"
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
icon="pi pi-search"
|
||||
:loading="loading[2]"
|
||||
@click="load(2)"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
label="Search"
|
||||
:loading="loading[3]"
|
||||
@click="load(3)"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
</the-template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: [false, false, false],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
load(index) {
|
||||
this.loading[index] = true;
|
||||
setTimeout(() => (this.loading[index] = false), 5000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -142,7 +142,7 @@ router-link:hover {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #1d3461;
|
||||
background-color: #1e417b;
|
||||
|
||||
height: 3.2rem;
|
||||
padding: 0 6.4rem;
|
||||
|
||||
+15
-4
@@ -1,6 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
// import Master from './Master.vue'
|
||||
import Master from './Master.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
// import useVuelidate from '@vuelidate/core'
|
||||
@@ -10,19 +10,30 @@ import "bootstrap/dist/js/bootstrap.js"
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||
import VueSweetalert2 from 'vue-sweetalert2';
|
||||
import 'sweetalert2/dist/sweetalert2.min.css';
|
||||
import PrimeVue from 'primevue/config';
|
||||
|
||||
import '../public/themes/lara-light-blue/theme.css'
|
||||
import 'primevue/resources/primevue.min.css'
|
||||
import 'primeicons/primeicons.css'
|
||||
import 'primeflex/primeflex.css'
|
||||
|
||||
import Button from 'primevue/button';
|
||||
|
||||
|
||||
import TheTemplate from './components/layouts/TheTemplate.vue'
|
||||
import BaseCard from './components/base/BaseCard.vue'
|
||||
import TermsAndConditions from './components/authentication/TermsAndConditions.vue'
|
||||
|
||||
const app = createApp(App);
|
||||
// const app = createApp(Master);
|
||||
// const app = createApp(App);
|
||||
const app = createApp(Master);
|
||||
|
||||
app.component('the-template', TheTemplate);
|
||||
app.component('base-card', BaseCard);
|
||||
app.component('terms-and-conditions', TermsAndConditions);
|
||||
|
||||
app.use(router).use(store).use(VueSweetalert2).mount('#app');
|
||||
app.component('Button', Button);
|
||||
|
||||
app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).mount('#app');
|
||||
|
||||
// createApp(App).use(router).use(store).mount('#app')
|
||||
// createApp(Master).use(router).use(store).mount('#app')
|
||||
|
||||
Reference in New Issue
Block a user