mirrors2/vuejs-admin-dashboard-template
1
0
Fork 0
mirror of https://github.com/cruip/vuejs-admin-dashboard-template.git synced 2025-12-19 17:02:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

v3.0.0 - Redesign

Browse Source
This commit is contained in:
pasqualevitiello
2024-07-05 09:34:39 +02:00
parent 6cf02005ee
commit 6401368a52
52 changed files with 1761 additions and 1352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@@ -1,5 +1,9 @@
# CHANGELOG.md
## [3.0.0] - 2024-07-05
- Mosaic Redesign
## [2.1.0] - 2023-12-08
Update to Vite 5

4
README.md
View File

@@ -1,6 +1,6 @@
# Free Tailwind & Vue.js admin dashboard template
![Mosaic TailwindCSS template preview](https://github.com/cruip/vuejs-admin-dashboard-template/assets/2683512/2fdc15d1-316b-4c51-b357-84b32e79de60)
![Mosaic TailwindCSS template preview](https://github.com/cruip/vuejs-admin-dashboard-template/assets/2683512/3b9af06c-f3b2-45c5-8c60-052989cbebcb)
**Mosaic Lite Vue** is a responsive dashboard template built on top of TailwindCSS and fully coded in Vue.js. This template is a great starting point for anyone who wants to create a user interface for SaaS products, administrator dashboards, modern web apps, and more.
Use it for whatever you want, and be sure to reach us out on [Twitter](https://twitter.com/Cruip_com) if you build anything cool/useful with it.
@@ -13,7 +13,7 @@ Check the live demo here 👉️ [https://mosaic-vue.cruip.com/](https://mosaic-
## Mosaic Pro
[![Mosaic Pro](https://user-images.githubusercontent.com/2683512/151177961-2ff5b838-3745-48dc-80c8-80b043971483.png)](https://cruip.com/mosaic/)
[![Mosaic Tailwind Admin Template](https://github.com/cruip/tailwind-dashboard-template/assets/2683512/2b4d0fae-bb07-4229-8a8a-48005f2f33cb)](https://cruip.com/mosaic/)
## Design files

39
index.html
View File

@@ -1,23 +1,20 @@
<!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 class="font-inter antialiased bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400">
<script>
if (localStorage.getItem('sidebar-expanded') == 'true') {
document.querySelector('body').classList.add('sidebar-expanded');
} else {
document.querySelector('body').classList.remove('sidebar-expanded');
}
</script>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<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 class="font-inter antialiased bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400">
<script>
if (localStorage.getItem('sidebar-expanded') == 'true') {
document.querySelector('body').classList.add('sidebar-expanded');
} else {
document.querySelector('body').classList.remove('sidebar-expanded');
}
</script>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1305
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -19,7 +19,7 @@
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",

2
postcss.config.cjs
View File

@@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: { config: './src/css/tailwind.config.js' },
tailwindcss: {},
autoprefixer: {},
},
}

7
src/charts/BarChart01.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="px-5 py-3">
<ul ref="legend" class="flex flex-wrap"></ul>
<ul ref="legend" class="flex flex-wrap gap-x-4"></ul>
</div>
<div class="grow">
<canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
@@ -118,7 +118,6 @@ export default {
const items = c.options.plugins.legend.labels.generateLabels(c)
items.forEach((item) => {
const li = document.createElement('li')
li.style.marginRight = tailwindConfig().theme.margin[4]
// Button element
const button = document.createElement('button')
button.style.display = 'inline-flex'
@@ -143,14 +142,14 @@ export default {
labelContainer.style.display = 'flex'
labelContainer.style.alignItems = 'center'
const value = document.createElement('span')
value.classList.add('text-slate-800', 'dark:text-slate-100')
value.classList.add('text-gray-800', 'dark:text-gray-100')
value.style.fontSize = tailwindConfig().theme.fontSize['3xl'][0]
value.style.lineHeight = tailwindConfig().theme.fontSize['3xl'][1].lineHeight
value.style.fontWeight = tailwindConfig().theme.fontWeight.bold
value.style.marginRight = tailwindConfig().theme.margin[2]
value.style.pointerEvents = 'none'
const label = document.createElement('span')
label.classList.add('text-slate-500', 'dark:text-slate-400')
label.classList.add('text-gray-500', 'dark:text-gray-400')
label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0)

4
src/charts/BarChart03.vue
View File

@@ -4,8 +4,8 @@
<canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
</div>
<div class="px-5 pt-2 pb-2">
<ul ref="legend" class="text-sm divide-y divide-slate-100 dark:divide-slate-700"></ul>
<ul class="text-sm divide-y divide-slate-100 dark:divide-slate-700"></ul>
<ul ref="legend" class="text-sm divide-y divide-gray-100 dark:divide-gray-700/60"></ul>
<ul class="text-sm divide-y divide-gray-100 dark:divide-gray-700/60"></ul>
</div>
</div>
</template>

61
src/charts/ChartjsConfig.js
View File

@@ -7,7 +7,7 @@ Chart.register(Tooltip)
// Define Chart.js default settings
Chart.defaults.font.family = '"Inter", sans-serif'
Chart.defaults.font.weight = '500'
Chart.defaults.font.weight = 500
Chart.defaults.plugins.tooltip.borderWidth = 1
Chart.defaults.plugins.tooltip.displayColors = false
Chart.defaults.plugins.tooltip.mode = 'nearest'
@@ -15,57 +15,48 @@ Chart.defaults.plugins.tooltip.intersect = false
Chart.defaults.plugins.tooltip.position = 'nearest'
Chart.defaults.plugins.tooltip.caretSize = 0
Chart.defaults.plugins.tooltip.caretPadding = 20
Chart.defaults.plugins.tooltip.cornerRadius = 4
Chart.defaults.plugins.tooltip.cornerRadius = 8
Chart.defaults.plugins.tooltip.padding = 8
// Register Chart.js plugin to add a bg option for chart area
Chart.register({
id: 'chartAreaPlugin',
// eslint-disable-next-line object-shorthand
beforeDraw: (chart) => {
if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
const ctx = chart.canvas.getContext('2d')
const { chartArea } = chart
ctx.save()
ctx.fillStyle = chart.config.options.chartArea.backgroundColor
// eslint-disable-next-line max-len
ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top)
ctx.restore()
}
},
})
// Function that generates a gradient for line charts
export const chartAreaGradient = (ctx, chartArea, colorStops) => {
if (!ctx || !chartArea || !colorStops || colorStops.length === 0) {
return 'transparent';
}
const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
colorStops.forEach(({ stop, color }) => {
gradient.addColorStop(stop, color);
});
return gradient;
};
export const chartColors = {
textColor: {
light: tailwindConfig().theme.colors.slate[400],
dark: tailwindConfig().theme.colors.slate[500]
light: tailwindConfig().theme.colors.gray[400],
dark: tailwindConfig().theme.colors.gray[500]
},
gridColor: {
light: tailwindConfig().theme.colors.slate[100],
dark: tailwindConfig().theme.colors.slate[700]
light: tailwindConfig().theme.colors.gray[100],
dark: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[700])}, 0.6)`
},
backdropColor: {
light: tailwindConfig().theme.colors.white,
dark: tailwindConfig().theme.colors.slate[800]
dark: tailwindConfig().theme.colors.gray[800]
},
tooltipTitleColor: {
light: tailwindConfig().theme.colors.slate[800],
dark: tailwindConfig().theme.colors.slate[100]
light: tailwindConfig().theme.colors.gray[800],
dark: tailwindConfig().theme.colors.gray[100]
},
tooltipBodyColor: {
light: tailwindConfig().theme.colors.slate[800],
dark: tailwindConfig().theme.colors.slate[100]
tooltipBodyColor : {
light: tailwindConfig().theme.colors.gray[500],
dark: tailwindConfig().theme.colors.gray[400]
},
tooltipBgColor: {
light: tailwindConfig().theme.colors.white,
dark: tailwindConfig().theme.colors.slate[700]
dark: tailwindConfig().theme.colors.gray[700]
},
tooltipBorderColor: {
light: tailwindConfig().theme.colors.slate[200],
dark: tailwindConfig().theme.colors.slate[600]
},
chartAreaBg: {
light: tailwindConfig().theme.colors.slate[50],
dark: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[900])}, 0.24)`
light: tailwindConfig().theme.colors.gray[200],
dark: tailwindConfig().theme.colors.gray[600]
},
}

2
src/charts/DoughnutChart.vue
View File

@@ -82,7 +82,7 @@ export default {
li.style.margin = tailwindConfig().theme.margin[1]
// Button element
const button = document.createElement('button')
button.classList.add('btn-xs', 'bg-white', 'dark:bg-slate-800', 'text-slate-500', 'dark:text-slate-400', 'border', 'border-slate-200', 'dark:border-slate-700', 'shadow-md')
button.classList.add('btn-xs', 'bg-white', 'dark:bg-gray-700', 'text-gray-500', 'dark:text-gray-400', 'shadow-sm', 'shadow-black/[0.08]', 'rounded-full')
button.style.opacity = item.hidden ? '.3' : ''
button.onclick = () => {
c.toggleDataVisibility(item.index, !item.index)

10
src/charts/LineChart01.vue
View File

@@ -25,7 +25,7 @@ export default {
const canvas = ref(null)
let chart = null
const darkMode = useDark()
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor, chartAreaBg } = chartColors
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
onMounted(() => {
const ctx = canvas.value
@@ -34,9 +34,6 @@ export default {
type: 'line',
data: props.data,
options: {
chartArea: {
backgroundColor: darkMode.value ? chartAreaBg.dark : chartAreaBg.light,
},
layout: {
padding: 20,
},
@@ -63,9 +60,6 @@ export default {
bodyColor: darkMode.value ? tooltipBodyColor.dark : tooltipBodyColor.light,
backgroundColor: darkMode.value ? tooltipBgColor.dark : tooltipBgColor.light,
borderColor: darkMode.value ? tooltipBorderColor.dark : tooltipBorderColor.light,
bodyColor: darkMode.value ? tooltipBodyColor.dark : tooltipBodyColor.light,
backgroundColor: darkMode.value ? tooltipBgColor.dark : tooltipBgColor.light,
borderColor: darkMode.value ? tooltipBorderColor.dark : tooltipBorderColor.light,
},
legend: {
display: false,
@@ -87,12 +81,10 @@ export default {
() => darkMode.value,
() => {
if (darkMode.value) {
chart.options.chartArea.backgroundColor = chartAreaBg.dark
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.dark
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.dark
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.dark
} else {
chart.options.chartArea.backgroundColor = chartAreaBg.light
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light

13
src/charts/LineChart02.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="px-5 py-3">
<div class="flex flex-wrap justify-between items-end">
<div class="flex flex-wrap justify-between items-end gap-y-2 gap-x-4">
<div class="flex items-start">
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$1,482</div>
<div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-22%</div>
<div class="text-3xl font-bold text-gray-800 dark:text-gray-100 mr-2">$1,482</div>
<div class="text-sm font-medium text-red-700 px-1.5 bg-red-500/20 rounded-full">-22%</div>
</div>
<div class="grow ml-2 mb-1">
<ul ref="legend" class="flex flex-wrap justify-end"></ul>
<div class="grow mb-1">
<ul ref="legend" class="flex flex-wrap gap-x-4 sm:justify-end"></ul>
</div>
</div>
</div>
@@ -122,7 +122,6 @@ export default {
const items = c.options.plugins.legend.labels.generateLabels(c)
items.slice(0, 2).forEach((item) => {
const li = document.createElement('li')
li.style.marginLeft = tailwindConfig().theme.margin[3]
// Button element
const button = document.createElement('button')
button.style.display = 'inline-flex'
@@ -144,7 +143,7 @@ export default {
box.style.pointerEvents = 'none'
// Label
const label = document.createElement('span')
label.classList.add('text-slate-500', 'dark:text-slate-400')
label.classList.add('text-gray-500', 'dark:text-gray-400')
label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
const labelText = document.createTextNode(item.text)

16
src/charts/RealtimeChart.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="px-5 py-3">
<div class="flex items-start">
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2 tabular-nums">$<span ref="chartValue">57.81</span></div>
<div ref="chartDeviation" class="text-sm font-semibold text-white px-1.5 rounded-full"></div>
<div class="text-3xl font-bold text-gray-800 dark:text-gray-100 mr-2 tabular-nums">$<span ref="chartValue">57.81</span></div>
<div ref="chartDeviation" class="text-sm font-medium px-1.5 rounded-full"></div>
</div>
</div>
<div class="grow">
@@ -21,7 +21,7 @@ import {
import 'chartjs-adapter-moment'
// Import utilities
import { tailwindConfig, formatValue } from '../utils/Utils'
import { tailwindConfig, hexToRGB, formatValue } from '../utils/Utils'
Chart.register(LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip)
@@ -44,10 +44,12 @@ export default {
const diff = ((currentValue - previousValue) / previousValue) * 100
chartValue.value.innerHTML = data.datasets[0].data[data.datasets[0].data.length - 1]
if (diff < 0) {
chartDeviation.value.style.backgroundColor = tailwindConfig().theme.colors.amber[500]
chartDeviation.value.style.backgroundColor = `rgba(${hexToRGB(tailwindConfig().theme.colors.red[500])}, 0.2)`
chartDeviation.value.style.color = tailwindConfig().theme.colors.red[700];
} else {
chartDeviation.value.style.backgroundColor = tailwindConfig().theme.colors.emerald[500]
}
chartDeviation.value.style.backgroundColor = `rgba(${hexToRGB(tailwindConfig().theme.colors.green[500])}, 0.2)`
chartDeviation.value.style.color = tailwindConfig().theme.colors.green[700];
}
chartDeviation.value.innerHTML = `${diff > 0 ? '+' : ''}${diff.toFixed(2)}%`
}
@@ -105,7 +107,7 @@ export default {
},
tooltip: {
titleFont: {
weight: '600',
weight: 600,
},
callbacks: {
label: (context) => formatValue(context.parsed.y),

7
src/components/Datepicker.vue
View File

@@ -1,9 +1,10 @@
<template>
<div class="relative">
<flat-pickr class="form-input pl-9 dark:bg-slate-800 text-slate-500 hover:text-slate-600 dark:text-slate-300 dark:hover:text-slate-200 font-medium w-[15.5rem]" :config="config" v-model="date"></flat-pickr>
<flat-pickr class="form-input pl-9 dark:bg-gray-800 text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 font-medium w-[15.5rem]" :config="config" v-model="date"></flat-pickr>
<div class="absolute inset-0 right-auto flex items-center pointer-events-none">
<svg class="w-4 h-4 fill-current text-slate-500 dark:text-slate-400 ml-3" viewBox="0 0 16 16">
<path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
<svg class="fill-current text-gray-400 dark:text-gray-500 ml-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M5 4a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5Z" />
<path d="M4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4ZM2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Z" />
</svg>
</div>
</div>

4
src/components/DropdownEditMenu.vue
View File

@@ -3,7 +3,7 @@
<button
ref="trigger"
class="rounded-full"
:class="dropdownOpen ? 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400' : 'text-slate-400 hover:text-slate-500 dark:text-slate-500 dark:hover:text-slate-400'"
:class="dropdownOpen ? 'bg-gray-100 dark:bg-gray-700/60 text-gray-500 dark:text-gray-400' : 'text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400'"
aria-haspopup="true"
@click.prevent="dropdownOpen = !dropdownOpen"
:aria-expanded="dropdownOpen"
@@ -23,7 +23,7 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-36 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 py-1.5 rounded shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-36 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
<ul
ref="dropdown"
@focusin="dropdownOpen = true"

16
src/components/DropdownFilter.vue
View File

@@ -2,14 +2,14 @@
<div class="relative inline-flex">
<button
ref="trigger"
class="btn bg-white dark:bg-slate-800 border-slate-200 hover:border-slate-300 dark:border-slate-700 dark:hover:border-slate-600 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
class="btn px-2.5 bg-white dark:bg-gray-800 border-gray-200 hover:border-gray-300 dark:border-gray-700/60 dark:hover:border-gray-600 text-gray-400 dark:text-gray-500"
aria-haspopup="true"
@click.prevent="dropdownOpen = !dropdownOpen"
:aria-expanded="dropdownOpen"
>
<span class="sr-only">Filter</span><wbr />
<svg class="w-4 h-4 fill-current" viewBox="0 0 16 16">
<path d="M9 15H7a1 1 0 010-2h2a1 1 0 010 2zM11 11H5a1 1 0 010-2h6a1 1 0 010 2zM13 7H3a1 1 0 010-2h10a1 1 0 010 2zM15 3H1a1 1 0 010-2h14a1 1 0 010 2z" />
<svg class="fill-current" width="16" height="16" viewBox="0 0 16 16">
<path d="M0 3a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1ZM3 8a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1ZM7 12a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2H7Z" />
</svg>
</button>
<transition
@@ -20,9 +20,9 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full left-0 right-auto min-w-56 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 pt-1.5 rounded shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'md:left-auto md:right-0' : 'md:left-0 md:right-auto'">
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full left-0 right-auto min-w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 pt-1.5 rounded-lg shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'md:left-auto md:right-0' : 'md:left-0 md:right-auto'">
<div ref="dropdown">
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase pt-1.5 pb-2 px-3">Filters</div>
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase pt-1.5 pb-2 px-3">Filters</div>
<ul class="mb-4">
<li class="py-1 px-3">
<label class="flex items-center">
@@ -61,13 +61,13 @@
</label>
</li>
</ul>
<div class="py-2 px-3 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/20">
<div class="py-2 px-3 border-t border-gray-200 dark:border-gray-700/60 bg-gray-50 dark:bg-gray-700/20">
<ul class="flex items-center justify-between">
<li>
<button class="btn-xs bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 text-slate-500 dark:text-slate-300 hover:text-slate-600 dark:hover:text-slate-200">Clear</button>
<button class="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-red-500">Clear</button>
</li>
<li>
<button class="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white" @click="dropdownOpen = false" @focusout="dropdownOpen = false">Apply</button>
<button class="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-gray-800 dark:text-gray-300" @click="dropdownOpen = false" @focusout="dropdownOpen = false">Apply</button>
</li>
</ul>
</div>

25
src/components/DropdownHelp.vue
View File

@@ -2,15 +2,16 @@
<div class="relative inline-flex">
<button
ref="trigger"
class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full"
:class="{ 'bg-slate-200': dropdownOpen }"
class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
:class="{ 'bg-gray-200 dark:bg-gray-800': dropdownOpen }"
aria-haspopup="true"
@click.prevent="dropdownOpen = !dropdownOpen"
:aria-expanded="dropdownOpen"
>
<span class="sr-only">Info</span>
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="fill-current text-slate-500 dark:text-slate-400" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
<svg class="fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M9 7.5a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4ZM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
<path fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm6-8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z" />
</svg>
</button>
<transition
@@ -21,16 +22,16 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 py-1.5 rounded shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase pt-1.5 pb-2 px-3">Need help?</div>
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase pt-1.5 pb-2 px-3">Need help?</div>
<ul
ref="dropdown"
@focusin="dropdownOpen = true"
@focusout="dropdownOpen = false"
>
<li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
<svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-500 shrink-0 mr-2" viewBox="0 0 12 12">
<router-link class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
<svg class="w-3 h-3 fill-current text-violet-500 shrink-0 mr-2" viewBox="0 0 12 12">
<rect y="3" width="12" height="9" rx="1" />
<path d="M2 0h8v2H2z" />
</svg>
@@ -38,16 +39,16 @@
</router-link>
</li>
<li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
<svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-500 shrink-0 mr-2" viewBox="0 0 12 12">
<router-link class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
<svg class="w-3 h-3 fill-current text-violet-500 shrink-0 mr-2" viewBox="0 0 12 12">
<path d="M10.5 0h-9A1.5 1.5 0 000 1.5v9A1.5 1.5 0 001.5 12h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 0zM10 7L8.207 5.207l-3 3-1.414-1.414 3-3L5 2h5v5z" />
</svg>
<span>Support Site</span>
</router-link>
</li>
<li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
<svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-500 shrink-0 mr-2" viewBox="0 0 12 12">
<router-link class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
<svg class="w-3 h-3 fill-current text-violet-500 shrink-0 mr-2" viewBox="0 0 12 12">
<path d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z" />
</svg>
<span>Contact us</span>

42
src/components/DropdownNotifications.vue
View File

@@ -2,18 +2,18 @@
<div class="relative inline-flex">
<button
ref="trigger"
class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full"
:class="{ 'bg-slate-200': dropdownOpen }"
class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
:class="{ 'bg-gray-200 dark:bg-gray-800': dropdownOpen }"
aria-haspopup="true"
@click.prevent="dropdownOpen = !dropdownOpen"
:aria-expanded="dropdownOpen"
>
<span class="sr-only">Notifications</span>
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="fill-current text-slate-500 dark:text-slate-400" d="M6.5 0C2.91 0 0 2.462 0 5.5c0 1.075.37 2.074 1 2.922V12l2.699-1.542A7.454 7.454 0 006.5 11c3.59 0 6.5-2.462 6.5-5.5S10.09 0 6.5 0z" />
<path class="fill-current text-slate-400 dark:text-slate-500" d="M16 9.5c0-.987-.429-1.897-1.147-2.639C14.124 10.348 10.66 13 6.5 13c-.103 0-.202-.018-.305-.021C7.231 13.617 8.556 14 10 14c.449 0 .886-.04 1.307-.11L15 16v-4h-.012C15.627 11.285 16 10.425 16 9.5z" />
</svg>
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-rose-500 border-2 border-white dark:border-[#182235] rounded-full"></div>
<svg class="fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M7 0a7 7 0 0 0-7 7c0 1.202.308 2.33.84 3.316l-.789 2.368a1 1 0 0 0 1.265 1.265l2.595-.865a1 1 0 0 0-.632-1.898l-.698.233.3-.9a1 1 0 0 0-.104-.85A4.97 4.97 0 0 1 2 7a5 5 0 0 1 5-5 4.99 4.99 0 0 1 4.093 2.135 1 1 0 1 0 1.638-1.148A6.99 6.99 0 0 0 7 0Z" />
<path d="M11 6a5 5 0 0 0 0 10c.807 0 1.567-.194 2.24-.533l1.444.482a1 1 0 0 0 1.265-1.265l-.482-1.444A4.962 4.962 0 0 0 16 11a5 5 0 0 0-5-5Zm-3 5a3 3 0 0 1 6 0c0 .588-.171 1.134-.466 1.6a1 1 0 0 0-.115.82 1 1 0 0 0-.82.114A2.973 2.973 0 0 1 11 14a3 3 0 0 1-3-3Z" />
</svg>
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-red-500 border-2 border-gray-100 dark:border-gray-900 rounded-full"></div>
</button>
<transition
enter-active-class="transition ease-out duration-200 transform"
@@ -23,29 +23,29 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full -mr-48 sm:mr-0 min-w-80 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 py-1.5 rounded shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase pt-1.5 pb-2 px-4">Notifications</div>
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full -mr-48 sm:mr-0 min-w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase pt-1.5 pb-2 px-4">Notifications</div>
<ul
ref="dropdown"
@focusin="dropdownOpen = true"
@focusout="dropdownOpen = false"
>
<li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
<router-link class="block py-2 px-4 hover:bg-slate-50 dark:hover:bg-slate-700/20" to="#0" @click="dropdownOpen = false">
<span class="block text-sm mb-2">📣 <span class="font-medium text-slate-800 dark:text-slate-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Feb 12, 2021</span>
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
<router-link class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" to="#0" @click="dropdownOpen = false">
<span class="block text-sm mb-2">📣 <span class="font-medium text-gray-800 dark:text-gray-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Feb 12, 2024</span>
</router-link>
</li>
<li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
<router-link class="block py-2 px-4 hover:bg-slate-50 dark:hover:bg-slate-700/20" to="#0" @click="dropdownOpen = false">
<span class="block text-sm mb-2">📣 <span class="font-medium text-slate-800 dark:text-slate-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Feb 9, 2021</span>
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
<router-link class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" to="#0" @click="dropdownOpen = false">
<span class="block text-sm mb-2">📣 <span class="font-medium text-gray-800 dark:text-gray-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Feb 9, 2024</span>
</router-link>
</li>
<li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
<router-link class="block py-2 px-4 hover:bg-slate-50 dark:hover:bg-slate-700/20" to="#0" @click="dropdownOpen = false">
<span class="block text-sm mb-2">🚀<span class="font-medium text-slate-800 dark:text-slate-100">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Jan 24, 2020</span>
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
<router-link class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" to="#0" @click="dropdownOpen = false">
<span class="block text-sm mb-2">🚀<span class="font-medium text-gray-800 dark:text-gray-100">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Jan 24, 2024</span>
</router-link>
</li>
</ul>

16
src/components/DropdownProfile.vue
View File

@@ -9,8 +9,8 @@
>
<img class="w-8 h-8 rounded-full" :src="UserAvatar" width="32" height="32" alt="User" />
<div class="flex items-center truncate">
<span class="truncate ml-2 text-sm font-medium dark:text-slate-300 group-hover:text-slate-800 dark:group-hover:text-slate-200">Acme Inc.</span>
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
<span class="truncate ml-2 text-sm font-medium text-gray-600 dark:text-gray-100 group-hover:text-gray-800 dark:group-hover:text-white">Acme Inc.</span>
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500" viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
@@ -23,10 +23,10 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 py-1.5 rounded shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
<div class="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200 dark:border-slate-700">
<div class="font-medium text-slate-800 dark:text-slate-100">Acme Inc.</div>
<div class="text-xs text-slate-500 dark:text-slate-400 italic">Administrator</div>
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
<div class="pt-0.5 pb-2 px-3 mb-1 border-b border-gray-200 dark:border-gray-700/60">
<div class="font-medium text-gray-800 dark:text-gray-100">Acme Inc.</div>
<div class="text-xs text-gray-500 dark:text-gray-400 italic">Administrator</div>
</div>
<ul
ref="dropdown"
@@ -34,10 +34,10 @@
@focusout="dropdownOpen = false"
>
<li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center py-1 px-3" to="/settings/account" @click="dropdownOpen = false">Settings</router-link>
<router-link class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3" to="/settings/account" @click="dropdownOpen = false">Settings</router-link>
</li>
<li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center py-1 px-3" to="/signin" @click="dropdownOpen = false">Sign Out</router-link>
<router-link class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3" to="/signin" @click="dropdownOpen = false">Sign Out</router-link>
</li>
</ul>
</div>

54
src/components/ModalSearch.vue
View File

@@ -8,7 +8,7 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="modalOpen" class="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity" aria-hidden="true"></div>
<div v-show="modalOpen" class="fixed inset-0 bg-gray-900 bg-opacity-30 z-50 transition-opacity" aria-hidden="true"></div>
</transition>
<!-- Modal dialog -->
<transition
@@ -20,14 +20,14 @@
leave-to-class="opacity-0 translate-y-4"
>
<div v-show="modalOpen" :id="id" class="fixed inset-0 z-50 overflow-hidden flex items-start top-20 mb-4 justify-center px-4 sm:px-6" role="dialog" aria-modal="true">
<div ref="modalContent" class="bg-white dark:bg-slate-800 border border-transparent dark:border-slate-700 overflow-auto max-w-2xl w-full max-h-full rounded shadow-lg">
<div ref="modalContent" class="bg-white dark:bg-gray-800 border border-transparent dark:border-gray-700/60 overflow-auto max-w-2xl w-full max-h-full rounded-lg shadow-lg">
<!-- Search form -->
<form class="border-b border-slate-200 dark:border-slate-700">
<form class="border-b border-gray-200 dark:border-gray-700/60">
<div class="relative">
<label :for="searchId" class="sr-only">Search</label>
<input :id="searchId" class="w-full dark:text-slate-300 bg-white dark:bg-slate-800 border-0 focus:ring-transparent placeholder-slate-400 dark:placeholder-slate-500 appearance-none py-3 pl-10 pr-4" type="search" placeholder="Search Anything…" ref="searchInput" />
<input :id="searchId" class="w-full dark:text-gray-300 bg-white dark:bg-gray-800 border-0 focus:ring-transparent placeholder-gray-400 dark:placeholder-gray-500 appearance-none py-3 pl-10 pr-4" type="search" placeholder="Search Anything…" ref="searchInput" />
<button class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
<svg class="w-4 h-4 shrink-0 fill-current text-slate-400 dark:text-slate-500 group-hover:text-slate-500 dark:group-hover:text-slate-400 ml-4 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<svg class="shrink-0 fill-current text-gray-400 dark:text-gray-500 group-hover:text-gray-500 dark:group-hover:text-gray-400 ml-4 mr-2" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
</svg>
@@ -37,76 +37,76 @@
<div class="py-4 px-2">
<!-- Recent searches -->
<div class="mb-3 last:mb-0">
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase px-2 mb-2">Recent searches</div>
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase px-2 mb-2">Recent searches</div>
<ul class="text-sm">
<li>
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<router-link class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg" to="#0" @click="$emit('close-modal')">
<svg class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Form Builder - 23 hours on-demand video</span>
</router-link>
</li>
<li>
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<router-link class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg" to="#0" @click="$emit('close-modal')">
<svg class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Access Mosaic on mobile and TV</span>
</router-link>
</li>
<li>
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<router-link class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg" to="#0" @click="$emit('close-modal')">
<svg class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Product Update - Q4 2021</span>
<span>Product Update - Q4 2024</span>
</router-link>
</li>
<li>
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<router-link class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg" to="#0" @click="$emit('close-modal')">
<svg class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Master Digital Marketing Strategy course</span>
</router-link>
</li>
<li>
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<router-link class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg" to="#0" @click="$emit('close-modal')">
<svg class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Dedicated forms for products</span>
</router-link>
</li>
<li>
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<router-link class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg" to="#0" @click="$emit('close-modal')">
<svg class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Product Update - Q4 2021</span>
<span>Product Update - Q4 2024</span>
</router-link>
</li>
</ul>
</div>
<!-- Recent pages -->
<div class="mb-3 last:mb-0">
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase px-2 mb-2">Recent pages</div>
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase px-2 mb-2">Recent pages</div>
<ul class="text-sm">
<li>
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<router-link class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg" to="#0" @click="$emit('close-modal')">
<svg class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
</svg>
<span><span class="font-medium">Messages</span> - <span class="text-slate-600 dark:text-slate-400 group-hover:text-white">Conversation / … / Mike Mills</span></span>
<span><span class="font-medium">Messages</span> - <span class="text-gray-600 dark:text-gray-400">Conversation / … / Mike Mills</span></span>
</router-link>
</li>
<li>
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<router-link class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg" to="#0" @click="$emit('close-modal')">
<svg class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3" width="16" height="16" viewBox="0 0 16 16">
<path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
</svg>
<span><span class="font-medium">Messages</span> - <span class="text-slate-600 dark:text-slate-400 group-hover:text-white">Conversation / … / Eva Patrick</span></span>
<span><span class="font-medium">Messages</span> - <span class="text-gray-600 dark:text-gray-400">Conversation / … / Eva Patrick</span></span>
</router-link>
</li>
</ul>

22
src/components/ThemeToggle.vue
View File

@@ -1,14 +1,22 @@
<template>
<div>
<input type="checkbox" name="light-switch" id="light-switch" v-model="isDark" class="light-switch sr-only" />
<label class="flex items-center justify-center cursor-pointer w-8 h-8 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full" for="light-switch">
<svg class="w-4 h-4 dark:hidden" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path class="fill-current text-slate-400" d="M7 0h2v2H7V0Zm5.88 1.637 1.414 1.415-1.415 1.413-1.414-1.414 1.415-1.414ZM14 7h2v2h-2V7Zm-1.05 7.433-1.415-1.414 1.414-1.414 1.415 1.413-1.414 1.415ZM7 14h2v2H7v-2Zm-4.02.363L1.566 12.95l1.415-1.414 1.414 1.415-1.415 1.413ZM0 7h2v2H0V7Zm3.05-5.293L4.465 3.12 3.05 4.535 1.636 3.121 3.05 1.707Z" />
<path class="fill-current text-slate-500" d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z" />
<label
class="flex items-center justify-center cursor-pointer w-8 h-8 hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
for="light-switch">
<svg class="dark:hidden fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 0a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Z" />
<path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-4 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
<path
d="M13.657 3.757a1 1 0 0 0-1.414-1.414l-.354.354a1 1 0 0 0 1.414 1.414l.354-.354ZM13.5 8a1 1 0 0 1 1-1h.5a1 1 0 1 1 0 2h-.5a1 1 0 0 1-1-1ZM13.303 11.889a1 1 0 0 0-1.414 1.414l.354.354a1 1 0 0 0 1.414-1.414l-.354-.354ZM8 13.5a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0v-.5a1 1 0 0 1 1-1ZM4.111 13.303a1 1 0 1 0-1.414-1.414l-.354.354a1 1 0 1 0 1.414 1.414l.354-.354ZM0 8a1 1 0 0 1 1-1h.5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1ZM3.757 2.343a1 1 0 1 0-1.414 1.414l.354.354A1 1 0 1 0 4.11 2.697l-.354-.354Z" />
</svg>
<svg class="w-4 h-4 hidden dark:block" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path class="fill-current text-slate-400" d="M6.2 2C3.2 2.8 1 5.6 1 8.9 1 12.8 4.2 16 8.1 16c3.3 0 6-2.2 6.9-5.2C9.7 12.2 4.8 7.3 6.2 2Z" />
<path class="fill-current text-slate-500" d="M12.5 6a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 6Z" />
<svg class="hidden dark:block fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16"
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.875 4.375a.625.625 0 1 0 1.25 0c.001-.69.56-1.249 1.25-1.25a.625.625 0 1 0 0-1.25 1.252 1.252 0 0 1-1.25-1.25.625.625 0 1 0-1.25 0 1.252 1.252 0 0 1-1.25 1.25.625.625 0 1 0 0 1.25c.69.001 1.249.56 1.25 1.25Z" />
<path
d="M7.019 1.985a1.55 1.55 0 0 0-.483-1.36 1.44 1.44 0 0 0-1.53-.277C2.056 1.553 0 4.5 0 7.9 0 12.352 3.648 16 8.1 16c3.407 0 6.246-2.058 7.51-4.963a1.446 1.446 0 0 0-.25-1.55 1.554 1.554 0 0 0-1.372-.502c-4.01.552-7.539-2.987-6.97-7ZM2 7.9C2 5.64 3.193 3.664 4.961 2.6 4.82 7.245 8.72 11.158 13.36 11.04 12.265 12.822 10.341 14 8.1 14 4.752 14 2 11.248 2 7.9Z" />
</svg>
<span class="sr-only">Switch to light / dark version</span>
</label>

18
src/components/Tooltip.vue
View File

@@ -12,7 +12,7 @@
aria-expanded="tooltipOpen"
@click.prevent
>
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500" viewBox="0 0 16 16">
<svg class="fill-current text-gray-400 dark:text-gray-500" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
</svg>
</button>
@@ -26,7 +26,7 @@
leave-to-class="opacity-0"
>
<div
v-show="tooltipOpen" class="rounded border overflow-hidden shadow-lg"
v-show="tooltipOpen" class="rounded-lg border overflow-hidden shadow-lg"
:class="[
colorClasses(bg),
sizeClasses(size),
@@ -66,24 +66,24 @@ export default {
const sizeClasses = (size) => {
switch (size) {
case 'lg':
return 'min-w-72 p-3';
return 'min-w-72 px-3 py-2';
case 'md':
return 'min-w-56 p-3';
return 'min-w-56 px-3 py-2';
case 'sm':
return 'min-w-44 p-2';
return 'min-w-44 px-3 py-2';
default:
return 'p-2';
return 'px-3 py-2';
}
}
const colorClasses = (bg) => {
switch (bg) {
case 'light':
return 'bg-white text-slate-600 border-slate-200'
return 'bg-white text-gray-600 border-gray-200'
case 'dark':
return 'bg-slate-700 text-slate-100 border-slate-600'
return 'bg-gray-800 text-gray-100 border-gray-700/60'
default:
return 'text-slate-600 bg-white dark:bg-slate-700 dark:text-slate-100 border-slate-200 dark:border-slate-600'
return 'text-gray-600 bg-white dark:bg-gray-800 dark:text-gray-100 border-gray-200 dark:border-gray-700/60'
}
}

17
src/css/additional-styles/flatpickr.css
View File

@@ -20,7 +20,7 @@
.flatpickr-calendar {
border: inherit;
@apply bg-white dark:bg-slate-800 rounded shadow-lg border border-slate-200 dark:border-slate-700 left-1/2;
@apply bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700/60 left-1/2;
margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1);
padding: var(--calendarPadding);
width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
@@ -62,7 +62,7 @@
}
.flatpickr-day {
@apply bg-slate-50 dark:bg-slate-700/20 text-sm font-medium text-slate-600 dark:text-slate-100;
@apply bg-gray-50 dark:bg-gray-700/20 text-sm font-medium text-gray-600 dark:text-gray-100;
max-width: var(--daySize);
height: var(--daySize);
line-height: var(--daySize);
@@ -106,7 +106,7 @@
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
@apply text-slate-400 dark:text-slate-500;
@apply text-gray-400 dark:text-gray-500;
}
.rangeMode .flatpickr-day {
@@ -131,7 +131,7 @@
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
@apply bg-indigo-500 text-indigo-50;
@apply bg-violet-600 text-violet-50;
}
.flatpickr-day.inRange,
@@ -148,7 +148,7 @@
.flatpickr-day.nextMonthDay:focus,
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
@apply bg-indigo-400 text-indigo-50;
@apply bg-violet-500 text-violet-50;
}
.flatpickr-day.inRange,
@@ -168,13 +168,14 @@
.flatpickr-months .flatpickr-next-month {
position: static;
height: auto;
@apply text-slate-600 hover:text-slate-900 dark:text-slate-500 dark:hover:text-slate-300;
@apply text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-300;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
width: 7px;
height: 11px;
fill: currentColor;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
@@ -191,7 +192,7 @@
}
.flatpickr-months .flatpickr-month {
@apply text-slate-800 dark:text-slate-100;
@apply text-gray-800 dark:text-gray-100;
height: auto;
line-height: inherit;
}
@@ -227,7 +228,7 @@
}
span.flatpickr-weekday {
@apply text-slate-400 dark:text-slate-500 font-medium text-xs;
@apply text-gray-400 dark:text-gray-500 font-medium text-xs;
}
.flatpickr-calendar.arrowTop::before,

20
src/css/additional-styles/utility-patterns.css
View File

@@ -30,7 +30,7 @@
.btn-lg,
.btn-sm,
.btn-xs {
@apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded leading-5 shadow-sm transition duration-150 ease-in-out;
@apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition;
}
.btn {
@@ -63,13 +63,9 @@ input[type="search"]::-webkit-search-results-decoration {
.form-select,
.form-checkbox,
.form-radio {
@apply bg-white dark:bg-slate-900/30 border focus:ring-0 focus:ring-offset-0 dark:disabled:bg-slate-700/30 dark:disabled:border-slate-700 dark:disabled:hover:border-slate-700;
@apply bg-white dark:bg-gray-900/30 border focus:ring-0 focus:ring-offset-0 dark:disabled:bg-gray-700/30 dark:disabled:border-gray-700 dark:disabled:hover:border-gray-700;
}
.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox {
@apply rounded;
}
@@ -78,12 +74,12 @@ input[type="search"]::-webkit-search-results-decoration {
.form-textarea,
.form-multiselect,
.form-select {
@apply text-sm text-slate-800 dark:text-slate-100 leading-5 py-2 px-3 border-slate-200 hover:border-slate-300 focus:border-slate-300 dark:border-slate-700 dark:hover:border-slate-600 dark:focus:border-slate-600 shadow-sm;
@apply text-sm text-gray-800 dark:text-gray-100 leading-5 py-2 px-3 border-gray-200 hover:border-gray-300 focus:border-gray-300 dark:border-gray-700/60 dark:hover:border-gray-600 dark:focus:border-gray-600 shadow-sm rounded-lg;
}
.form-input,
.form-textarea {
@apply placeholder-slate-400 dark:placeholder-slate-500;
@apply placeholder-gray-400 dark:placeholder-gray-500;
}
.form-select {
@@ -92,7 +88,7 @@ input[type="search"]::-webkit-search-results-decoration {
.form-checkbox,
.form-radio {
@apply text-indigo-500 checked:bg-indigo-500 dark:checked:border-transparent border border-slate-300 focus:border-indigo-300 dark:border-slate-700 dark:focus:border-indigo-500/50;
@apply text-violet-500 checked:bg-violet-500 dark:checked:border-transparent border border-gray-300 focus:border-violet-300 dark:border-gray-700/60 dark:focus:border-violet-500/50;
}
/* Switch element */
@@ -116,7 +112,7 @@ input[type="search"]::-webkit-search-results-decoration {
}
.form-switch input[type="checkbox"]:checked + label {
@apply bg-indigo-500;
@apply bg-violet-500;
}
.form-switch input[type="checkbox"]:checked + label > span:first-child {
@@ -124,11 +120,11 @@ input[type="search"]::-webkit-search-results-decoration {
}
.form-switch input[type="checkbox"]:disabled + label {
@apply cursor-not-allowed bg-slate-100 dark:bg-slate-700/20 border border-slate-200 dark:border-slate-700;
@apply cursor-not-allowed bg-gray-100 dark:bg-gray-700/20 border border-gray-200 dark:border-gray-700/60;
}
.form-switch input[type="checkbox"]:disabled + label > span:first-child {
@apply bg-slate-400 dark:bg-slate-600;
@apply bg-gray-400 dark:bg-gray-600;
}
/* Chrome, Safari and Opera */

68
src/css/tailwind.config.js
View File

@@ -1,68 +0,0 @@
const plugin = require('tailwindcss/plugin');
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
darkMode: 'class',
theme: {
extend: {
boxShadow: {
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
},
outline: {
blue: '2px solid rgba(0, 112, 244, 0.5)',
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1.5' }],
sm: ['0.875rem', { lineHeight: '1.5715' }],
base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
'2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
'3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
'4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
'5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
'6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
},
screens: {
xs: '480px',
},
borderWidth: {
3: '3px',
},
minWidth: {
36: '9rem',
44: '11rem',
56: '14rem',
60: '15rem',
72: '18rem',
80: '20rem',
},
maxWidth: {
'8xl': '88rem',
'9xl': '96rem',
},
zIndex: {
60: '60',
},
},
},
plugins: [
// eslint-disable-next-line global-require
require('@tailwindcss/forms'),
// add custom variant for expanding sidebar
plugin(({ addVariant, e }) => {
addVariant('sidebar-expanded', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => `.sidebar-expanded .${e(`sidebar-expanded${separator}${className}`)}`);
});
}),
],
};

BIN
src/images/user-36-01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/images/user-36-02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/images/user-36-03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 932 B

BIN
src/images/user-36-04.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

21
src/pages/Dashboard.vue
View File

@@ -10,17 +10,16 @@
<!-- Site header -->
<Header :sidebarOpen="sidebarOpen" @toggle-sidebar="sidebarOpen = !sidebarOpen" />
<main>
<main class="grow">
<div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
<!-- Welcome banner -->
<WelcomeBanner />
<!-- Dashboard actions -->
<div class="sm:flex sm:justify-between sm:items-center mb-8">
<!-- Left: Avatars -->
<DashboardAvatars />
<!-- Left: Title -->
<div class="mb-4 sm:mb-0">
<h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">Dashboard</h1>
</div>
<!-- Right: Actions -->
<div class="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
@@ -30,11 +29,11 @@
<!-- Datepicker built with flatpickr -->
<Datepicker align="right" />
<!-- Add view button -->
<button class="btn bg-indigo-500 hover:bg-indigo-600 text-white">
<svg class="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
<button class="btn bg-gray-900 text-gray-100 hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-800 dark:hover:bg-white">
<svg class="fill-current shrink-0 xs:hidden" width="16" height="16" viewBox="0 0 16 16">
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
<span class="hidden xs:block ml-2">Add view</span>
<span class="max-xs:sr-only">Add View</span>
</button>
</div>
@@ -86,8 +85,6 @@
import { ref } from 'vue'
import Sidebar from '../partials/Sidebar.vue'
import Header from '../partials/Header.vue'
import WelcomeBanner from '../partials/dashboard/WelcomeBanner.vue'
import DashboardAvatars from '../partials/dashboard/DashboardAvatars.vue'
import FilterButton from '../components/DropdownFilter.vue'
import Datepicker from '../components/Datepicker.vue'
import DashboardCard01 from '../partials/dashboard/DashboardCard01.vue'
@@ -110,8 +107,6 @@ export default {
components: {
Sidebar,
Header,
WelcomeBanner,
DashboardAvatars,
FilterButton,
Datepicker,
DashboardCard01,

8
src/partials/Banner.vue
View File

@@ -1,14 +1,14 @@
<template>
<div v-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-50">
<div class="bg-slate-800 border border-transparent dark:border-slate-700 text-slate-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
<div>👉 <a class="hover:underline" href="https://github.com/cruip/vuejs-admin-dashboard-template" target="_blank" rel="noreferrer">Download Mosaic Lite on GitHub</a></div>
<button class="text-slate-500 hover:text-slate-400 ml-5" @click="open = false">
<div class="bg-gray-800 border border-transparent dark:border-gray-700/60 text-gray-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
<div class='text-gray-500 inline-flex'><a class="font-medium hover:underline text-gray-50" href="https://github.com/cruip/vuejs-admin-dashboard-template" target="_blank" rel="noreferrer">Download<span class="hidden sm:inline"> on GitHub</span></a> <span class="italic px-1.5">or</span> <a class="font-medium hover:underline text-emerald-400" href="https://cruip.com/mosaic/" target="_blank" rel="noreferrer">Check Premium Version</a></div>
<button class="text-gray-500 hover:text-gray-400 pl-2 ml-3 border-l border-gray-700/60" @click="open = false">
<span class="sr-only">Close</span>
<svg class="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
<path d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z" />
</svg>
</button>
</div>
</div>
</div>
</template>

42
src/partials/Header.vue
View File

@@ -1,13 +1,23 @@
<template>
<header class="sticky top-0 bg-white dark:bg-[#182235] border-b border-slate-200 dark:border-slate-700 z-30">
<header
class="sticky top-0 before:absolute before:inset-0 before:backdrop-blur-md max-lg:before:bg-white/90 dark:max-lg:before:bg-gray-800/90 before:-z-10 z-30"
:class="[
variant === 'v2' || variant === 'v3' ? 'before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10' : 'max-lg:shadow-sm lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90',
variant === 'v2' ? 'dark:before:bg-gray-800' : '',
variant === 'v3' ? 'dark:before:bg-gray-900' : '',
]"
>
<div class="px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 -mb-px">
<div
class="flex items-center justify-between h-16"
:class="variant === 'v2' || variant === 'v3' ? '' : 'lg:border-b border-gray-200 dark:border-gray-700/60'"
>
<!-- Header: Left side -->
<div class="flex">
<!-- Hamburger button -->
<button class="text-slate-500 hover:text-slate-600 lg:hidden" @click.stop="$emit('toggle-sidebar')" aria-controls="sidebar" :aria-expanded="sidebarOpen">
<button class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 lg:hidden" @click.stop="$emit('toggle-sidebar')" aria-controls="sidebar" :aria-expanded="sidebarOpen">
<span class="sr-only">Open sidebar</span>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="5" width="16" height="2" />
@@ -21,20 +31,25 @@
<!-- Header: Right side -->
<div class="flex items-center space-x-3">
<div>
<button class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full ml-3" :class="{ 'bg-slate-200': searchModalOpen }" @click.stop="searchModalOpen = true" aria-controls="search-modal">
<button
class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full ml-3"
:class="{ 'bg-gray-200 dark:bg-gray-800': searchModalOpen }"
@click.stop="searchModalOpen = true"
aria-controls="search-modal"
>
<span class="sr-only">Search</span>
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="fill-current text-slate-500 dark:text-slate-400" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
<path class="fill-current text-slate-400 dark:text-slate-500" d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
<svg class="fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Z" />
<path d="m13.314 11.9 2.393 2.393a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414Z" />
</svg>
</button>
</button>
<SearchModal id="search-modal" searchId="search" :modalOpen="searchModalOpen" @open-modal="searchModalOpen = true" @close-modal="searchModalOpen = false" />
</div>
<Notifications align="right" />
<Help align="right" />
<ThemeToggle />
<!-- Divider -->
<hr class="w-px h-6 bg-slate-200 dark:bg-slate-700 border-none" />
<hr class="w-px h-6 bg-gray-200 dark:bg-gray-700/60 border-none" />
<UserMenu align="right" />
</div>
@@ -55,7 +70,10 @@ import UserMenu from '../components/DropdownProfile.vue'
export default {
name: 'Header',
props: ['sidebarOpen'],
props: [
'sidebarOpen',
'variant',
],
components: {
SearchModal,
Notifications,
@@ -67,7 +85,7 @@ export default {
const searchModalOpen = ref(false)
return {
searchModalOpen,
}
}
}
}
}
</script>

465
src/partials/Sidebar.vue
View File

File diff suppressed because it is too large Load Diff

4
src/partials/SidebarLinkGroup.vue
View File

@@ -1,5 +1,5 @@
<template>
<li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="activeCondition && 'bg-slate-900'">
<li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-[linear-gradient(135deg,var(--tw-gradient-stops))]" :class="activeCondition && 'from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]'">
<slot :handleClick="handleClick" :expanded="expanded" />
</li>
</template>
@@ -13,7 +13,7 @@ export default {
setup(props) {
const expanded = ref(props.activeCondition)
const handleClick = () =>{
const handleClick = () => {
expanded.value = !expanded.value
}

38
src/partials/dashboard/DashboardAvatars.vue
View File

@@ -1,38 +0,0 @@
<template>
<ul class="flex flex-wrap justify-center sm:justify-start mb-8 sm:mb-0 -space-x-3 -ml-px">
<li>
<router-link class="block" to="#0">
<img class="w-9 h-9 rounded-full" src="../../images/user-36-01.jpg" width="36" height="36" alt="User 01" />
</router-link>
</li>
<li>
<router-link class="block" to="#0">
<img class="w-9 h-9 rounded-full" src="../../images/user-36-02.jpg" width="36" height="36" alt="User 02" />
</router-link>
</li>
<li>
<router-link class="block" to="#0">
<img class="w-9 h-9 rounded-full" src="../../images/user-36-03.jpg" width="36" height="36" alt="User 03" />
</router-link>
</li>
<li>
<router-link class="block" to="#0">
<img class="w-9 h-9 rounded-full" src="../../images/user-36-04.jpg" width="36" height="36" alt="User 04" />
</router-link>
</li>
<li>
<button class="flex justify-center items-center w-9 h-9 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 text-indigo-500 shadow-sm transition duration-150 ml-2">
<span class="sr-only">Add new user</span>
<svg class="w-4 h-4 fill-current" viewBox="0 0 16 16">
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
</button>
</li>
</ul>
</template>
<script>
export default {
name: 'DashboardAvatars',
}
</script>

62
src/partials/dashboard/DashboardCard01.vue
View File

@@ -1,26 +1,24 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2">
<!-- Icon -->
<img src="../../images/icon-01.svg" width="32" height="32" alt="Icon 01" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Plus</h2>
<EditMenu align="right" class="relative inline-flex">
<li>
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 1</a>
<a class="font-medium text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 flex py-1 px-3" href="#0">Option 1</a>
</li>
<li>
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 2</a>
<a class="font-medium text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 flex py-1 px-3" href="#0">Option 2</a>
</li>
<li>
<a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a>
</li>
</EditMenu>
</header>
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Plus</h2>
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase mb-1">Sales</div>
<div class="flex items-start">
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$24,780</div>
<div class="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
<div class="text-3xl font-bold text-gray-800 dark:text-gray-100 mr-2">$24,780</div>
<div class="text-sm font-medium text-green-700 px-1.5 bg-green-500/20 rounded-full">+49%</div>
</div>
</div>
<!-- Chart built with Chart.js 3 -->
@@ -33,6 +31,7 @@
<script>
import { ref } from 'vue'
import { chartAreaGradient } from '../../charts/ChartjsConfig'
import LineChart from '../../charts/LineChart01.vue'
import EditMenu from '../../components/DropdownEditMenu.vue'
@@ -48,15 +47,15 @@ export default {
setup() {
const chartData = ref({
labels: [
'12-01-2020', '01-01-2021', '02-01-2021',
'03-01-2021', '04-01-2021', '05-01-2021',
'06-01-2021', '07-01-2021', '08-01-2021',
'09-01-2021', '10-01-2021', '11-01-2021',
'12-01-2021', '01-01-2022', '02-01-2022',
'03-01-2022', '04-01-2022', '05-01-2022',
'06-01-2022', '07-01-2022', '08-01-2022',
'09-01-2022', '10-01-2022', '11-01-2022',
'12-01-2022', '01-01-2023',
'12-01-2022', '01-01-2023', '02-01-2023',
'03-01-2023', '04-01-2023', '05-01-2023',
'06-01-2023', '07-01-2023', '08-01-2023',
'09-01-2023', '10-01-2023', '11-01-2023',
'12-01-2023', '01-01-2024', '02-01-2024',
'03-01-2024', '04-01-2024', '05-01-2024',
'06-01-2024', '07-01-2024', '08-01-2024',
'09-01-2024', '10-01-2024', '11-01-2024',
'12-01-2024', '01-01-2025',
],
datasets: [
// Indigo line
@@ -68,17 +67,24 @@ export default {
252, 423, 622, 470, 532,
],
fill: true,
backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
borderColor: tailwindConfig().theme.colors.indigo[500],
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
return chartAreaGradient(ctx, chartArea, [
{ stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
{ stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
]);
},
borderColor: tailwindConfig().theme.colors.violet[500],
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
tension: 0.2,
},
// Gray line
{
@@ -88,16 +94,16 @@ export default {
314, 314, 314, 388, 314, 202, 202,
202, 202, 314, 720, 642,
],
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
tension: 0.2,
},
],
})

62
src/partials/dashboard/DashboardCard02.vue
View File

@@ -1,26 +1,24 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2">
<!-- Icon -->
<img src="../../images/icon-02.svg" width="32" height="32" alt="Icon 02" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Advanced</h2>
<EditMenu align="right" class="relative inline-flex">
<li>
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 1</a>
<a class="font-medium text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 flex py-1 px-3" href="#0">Option 1</a>
</li>
<li>
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 2</a>
<a class="font-medium text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 flex py-1 px-3" href="#0">Option 2</a>
</li>
<li>
<a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a>
</li>
</EditMenu>
</header>
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Advanced</h2>
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase mb-1">Sales</div>
<div class="flex items-start">
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$17,489</div>
<div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
<div class="text-3xl font-bold text-gray-800 dark:text-gray-100 mr-2">$17,489</div>
<div class="text-sm font-medium text-red-700 px-1.5 bg-red-500/20 rounded-full">-14%</div>
</div>
</div>
<!-- Chart built with Chart.js 3 -->
@@ -33,6 +31,7 @@
<script>
import { ref } from 'vue'
import { chartAreaGradient } from '../../charts/ChartjsConfig'
import LineChart from '../../charts/LineChart01.vue'
import EditMenu from '../../components/DropdownEditMenu.vue'
@@ -48,15 +47,15 @@ export default {
setup() {
const chartData = ref({
labels: [
'12-01-2020', '01-01-2021', '02-01-2021',
'03-01-2021', '04-01-2021', '05-01-2021',
'06-01-2021', '07-01-2021', '08-01-2021',
'09-01-2021', '10-01-2021', '11-01-2021',
'12-01-2021', '01-01-2022', '02-01-2022',
'03-01-2022', '04-01-2022', '05-01-2022',
'06-01-2022', '07-01-2022', '08-01-2022',
'09-01-2022', '10-01-2022', '11-01-2022',
'12-01-2022', '01-01-2023',
'12-01-2022', '01-01-2023', '02-01-2023',
'03-01-2023', '04-01-2023', '05-01-2023',
'06-01-2023', '07-01-2023', '08-01-2023',
'09-01-2023', '10-01-2023', '11-01-2023',
'12-01-2023', '01-01-2024', '02-01-2024',
'03-01-2024', '04-01-2024', '05-01-2024',
'06-01-2024', '07-01-2024', '08-01-2024',
'09-01-2024', '10-01-2024', '11-01-2024',
'12-01-2024', '01-01-2025',
],
datasets: [
// Indigo line
@@ -68,17 +67,24 @@ export default {
808, 685, 767, 685, 685,
],
fill: true,
backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
borderColor: tailwindConfig().theme.colors.indigo[500],
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
return chartAreaGradient(ctx, chartArea, [
{ stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
{ stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
]);
},
borderColor: tailwindConfig().theme.colors.violet[500],
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
tension: 0.2,
},
// Gray line
{
@@ -88,16 +94,16 @@ export default {
154, 273, 191, 191, 126, 263, 349,
252, 423, 622, 470, 532,
],
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
tension: 0.2,
},
],
})

63
src/partials/dashboard/DashboardCard03.vue
View File

@@ -1,26 +1,24 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2">
<!-- Icon -->
<img src="../../images/icon-03.svg" width="32" height="32" alt="Icon 03" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Professional</h2>
<EditMenu align="right" class="relative inline-flex">
<li>
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 1</a>
<a class="font-medium text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 flex py-1 px-3" href="#0">Option 1</a>
</li>
<li>
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 2</a>
<a class="font-medium text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 flex py-1 px-3" href="#0">Option 2</a>
</li>
<li>
<a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a>
</li>
</EditMenu>
</header>
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Professional</h2>
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
<div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase mb-1">Sales</div>
<div class="flex items-start">
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$9,962</div>
<div class="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+29%</div>
<div class="text-3xl font-bold text-gray-800 dark:text-gray-100 mr-2">$9,962</div>
<div class="text-sm font-medium text-green-700 px-1.5 bg-green-500/20 rounded-full">+29%</div>
</div>
</div>
<!-- Chart built with Chart.js 3 -->
@@ -33,8 +31,8 @@
<script>
import { ref } from 'vue'
import { chartAreaGradient } from '../../charts/ChartjsConfig'
import LineChart from '../../charts/LineChart01.vue'
import Icon from '../../images/icon-03.svg'
import EditMenu from '../../components/DropdownEditMenu.vue'
// Import utilities
@@ -49,15 +47,15 @@ export default {
setup() {
const chartData = ref({
labels: [
'12-01-2020', '01-01-2021', '02-01-2021',
'03-01-2021', '04-01-2021', '05-01-2021',
'06-01-2021', '07-01-2021', '08-01-2021',
'09-01-2021', '10-01-2021', '11-01-2021',
'12-01-2021', '01-01-2022', '02-01-2022',
'03-01-2022', '04-01-2022', '05-01-2022',
'06-01-2022', '07-01-2022', '08-01-2022',
'09-01-2022', '10-01-2022', '11-01-2022',
'12-01-2022', '01-01-2023',
'12-01-2022', '01-01-2023', '02-01-2023',
'03-01-2023', '04-01-2023', '05-01-2023',
'06-01-2023', '07-01-2023', '08-01-2023',
'09-01-2023', '10-01-2023', '11-01-2023',
'12-01-2023', '01-01-2024', '02-01-2024',
'03-01-2024', '04-01-2024', '05-01-2024',
'06-01-2024', '07-01-2024', '08-01-2024',
'09-01-2024', '10-01-2024', '11-01-2024',
'12-01-2024', '01-01-2025',
],
datasets: [
// Indigo line
@@ -69,17 +67,24 @@ export default {
270, 829, 344, 388, 364,
],
fill: true,
backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
borderColor: tailwindConfig().theme.colors.indigo[500],
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
return chartAreaGradient(ctx, chartArea, [
{ stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
{ stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
]);
},
borderColor: tailwindConfig().theme.colors.violet[500],
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
tension: 0.2,
},
// Gray line
{
@@ -89,16 +94,16 @@ export default {
145, 145, 354, 260, 188, 188, 300,
300, 282, 364, 660, 554,
],
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
tension: 0.2,
},
],
})

28
src/partials/dashboard/DashboardCard04.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Direct VS Indirect</h2>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Direct VS Indirect</h2>
</header>
<!-- Chart built with Chart.js 3 -->
<!-- Change the height attribute to adjust the chart height -->
@@ -24,8 +24,8 @@ export default {
setup() {
const chartData = ref({
labels: [
'12-01-2020', '01-01-2021', '02-01-2021',
'03-01-2021', '04-01-2021', '05-01-2021',
'12-01-2022', '01-01-2023', '02-01-2023',
'03-01-2023', '04-01-2023', '05-01-2023',
],
datasets: [
// Light blue bars
@@ -34,10 +34,11 @@ export default {
data: [
800, 1600, 900, 1300, 1950, 1700,
],
backgroundColor: tailwindConfig().theme.colors.blue[400],
hoverBackgroundColor: tailwindConfig().theme.colors.blue[500],
barPercentage: 0.66,
categoryPercentage: 0.66,
backgroundColor: tailwindConfig().theme.colors.sky[500],
hoverBackgroundColor: tailwindConfig().theme.colors.sky[600],
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,
},
// Blue bars
{
@@ -45,10 +46,11 @@ export default {
data: [
4900, 2600, 5350, 4800, 5200, 4800,
],
backgroundColor: tailwindConfig().theme.colors.indigo[500],
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
barPercentage: 0.66,
categoryPercentage: 0.66,
backgroundColor: tailwindConfig().theme.colors.violet[500],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,
},
],
})

22
src/partials/dashboard/DashboardCard05.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Real Time Value</h2>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Real Time Value</h2>
<Tooltip class="ml-2">
<div class="text-xs text-center whitespace-nowrap">Built with <a class="underline" href="https://www.chartjs.org/" target="_blank" rel="noreferrer">Chart.js</a></div>
</Tooltip>
@@ -15,6 +15,7 @@
<script>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import Tooltip from '../../components/Tooltip.vue'
import { chartAreaGradient } from '../../charts/ChartjsConfig'
import RealtimeChart from '../../charts/RealtimeChart.vue'
// Import utilities
@@ -90,14 +91,21 @@ export default {
{
data: [...slicedData.value],
fill: true,
backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
borderColor: tailwindConfig().theme.colors.indigo[500],
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
return chartAreaGradient(ctx, chartArea, [
{ stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
{ stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
]);
},
borderColor: tailwindConfig().theme.colors.violet[500],
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
clip: 20,
tension: 0.2,
},
],
}

18
src/partials/dashboard/DashboardCard06.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Countries</h2>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Top Countries</h2>
</header>
<!-- Chart built with Chart.js 3 -->
<!-- Change the height attribute to adjust the chart height -->
@@ -31,14 +31,14 @@ export default {
35, 30, 35,
],
backgroundColor: [
tailwindConfig().theme.colors.indigo[500],
tailwindConfig().theme.colors.blue[400],
tailwindConfig().theme.colors.indigo[800],
tailwindConfig().theme.colors.violet[500],
tailwindConfig().theme.colors.sky[500],
tailwindConfig().theme.colors.violet[800],
],
hoverBackgroundColor: [
tailwindConfig().theme.colors.indigo[600],
tailwindConfig().theme.colors.blue[500],
tailwindConfig().theme.colors.indigo[900],
tailwindConfig().theme.colors.violet[600],
tailwindConfig().theme.colors.sky[600],
tailwindConfig().theme.colors.violet[900],
],
borderWidth: 0,
},

36
src/partials/dashboard/DashboardCard07.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="col-span-full xl:col-span-8 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Channels</h2>
<div class="col-span-full xl:col-span-8 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Top Channels</h2>
</header>
<div class="p-3">
<!-- Table -->
<div class="overflow-x-auto">
<table class="table-auto w-full dark:text-slate-300">
<table class="table-auto w-full dark:text-gray-300">
<!-- Table header -->
<thead class="text-xs uppercase text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50 rounded-sm">
<thead class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm">
<tr>
<th class="p-2">
<div class="font-semibold text-left">Source</div>
@@ -29,7 +29,7 @@
</tr>
</thead>
<!-- Table body -->
<tbody class="text-sm font-medium divide-y divide-slate-100 dark:divide-slate-700">
<tbody class="text-sm font-medium divide-y divide-gray-100 dark:divide-gray-700/60">
<!-- Row -->
<tr>
<td class="p-2">
@@ -38,14 +38,14 @@
<circle fill="#24292E" cx="18" cy="18" r="18" />
<path d="M18 10.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V24c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" fill="#FFF" />
</svg>
<div class="text-slate-800 dark:text-slate-100">Github.com</div>
<div class="text-gray-800 dark:text-gray-100">Github.com</div>
</div>
</td>
<td class="p-2">
<div class="text-center">2.4K</div>
</td>
<td class="p-2">
<div class="text-center text-emerald-500">$3,877</div>
<div class="text-center text-green-500">$3,877</div>
</td>
<td class="p-2">
<div class="text-center">267</div>
@@ -59,17 +59,17 @@
<td class="p-2">
<div class="flex items-center">
<svg class="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
<circle fill="#1DA1F2" cx="18" cy="18" r="18" />
<path d="M26 13.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H10c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z" fill="#FFF" fill-rule="nonzero" />
<circle fill="#1877F2" cx="18" cy="18" r="18" />
<path d="M16.023 26 16 19h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V16H23l-1 3h-2.72v7h-3.257Z" fill="#FFF" fill-rule="nonzero" />
</svg>
<div class="text-slate-800 dark:text-slate-100">Twitter</div>
<div class="text-gray-800 dark:text-gray-100">Facebook</div>
</div>
</td>
<td class="p-2">
<div class="text-center">2.2K</div>
</td>
<td class="p-2">
<div class="text-center text-emerald-500">$3,426</div>
<div class="text-center text-green-500">$3,426</div>
</td>
<td class="p-2">
<div class="text-center">249</div>
@@ -86,14 +86,14 @@
<circle fill="#EA4335" cx="18" cy="18" r="18" />
<path d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18z" fill="#FFF" fill-rule="nonzero" />
</svg>
<div class="text-slate-800 dark:text-slate-100">Google (organic)</div>
<div class="text-gray-800 dark:text-gray-100">Google (organic)</div>
</div>
</td>
<td class="p-2">
<div class="text-center">2.0K</div>
</td>
<td class="p-2">
<div class="text-center text-emerald-500">$2,444</div>
<div class="text-center text-green-500">$2,444</div>
</td>
<td class="p-2">
<div class="text-center">224</div>
@@ -110,14 +110,14 @@
<circle fill="#4BC9FF" cx="18" cy="18" r="18" />
<path d="M26 14.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C14 19.9 13.4 15 12 15c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z" fill="#FFF" fill-rule="nonzero" />
</svg>
<div class="text-slate-800 dark:text-slate-100">Vimeo.com</div>
<div class="text-gray-800 dark:text-gray-100">Vimeo.com</div>
</div>
</td>
<td class="p-2">
<div class="text-center">1.9K</div>
</td>
<td class="p-2">
<div class="text-center text-emerald-500">$2,236</div>
<div class="text-center text-green-500">$2,236</div>
</td>
<td class="p-2">
<div class="text-center">220</div>
@@ -134,14 +134,14 @@
<circle fill="#0E2439" cx="18" cy="18" r="18" />
<path d="M14.232 12.818V23H11.77V12.818h2.46zM15.772 23V12.818h2.462v4.087h4.012v-4.087h2.456V23h-2.456v-4.092h-4.012V23h-2.461z" fill="#E6ECF4" />
</svg>
<div class="text-slate-800 dark:text-slate-100">Indiehackers.com</div>
<div class="text-gray-800 dark:text-gray-100">Indiehackers.com</div>
</div>
</td>
<td class="p-2">
<div class="text-center">1.7K</div>
</td>
<td class="p-2">
<div class="text-center text-emerald-500">$2,034</div>
<div class="text-center text-green-500">$2,034</div>
</td>
<td class="p-2">
<div class="text-center">204</div>

53
src/partials/dashboard/DashboardCard08.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Sales Over Time (all stores)</h2>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Sales Over Time (all stores)</h2>
</header>
<!-- Chart built with Chart.js 3 -->
<!-- Change the height attribute to adjust the chart height -->
@@ -11,6 +11,7 @@
<script>
import { ref } from 'vue'
import { chartAreaGradient } from '../../charts/ChartjsConfig'
import LineChart from '../../charts/LineChart02.vue'
// Import utilities
@@ -24,15 +25,15 @@ export default {
setup() {
const chartData = ref({
labels: [
'12-01-2020', '01-01-2021', '02-01-2021',
'03-01-2021', '04-01-2021', '05-01-2021',
'06-01-2021', '07-01-2021', '08-01-2021',
'09-01-2021', '10-01-2021', '11-01-2021',
'12-01-2021', '01-01-2022', '02-01-2022',
'03-01-2022', '04-01-2022', '05-01-2022',
'06-01-2022', '07-01-2022', '08-01-2022',
'09-01-2022', '10-01-2022', '11-01-2022',
'12-01-2022', '01-01-2023',
'12-01-2022', '01-01-2023', '02-01-2023',
'03-01-2023', '04-01-2023', '05-01-2023',
'06-01-2023', '07-01-2023', '08-01-2023',
'09-01-2023', '10-01-2023', '11-01-2023',
'12-01-2023', '01-01-2024', '02-01-2024',
'03-01-2024', '04-01-2024', '05-01-2024',
'06-01-2024', '07-01-2024', '08-01-2024',
'09-01-2024', '10-01-2024', '11-01-2024',
'12-01-2024', '01-01-2025',
],
datasets: [
// Indigo line
@@ -44,17 +45,17 @@ export default {
122, 110, 104, 152, 166, 233, 268,
252, 284, 284, 333, 323,
],
borderColor: tailwindConfig().theme.colors.indigo[500],
borderColor: tailwindConfig().theme.colors.violet[500],
fill: false,
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
tension: 0.2,
},
// Blue line
{
@@ -65,16 +66,16 @@ export default {
276, 0, 124, 42, 124, 88, 88,
215, 156, 88, 124, 64,
],
borderColor: tailwindConfig().theme.colors.blue[400],
borderColor: tailwindConfig().theme.colors.sky[500],
fill: false,
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
pointBackgroundColor: tailwindConfig().theme.colors.sky[500],
clip: 20,
tension: 0.2,
},
// emerald line
// green line
{
label: 'Average',
data: [
@@ -83,14 +84,14 @@ export default {
223, 188, 114, 162, 200, 150, 118,
118, 76, 122, 230, 268,
],
borderColor: tailwindConfig().theme.colors.emerald[500],
borderColor: tailwindConfig().theme.colors.green[500],
fill: false,
borderWidth: 2,
tension: 0,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
pointBackgroundColor: tailwindConfig().theme.colors.green[500],
clip: 20,
tension: 0.2,
},
],
})

32
src/partials/dashboard/DashboardCard09.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Sales VS Refunds</h2>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Sales VS Refunds</h2>
<Tooltip class="ml-2" size="lg">
<div class="text-sm">Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
</Tooltip>
</header>
<div class="px-5 py-3">
<div class="flex items-start">
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">+$6,796</div>
<div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-34%</div>
<div class="text-3xl font-bold text-gray-800 dark:text-gray-100 mr-2">+$6,796</div>
<div class="text-sm font-medium text-red-700 px-1.5 bg-red-500/20 rounded-full">-34%</div>
</div>
</div>
<!-- Chart built with Chart.js 3 -->
@@ -37,8 +37,8 @@ export default {
setup() {
const chartData = ref({
labels: [
'12-01-2020', '01-01-2021', '02-01-2021',
'03-01-2021', '04-01-2021', '05-01-2021',
'12-01-2022', '01-01-2023', '02-01-2023',
'03-01-2023', '04-01-2023', '05-01-2023',
],
datasets: [
// Light blue bars
@@ -47,10 +47,11 @@ export default {
data: [
6200, 9200, 6600, 8800, 5200, 9200,
],
backgroundColor: tailwindConfig().theme.colors.indigo[500],
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
barPercentage: 0.66,
categoryPercentage: 0.66,
backgroundColor: tailwindConfig().theme.colors.violet[500],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,
},
// Blue bars
{
@@ -58,10 +59,11 @@ export default {
data: [
-4000, -2600, -5350, -4000, -7500, -2000,
],
backgroundColor: tailwindConfig().theme.colors.indigo[200],
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[300],
barPercentage: 0.66,
categoryPercentage: 0.66,
backgroundColor: tailwindConfig().theme.colors.violet[200],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[300],
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,
},
],
})

12
src/partials/dashboard/DashboardCard10.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Customers</h2>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Customers</h2>
</header>
<div class="p-3">
@@ -9,7 +9,7 @@
<div class="overflow-x-auto">
<table class="table-auto w-full">
<!-- Table header -->
<thead class="text-xs font-semibold uppercase dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50">
<thead class="text-xs font-semibold uppercase dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50">
<tr>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-left">Name</div>
@@ -26,7 +26,7 @@
</tr>
</thead>
<!-- Table body -->
<tbody class="text-sm divide-y divide-slate-100 dark:divide-slate-700">
<tbody class="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
<tr
v-for="customer in customers"
:key="customer.id"
@@ -36,7 +36,7 @@
<div class="w-10 h-10 shrink-0 mr-2 sm:mr-3">
<img class="rounded-full" :src="customer.image" width="40" height="40" :alt="customer.name" />
</div>
<div class="font-medium text-slate-800 dark:text-slate-100">{{customer.name}}</div>
<div class="font-medium text-gray-800 dark:text-gray-100">{{customer.name}}</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">

28
src/partials/dashboard/DashboardCard11.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Reason for Refunds</h2>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Reason for Refunds</h2>
</header>
<div class="px-5 py-3">
<div class="flex items-start">
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">449</div>
<div class="text-sm font-semibold text-white px-1.5 bg-yellow-500 rounded-full">-22%</div>
<div class="text-3xl font-bold text-gray-800 dark:text-gray-100 mr-2">449</div>
<div class="text-sm font-medium text-red-700 px-1.5 bg-red-500/20 rounded-full">-22%</div>
</div>
</div>
</div>
<!-- Chart built with Chart.js 3 -->
<div class="grow">
<!-- Change the height attribute to adjust the chart height -->
@@ -36,32 +36,32 @@ export default {
{
label: 'Having difficulties using the product',
data: [131],
backgroundColor: tailwindConfig().theme.colors.indigo[500],
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
backgroundColor: tailwindConfig().theme.colors.violet[500],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
barPercentage: 1,
categoryPercentage: 1,
},
{
label: 'Missing features I need',
data: [100],
backgroundColor: tailwindConfig().theme.colors.indigo[800],
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[900],
backgroundColor: tailwindConfig().theme.colors.violet[700],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[800],
barPercentage: 1,
categoryPercentage: 1,
},
{
label: 'Not satisfied about the quality of the product',
data: [81],
backgroundColor: tailwindConfig().theme.colors['sky'][400],
hoverBackgroundColor: tailwindConfig().theme.colors['sky'][500],
backgroundColor: tailwindConfig().theme.colors['sky'][500],
hoverBackgroundColor: tailwindConfig().theme.colors['sky'][600],
barPercentage: 1,
categoryPercentage: 1,
},
{
label: 'The product doesn’t look as advertised',
data: [65],
backgroundColor: tailwindConfig().theme.colors.green[400],
hoverBackgroundColor: tailwindConfig().theme.colors.green[500],
backgroundColor: tailwindConfig().theme.colors.green[500],
hoverBackgroundColor: tailwindConfig().theme.colors.green[600],
barPercentage: 1,
categoryPercentage: 1,
},

54
src/partials/dashboard/DashboardCard12.vue
View File

@@ -1,59 +1,59 @@
<template>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Recent Activity</h2>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Recent Activity</h2>
</header>
<div class="p-3">
<!-- Card content -->
<!-- "Today" group -->
<div>
<header class="text-xs uppercase text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
<ul class="my-1">
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-violet-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
</svg>
</div>
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex items-center border-b border-gray-100 dark:border-gray-700/60 text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Nick Mark</a> mentioned <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Sara Smith</a> in a new post</div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Nick Mark</a> mentioned <a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Sara Smith</a> in a new post</div>
<div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
<a class="font-medium text-violet-500 hover:text-violet-600 dark:hover:text-violet-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
</div>
</div>
</div>
</li>
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" />
</svg>
</div>
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex items-center border-b border-gray-100 dark:border-gray-700/60 text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center">The post <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Post Name</a> was removed by <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Nick Mark</a></div>
<div class="self-center">The post <a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Post Name</a> was removed by <a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Nick Mark</a></div>
<div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
<a class="font-medium text-violet-500 hover:text-violet-600 dark:hover:text-violet-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
</div>
</div>
</div>
</li>
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M15 13v-3l-5 4 5 4v-3h8a1 1 0 000-2h-8zM21 21h-8a1 1 0 000 2h8v3l5-4-5-4v3z" />
</svg>
</div>
<div class="grow flex items-center text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Patrick Sullivan</a> published a new <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">post</a></div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Patrick Sullivan</a> published a new <a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">post</a></div>
<div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
<a class="font-medium text-violet-500 hover:text-violet-600 dark:hover:text-violet-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
</div>
</div>
</div>
@@ -62,36 +62,36 @@
</div>
<!-- "Yesterday" group -->
<div>
<header class="text-xs uppercase text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Yesterday</header>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Yesterday</header>
<ul class="my-1">
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-sky-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-sky-50" viewBox="0 0 36 36">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M23 11v2.085c-2.841.401-4.41 2.462-5.8 4.315-1.449 1.932-2.7 3.6-5.2 3.6h-1v2h1c3.5 0 5.253-2.338 6.8-4.4 1.449-1.932 2.7-3.6 5.2-3.6h3l-4-4zM15.406 16.455c.066-.087.125-.162.194-.254.314-.419.656-.872 1.033-1.33C15.475 13.802 14.038 13 12 13h-1v2h1c1.471 0 2.505.586 3.406 1.455zM24 21c-1.471 0-2.505-.586-3.406-1.455-.066.087-.125.162-.194.254-.316.422-.656.873-1.028 1.328.959.878 2.108 1.573 3.628 1.788V25l4-4h-3z" />
</svg>
</div>
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex items-center border-b border-gray-100 dark:border-gray-700/60 text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">240+</a> users have subscribed to <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Newsletter #1</a></div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">240+</a> users have subscribed to <a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Newsletter #1</a></div>
<div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
<a class="font-medium text-violet-500 hover:text-violet-600 dark:hover:text-violet-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
</div>
</div>
</div>
</li>
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-violet-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
</svg>
</div>
<div class="grow flex items-center text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center">The post <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Post Name</a> was suspended by <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Nick Mark</a></div>
<div class="self-center">The post <a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Post Name</a> was suspended by <a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Nick Mark</a></div>
<div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
<a class="font-medium text-violet-500 hover:text-violet-600 dark:hover:text-violet-400" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
</div>
</div>
</div>

68
src/partials/dashboard/DashboardCard13.vue
View File

@@ -1,107 +1,107 @@
<template>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Income/Expenses</h2>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Income/Expenses</h2>
</header>
<div class="p-3">
<!-- Card content -->
<!-- "Today" group -->
<div>
<header class="text-xs uppercase text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
<ul class="my-1">
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
</svg>
</div>
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex items-center border-b border-gray-100 dark:border-gray-700/60 text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Qonto</a> billing</div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Qonto</a> billing</div>
<div class="shrink-0 self-start ml-2">
<span class="font-medium text-slate-800 dark:text-slate-100">-$49.88</span>
<span class="font-medium text-gray-800 dark:text-gray-100">-$49.88</span>
</div>
</div>
</div>
</li>
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
</svg>
</div>
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex items-center border-b border-gray-100 dark:border-gray-700/60 text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div>
<div class="shrink-0 self-start ml-2">
<span class="font-medium text-emerald-500">+249.88</span>
<span class="font-medium text-green-600">+249.88</span>
</div>
</div>
</div>
</li>
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
</svg>
</div>
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex items-center border-b border-gray-100 dark:border-gray-700/60 text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Notion Labs Inc</a></div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Notion Labs Inc</a></div>
<div class="shrink-0 self-start ml-2">
<span class="font-medium text-emerald-500">+99.99</span>
<span class="font-medium text-green-600">+99.99</span>
</div>
</div>
</div>
</li>
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
</svg>
</div>
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex items-center border-b border-gray-100 dark:border-gray-700/60 text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Market Cap Ltd</a></div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">Market Cap Ltd</a></div>
<div class="shrink-0 self-start ml-2">
<span class="font-medium text-emerald-500">+1,200.88</span>
<span class="font-medium text-green-600">+1,200.88</span>
</div>
</div>
</div>
</li>
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-slate-200 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-slate-400" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-gray-200 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-gray-400" viewBox="0 0 36 36">
<path d="M21.477 22.89l-8.368-8.367a6 6 0 008.367 8.367zm1.414-1.413a6 6 0 00-8.367-8.367l8.367 8.367zM18 26a8 8 0 110-16 8 8 0 010 16z" />
</svg>
</div>
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex items-center border-b border-gray-100 dark:border-gray-700/60 text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
<div class="shrink-0 self-start ml-2">
<span class="font-medium text-slate-800 dark:text-slate-100 line-through">+$99.99</span>
<span class="font-medium text-gray-800 dark:text-gray-100 line-through">+$99.99</span>
</div>
</div>
</div>
</li>
<!-- Item -->
<li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
<svg class="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
<path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
</svg>
</div>
<div class="grow flex items-center text-sm py-2">
<div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
<div class="shrink-0 self-start ml-2">
<span class="font-medium text-slate-800 dark:text-slate-100">-$49.88</span>
<span class="font-medium text-gray-800 dark:text-gray-100">-$49.88</span>
</div>
</div>
</div>
@@ -115,6 +115,6 @@
<script>
export default {
name: 'DashboardCard13',
name: 'DashboardCard113',
}
</script>

59
src/partials/dashboard/WelcomeBanner.vue
View File

@@ -1,59 +0,0 @@
<template>
<div class="relative bg-indigo-200 dark:bg-indigo-500 p-4 sm:p-6 rounded-sm overflow-hidden mb-8">
<!-- Background illustration -->
<div class="absolute right-0 top-0 -mt-4 mr-16 pointer-events-none hidden xl:block" aria-hidden="true">
<svg width="319" height="198" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="welcome-a" d="M64 0l64 128-64-20-64 20z" />
<path id="welcome-e" d="M40 0l40 80-40-12.5L0 80z" />
<path id="welcome-g" d="M40 0l40 80-40-12.5L0 80z" />
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="welcome-b">
<stop stop-color="#A5B4FC" offset="0%" />
<stop stop-color="#818CF8" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="welcome-c">
<stop stop-color="#4338CA" offset="0%" />
<stop stop-color="#6366F1" stop-opacity="0" offset="100%" />
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="rotate(64 36.592 105.604)">
<mask id="welcome-d" fill="#fff">
<use xlink:href="#welcome-a" />
</mask>
<use fill="url(#welcome-b)" xlink:href="#welcome-a" />
<path fill="url(#welcome-c)" mask="url(#welcome-d)" d="M64-24h80v152H64z" />
</g>
<g transform="rotate(-51 91.324 -105.372)">
<mask id="welcome-f" fill="#fff">
<use xlink:href="#welcome-e" />
</mask>
<use fill="url(#welcome-b)" xlink:href="#welcome-e" />
<path fill="url(#welcome-c)" mask="url(#welcome-f)" d="M40.333-15.147h50v95h-50z" />
</g>
<g transform="rotate(44 61.546 392.623)">
<mask id="welcome-h" fill="#fff">
<use xlink:href="#welcome-g" />
</mask>
<use fill="url(#welcome-b)" xlink:href="#welcome-g" />
<path fill="url(#welcome-c)" mask="url(#welcome-h)" d="M40.333-15.147h50v95h-50z" />
</g>
</g>
</svg>
</div>
<!-- Content -->
<div class="relative">
<h1 class="text-2xl md:text-3xl text-slate-800 dark:text-slate-100 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
<p class="dark:text-indigo-200">Here is what’s happening with your projects today:</p>
</div>
</div>
</template>
<script>
export default {
name: 'WelcomeBanner',
}
</script>

4
src/utils/Utils.js
View File

@@ -1,8 +1,8 @@
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfigFile from '@tailwindConfig'
export const tailwindConfig = () => {
// Tailwind config
return resolveConfig('./src/css/tailwind.config.js')
return resolveConfig(tailwindConfigFile)
}
export const hexToRGB = (h) => {

139
tailwind.config.js Normal file
View File

@@ -0,0 +1,139 @@
import plugin from "tailwindcss/plugin";
import forms from '@tailwindcss/forms';
export default {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
darkMode: 'class',
theme: {
extend: {
colors: {
gray: {
50: '#F9FAFB',
100: '#F3F4F6',
200: '#E5E7EB',
300: '#BFC4CD',
400: '#9CA3AF',
500: '#6B7280',
600: '#4B5563',
700: '#374151',
800: '#1F2937',
900: '#111827',
950: '#030712',
},
violet: {
50: '#F1EEFF',
100: '#E6E1FF',
200: '#D2CBFF',
300: '#B7ACFF',
400: '#9C8CFF',
500: '#8470FF',
600: '#755FF8',
700: '#5D47DE',
800: '#4634B1',
900: '#2F227C',
950: '#1C1357',
},
sky: {
50: '#E3F3FF',
100: '#D1ECFF',
200: '#B6E1FF',
300: '#A0D7FF',
400: '#7BC8FF',
500: '#67BFFF',
600: '#56B1F3',
700: '#3193DA',
800: '#1C71AE',
900: '#124D79',
950: '#0B324F',
},
green: {
50: '#D2FFE2',
100: '#B1FDCD',
200: '#8BF0B0',
300: '#67E294',
400: '#4BD37D',
500: '#3EC972',
600: '#34BD68',
700: '#239F52',
800: '#15773A',
900: '#0F5429',
950: '#0A3F1E',
},
red: {
50: '#FFE8E8',
100: '#FFD1D1',
200: '#FFB2B2',
300: '#FF9494',
400: '#FF7474',
500: '#FF5656',
600: '#FA4949',
700: '#E63939',
800: '#C52727',
900: '#941818',
950: '#600F0F',
},
yellow: {
50: '#FFF2C9',
100: '#FFE7A0',
200: '#FFE081',
300: '#FFD968',
400: '#F7CD4C',
500: '#F0BB33',
600: '#DFAD2B',
700: '#BC9021',
800: '#816316',
900: '#4F3D0E',
950: '#342809',
},
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1.5' }],
sm: ['0.875rem', { lineHeight: '1.5715' }],
base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
'2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
'3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
'4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
'5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
'6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
},
screens: {
xs: '480px',
},
borderWidth: {
3: '3px',
},
minWidth: {
36: '9rem',
44: '11rem',
56: '14rem',
60: '15rem',
72: '18rem',
80: '20rem',
},
maxWidth: {
'8xl': '88rem',
'9xl': '96rem',
},
zIndex: {
60: '60',
},
},
},
plugins: [
forms,
// add custom variant for expanding sidebar
plugin(({ addVariant, e }) => {
addVariant('sidebar-expanded', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => `.sidebar-expanded .${e(`sidebar-expanded${separator}${className}`)}`);
});
}),
],
};

17
vite.config.js
View File

@@ -1,3 +1,4 @@
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
@@ -8,15 +9,15 @@ export default defineConfig({
},
plugins: [vue()],
resolve: {
alias: [
{
find: /^~.+/,
replacement: (val) => {
return val.replace(/^~/, "");
},
},
],
alias: {
'@tailwindConfig': path.resolve(__dirname, 'tailwind.config.js'),
},
},
optimizeDeps: {
include: [
'@tailwindConfig',
]
},
build: {
commonjsOptions: {
transformMixedEsModules: true,