fuck chatgpt, rat bastard has no idea
This commit is contained in:
parent
ba0b5cdf5c
commit
7a4ab82c12
34
console/.gitignore
vendored
Normal file
34
console/.gitignore
vendored
Normal file
@ -0,0 +1,34 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Dependencies
|
||||
node_modules
|
||||
.pnp
|
||||
.pnp.js
|
||||
|
||||
# Build
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
73
console/README.md
Normal file
73
console/README.md
Normal file
@ -0,0 +1,73 @@
|
||||
# PrimeVue Vite Example
|
||||
|
||||
<br />
|
||||
|
||||
<div align="start">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Overview
|
||||
|
||||
This example demonstrates a basic PrimeVue integration with Vite, showcasing a modern and responsive dashboard interface. The project features various PrimeVue components with standard CSS styling.
|
||||
|
||||
## Features
|
||||
|
||||
- PrimeVue components with CSS styling
|
||||
- Powered by Vite for fast development
|
||||
- Real-time search functionality
|
||||
- Customizable UI components
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- [Vue.js](https://vuejs.org/) - The Progressive JavaScript Framework
|
||||
- [PrimeVue](https://primevue.org/) - The Ultimate Vue UI Component Library
|
||||
- [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling
|
||||
|
||||
## Getting Started
|
||||
|
||||
1. Clone the repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/primefaces/primevue-examples.git
|
||||
cd primevue-examples/vite-quickstart
|
||||
```
|
||||
|
||||
2. Install dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Start the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. Build for production:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
vite-quickstart/
|
||||
├── src/
|
||||
│ ├── components/ # Vue components
|
||||
│ ├── assets/ # Static assets
|
||||
│ │ └── styles/ # CSS styles
|
||||
│ └── App.vue # Root component
|
||||
├── public/ # Public static assets
|
||||
├── index.html # Entry HTML file
|
||||
└── vite.config.js # Vite configuration
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/primefaces/primevue-examples/issues).
|
||||
13
console/index.html
Normal file
13
console/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1869
console/package-lock.json
generated
Normal file
1869
console/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
console/package.json
Normal file
24
console/package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "primevue-vite-quickstart",
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@primeuix/themes": "^1.0.0",
|
||||
"@primevue/core": "^4.2.5",
|
||||
"chart.js": "^4.4.7",
|
||||
"primeicons": "^7.0.0",
|
||||
"primevue": "^4.2.5",
|
||||
"vue": "^3.4.27"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@primevue/auto-import-resolver": "^4.3.1",
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"unplugin-vue-components": "^28.4.0",
|
||||
"vite": "^5.2.13"
|
||||
}
|
||||
}
|
||||
BIN
console/public/favicon.ico
Normal file
BIN
console/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
23
console/src/App.vue
Normal file
23
console/src/App.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
import AppTopbar from "./components/AppTopbar.vue";
|
||||
import AppFooter from "./components/AppFooter.vue";
|
||||
import StatsWidget from "./components/dashboard/StatsWidget.vue";
|
||||
import SalesTrendWidget from "./components/dashboard/SalesTrendWidget.vue";
|
||||
import RecentActivityWidget from "./components/dashboard/RecentActivityWidget.vue";
|
||||
import ProductOverviewWidget from "./components/dashboard/ProductOverviewWidget.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout-container">
|
||||
<AppTopbar />
|
||||
<div class="layout-grid">
|
||||
<StatsWidget />
|
||||
<div class="layout-grid-row">
|
||||
<SalesTrendWidget />
|
||||
<RecentActivityWidget />
|
||||
</div>
|
||||
<ProductOverviewWidget />
|
||||
</div>
|
||||
<AppFooter />
|
||||
</div>
|
||||
</template>
|
||||
BIN
console/src/assets/favicon.ico
Normal file
BIN
console/src/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
596
console/src/assets/styles/main.css
Normal file
596
console/src/assets/styles/main.css
Normal file
@ -0,0 +1,596 @@
|
||||
@import "primeicons/primeicons.css";
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-variation-settings: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--p-surface-50);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.p-dark body {
|
||||
background-color: var(--p-surface-950);
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
background-color: var(--p-surface-50);
|
||||
color: var(--p-surface-950);
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.p-dark .layout-container {
|
||||
background-color: var(--p-surface-950);
|
||||
color: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.layout-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.layout-grid-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-card {
|
||||
background-color: var(--p-surface-0);
|
||||
color: var(--p-surface-950);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--p-surface-200);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.p-dark .layout-card {
|
||||
background-color: var(--p-surface-900);
|
||||
color: var(--p-surface-0);
|
||||
border-color: var(--p-surface-700);
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 1.714rem;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.stats-icon-box {
|
||||
flex-shrink: 0;
|
||||
background-color: var(--p-primary-100);
|
||||
color: var(--p-primary-600);
|
||||
border-radius: 0.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--p-primary-200);
|
||||
}
|
||||
|
||||
.p-dark .stats-icon-box {
|
||||
background-color: color-mix(in srgb, var(--p-primary-400), transparent 80%);
|
||||
border-color: color-mix(in srgb, var(--p-primary-400), transparent 70%);
|
||||
color: var(--p-primary-200);
|
||||
}
|
||||
|
||||
.stats-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stats-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
color: var(--p-surface-900);
|
||||
}
|
||||
|
||||
.p-dark .stats-title {
|
||||
color: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
color: var(--p-surface-900);
|
||||
}
|
||||
|
||||
.p-dark .stats-value {
|
||||
color: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.stats-subtitle {
|
||||
color: var(--p-surface-600);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.p-dark .stats-subtitle {
|
||||
color: var(--p-surface-400);
|
||||
}
|
||||
|
||||
.col-item-2 {
|
||||
width: 50%;
|
||||
}
|
||||
.chart-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--p-surface-900);
|
||||
}
|
||||
|
||||
.p-dark .chart-title {
|
||||
color: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--p-surface-200);
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--p-surface-50);
|
||||
}
|
||||
|
||||
.p-dark .activity-item {
|
||||
background-color: var(--p-surface-800);
|
||||
border-color: var(--p-surface-700);
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
font-size: 1.125rem !important;
|
||||
}
|
||||
|
||||
.activity-icon.green {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.activity-icon.blue {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.activity-icon.yellow {
|
||||
color: #eab308;
|
||||
}
|
||||
|
||||
.activity-icon.pink {
|
||||
color: #ec4899;
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.activity-text {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 0.75rem;
|
||||
color: var(--p-surface-600);
|
||||
}
|
||||
|
||||
.p-dark .activity-time {
|
||||
color: var(--p-surface-400);
|
||||
}
|
||||
|
||||
.products-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.products-header {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.products-header .search-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.products-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--p-surface-900);
|
||||
}
|
||||
|
||||
.p-dark .products-title {
|
||||
color: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.products-table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
background-color: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.p-dark .products-table-container {
|
||||
background-color: var(--p-surface-900);
|
||||
}
|
||||
|
||||
.products-table {
|
||||
width: 100%;
|
||||
color: var(--p-surface-900);
|
||||
}
|
||||
|
||||
.p-dark .products-table {
|
||||
color: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.products-table-mask {
|
||||
backdrop-filter: blur(4px) !important;
|
||||
background-color: color-mix(in srgb, var(--p-surface-0), transparent 80%) !important;
|
||||
}
|
||||
|
||||
.p-dark .products-table-mask {
|
||||
background-color: color-mix(in srgb, var(--p-surface-900), transparent 80%) !important;
|
||||
}
|
||||
|
||||
.products-table-loading {
|
||||
color: var(--p-primary-500) !important;
|
||||
}
|
||||
|
||||
.products-search {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--p-surface-0);
|
||||
color: var(--p-surface-900);
|
||||
border: 1px solid var(--p-surface-200);
|
||||
}
|
||||
|
||||
.p-dark .products-search {
|
||||
background-color: var(--p-surface-900);
|
||||
color: var(--p-surface-0);
|
||||
border-color: var(--p-surface-700);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.products-search {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.products-search {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.stats {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.layout-grid-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.col-item-2 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background-color: var(--p-surface-0);
|
||||
padding: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
max-width: 1400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 1px solid var(--p-surface-200);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-dark .topbar {
|
||||
background-color: var(--p-surface-900);
|
||||
border-color: var(--p-surface-700);
|
||||
}
|
||||
|
||||
.topbar-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topbar-brand {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topbar-brand-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.topbar-brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
color: var(--p-surface-700);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-dark .topbar-title {
|
||||
color: var(--p-surface-100);
|
||||
}
|
||||
|
||||
.topbar-subtitle {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--p-primary-500);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.topbar-theme-button {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
transition: all 0.2s;
|
||||
color: var(--p-surface-900);
|
||||
}
|
||||
|
||||
.p-dark .topbar-theme-button {
|
||||
color: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.topbar-theme-button:hover {
|
||||
background-color: var(--p-surface-100);
|
||||
}
|
||||
|
||||
.p-dark .topbar-theme-button:hover {
|
||||
background-color: var(--p-surface-800);
|
||||
}
|
||||
|
||||
.fill-primary {
|
||||
fill: var(--p-primary-500);
|
||||
}
|
||||
|
||||
.p-dark .fill-primary {
|
||||
fill: var(--p-primary-400);
|
||||
}
|
||||
|
||||
.fill-surface {
|
||||
fill: var(--p-surface-900);
|
||||
}
|
||||
|
||||
.p-dark .fill-surface {
|
||||
fill: var(--p-surface-0);
|
||||
}
|
||||
|
||||
.config-panel {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
right: 0;
|
||||
width: 16rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--p-surface-0);
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
border: 1px solid var(--p-surface-200);
|
||||
transform-origin: top;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.p-dark .config-panel {
|
||||
background-color: var(--p-surface-900);
|
||||
border-color: var(--p-surface-700);
|
||||
}
|
||||
|
||||
.config-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.config-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--p-surface-600);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.p-dark .config-label {
|
||||
color: var(--p-surface-400);
|
||||
}
|
||||
|
||||
.config-colors {
|
||||
padding-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.color-button {
|
||||
border: none;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 9999px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selected {
|
||||
--ring-offset-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
|
||||
--ring-shadow: 0 0 0 calc(var(--ring-width) + var(--ring-offset-width)) var(--ring-color);
|
||||
--ring-width: 2px;
|
||||
--ring-offset-width: 2px;
|
||||
--ring-color: var(--p-primary-500);
|
||||
--ring-offset-color: #ffffff;
|
||||
box-shadow: var(--ring-offset-shadow), var(--ring-shadow);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--p-surface-0);
|
||||
padding: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
max-width: 1400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 1px solid var(--p-surface-200);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-dark .footer {
|
||||
background-color: var(--p-surface-900);
|
||||
border-color: var(--p-surface-700);
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.footer-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 0.875rem;
|
||||
color: var(--p-surface-600);
|
||||
}
|
||||
|
||||
.p-dark .footer-copyright {
|
||||
color: var(--p-surface-400);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: var(--p-surface-600);
|
||||
font-size: 0.875rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.p-dark .footer-link {
|
||||
color: var(--p-surface-400);
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--p-primary-500);
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.animate-fadeout {
|
||||
animation: fadeout 0.15s linear;
|
||||
}
|
||||
|
||||
.animate-scalein {
|
||||
animation: scalein 0.15s linear;
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scalein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
49
console/src/components/AppConfig.vue
Normal file
49
console/src/components/AppConfig.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import { useLayout } from "../composables/useLayout";
|
||||
|
||||
const { primaryColors, surfaces, primary, surface, isDarkMode, updateColors } = useLayout();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="config-panel hidden">
|
||||
<div class="config-section">
|
||||
<div>
|
||||
<span class="config-label">Primary</span>
|
||||
<div class="config-colors">
|
||||
<button
|
||||
v-for="pc of primaryColors"
|
||||
:key="pc.name"
|
||||
type="button"
|
||||
:title="pc.name"
|
||||
:class="['color-button', { selected: primary === pc.name }]"
|
||||
:style="{ backgroundColor: pc.palette['500'] }"
|
||||
@click="updateColors('primary', pc.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="config-label">Surface</span>
|
||||
<div class="config-colors">
|
||||
<button
|
||||
v-for="s of surfaces"
|
||||
:key="s.name"
|
||||
type="button"
|
||||
:title="s.name"
|
||||
:class="[
|
||||
'color-button',
|
||||
{
|
||||
selected: surface
|
||||
? surface === s.name
|
||||
: isDarkMode
|
||||
? s.name === 'zinc'
|
||||
: s.name === 'slate',
|
||||
},
|
||||
]"
|
||||
:style="{ backgroundColor: s.palette['500'] }"
|
||||
@click="updateColors('surface', s.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
23
console/src/components/AppFooter.vue
Normal file
23
console/src/components/AppFooter.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-copyright">202X PrimeVue.</div>
|
||||
<div class="footer-links">
|
||||
<a href="https://twitter.com/primevue" target="_blank" rel="noopener noreferrer" class="footer-link">
|
||||
<i class="pi pi-twitter footer-icon"></i>
|
||||
</a>
|
||||
<a href="https://primevue.org" target="_blank" rel="noopener noreferrer" class="footer-link">
|
||||
<i class="pi pi-globe footer-icon"></i>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/primefaces/primevue"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="footer-link"
|
||||
>
|
||||
<i class="pi pi-github footer-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
58
console/src/components/AppTopbar.vue
Normal file
58
console/src/components/AppTopbar.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<script setup>
|
||||
import { useLayout } from "../composables/useLayout";
|
||||
import AppConfig from "./AppConfig.vue";
|
||||
|
||||
const { isDarkMode, toggleDarkMode } = useLayout();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="topbar">
|
||||
<div class="topbar-container">
|
||||
<div class="topbar-brand">
|
||||
<svg
|
||||
width="35"
|
||||
height="40"
|
||||
viewBox="0 0 35 40"
|
||||
fill="none"
|
||||
class="w-8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||
class="fill-primary"
|
||||
/>
|
||||
<path
|
||||
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
||||
class="fill-surface"
|
||||
/>
|
||||
</svg>
|
||||
<span class="topbar-brand-text">
|
||||
<span class="topbar-title">PrimeVue Examples</span>
|
||||
<span class="topbar-subtitle">Vite</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<Button type="button" class="topbar-theme-button" @click="toggleDarkMode" text rounded>
|
||||
<i :class="['pi ', 'pi ', { 'pi-moon': isDarkMode, 'pi-sun': !isDarkMode }]" />
|
||||
</Button>
|
||||
<div class="relative">
|
||||
<Button
|
||||
v-styleclass="{
|
||||
selector: '@next',
|
||||
enterFromClass: 'hidden',
|
||||
enterActiveClass: 'animate-scalein',
|
||||
leaveToClass: 'hidden',
|
||||
leaveActiveClass: 'animate-fadeout',
|
||||
hideOnOutsideClick: true,
|
||||
}"
|
||||
icon="pi pi-cog"
|
||||
text
|
||||
rounded
|
||||
aria-label="Settings"
|
||||
/>
|
||||
<AppConfig />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
103
console/src/components/dashboard/ProductOverviewWidget.vue
Normal file
103
console/src/components/dashboard/ProductOverviewWidget.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: "Laptop Pro",
|
||||
category: "Electronics",
|
||||
price: 2499,
|
||||
status: "In Stock",
|
||||
},
|
||||
{
|
||||
name: "Wireless Mouse",
|
||||
category: "Accessories",
|
||||
price: 49,
|
||||
status: "Low Stock",
|
||||
},
|
||||
{
|
||||
name: "Monitor 4K",
|
||||
category: "Electronics",
|
||||
price: 699,
|
||||
status: "Out of Stock",
|
||||
},
|
||||
{ name: "Keyboard", category: "Accessories", price: 149, status: "In Stock" },
|
||||
]);
|
||||
|
||||
const selectedProduct = ref(null);
|
||||
const searchQuery = ref("");
|
||||
const loading = ref(false);
|
||||
const filteredProducts = ref([]);
|
||||
|
||||
const searchProducts = () => {
|
||||
loading.value = true;
|
||||
filteredProducts.value = products.value.filter(
|
||||
(product) =>
|
||||
product.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
product.category.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
product.status.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
watch(searchQuery, () => {
|
||||
searchProducts();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
filteredProducts.value = [...products.value];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout-card">
|
||||
<div class="products-header">
|
||||
<span class="products-title">Products Overview</span>
|
||||
<IconField class="search-field">
|
||||
<InputIcon class="pi pi-search" />
|
||||
<InputText
|
||||
v-model="searchQuery"
|
||||
placeholder="Search products..."
|
||||
class="products-search"
|
||||
@keyup.enter="searchProducts"
|
||||
/>
|
||||
</IconField>
|
||||
</div>
|
||||
<div class="products-table-container">
|
||||
<DataTable
|
||||
:value="filteredProducts"
|
||||
v-model:selection="selectedProduct"
|
||||
selectionMode="single"
|
||||
:loading="loading"
|
||||
:rows="5"
|
||||
class="products-table"
|
||||
:pt="{
|
||||
mask: {
|
||||
class: 'products-table-mask',
|
||||
},
|
||||
loadingIcon: {
|
||||
class: 'products-table-loading',
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
<Column field="category" header="Category" sortable></Column>
|
||||
<Column field="price" header="Price" sortable>
|
||||
<template #body="{ data }"> ${{ data.price }} </template>
|
||||
</Column>
|
||||
<Column field="status" header="Status">
|
||||
<template #body="{ data }">
|
||||
<Tag
|
||||
:severity="
|
||||
data.status === 'In Stock' ? 'success' : data.status === 'Low Stock' ? 'warn' : 'danger'
|
||||
"
|
||||
>
|
||||
{{ data.status }}
|
||||
</Tag>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
43
console/src/components/dashboard/RecentActivityWidget.vue
Normal file
43
console/src/components/dashboard/RecentActivityWidget.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
const activities = [
|
||||
{
|
||||
icon: "pi-shopping-cart",
|
||||
text: "New order #1123",
|
||||
time: "2 minutes ago",
|
||||
color: "pink",
|
||||
},
|
||||
{
|
||||
icon: "pi-user-plus",
|
||||
text: "New customer registered",
|
||||
time: "15 minutes ago",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
icon: "pi-check-circle",
|
||||
text: "Payment processed",
|
||||
time: "25 minutes ago",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
icon: "pi-inbox",
|
||||
text: "Inventory updated",
|
||||
time: "40 minutes ago",
|
||||
color: "yellow",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout-card col-item-2">
|
||||
<span class="chart-title">Recent Activity</span>
|
||||
<div class="activity-list">
|
||||
<div v-for="(activity, index) in activities" :key="index" class="activity-item">
|
||||
<i :class="['activity-icon', activity.color, 'pi', activity.icon]"></i>
|
||||
<div class="activity-content">
|
||||
<span class="activity-text">{{ activity.text }}</span>
|
||||
<span class="activity-time">{{ activity.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
94
console/src/components/dashboard/SalesTrendWidget.vue
Normal file
94
console/src/components/dashboard/SalesTrendWidget.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { useLayout } from "../../composables/useLayout";
|
||||
|
||||
const { primary, surface, isDarkMode } = useLayout();
|
||||
|
||||
const chartData = ref(null);
|
||||
const chartOptions = ref(null);
|
||||
|
||||
function setChartData() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
|
||||
return {
|
||||
labels: ["Q1", "Q2", "Q3", "Q4"],
|
||||
datasets: [
|
||||
{
|
||||
type: "bar",
|
||||
label: "Subscriptions",
|
||||
backgroundColor: documentStyle.getPropertyValue("--p-primary-400"),
|
||||
data: [4000, 10000, 15000, 4000],
|
||||
barThickness: 32,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
label: "Advertising",
|
||||
backgroundColor: documentStyle.getPropertyValue("--p-primary-300"),
|
||||
data: [2100, 8400, 2400, 7500],
|
||||
barThickness: 32,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
label: "Affiliate",
|
||||
backgroundColor: documentStyle.getPropertyValue("--p-primary-200"),
|
||||
data: [4100, 5200, 3400, 7400],
|
||||
borderRadius: {
|
||||
topLeft: 8,
|
||||
topRight: 8,
|
||||
},
|
||||
barThickness: 32,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
function setChartOptions() {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
grid: {
|
||||
color: "transparent",
|
||||
borderColor: "transparent",
|
||||
},
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
grid: {
|
||||
color: "transparent",
|
||||
borderColor: "transparent",
|
||||
drawTicks: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
watch([primary, surface, isDarkMode], () => {
|
||||
chartData.value = setChartData();
|
||||
chartOptions.value = setChartOptions();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartData.value = setChartData();
|
||||
chartOptions.value = setChartOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout-card col-item-2">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">Sales Trend</span>
|
||||
</div>
|
||||
<div class="chart-content">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" style="height: 300px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
45
console/src/components/dashboard/StatsWidget.vue
Normal file
45
console/src/components/dashboard/StatsWidget.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
const stats = [
|
||||
{
|
||||
title: "Total Orders",
|
||||
icon: "pi-shopping-cart",
|
||||
value: "1,234",
|
||||
subtitle: "Last 7 days",
|
||||
},
|
||||
{
|
||||
title: "Active Users",
|
||||
icon: "pi-users",
|
||||
value: "2,573",
|
||||
subtitle: "Last 7 days",
|
||||
},
|
||||
{
|
||||
title: "Revenue",
|
||||
icon: "pi-dollar",
|
||||
value: "$45,200",
|
||||
subtitle: "Last 7 days",
|
||||
},
|
||||
{
|
||||
title: "Success Rate",
|
||||
icon: "pi-chart-line",
|
||||
value: "95%",
|
||||
subtitle: "Last 7 days",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stats">
|
||||
<div v-for="(stat, index) in stats" :key="index" class="layout-card">
|
||||
<div class="stats-header">
|
||||
<span class="stats-title">{{ stat.title }}</span>
|
||||
<span class="stats-icon-box">
|
||||
<i :class="['pi', stat.icon]"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="stats-content">
|
||||
<div class="stats-value">{{ stat.value }}</div>
|
||||
<div class="stats-subtitle">{{ stat.subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
459
console/src/composables/useLayout.js
Normal file
459
console/src/composables/useLayout.js
Normal file
@ -0,0 +1,459 @@
|
||||
import { updatePrimaryPalette, updateSurfacePalette } from "@primeuix/themes";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
const appState = ref({
|
||||
primary: "emerald",
|
||||
surface: null,
|
||||
darkMode: false
|
||||
});
|
||||
|
||||
const primaryColors = ref([
|
||||
{
|
||||
name: "emerald",
|
||||
palette: {
|
||||
50: "#ecfdf5",
|
||||
100: "#d1fae5",
|
||||
200: "#a7f3d0",
|
||||
300: "#6ee7b7",
|
||||
400: "#34d399",
|
||||
500: "#10b981",
|
||||
600: "#059669",
|
||||
700: "#047857",
|
||||
800: "#065f46",
|
||||
900: "#064e3b",
|
||||
950: "#022c22"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "green",
|
||||
palette: {
|
||||
50: "#f0fdf4",
|
||||
100: "#dcfce7",
|
||||
200: "#bbf7d0",
|
||||
300: "#86efac",
|
||||
400: "#4ade80",
|
||||
500: "#22c55e",
|
||||
600: "#16a34a",
|
||||
700: "#15803d",
|
||||
800: "#166534",
|
||||
900: "#14532d",
|
||||
950: "#052e16"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "lime",
|
||||
palette: {
|
||||
50: "#f7fee7",
|
||||
100: "#ecfccb",
|
||||
200: "#d9f99d",
|
||||
300: "#bef264",
|
||||
400: "#a3e635",
|
||||
500: "#84cc16",
|
||||
600: "#65a30d",
|
||||
700: "#4d7c0f",
|
||||
800: "#3f6212",
|
||||
900: "#365314",
|
||||
950: "#1a2e05"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "orange",
|
||||
palette: {
|
||||
50: "#fff7ed",
|
||||
100: "#ffedd5",
|
||||
200: "#fed7aa",
|
||||
300: "#fdba74",
|
||||
400: "#fb923c",
|
||||
500: "#f97316",
|
||||
600: "#ea580c",
|
||||
700: "#c2410c",
|
||||
800: "#9a3412",
|
||||
900: "#7c2d12",
|
||||
950: "#431407"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "amber",
|
||||
palette: {
|
||||
50: "#fffbeb",
|
||||
100: "#fef3c7",
|
||||
200: "#fde68a",
|
||||
300: "#fcd34d",
|
||||
400: "#fbbf24",
|
||||
500: "#f59e0b",
|
||||
600: "#d97706",
|
||||
700: "#b45309",
|
||||
800: "#92400e",
|
||||
900: "#78350f",
|
||||
950: "#451a03"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "yellow",
|
||||
palette: {
|
||||
50: "#fefce8",
|
||||
100: "#fef9c3",
|
||||
200: "#fef08a",
|
||||
300: "#fde047",
|
||||
400: "#facc15",
|
||||
500: "#eab308",
|
||||
600: "#ca8a04",
|
||||
700: "#a16207",
|
||||
800: "#854d0e",
|
||||
900: "#713f12",
|
||||
950: "#422006"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "teal",
|
||||
palette: {
|
||||
50: "#f0fdfa",
|
||||
100: "#ccfbf1",
|
||||
200: "#99f6e4",
|
||||
300: "#5eead4",
|
||||
400: "#2dd4bf",
|
||||
500: "#14b8a6",
|
||||
600: "#0d9488",
|
||||
700: "#0f766e",
|
||||
800: "#115e59",
|
||||
900: "#134e4a",
|
||||
950: "#042f2e"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "cyan",
|
||||
palette: {
|
||||
50: "#ecfeff",
|
||||
100: "#cffafe",
|
||||
200: "#a5f3fc",
|
||||
300: "#67e8f9",
|
||||
400: "#22d3ee",
|
||||
500: "#06b6d4",
|
||||
600: "#0891b2",
|
||||
700: "#0e7490",
|
||||
800: "#155e75",
|
||||
900: "#164e63",
|
||||
950: "#083344"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "sky",
|
||||
palette: {
|
||||
50: "#f0f9ff",
|
||||
100: "#e0f2fe",
|
||||
200: "#bae6fd",
|
||||
300: "#7dd3fc",
|
||||
400: "#38bdf8",
|
||||
500: "#0ea5e9",
|
||||
600: "#0284c7",
|
||||
700: "#0369a1",
|
||||
800: "#075985",
|
||||
900: "#0c4a6e",
|
||||
950: "#082f49"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "blue",
|
||||
palette: {
|
||||
50: "#eff6ff",
|
||||
100: "#dbeafe",
|
||||
200: "#bfdbfe",
|
||||
300: "#93c5fd",
|
||||
400: "#60a5fa",
|
||||
500: "#3b82f6",
|
||||
600: "#2563eb",
|
||||
700: "#1d4ed8",
|
||||
800: "#1e40af",
|
||||
900: "#1e3a8a",
|
||||
950: "#172554"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "indigo",
|
||||
palette: {
|
||||
50: "#eef2ff",
|
||||
100: "#e0e7ff",
|
||||
200: "#c7d2fe",
|
||||
300: "#a5b4fc",
|
||||
400: "#818cf8",
|
||||
500: "#6366f1",
|
||||
600: "#4f46e5",
|
||||
700: "#4338ca",
|
||||
800: "#3730a3",
|
||||
900: "#312e81",
|
||||
950: "#1e1b4b"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "violet",
|
||||
palette: {
|
||||
50: "#f5f3ff",
|
||||
100: "#ede9fe",
|
||||
200: "#ddd6fe",
|
||||
300: "#c4b5fd",
|
||||
400: "#a78bfa",
|
||||
500: "#8b5cf6",
|
||||
600: "#7c3aed",
|
||||
700: "#6d28d9",
|
||||
800: "#5b21b6",
|
||||
900: "#4c1d95",
|
||||
950: "#2e1065"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "purple",
|
||||
palette: {
|
||||
50: "#faf5ff",
|
||||
100: "#f3e8ff",
|
||||
200: "#e9d5ff",
|
||||
300: "#d8b4fe",
|
||||
400: "#c084fc",
|
||||
500: "#a855f7",
|
||||
600: "#9333ea",
|
||||
700: "#7e22ce",
|
||||
800: "#6b21a8",
|
||||
900: "#581c87",
|
||||
950: "#3b0764"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "fuchsia",
|
||||
palette: {
|
||||
50: "#fdf4ff",
|
||||
100: "#fae8ff",
|
||||
200: "#f5d0fe",
|
||||
300: "#f0abfc",
|
||||
400: "#e879f9",
|
||||
500: "#d946ef",
|
||||
600: "#c026d3",
|
||||
700: "#a21caf",
|
||||
800: "#86198f",
|
||||
900: "#701a75",
|
||||
950: "#4a044e"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "pink",
|
||||
palette: {
|
||||
50: "#fdf2f8",
|
||||
100: "#fce7f3",
|
||||
200: "#fbcfe8",
|
||||
300: "#f9a8d4",
|
||||
400: "#f472b6",
|
||||
500: "#ec4899",
|
||||
600: "#db2777",
|
||||
700: "#be185d",
|
||||
800: "#9d174d",
|
||||
900: "#831843",
|
||||
950: "#500724"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "rose",
|
||||
palette: {
|
||||
50: "#fff1f2",
|
||||
100: "#ffe4e6",
|
||||
200: "#fecdd3",
|
||||
300: "#fda4af",
|
||||
400: "#fb7185",
|
||||
500: "#f43f5e",
|
||||
600: "#e11d48",
|
||||
700: "#be123c",
|
||||
800: "#9f1239",
|
||||
900: "#881337",
|
||||
950: "#4c0519"
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const surfaces = ref([
|
||||
{
|
||||
name: "slate",
|
||||
palette: {
|
||||
0: "#ffffff",
|
||||
50: "#f8fafc",
|
||||
100: "#f1f5f9",
|
||||
200: "#e2e8f0",
|
||||
300: "#cbd5e1",
|
||||
400: "#94a3b8",
|
||||
500: "#64748b",
|
||||
600: "#475569",
|
||||
700: "#334155",
|
||||
800: "#1e293b",
|
||||
900: "#0f172a",
|
||||
950: "#020617"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "gray",
|
||||
palette: {
|
||||
0: "#ffffff",
|
||||
50: "#f9fafb",
|
||||
100: "#f3f4f6",
|
||||
200: "#e5e7eb",
|
||||
300: "#d1d5db",
|
||||
400: "#9ca3af",
|
||||
500: "#6b7280",
|
||||
600: "#4b5563",
|
||||
700: "#374151",
|
||||
800: "#1f2937",
|
||||
900: "#111827",
|
||||
950: "#030712"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "zinc",
|
||||
palette: {
|
||||
0: "#ffffff",
|
||||
50: "#fafafa",
|
||||
100: "#f4f4f5",
|
||||
200: "#e4e4e7",
|
||||
300: "#d4d4d8",
|
||||
400: "#a1a1aa",
|
||||
500: "#71717a",
|
||||
600: "#52525b",
|
||||
700: "#3f3f46",
|
||||
800: "#27272a",
|
||||
900: "#18181b",
|
||||
950: "#09090b"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "neutral",
|
||||
palette: {
|
||||
0: "#ffffff",
|
||||
50: "#fafafa",
|
||||
100: "#f5f5f5",
|
||||
200: "#e5e5e5",
|
||||
300: "#d4d4d4",
|
||||
400: "#a3a3a3",
|
||||
500: "#737373",
|
||||
600: "#525252",
|
||||
700: "#404040",
|
||||
800: "#262626",
|
||||
900: "#171717",
|
||||
950: "#0a0a0a"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "stone",
|
||||
palette: {
|
||||
0: "#ffffff",
|
||||
50: "#fafaf9",
|
||||
100: "#f5f5f4",
|
||||
200: "#e7e5e4",
|
||||
300: "#d6d3d1",
|
||||
400: "#a8a29e",
|
||||
500: "#78716c",
|
||||
600: "#57534e",
|
||||
700: "#44403c",
|
||||
800: "#292524",
|
||||
900: "#1c1917",
|
||||
950: "#0c0a09"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "soho",
|
||||
palette: {
|
||||
0: "#ffffff",
|
||||
50: "#f4f4f4",
|
||||
100: "#e8e9e9",
|
||||
200: "#d2d2d4",
|
||||
300: "#bbbcbe",
|
||||
400: "#a5a5a9",
|
||||
500: "#8e8f93",
|
||||
600: "#77787d",
|
||||
700: "#616268",
|
||||
800: "#4a4b52",
|
||||
900: "#34343d",
|
||||
950: "#1d1e27"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "viva",
|
||||
palette: {
|
||||
0: "#ffffff",
|
||||
50: "#f3f3f3",
|
||||
100: "#e7e7e8",
|
||||
200: "#cfd0d0",
|
||||
300: "#b7b8b9",
|
||||
400: "#9fa1a1",
|
||||
500: "#87898a",
|
||||
600: "#6e7173",
|
||||
700: "#565a5b",
|
||||
800: "#3e4244",
|
||||
900: "#262b2c",
|
||||
950: "#0e1315"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "ocean",
|
||||
palette: {
|
||||
0: "#ffffff",
|
||||
50: "#fbfcfc",
|
||||
100: "#F7F9F8",
|
||||
200: "#EFF3F2",
|
||||
300: "#DADEDD",
|
||||
400: "#B1B7B6",
|
||||
500: "#828787",
|
||||
600: "#5F7274",
|
||||
700: "#415B61",
|
||||
800: "#29444E",
|
||||
900: "#183240",
|
||||
950: "#0c1920"
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
export function useLayout() {
|
||||
function setPrimary(value) {
|
||||
appState.value.primary = value;
|
||||
}
|
||||
|
||||
function setSurface(value) {
|
||||
appState.value.surface = value;
|
||||
}
|
||||
|
||||
function setDarkMode(value) {
|
||||
appState.value.darkMode = value;
|
||||
if (value) {
|
||||
document.documentElement.classList.add("p-dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("p-dark");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDarkMode() {
|
||||
appState.value.darkMode = !appState.value.darkMode;
|
||||
document.documentElement.classList.toggle("p-dark");
|
||||
}
|
||||
|
||||
function updateColors(type, colorName) {
|
||||
if (type === "primary") {
|
||||
setPrimary(colorName);
|
||||
const color = primaryColors.value.find((c) => c.name === colorName);
|
||||
updatePrimaryPalette(color.palette);
|
||||
} else if (type === "surface") {
|
||||
setSurface(colorName);
|
||||
const surfaceColor = surfaces.value.find((s) => s.name === colorName);
|
||||
updateSurfacePalette(surfaceColor.palette);
|
||||
}
|
||||
}
|
||||
|
||||
const isDarkMode = computed(() => appState.value.darkMode);
|
||||
const primary = computed(() => appState.value.primary);
|
||||
const surface = computed(() => appState.value.surface);
|
||||
|
||||
return {
|
||||
primaryColors,
|
||||
surfaces,
|
||||
isDarkMode,
|
||||
primary,
|
||||
surface,
|
||||
toggleDarkMode,
|
||||
setDarkMode,
|
||||
setPrimary,
|
||||
setSurface,
|
||||
updateColors
|
||||
};
|
||||
}
|
||||
19
console/src/main.js
Normal file
19
console/src/main.js
Normal file
@ -0,0 +1,19 @@
|
||||
import "./assets/styles/main.css";
|
||||
|
||||
import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
import App from "./App.vue";
|
||||
import Aura from "@primeuix/themes/aura";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: Aura,
|
||||
options: {
|
||||
darkModeSelector: ".p-dark",
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
app.mount("#app");
|
||||
16
console/vite.config.js
Normal file
16
console/vite.config.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import { PrimeVueResolver } from '@primevue/auto-import-resolver';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
Components({
|
||||
resolvers: [
|
||||
PrimeVueResolver()
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user