mirrors2/vuejs-admin-dashboard-template
1
0
Fork 0
mirror of https://github.com/cruip/vuejs-admin-dashboard-template.git synced 2026-02-04 13:42:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

2.0.0

Browse Source
This commit is contained in:
pasqualevitiello
2023-06-01 14:59:41 +02:00
parent 2df9ad1fbe
commit ebb6163110
46 changed files with 1066 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@@ -1,5 +1,9 @@
# CHANGELOG.md # CHANGELOG.md
## [2.0.0] - 2023-06-01
- Dark version added
## [1.4.3] - 2023-04-11 ## [1.4.3] - 2023-04-11
- Update dependencies - Update dependencies

39
index.html
View File

@@ -1,20 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<link rel="icon" href="/favicon.ico" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/favicon.ico" />
<title>Vite App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> <title>Vite App</title>
<body class="font-inter antialiased bg-gray-100 text-gray-600"> </head>
<script>
if (localStorage.getItem('sidebar-expanded') == 'true') { <body class="font-inter antialiased bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400">
document.querySelector('body').classList.add('sidebar-expanded'); <script>
} else { if (localStorage.getItem('sidebar-expanded') == 'true') {
document.querySelector('body').classList.remove('sidebar-expanded'); document.querySelector('body').classList.add('sidebar-expanded');
} } else {
</script> document.querySelector('body').classList.remove('sidebar-expanded');
<div id="app"></div> }
<script type="module" src="/src/main.js"></script> </script>
</body> <div id="app"></div>
</html> <script type="module" src="/src/main.js"></script>
</body>
</html>

656
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@@ -8,20 +8,21 @@
}, },
"dependencies": { "dependencies": {
"@tailwindcss/forms": "^0.5.3", "@tailwindcss/forms": "^0.5.3",
"chart.js": "^4.2.1", "@vueuse/core": "^10.1.2",
"chart.js": "^4.3.0",
"chartjs-adapter-moment": "^1.0.1", "chartjs-adapter-moment": "^1.0.1",
"flatpickr": "^4.6.13", "flatpickr": "^4.6.13",
"moment": "^2.29.4", "moment": "^2.29.4",
"vue": "^3.2.20", "vue": "^3.2.20",
"vue-flatpickr-component": "^11.0.3", "vue-flatpickr-component": "^11.0.3",
"vue-router": "^4.1.6" "vue-router": "^4.2.2"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.1.0", "@vitejs/plugin-vue": "^4.2.3",
"@vue/compiler-sfc": "^3.2.20", "@vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"postcss": "^8.4.21", "postcss": "^8.4.24",
"tailwindcss": "^3.3.1", "tailwindcss": "^3.3.2",
"vite": "^4.2.1" "vite": "^4.3.9"
} }
} }

43
src/charts/BarChart01.vue
View File

@@ -8,7 +8,9 @@
</template> </template>
<script> <script>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { import {
Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend, Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
@@ -28,6 +30,8 @@ export default {
const canvas = ref(null) const canvas = ref(null)
const legend = ref(null) const legend = ref(null)
let chart = null let chart = null
const darkMode = useDark()
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
onMounted(() => { onMounted(() => {
const ctx = canvas.value const ctx = canvas.value
@@ -51,7 +55,11 @@ export default {
ticks: { ticks: {
maxTicksLimit: 5, maxTicksLimit: 5,
callback: (value) => formatValue(value), callback: (value) => formatValue(value),
color: darkMode.value ? textColor.dark : textColor.light,
}, },
grid: {
color: darkMode.value ? gridColor.dark : gridColor.light,
},
}, },
x: { x: {
type: 'time', type: 'time',
@@ -64,10 +72,13 @@ export default {
}, },
border: { border: {
display: false, display: false,
}, },
grid: { grid: {
display: false, display: false,
}, },
ticks: {
color: darkMode.value ? textColor.dark : textColor.light,
},
}, },
}, },
plugins: { plugins: {
@@ -79,6 +90,9 @@ export default {
title: () => false, // Disable tooltip title title: () => false, // Disable tooltip title
label: (context) => formatValue(context.parsed.y), label: (context) => formatValue(context.parsed.y),
}, },
bodyColor: darkMode.value ? tooltipBodyColor.dark : tooltipBodyColor.light,
backgroundColor: darkMode.value ? tooltipBgColor.dark : tooltipBgColor.light,
borderColor: darkMode.value ? tooltipBorderColor.dark : tooltipBorderColor.light,
}, },
}, },
interaction: { interaction: {
@@ -129,14 +143,14 @@ export default {
labelContainer.style.display = 'flex' labelContainer.style.display = 'flex'
labelContainer.style.alignItems = 'center' labelContainer.style.alignItems = 'center'
const value = document.createElement('span') const value = document.createElement('span')
value.style.color = tailwindConfig().theme.colors.gray[800] value.classList.add('text-slate-800', 'dark:text-slate-100')
value.style.fontSize = tailwindConfig().theme.fontSize['3xl'][0] value.style.fontSize = tailwindConfig().theme.fontSize['3xl'][0]
value.style.lineHeight = tailwindConfig().theme.fontSize['3xl'][1].lineHeight value.style.lineHeight = tailwindConfig().theme.fontSize['3xl'][1].lineHeight
value.style.fontWeight = tailwindConfig().theme.fontWeight.bold value.style.fontWeight = tailwindConfig().theme.fontWeight.bold
value.style.marginRight = tailwindConfig().theme.margin[2] value.style.marginRight = tailwindConfig().theme.margin[2]
value.style.pointerEvents = 'none' value.style.pointerEvents = 'none'
const label = document.createElement('span') const label = document.createElement('span')
label.style.color = tailwindConfig().theme.colors.gray[500] label.classList.add('text-slate-500', 'dark:text-slate-400')
label.style.fontSize = tailwindConfig().theme.fontSize.sm[0] label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0) const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0)
@@ -158,6 +172,27 @@ export default {
onUnmounted(() => chart.destroy()) onUnmounted(() => chart.destroy())
watch(
() => darkMode.value,
() => {
if (darkMode.value) {
chart.options.scales.x.ticks.color = textColor.dark
chart.options.scales.y.ticks.color = textColor.dark
chart.options.scales.y.grid.color = gridColor.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.scales.x.ticks.color = textColor.light
chart.options.scales.y.ticks.color = textColor.light
chart.options.scales.y.grid.color = gridColor.light
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light
}
chart.update('none')
})
return { return {
canvas, canvas,
legend, legend,

38
src/charts/BarChart02.vue
View File

@@ -3,7 +3,10 @@
</template> </template>
<script> <script>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { import {
Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend, Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
} from 'chart.js' } from 'chart.js'
@@ -21,6 +24,8 @@ export default {
const canvas = ref(null) const canvas = ref(null)
let chart = null let chart = null
const darkMode = useDark()
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
onMounted(() => { onMounted(() => {
const ctx = canvas.value const ctx = canvas.value
@@ -46,7 +51,11 @@ export default {
ticks: { ticks: {
maxTicksLimit: 5, maxTicksLimit: 5,
callback: (value) => formatValue(value), callback: (value) => formatValue(value),
color: darkMode.value ? textColor.dark : textColor.light,
}, },
grid: {
color: darkMode.value ? gridColor.dark : gridColor.light,
},
}, },
x: { x: {
stacked: true, stacked: true,
@@ -60,13 +69,14 @@ export default {
}, },
border: { border: {
display: false, display: false,
}, },
grid: { grid: {
display: false, display: false,
}, },
ticks: { ticks: {
autoSkipPadding: 48, autoSkipPadding: 48,
maxRotation: 0, maxRotation: 0,
color: darkMode.value ? textColor.dark : textColor.light,
}, },
}, },
}, },
@@ -79,6 +89,9 @@ export default {
title: () => false, // Disable tooltip title title: () => false, // Disable tooltip title
label: (context) => formatValue(context.parsed.y), label: (context) => formatValue(context.parsed.y),
}, },
bodyColor: darkMode.value ? tooltipBodyColor.dark : tooltipBodyColor.light,
backgroundColor: darkMode.value ? tooltipBgColor.dark : tooltipBgColor.light,
borderColor: darkMode.value ? tooltipBorderColor.dark : tooltipBorderColor.light,
}, },
}, },
interaction: { interaction: {
@@ -96,6 +109,27 @@ export default {
onUnmounted(() => chart.destroy()) onUnmounted(() => chart.destroy())
watch(
() => darkMode.value,
() => {
if (darkMode.value) {
chart.options.scales.x.ticks.color = textColor.dark
chart.options.scales.y.ticks.color = textColor.dark
chart.options.scales.y.grid.color = gridColor.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.scales.x.ticks.color = textColor.light
chart.options.scales.y.ticks.color = textColor.light
chart.options.scales.y.grid.color = gridColor.light
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light
}
chart.update('none')
})
return { return {
canvas, canvas,
} }

29
src/charts/BarChart03.vue
View File

@@ -4,14 +4,17 @@
<canvas ref="canvas" :data="data" :width="width" :height="height"></canvas> <canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
</div> </div>
<div class="px-5 pt-2 pb-2"> <div class="px-5 pt-2 pb-2">
<ul ref="legend" class="text-sm divide-y divide-gray-100"></ul> <ul ref="legend" class="text-sm divide-y divide-slate-100 dark:divide-slate-700"></ul>
<ul class="text-sm divide-y divide-gray-100"></ul> <ul class="text-sm divide-y divide-slate-100 dark:divide-slate-700"></ul>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { import {
Chart, BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend, Chart, BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend,
} from 'chart.js' } from 'chart.js'
@@ -30,6 +33,8 @@ export default {
const canvas = ref(null) const canvas = ref(null)
const legend = ref(null) const legend = ref(null)
let chart = null let chart = null
const darkMode = useDark()
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
onMounted(() => { onMounted(() => {
@@ -72,6 +77,9 @@ export default {
title: () => false, // Disable tooltip title title: () => false, // Disable tooltip title
label: (context) => context.parsed.x, label: (context) => context.parsed.x,
}, },
bodyColor: darkMode.value ? tooltipBodyColor.dark : tooltipBodyColor.light,
backgroundColor: darkMode.value ? tooltipBgColor.dark : tooltipBgColor.light,
borderColor: darkMode.value ? tooltipBorderColor.dark : tooltipBorderColor.light,
}, },
}, },
interaction: { interaction: {
@@ -134,6 +142,21 @@ export default {
onUnmounted(() => chart.destroy()) onUnmounted(() => chart.destroy())
watch(
() => darkMode.value,
() => {
if (darkMode.value) {
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.dark
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.dark
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.dark
} else {
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light
}
chart.update('none')
})
return { return {
canvas, canvas,
legend, legend,

45
src/charts/ChartjsConfig.js
View File

@@ -1,20 +1,14 @@
// Import Chart.js // Import Chart.js
import { Chart, Tooltip } from 'chart.js' import { Chart, Tooltip } from 'chart.js'
// Import Tailwind config // Import Tailwind config
import { tailwindConfig } from '../utils/Utils' import { tailwindConfig, hexToRGB } from '../utils/Utils'
Chart.register(Tooltip) Chart.register(Tooltip)
// Define Chart.js default settings // Define Chart.js default settings
Chart.defaults.font.family = '"Inter", sans-serif' Chart.defaults.font.family = '"Inter", sans-serif'
Chart.defaults.font.weight = '500' Chart.defaults.font.weight = '500'
Chart.defaults.color = tailwindConfig().theme.colors.gray[400]
Chart.defaults.scale.grid.color = tailwindConfig().theme.colors.gray[100]
Chart.defaults.plugins.tooltip.titleColor = tailwindConfig().theme.colors.gray[800]
Chart.defaults.plugins.tooltip.bodyColor = tailwindConfig().theme.colors.gray[800]
Chart.defaults.plugins.tooltip.backgroundColor = tailwindConfig().theme.colors.white
Chart.defaults.plugins.tooltip.borderWidth = 1 Chart.defaults.plugins.tooltip.borderWidth = 1
Chart.defaults.plugins.tooltip.borderColor = tailwindConfig().theme.colors.gray[200]
Chart.defaults.plugins.tooltip.displayColors = false Chart.defaults.plugins.tooltip.displayColors = false
Chart.defaults.plugins.tooltip.mode = 'nearest' Chart.defaults.plugins.tooltip.mode = 'nearest'
Chart.defaults.plugins.tooltip.intersect = false Chart.defaults.plugins.tooltip.intersect = false
@@ -39,4 +33,39 @@ Chart.register({
ctx.restore() ctx.restore()
} }
}, },
}) })
export const chartColors = {
textColor: {
light: tailwindConfig().theme.colors.slate[400],
dark: tailwindConfig().theme.colors.slate[500]
},
gridColor: {
light: tailwindConfig().theme.colors.slate[100],
dark: tailwindConfig().theme.colors.slate[700]
},
backdropColor: {
light: tailwindConfig().theme.colors.white,
dark: tailwindConfig().theme.colors.slate[800]
},
tooltipTitleColor: {
light: tailwindConfig().theme.colors.slate[800],
dark: tailwindConfig().theme.colors.slate[100]
},
tooltipBodyColor: {
light: tailwindConfig().theme.colors.slate[800],
dark: tailwindConfig().theme.colors.slate[100]
},
tooltipBgColor: {
light: tailwindConfig().theme.colors.white,
dark: tailwindConfig().theme.colors.slate[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)`
},
}

37
src/charts/DoughnutChart.vue
View File

@@ -10,7 +10,10 @@
</template> </template>
<script> <script>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { import {
Chart, DoughnutController, ArcElement, TimeScale, Tooltip, Chart, DoughnutController, ArcElement, TimeScale, Tooltip,
} from 'chart.js' } from 'chart.js'
@@ -29,6 +32,8 @@ export default {
const canvas = ref(null) const canvas = ref(null)
const legend = ref(null) const legend = ref(null)
let chart = null let chart = null
const darkMode = useDark()
const { tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
onMounted(() => { onMounted(() => {
const ctx = canvas.value const ctx = canvas.value
@@ -44,6 +49,12 @@ export default {
legend: { legend: {
display: false, display: false,
}, },
tooltip: {
titleColor: darkMode.value ? tooltipTitleColor.dark : tooltipTitleColor.light,
bodyColor: darkMode.value ? tooltipBodyColor.dark : tooltipBodyColor.light,
backgroundColor: darkMode.value ? tooltipBgColor.dark : tooltipBgColor.light,
borderColor: darkMode.value ? tooltipBorderColor.dark : tooltipBorderColor.light,
},
}, },
interaction: { interaction: {
intersect: false, intersect: false,
@@ -71,12 +82,7 @@ export default {
li.style.margin = tailwindConfig().theme.margin[1] li.style.margin = tailwindConfig().theme.margin[1]
// Button element // Button element
const button = document.createElement('button') const button = document.createElement('button')
button.classList.add('btn-xs') 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.style.backgroundColor = tailwindConfig().theme.colors.white
button.style.borderWidth = tailwindConfig().theme.borderWidth[1]
button.style.borderColor = tailwindConfig().theme.colors.gray[200]
button.style.color = tailwindConfig().theme.colors.gray[500]
button.style.boxShadow = tailwindConfig().theme.boxShadow.md
button.style.opacity = item.hidden ? '.3' : '' button.style.opacity = item.hidden ? '.3' : ''
button.onclick = () => { button.onclick = () => {
c.toggleDataVisibility(item.index, !item.index) c.toggleDataVisibility(item.index, !item.index)
@@ -109,6 +115,23 @@ export default {
onUnmounted(() => chart.destroy()) onUnmounted(() => chart.destroy())
watch(
() => darkMode.value,
() => {
if (darkMode.value) {
chart.options.plugins.tooltip.titleColor = tooltipTitleColor.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.plugins.tooltip.titleColor = tooltipTitleColor.light
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light
}
chart.update('none')
})
return { return {
canvas, canvas,
legend, legend,

35
src/charts/LineChart01.vue
View File

@@ -3,14 +3,17 @@
</template> </template>
<script> <script>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { import {
Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
} from 'chart.js' } from 'chart.js'
import 'chartjs-adapter-moment' import 'chartjs-adapter-moment'
// Import utilities // Import utilities
import { tailwindConfig, formatValue } from '../utils/Utils' import { formatValue } from '../utils/Utils'
Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip) Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip)
@@ -21,15 +24,18 @@ export default {
const canvas = ref(null) const canvas = ref(null)
let chart = null let chart = null
const darkMode = useDark()
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor, chartAreaBg } = chartColors
onMounted(() => { onMounted(() => {
const ctx = canvas.value const ctx = canvas.value
chart = new Chart(ctx, { chart = new Chart(ctx, {
type: 'line', type: 'line',
data: props.data, data: props.data,
options: { options: {
chartArea: { chartArea: {
backgroundColor: tailwindConfig().theme.colors.gray[50], backgroundColor: darkMode.value ? chartAreaBg.dark : chartAreaBg.light,
}, },
layout: { layout: {
padding: 20, padding: 20,
@@ -54,6 +60,12 @@ export default {
title: () => false, // Disable tooltip title title: () => false, // Disable tooltip title
label: (context) => formatValue(context.parsed.y), label: (context) => formatValue(context.parsed.y),
}, },
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: { legend: {
display: false, display: false,
@@ -71,6 +83,23 @@ export default {
onUnmounted(() => chart.destroy()) onUnmounted(() => chart.destroy())
watch(
() => 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
}
chart.update('none')
})
return { return {
canvas, canvas,
} }

48
src/charts/LineChart02.vue
View File

@@ -2,8 +2,8 @@
<div class="px-5 py-3"> <div class="px-5 py-3">
<div class="flex flex-wrap justify-between items-end"> <div class="flex flex-wrap justify-between items-end">
<div class="flex items-start"> <div class="flex items-start">
<div class="text-3xl font-bold text-gray-800 mr-2">$1,482</div> <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-yellow-500 rounded-full">-22%</div> <div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-22%</div>
</div> </div>
<div class="grow ml-2 mb-1"> <div class="grow ml-2 mb-1">
<ul ref="legend" class="flex flex-wrap justify-end"></ul> <ul ref="legend" class="flex flex-wrap justify-end"></ul>
@@ -17,7 +17,10 @@
</template> </template>
<script> <script>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { import {
Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip, Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
} from 'chart.js' } from 'chart.js'
@@ -36,6 +39,8 @@ export default {
const canvas = ref(null) const canvas = ref(null)
const legend = ref(null) const legend = ref(null)
let chart = null let chart = null
const darkMode = useDark()
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
onMounted(() => { onMounted(() => {
const ctx = canvas.value const ctx = canvas.value
@@ -51,13 +56,15 @@ export default {
border: { border: {
display: false, display: false,
}, },
grid: { beginAtZero: true,
beginAtZero: true,
},
ticks: { ticks: {
maxTicksLimit: 5, maxTicksLimit: 5,
callback: (value) => formatValue(value), callback: (value) => formatValue(value),
color: darkMode.value ? textColor.dark : textColor.light,
}, },
grid: {
color: darkMode.value ? gridColor.dark : gridColor.light,
},
}, },
x: { x: {
type: 'time', type: 'time',
@@ -70,13 +77,14 @@ export default {
}, },
border: { border: {
display: false, display: false,
}, },
grid: { grid: {
display: false, display: false,
}, },
ticks: { ticks: {
autoSkipPadding: 48, autoSkipPadding: 48,
maxRotation: 0, maxRotation: 0,
color: darkMode.value ? textColor.dark : textColor.light,
}, },
}, },
}, },
@@ -89,6 +97,9 @@ export default {
title: () => false, // Disable tooltip title title: () => false, // Disable tooltip title
label: (context) => formatValue(context.parsed.y), label: (context) => formatValue(context.parsed.y),
}, },
bodyColor: darkMode.value ? tooltipBodyColor.dark : tooltipBodyColor.light,
backgroundColor: darkMode.value ? tooltipBgColor.dark : tooltipBgColor.light,
borderColor: darkMode.value ? tooltipBorderColor.dark : tooltipBorderColor.light,
}, },
}, },
interaction: { interaction: {
@@ -133,7 +144,7 @@ export default {
box.style.pointerEvents = 'none' box.style.pointerEvents = 'none'
// Label // Label
const label = document.createElement('span') const label = document.createElement('span')
label.style.color = tailwindConfig().theme.colors.gray[500] label.classList.add('text-slate-500', 'dark:text-slate-400')
label.style.fontSize = tailwindConfig().theme.fontSize.sm[0] label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
const labelText = document.createTextNode(item.text) const labelText = document.createTextNode(item.text)
@@ -150,6 +161,27 @@ export default {
onUnmounted(() => chart.destroy()) onUnmounted(() => chart.destroy())
watch(
() => darkMode.value,
() => {
if (darkMode.value) {
chart.options.scales.x.ticks.color = textColor.dark
chart.options.scales.y.ticks.color = textColor.dark
chart.options.scales.y.grid.color = gridColor.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.scales.x.ticks.color = textColor.light
chart.options.scales.y.ticks.color = textColor.light
chart.options.scales.y.grid.color = gridColor.light
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light
}
chart.update('none')
})
return { return {
canvas, canvas,
legend, legend,

52
src/charts/RealtimeChart.vue
View File

@@ -1,17 +1,20 @@
<template> <template>
<div class="px-5 py-3"> <div class="px-5 py-3">
<div class="flex items-start"> <div class="flex items-start">
<div class="text-3xl font-bold text-gray-800 mr-2 tabular-nums">$<span ref="chartValue">57.81</span></div> <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 ref="chartDeviation" class="text-sm font-semibold text-white px-1.5 rounded-full"></div>
</div> </div>
</div> </div>
<div class="grow"> <div class="grow">
<canvas ref="canvas" :data="data" :width="width" :height="height"></canvas> <canvas ref="canvas" :width="width" :height="height"></canvas>
</div> </div>
</template> </template>
<script> <script>
import { ref, onMounted, onUnmounted, watch } from 'vue' import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { import {
Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip, Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip,
} from 'chart.js' } from 'chart.js'
@@ -31,6 +34,8 @@ export default {
const chartValue = ref(null) const chartValue = ref(null)
const chartDeviation = ref(null) const chartDeviation = ref(null)
let chart = null let chart = null
const darkMode = useDark()
const { textColor, gridColor, tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
// function that updates header values // function that updates header values
const handleHeaderValues = (data, chartValue, chartDeviation) => { const handleHeaderValues = (data, chartValue, chartDeviation) => {
@@ -39,9 +44,9 @@ export default {
const diff = ((currentValue - previousValue) / previousValue) * 100 const diff = ((currentValue - previousValue) / previousValue) * 100
chartValue.value.innerHTML = data.datasets[0].data[data.datasets[0].data.length - 1] chartValue.value.innerHTML = data.datasets[0].data[data.datasets[0].data.length - 1]
if (diff < 0) { if (diff < 0) {
chartDeviation.value.style.backgroundColor = tailwindConfig().theme.colors.yellow[500] chartDeviation.value.style.backgroundColor = tailwindConfig().theme.colors.amber[500]
} else { } else {
chartDeviation.value.style.backgroundColor = tailwindConfig().theme.colors.green[500] chartDeviation.value.style.backgroundColor = tailwindConfig().theme.colors.emerald[500]
} }
chartDeviation.value.innerHTML = `${diff > 0 ? '+' : ''}${diff.toFixed(2)}%` chartDeviation.value.innerHTML = `${diff > 0 ? '+' : ''}${diff.toFixed(2)}%`
} }
@@ -65,7 +70,11 @@ export default {
ticks: { ticks: {
maxTicksLimit: 5, maxTicksLimit: 5,
callback: (value) => formatValue(value), callback: (value) => formatValue(value),
color: darkMode.value ? textColor.dark : textColor.light,
}, },
grid: {
color: darkMode.value ? gridColor.dark : gridColor.light,
},
}, },
x: { x: {
type: 'time', type: 'time',
@@ -79,13 +88,14 @@ export default {
}, },
border: { border: {
display: false, display: false,
}, },
grid: { grid: {
display: false, display: false,
}, },
ticks: { ticks: {
autoSkipPadding: 48, autoSkipPadding: 48,
maxRotation: 0, maxRotation: 0,
color: darkMode.value ? textColor.dark : textColor.light,
}, },
}, },
}, },
@@ -100,6 +110,10 @@ export default {
callbacks: { callbacks: {
label: (context) => formatValue(context.parsed.y), label: (context) => formatValue(context.parsed.y),
}, },
titleColor: darkMode.value ? tooltipTitleColor.dark : tooltipTitleColor.light,
bodyColor: darkMode.value ? tooltipBodyColor.dark : tooltipBodyColor.light,
backgroundColor: darkMode.value ? tooltipBgColor.dark : tooltipBgColor.light,
borderColor: darkMode.value ? tooltipBorderColor.dark : tooltipBorderColor.light,
}, },
}, },
interaction: { interaction: {
@@ -108,7 +122,6 @@ export default {
}, },
animation: false, animation: false,
maintainAspectRatio: false, maintainAspectRatio: false,
resizeDelay: 200,
}, },
}) })
// output header values // output header values
@@ -123,9 +136,34 @@ export default {
// update chart // update chart
chart.data = data chart.data = data
chart.update() chart.update()
// update header values
handleHeaderValues(data, chartValue, chartDeviation)
} }
) )
watch(
() => darkMode.value,
() => {
if (darkMode.value) {
chart.options.scales.x.ticks.color = textColor.dark
chart.options.scales.y.ticks.color = textColor.dark
chart.options.scales.y.grid.color = gridColor.dark
chart.options.plugins.tooltip.titleColor = tooltipTitleColor.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.scales.x.ticks.color = textColor.light
chart.options.scales.y.ticks.color = textColor.light
chart.options.scales.y.grid.color = gridColor.light
chart.options.plugins.tooltip.titleColor = tooltipTitleColor.light
chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light
chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light
chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light
}
chart.update('none')
})
return { return {
canvas, canvas,
chartValue, chartValue,

4
src/components/Datepicker.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="relative"> <div class="relative">
<flat-pickr class="form-input pl-9 text-gray-500 hover:text-gray-600 font-medium focus:border-gray-300 w-60" :config="config" v-model="date"></flat-pickr> <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>
<div class="absolute inset-0 right-auto flex items-center pointer-events-none"> <div class="absolute inset-0 right-auto flex items-center pointer-events-none">
<svg class="w-4 h-4 fill-current text-gray-500 ml-3" viewBox="0 0 16 16"> <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" /> <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> </svg>
</div> </div>

6
src/components/DropdownEditMenu.vue
View File

@@ -2,8 +2,8 @@
<div> <div>
<button <button
ref="trigger" ref="trigger"
class="text-gray-400 hover:text-gray-500 rounded-full" class="rounded-full"
:class="{ 'bg-gray-100 text-gray-500': dropdownOpen }" :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'"
aria-haspopup="true" aria-haspopup="true"
@click.prevent="dropdownOpen = !dropdownOpen" @click.prevent="dropdownOpen = !dropdownOpen"
:aria-expanded="dropdownOpen" :aria-expanded="dropdownOpen"
@@ -23,7 +23,7 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-36 bg-white border border-gray-200 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-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'">
<ul <ul
ref="dropdown" ref="dropdown"
@focusin="dropdownOpen = true" @focusin="dropdownOpen = true"

10
src/components/DropdownFilter.vue
View File

@@ -2,7 +2,7 @@
<div class="relative inline-flex"> <div class="relative inline-flex">
<button <button
ref="trigger" ref="trigger"
class="btn bg-white border-gray-200 hover:border-gray-300 text-gray-500 hover:text-gray-600" 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"
aria-haspopup="true" aria-haspopup="true"
@click.prevent="dropdownOpen = !dropdownOpen" @click.prevent="dropdownOpen = !dropdownOpen"
:aria-expanded="dropdownOpen" :aria-expanded="dropdownOpen"
@@ -20,9 +20,9 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-56 bg-white border border-gray-200 pt-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 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 ref="dropdown"> <div ref="dropdown">
<div class="text-xs font-semibold text-gray-400 uppercase pt-1.5 pb-2 px-4">Filters</div> <div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase pt-1.5 pb-2 px-3">Filters</div>
<ul class="mb-4"> <ul class="mb-4">
<li class="py-1 px-3"> <li class="py-1 px-3">
<label class="flex items-center"> <label class="flex items-center">
@@ -61,10 +61,10 @@
</label> </label>
</li> </li>
</ul> </ul>
<div class="py-2 px-3 border-t border-gray-200 bg-gray-50"> <div class="py-2 px-3 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/20">
<ul class="flex items-center justify-between"> <ul class="flex items-center justify-between">
<li> <li>
<button class="btn-xs bg-white border-gray-200 hover:border-gray-300 text-gray-500 hover:text-gray-600">Clear</button> <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>
</li> </li>
<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-indigo-500 hover:bg-indigo-600 text-white" @click="dropdownOpen = false" @focusout="dropdownOpen = false">Apply</button>

22
src/components/DropdownHelp.vue
View File

@@ -2,15 +2,15 @@
<div class="relative inline-flex"> <div class="relative inline-flex">
<button <button
ref="trigger" ref="trigger"
class="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition duration-150 rounded-full" 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-gray-200': dropdownOpen }" :class="{ 'bg-slate-200': dropdownOpen }"
aria-haspopup="true" aria-haspopup="true"
@click.prevent="dropdownOpen = !dropdownOpen" @click.prevent="dropdownOpen = !dropdownOpen"
:aria-expanded="dropdownOpen" :aria-expanded="dropdownOpen"
> >
<span class="sr-only">Info</span> <span class="sr-only">Info</span>
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="fill-current text-gray-500" 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" /> <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> </svg>
</button> </button>
<transition <transition
@@ -21,16 +21,16 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white border border-gray-200 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-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-gray-400 uppercase pt-1.5 pb-2 px-3">Need help?</div> <div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase pt-1.5 pb-2 px-3">Need help?</div>
<ul <ul
ref="dropdown" ref="dropdown"
@focusin="dropdownOpen = true" @focusin="dropdownOpen = true"
@focusout="dropdownOpen = false" @focusout="dropdownOpen = false"
> >
<li> <li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false"> <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 shrink-0 mr-2" viewBox="0 0 12 12"> <svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-500 shrink-0 mr-2" viewBox="0 0 12 12">
<rect y="3" width="12" height="9" rx="1" /> <rect y="3" width="12" height="9" rx="1" />
<path d="M2 0h8v2H2z" /> <path d="M2 0h8v2H2z" />
</svg> </svg>
@@ -38,16 +38,16 @@
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false"> <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 shrink-0 mr-2" viewBox="0 0 12 12"> <svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-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" /> <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> </svg>
<span>Support Site</span> <span>Support Site</span>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false"> <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 shrink-0 mr-2" viewBox="0 0 12 12"> <svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-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" /> <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> </svg>
<span>Contact us</span> <span>Contact us</span>

38
src/components/DropdownNotifications.vue
View File

@@ -2,18 +2,18 @@
<div class="relative inline-flex"> <div class="relative inline-flex">
<button <button
ref="trigger" ref="trigger"
class="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition duration-150 rounded-full" 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-gray-200': dropdownOpen }" :class="{ 'bg-slate-200': dropdownOpen }"
aria-haspopup="true" aria-haspopup="true"
@click.prevent="dropdownOpen = !dropdownOpen" @click.prevent="dropdownOpen = !dropdownOpen"
:aria-expanded="dropdownOpen" :aria-expanded="dropdownOpen"
> >
<span class="sr-only">Notifications</span> <span class="sr-only">Notifications</span>
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="fill-current text-gray-500" 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-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-gray-400" 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" /> <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> </svg>
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-red-500 border-2 border-white rounded-full"></div> <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>
</button> </button>
<transition <transition
enter-active-class="transition ease-out duration-200 transform" enter-active-class="transition ease-out duration-200 transform"
@@ -23,29 +23,29 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" 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 border border-gray-200 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 -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-gray-400 uppercase pt-1.5 pb-2 px-4">Notifications</div> <div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase pt-1.5 pb-2 px-4">Notifications</div>
<ul <ul
ref="dropdown" ref="dropdown"
@focusin="dropdownOpen = true" @focusin="dropdownOpen = true"
@focusout="dropdownOpen = false" @focusout="dropdownOpen = false"
> >
<li class="border-b border-gray-200 last:border-0"> <li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
<router-link class="block py-2 px-4 hover:bg-gray-50" to="#0" @click="dropdownOpen = false"> <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-gray-800">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-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-gray-400">Feb 12, 2021</span> <span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Feb 12, 2021</span>
</router-link> </router-link>
</li> </li>
<li class="border-b border-gray-200 last:border-0"> <li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
<router-link class="block py-2 px-4 hover:bg-gray-50" to="#0" @click="dropdownOpen = false"> <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-gray-800">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-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-gray-400">Feb 9, 2021</span> <span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Feb 9, 2021</span>
</router-link> </router-link>
</li> </li>
<li class="border-b border-gray-200 last:border-0"> <li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
<router-link class="block py-2 px-4 hover:bg-gray-50" to="#0" @click="dropdownOpen = false"> <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-gray-800">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span> <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-gray-400">Jan 24, 2020</span> <span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Jan 24, 2020</span>
</router-link> </router-link>
</li> </li>
</ul> </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" /> <img class="w-8 h-8 rounded-full" :src="UserAvatar" width="32" height="32" alt="User" />
<div class="flex items-center truncate"> <div class="flex items-center truncate">
<span class="truncate ml-2 text-sm font-medium group-hover:text-gray-800">Acme Inc.</span> <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-gray-400" viewBox="0 0 12 12"> <svg class="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" /> <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg> </svg>
</div> </div>
@@ -23,10 +23,10 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white border border-gray-200 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-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-gray-200"> <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-gray-800">Acme Inc.</div> <div class="font-medium text-slate-800 dark:text-slate-100">Acme Inc.</div>
<div class="text-xs text-gray-500 italic">Administrator</div> <div class="text-xs text-slate-500 dark:text-slate-400 italic">Administrator</div>
</div> </div>
<ul <ul
ref="dropdown" ref="dropdown"
@@ -34,10 +34,10 @@
@focusout="dropdownOpen = false" @focusout="dropdownOpen = false"
> >
<li> <li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" to="/" @click="dropdownOpen = false">Settings</router-link> <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>
</li> </li>
<li> <li>
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" to="/" @click="dropdownOpen = false">Sign Out</router-link> <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>
</li> </li>
</ul> </ul>
</div> </div>

52
src/components/ModalSearch.vue
View File

@@ -8,7 +8,7 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<div v-show="modalOpen" class="fixed inset-0 bg-gray-900 bg-opacity-30 z-50 transition-opacity" aria-hidden="true"></div> <div v-show="modalOpen" class="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity" aria-hidden="true"></div>
</transition> </transition>
<!-- Modal dialog --> <!-- Modal dialog -->
<transition <transition
@@ -19,15 +19,15 @@
leave-from-class="opacity-100 translate-y-0" leave-from-class="opacity-100 translate-y-0"
leave-to-class="opacity-0 translate-y-4" 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 transform px-4 sm:px-6" role="dialog" aria-modal="true"> <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 overflow-auto max-w-2xl w-full max-h-full rounded shadow-lg"> <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">
<!-- Search form --> <!-- Search form -->
<form class="border-b border-gray-200"> <form class="border-b border-slate-200 dark:border-slate-700">
<div class="relative"> <div class="relative">
<label :for="searchId" class="sr-only">Search</label> <label :for="searchId" class="sr-only">Search</label>
<input :id="searchId" class="w-full border-0 focus:ring-transparent placeholder-gray-400 appearance-none py-3 pl-10 pr-4" type="search" placeholder="Search Anything…" ref="searchInput" /> <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" />
<button class="absolute inset-0 right-auto group" type="submit" aria-label="Search"> <button class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
<svg class="w-4 h-4 shrink-0 fill-current text-gray-400 group-hover:text-gray-500 ml-4 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <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">
<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="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" /> <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> </svg>
@@ -37,51 +37,51 @@
<div class="py-4 px-2"> <div class="py-4 px-2">
<!-- Recent searches --> <!-- Recent searches -->
<div class="mb-3 last:mb-0"> <div class="mb-3 last:mb-0">
<div class="text-xs font-semibold text-gray-400 uppercase px-2 mb-2">Recent searches</div> <div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase px-2 mb-2">Recent searches</div>
<ul class="text-sm"> <ul class="text-sm">
<li> <li>
<router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')"> <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-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16"> <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">
<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" /> <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> </svg>
<span>Form Builder - 23 hours on-demand video</span> <span>Form Builder - 23 hours on-demand video</span>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')"> <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-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16"> <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">
<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" /> <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> </svg>
<span>Access Mosaic on mobile and TV</span> <span>Access Mosaic on mobile and TV</span>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')"> <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-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16"> <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">
<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" /> <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> </svg>
<span>Product Update - Q4 2021</span> <span>Product Update - Q4 2021</span>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')"> <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-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16"> <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">
<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" /> <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> </svg>
<span>Master Digital Marketing Strategy course</span> <span>Master Digital Marketing Strategy course</span>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')"> <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-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16"> <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">
<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" /> <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> </svg>
<span>Dedicated forms for products</span> <span>Dedicated forms for products</span>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')"> <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-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16"> <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">
<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" /> <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> </svg>
<span>Product Update - Q4 2021</span> <span>Product Update - Q4 2021</span>
@@ -91,22 +91,22 @@
</div> </div>
<!-- Recent pages --> <!-- Recent pages -->
<div class="mb-3 last:mb-0"> <div class="mb-3 last:mb-0">
<div class="text-xs font-semibold text-gray-400 uppercase px-2 mb-2">Recent pages</div> <div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase px-2 mb-2">Recent pages</div>
<ul class="text-sm"> <ul class="text-sm">
<li> <li>
<router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')"> <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-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16"> <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">
<path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" /> <path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
</svg> </svg>
<span><span class="font-medium text-gray-800 group-hover:text-white">Messages</span> - Conversation / … / Mike Mills</span> <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>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')"> <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-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16"> <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">
<path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" /> <path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
</svg> </svg>
<span><span class="font-medium text-gray-800 group-hover:text-white">Messages</span> - Conversation / … / Eva Patrick</span> <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>
</router-link> </router-link>
</li> </li>
</ul> </ul>

23
src/components/ThemeToggle.vue Normal file
View File

@@ -0,0 +1,23 @@
<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" />
</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>
<span class="sr-only">Switch to light / dark version</span>
</label>
</div>
</template>
<script setup>
import { useDark } from "@vueuse/core";
const isDark = useDark({
selector: 'html',
})
</script>

72
src/components/Tooltip.vue
View File

@@ -12,7 +12,7 @@
aria-expanded="tooltipOpen" aria-expanded="tooltipOpen"
@click.prevent @click.prevent
> >
<svg class="w-4 h-4 fill-current text-gray-400" viewBox="0 0 16 16"> <svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500" 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" /> <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> </svg>
</button> </button>
@@ -26,9 +26,9 @@
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<div <div
v-show="tooltipOpen" class="rounded overflow-hidden" v-show="tooltipOpen" class="rounded border overflow-hidden shadow-lg"
:class="[ :class="[
bg === 'dark' ? 'bg-gray-800' : 'bg-white border border-gray-200 shadow-lg', colorClasses(bg),
sizeClasses(size), sizeClasses(size),
positionInnerClasses(position) positionInnerClasses(position)
]" ]"
@@ -53,46 +53,58 @@ export default {
const positionOuterClasses = (position) => { const positionOuterClasses = (position) => {
switch (position) { switch (position) {
case 'right': case 'right':
return 'left-full top-1/2 transform -translate-y-1/2'; return 'left-full top-1/2 -translate-y-1/2';
case 'left': case 'left':
return 'right-full top-1/2 transform -translate-y-1/2'; return 'right-full top-1/2 -translate-y-1/2';
case 'bottom': case 'bottom':
return 'top-full left-1/2 transform -translate-x-1/2'; return 'top-full left-1/2 -translate-x-1/2';
default: default:
return 'bottom-full left-1/2 transform -translate-x-1/2'; return 'bottom-full left-1/2 -translate-x-1/2';
} }
} }
const sizeClasses = (size) => { const sizeClasses = (size) => {
switch (size) { switch (size) {
case 'lg': case 'lg':
return 'min-w-72 p-3'; return 'min-w-72 p-3';
case 'md': case 'md':
return 'min-w-56 p-3'; return 'min-w-56 p-3';
case 'sm': case 'sm':
return 'min-w-44 p-2'; return 'min-w-44 p-2';
default: default:
return 'p-2'; return 'p-2';
}
} }
}
const positionInnerClasses = (position) => { const colorClasses = (bg) => {
switch (position) { switch (bg) {
case 'right': case 'light':
return 'ml-2'; return 'bg-white text-slate-600 border-slate-200'
case 'left': case 'dark':
return 'mr-2'; return 'bg-slate-700 text-slate-100 border-slate-600'
case 'bottom': default:
return 'mt-2'; return 'text-slate-600 bg-white dark:bg-slate-700 dark:text-slate-100 border-slate-200 dark:border-slate-600'
default: }
return 'mb-2'; }
}
} const positionInnerClasses = (position) => {
switch (position) {
case 'right':
return 'ml-2';
case 'left':
return 'mr-2';
case 'bottom':
return 'mt-2';
default:
return 'mb-2';
}
}
return { return {
tooltipOpen, tooltipOpen,
positionOuterClasses, positionOuterClasses,
sizeClasses, sizeClasses,
colorClasses,
positionInnerClasses, positionInnerClasses,
} }
} }

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

@@ -20,7 +20,7 @@
.flatpickr-calendar { .flatpickr-calendar {
border: inherit; border: inherit;
@apply rounded shadow-lg border border-slate-200 left-1/2; @apply bg-white dark:bg-slate-800 rounded shadow-lg border border-slate-200 dark:border-slate-700 left-1/2;
margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1); margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1);
padding: var(--calendarPadding); padding: var(--calendarPadding);
width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2)); width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
@@ -62,7 +62,7 @@
} }
.flatpickr-day { .flatpickr-day {
@apply bg-slate-50 text-sm font-medium text-slate-600; @apply bg-slate-50 dark:bg-slate-700/20 text-sm font-medium text-slate-600 dark:text-slate-100;
max-width: var(--daySize); max-width: var(--daySize);
height: var(--daySize); height: var(--daySize);
line-height: var(--daySize); line-height: var(--daySize);
@@ -74,6 +74,16 @@
border: none; border: none;
} }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
@apply bg-transparent;
}
.flatpickr-day, .flatpickr-day,
.flatpickr-day.prevMonthDay, .flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay, .flatpickr-day.nextMonthDay,
@@ -96,7 +106,7 @@
.flatpickr-day.notAllowed, .flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay { .flatpickr-day.notAllowed.nextMonthDay {
@apply text-slate-400; @apply text-slate-400 dark:text-slate-500;
} }
.rangeMode .flatpickr-day { .rangeMode .flatpickr-day {
@@ -158,7 +168,7 @@
.flatpickr-months .flatpickr-next-month { .flatpickr-months .flatpickr-next-month {
position: static; position: static;
height: auto; height: auto;
@apply text-slate-600; @apply text-slate-600 hover:text-slate-900 dark:text-slate-500 dark:hover:text-slate-300;
} }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-prev-month svg,
@@ -167,12 +177,9 @@
height: 11px; height: 11px;
} }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { .flatpickr-months .flatpickr-next-month:hover svg {
fill: inherit; @apply fill-current;
@apply text-slate-400;
} }
.flatpickr-months .flatpickr-prev-month { .flatpickr-months .flatpickr-prev-month {
@@ -184,7 +191,7 @@
} }
.flatpickr-months .flatpickr-month { .flatpickr-months .flatpickr-month {
@apply text-slate-800; @apply text-slate-800 dark:text-slate-100;
height: auto; height: auto;
line-height: inherit; line-height: inherit;
} }
@@ -220,7 +227,7 @@
} }
span.flatpickr-weekday { span.flatpickr-weekday {
@apply text-slate-400 font-medium text-xs; @apply text-slate-400 dark:text-slate-500 font-medium text-xs;
} }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::before,

57
src/css/additional-styles/range-slider.css
View File

@@ -1,57 +0,0 @@
/* Range slider */
:root {
--range-thumb-size: 36px;
}
input[type=range] {
appearance: none;
background: #ccc;
border-radius: 3px;
height: 6px;
margin-top: (--range-thumb-size - 6px) * 0.5;
margin-bottom: (--range-thumb-size - 6px) * 0.5;
--thumb-size: #{--range-thumb-size};
}
input[type=range]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background-color: #000;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border-radius: 50%;
cursor: pointer;
height: --range-thumb-size;
width: --range-thumb-size;
}
input[type=range]::-moz-range-thumb {
background-color: #000;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border: none;
border-radius: 50%;
cursor: pointer;
height: --range-thumb-size;
width: --range-thumb-size;
}
input[type=range]::-ms-thumb {
background-color: #000;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border-radius: 50%;
cursor: pointer;
height: --range-thumb-size;
width: --range-thumb-size;
}
input[type=range]::-moz-focus-outer {
border: 0;
}

8
src/css/additional-styles/theme.css
View File

@@ -1,8 +0,0 @@
.form-input:focus,
.form-textarea:focus,
.form-multiselect:focus,
.form-select:focus,
.form-checkbox:focus,
.form-radio:focus {
@apply ring-0;
}

35
src/css/additional-styles/toggle-switch.css
View File

@@ -1,35 +0,0 @@
/* Switch element */
.form-switch {
@apply relative select-none;
width: 44px;
}
.form-switch label {
@apply block overflow-hidden cursor-pointer h-6 rounded-full;
}
.form-switch label > span:first-child {
@apply absolute block rounded-full;
width: 20px;
height: 20px;
top: 2px;
left: 2px;
right: 50%;
transition: all .15s ease-out;
}
.form-switch input[type="checkbox"]:checked + label {
@apply bg-indigo-500;
}
.form-switch input[type="checkbox"]:checked + label > span:first-child {
left: 22px;
}
.form-switch input[type="checkbox"]:disabled + label {
@apply cursor-not-allowed bg-slate-100 border border-slate-200;
}
.form-switch input[type="checkbox"]:disabled + label > span:first-child {
@apply bg-slate-400;
}

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

@@ -63,7 +63,7 @@ input[type="search"]::-webkit-search-results-decoration {
.form-select, .form-select,
.form-checkbox, .form-checkbox,
.form-radio { .form-radio {
@apply text-sm text-slate-800 bg-white border; @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;
} }
.form-input, .form-input,
@@ -78,12 +78,12 @@ input[type="search"]::-webkit-search-results-decoration {
.form-textarea, .form-textarea,
.form-multiselect, .form-multiselect,
.form-select { .form-select {
@apply leading-5 py-2 px-3 border-slate-200 hover:border-slate-300 focus:border-indigo-300 shadow-sm; @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;
} }
.form-input, .form-input,
.form-textarea { .form-textarea {
@apply placeholder-slate-400; @apply placeholder-slate-400 dark:placeholder-slate-500;
} }
.form-select { .form-select {
@@ -92,7 +92,43 @@ input[type="search"]::-webkit-search-results-decoration {
.form-checkbox, .form-checkbox,
.form-radio { .form-radio {
@apply text-indigo-500 border border-slate-300; @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;
}
/* Switch element */
.form-switch {
@apply relative select-none;
width: 44px;
}
.form-switch label {
@apply block overflow-hidden cursor-pointer h-6 rounded-full;
}
.form-switch label > span:first-child {
@apply absolute block rounded-full;
width: 20px;
height: 20px;
top: 2px;
left: 2px;
right: 50%;
transition: all .15s ease-out;
}
.form-switch input[type="checkbox"]:checked + label {
@apply bg-indigo-500;
}
.form-switch input[type="checkbox"]:checked + label > span:first-child {
left: 22px;
}
.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;
}
.form-switch input[type="checkbox"]:disabled + label > span:first-child {
@apply bg-slate-400 dark:bg-slate-600;
} }
/* Chrome, Safari and Opera */ /* Chrome, Safari and Opera */

3
src/css/style.css
View File

@@ -5,9 +5,6 @@
/* Additional styles */ /* Additional styles */
@import 'additional-styles/utility-patterns.css'; @import 'additional-styles/utility-patterns.css';
@import 'additional-styles/range-slider.css';
@import 'additional-styles/toggle-switch.css';
@import 'additional-styles/flatpickr.css'; @import 'additional-styles/flatpickr.css';
@import 'additional-styles/theme.css';
@import 'tailwindcss/utilities'; @import 'tailwindcss/utilities';

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

@@ -5,6 +5,7 @@ module.exports = {
'./index.html', './index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}', './src/**/*.{vue,js,ts,jsx,tsx}',
], ],
darkMode: 'class',
theme: { theme: {
extend: { extend: {
boxShadow: { boxShadow: {

4
src/partials/Banner.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div v-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-60"> <div v-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-60">
<div class="bg-gray-800 text-gray-50 text-sm p-3 md:rounded shadow-lg flex justify-between"> <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> <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-gray-500 hover:text-gray-400 ml-5" @click="open = false"> <button class="text-slate-500 hover:text-slate-400 ml-5" @click="open = false">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<svg class="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16"> <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" /> <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" />

37
src/partials/Header.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<header class="sticky top-0 bg-white border-b border-gray-200 z-30"> <header class="sticky top-0 bg-white dark:bg-[#182235] border-b border-slate-200 dark:border-slate-700 z-30">
<div class="px-4 sm:px-6 lg:px-8"> <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 -mb-px">
@@ -7,7 +7,7 @@
<div class="flex"> <div class="flex">
<!-- Hamburger button --> <!-- Hamburger button -->
<button class="text-gray-500 hover:text-gray-600 lg:hidden" @click.stop="$emit('toggle-sidebar')" aria-controls="sidebar" :aria-expanded="sidebarOpen"> <button class="text-slate-500 hover:text-slate-600 lg:hidden" @click.stop="$emit('toggle-sidebar')" aria-controls="sidebar" :aria-expanded="sidebarOpen">
<span class="sr-only">Open sidebar</span> <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"> <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" /> <rect x="4" y="5" width="16" height="2" />
@@ -20,24 +20,21 @@
<!-- Header: Right side --> <!-- Header: Right side -->
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
<div>
<button <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">
class="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition duration-150 rounded-full ml-3" <span class="sr-only">Search</span>
:class="{ 'bg-gray-200': searchModalOpen }" <svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
@click.stop="searchModalOpen = true" <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" />
aria-controls="search-modal" <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>
<span class="sr-only">Search</span> </button>
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <SearchModal id="search-modal" searchId="search" :modalOpen="searchModalOpen" @open-modal="searchModalOpen = true" @close-modal="searchModalOpen = false" />
<path class="fill-current text-gray-500" 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" /> </div>
<path class="fill-current text-gray-400" 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>
</button>
<SearchModal id="search-modal" searchId="search" :modalOpen="searchModalOpen" @open-modal="searchModalOpen = true" @close-modal="searchModalOpen = false" />
<Notifications align="right" /> <Notifications align="right" />
<Help align="right" /> <Help align="right" />
<ThemeToggle />
<!-- Divider --> <!-- Divider -->
<hr class="w-px h-6 bg-gray-200" /> <hr class="w-px h-6 bg-slate-200 dark:bg-slate-700 border-none" />
<UserMenu align="right" /> <UserMenu align="right" />
</div> </div>
@@ -53,6 +50,7 @@ import { ref } from 'vue'
import SearchModal from '../components/ModalSearch.vue' import SearchModal from '../components/ModalSearch.vue'
import Notifications from '../components/DropdownNotifications.vue' import Notifications from '../components/DropdownNotifications.vue'
import Help from '../components/DropdownHelp.vue' import Help from '../components/DropdownHelp.vue'
import ThemeToggle from '../components/ThemeToggle.vue'
import UserMenu from '../components/DropdownProfile.vue' import UserMenu from '../components/DropdownProfile.vue'
export default { export default {
@@ -62,13 +60,14 @@ export default {
SearchModal, SearchModal,
Notifications, Notifications,
Help, Help,
ThemeToggle,
UserMenu, UserMenu,
}, },
setup() { setup() {
const searchModalOpen = ref(false) const searchModalOpen = ref(false)
return { return {
searchModalOpen, searchModalOpen,
} }
} }
} }
</script> </script>

2
src/partials/SidebarLinkGroup.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="activeCondition && 'bg-gray-900'"> <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="activeCondition && 'bg-slate-900'">
<slot :handleClick="handleClick" :expanded="expanded" /> <slot :handleClick="handleClick" :expanded="expanded" />
</li> </li>
</template> </template>

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

@@ -21,7 +21,7 @@
</router-link> </router-link>
</li> </li>
<li> <li>
<button class="flex justify-center items-center w-9 h-9 rounded-full bg-white border border-gray-200 hover:border-gray-300 text-indigo-500 shadow-sm transition duration-150 ml-2"> <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> <span class="sr-only">Add new user</span>
<svg class="w-4 h-4 fill-current" viewBox="0 0 16 16"> <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" /> <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" />

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

@@ -1,30 +1,30 @@
<template> <template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-gray-200"> <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="px-5 pt-5"> <div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2"> <header class="flex justify-between items-start mb-2">
<!-- Icon --> <!-- Icon -->
<img src="../../images/icon-01.svg" width="32" height="32" alt="Icon 01" /> <img src="../../images/icon-01.svg" width="32" height="32" alt="Icon 01" />
<EditMenu align="right" class="relative inline-flex"> <EditMenu align="right" class="relative inline-flex">
<li> <li>
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 1</a> <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>
</li> </li>
<li> <li>
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 2</a> <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>
</li> </li>
<li> <li>
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a> <a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
</li> </li>
</EditMenu> </EditMenu>
</header> </header>
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Plus</h2> <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-gray-400 uppercase mb-1">Sales</div> <div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
<div class="flex items-start"> <div class="flex items-start">
<div class="text-3xl font-bold text-gray-800 mr-2">$24,780</div> <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-green-500 rounded-full">+49%</div> <div class="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
</div> </div>
</div> </div>
<!-- Chart built with Chart.js 3 --> <!-- Chart built with Chart.js 3 -->
<div class="grow"> <div class="grow max-sm:max-h-[128px] xl:max-h-[128px]">
<!-- Change the height attribute to adjust the chart height --> <!-- Change the height attribute to adjust the chart height -->
<LineChart :data="chartData" width="389" height="128" /> <LineChart :data="chartData" width="389" height="128" />
</div> </div>
@@ -75,6 +75,9 @@ export default {
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20, clip: 20,
}, },
// Gray line // Gray line
@@ -85,12 +88,15 @@ export default {
314, 314, 314, 388, 314, 202, 202, 314, 314, 314, 388, 314, 202, 202,
202, 202, 314, 720, 642, 202, 202, 314, 720, 642,
], ],
borderColor: tailwindConfig().theme.colors.gray[300], borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
borderWidth: 2, borderWidth: 2,
tension: 0, tension: 0,
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.gray[300], pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20, clip: 20,
}, },
], ],

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

@@ -1,30 +1,30 @@
<template> <template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-gray-200"> <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="px-5 pt-5"> <div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2"> <header class="flex justify-between items-start mb-2">
<!-- Icon --> <!-- Icon -->
<img src="../../images/icon-02.svg" width="32" height="32" alt="Icon 02" /> <img src="../../images/icon-02.svg" width="32" height="32" alt="Icon 02" />
<EditMenu align="right" class="relative inline-flex"> <EditMenu align="right" class="relative inline-flex">
<li> <li>
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 1</a> <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>
</li> </li>
<li> <li>
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 2</a> <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>
</li> </li>
<li> <li>
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a> <a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
</li> </li>
</EditMenu> </EditMenu>
</header> </header>
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Advanced</h2> <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-gray-400 uppercase mb-1">Sales</div> <div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
<div class="flex items-start"> <div class="flex items-start">
<div class="text-3xl font-bold text-gray-800 mr-2">$17,489</div> <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-yellow-500 rounded-full">-14%</div> <div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
</div> </div>
</div> </div>
<!-- Chart built with Chart.js 3 --> <!-- Chart built with Chart.js 3 -->
<div class="grow"> <div class="grow max-sm:max-h-[128px] xl:max-h-[128px]">
<!-- Change the height attribute to adjust the chart height --> <!-- Change the height attribute to adjust the chart height -->
<LineChart :data="chartData" width="389" height="128" /> <LineChart :data="chartData" width="389" height="128" />
</div> </div>
@@ -34,7 +34,6 @@
<script> <script>
import { ref } from 'vue' import { ref } from 'vue'
import LineChart from '../../charts/LineChart01.vue' import LineChart from '../../charts/LineChart01.vue'
import Icon from '../../images/icon-02.svg'
import EditMenu from '../../components/DropdownEditMenu.vue' import EditMenu from '../../components/DropdownEditMenu.vue'
// Import utilities // Import utilities
@@ -76,6 +75,9 @@ export default {
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20, clip: 20,
}, },
// Gray line // Gray line
@@ -86,12 +88,15 @@ export default {
154, 273, 191, 191, 126, 263, 349, 154, 273, 191, 191, 126, 263, 349,
252, 423, 622, 470, 532, 252, 423, 622, 470, 532,
], ],
borderColor: tailwindConfig().theme.colors.gray[300], borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
borderWidth: 2, borderWidth: 2,
tension: 0, tension: 0,
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.gray[300], pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20, clip: 20,
}, },
], ],

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

@@ -1,30 +1,30 @@
<template> <template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-gray-200"> <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="px-5 pt-5"> <div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2"> <header class="flex justify-between items-start mb-2">
<!-- Icon --> <!-- Icon -->
<img src="../../images/icon-03.svg" width="32" height="32" alt="Icon 03" /> <img src="../../images/icon-03.svg" width="32" height="32" alt="Icon 03" />
<EditMenu align="right" class="relative inline-flex"> <EditMenu align="right" class="relative inline-flex">
<li> <li>
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 1</a> <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>
</li> </li>
<li> <li>
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 2</a> <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>
</li> </li>
<li> <li>
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a> <a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
</li> </li>
</EditMenu> </EditMenu>
</header> </header>
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Professional</h2> <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-gray-400 uppercase mb-1">Sales</div> <div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
<div class="flex items-start"> <div class="flex items-start">
<div class="text-3xl font-bold text-gray-800 mr-2">$9,962</div> <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-green-500 rounded-full">+29%</div> <div class="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+29%</div>
</div> </div>
</div> </div>
<!-- Chart built with Chart.js 3 --> <!-- Chart built with Chart.js 3 -->
<div class="grow"> <div class="grow max-sm:max-h-[128px] xl:max-h-[128px]">
<!-- Change the height attribute to adjust the chart height --> <!-- Change the height attribute to adjust the chart height -->
<LineChart :data="chartData" width="389" height="128" /> <LineChart :data="chartData" width="389" height="128" />
</div> </div>
@@ -76,6 +76,9 @@ export default {
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20, clip: 20,
}, },
// Gray line // Gray line
@@ -86,12 +89,15 @@ export default {
145, 145, 354, 260, 188, 188, 300, 145, 145, 354, 260, 188, 188, 300,
300, 282, 364, 660, 554, 300, 282, 364, 660, 554,
], ],
borderColor: tailwindConfig().theme.colors.gray[300], borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
borderWidth: 2, borderWidth: 2,
tension: 0, tension: 0,
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.gray[300], pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20, clip: 20,
}, },
], ],

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-gray-800">Direct VS Indirect</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Direct VS Indirect</h2>
</header> </header>
<!-- Chart built with Chart.js 3 --> <!-- Chart built with Chart.js 3 -->
<!-- Change the height attribute to adjust the chart height --> <!-- Change the height attribute to adjust the chart height -->

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100 flex items-center"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
<h2 class="font-semibold text-gray-800">Real Time Value</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Real Time Value</h2>
<Tooltip class="ml-2"> <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> <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> </Tooltip>

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-gray-800">Top Countries</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Countries</h2>
</header> </header>
<!-- Chart built with Chart.js 3 --> <!-- Chart built with Chart.js 3 -->
<!-- Change the height attribute to adjust the chart height --> <!-- Change the height attribute to adjust the chart height -->
@@ -12,7 +12,6 @@
<script> <script>
import { ref } from 'vue' import { ref } from 'vue'
import DoughnutChart from '../../charts/DoughnutChart.vue' import DoughnutChart from '../../charts/DoughnutChart.vue'
import EditMenu from '../../components/DropdownEditMenu.vue'
// Import utilities // Import utilities
import { tailwindConfig } from '../../utils/Utils' import { tailwindConfig } from '../../utils/Utils'
@@ -21,7 +20,6 @@ export default {
name: 'DashboardCard06', name: 'DashboardCard06',
components: { components: {
DoughnutChart, DoughnutChart,
EditMenu,
}, },
setup() { setup() {
const chartData = ref({ const chartData = ref({
@@ -42,7 +40,7 @@ export default {
tailwindConfig().theme.colors.blue[500], tailwindConfig().theme.colors.blue[500],
tailwindConfig().theme.colors.indigo[900], tailwindConfig().theme.colors.indigo[900],
], ],
hoverBorderColor: tailwindConfig().theme.colors.white, borderWidth: 0,
}, },
], ],
}) })

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

@@ -1,15 +1,15 @@
<template> <template>
<div class="col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-gray-800">Top Channels</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Channels</h2>
</header> </header>
<div class="p-3"> <div class="p-3">
<!-- Table --> <!-- Table -->
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table-auto w-full"> <table class="table-auto w-full dark:text-slate-300">
<!-- Table header --> <!-- Table header -->
<thead class="text-xs uppercase text-gray-400 bg-gray-50 rounded-sm"> <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">
<tr> <tr>
<th class="p-2"> <th class="p-2">
<div class="font-semibold text-left">Source</div> <div class="font-semibold text-left">Source</div>
@@ -29,7 +29,7 @@
</tr> </tr>
</thead> </thead>
<!-- Table body --> <!-- Table body -->
<tbody class="text-sm font-medium divide-y divide-gray-100"> <tbody class="text-sm font-medium divide-y divide-slate-100 dark:divide-slate-700">
<!-- Row --> <!-- Row -->
<tr> <tr>
<td class="p-2"> <td class="p-2">
@@ -38,14 +38,14 @@
<circle fill="#24292E" cx="18" cy="18" r="18" /> <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" /> <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> </svg>
<div class="text-gray-800">Github.com</div> <div class="text-slate-800 dark:text-slate-100">Github.com</div>
</div> </div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">2.4K</div> <div class="text-center">2.4K</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center text-green-500">$3,877</div> <div class="text-center text-emerald-500">$3,877</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">267</div> <div class="text-center">267</div>
@@ -62,14 +62,14 @@
<circle fill="#1DA1F2" cx="18" cy="18" r="18" /> <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" /> <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" />
</svg> </svg>
<div class="text-gray-800">Twitter</div> <div class="text-slate-800 dark:text-slate-100">Twitter</div>
</div> </div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">2.2K</div> <div class="text-center">2.2K</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center text-green-500">$3,426</div> <div class="text-center text-emerald-500">$3,426</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">249</div> <div class="text-center">249</div>
@@ -86,14 +86,14 @@
<circle fill="#EA4335" cx="18" cy="18" r="18" /> <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" /> <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> </svg>
<div class="text-gray-800">Google (organic)</div> <div class="text-slate-800 dark:text-slate-100">Google (organic)</div>
</div> </div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">2.0K</div> <div class="text-center">2.0K</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center text-green-500">$2,444</div> <div class="text-center text-emerald-500">$2,444</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">224</div> <div class="text-center">224</div>
@@ -110,14 +110,14 @@
<circle fill="#4BC9FF" cx="18" cy="18" r="18" /> <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" /> <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> </svg>
<div class="text-gray-800">Vimeo.com</div> <div class="text-slate-800 dark:text-slate-100">Vimeo.com</div>
</div> </div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">1.9K</div> <div class="text-center">1.9K</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center text-green-500">$2,236</div> <div class="text-center text-emerald-500">$2,236</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">220</div> <div class="text-center">220</div>
@@ -134,14 +134,14 @@
<circle fill="#0E2439" cx="18" cy="18" r="18" /> <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" /> <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> </svg>
<div class="text-gray-800">Indiehackers.com</div> <div class="text-slate-800 dark:text-slate-100">Indiehackers.com</div>
</div> </div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">1.7K</div> <div class="text-center">1.7K</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center text-green-500">$2,034</div> <div class="text-center text-emerald-500">$2,034</div>
</td> </td>
<td class="p-2"> <td class="p-2">
<div class="text-center">204</div> <div class="text-center">204</div>

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100 flex items-center"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
<h2 class="font-semibold text-gray-800">Sales Over Time (all stores)</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Sales Over Time (all stores)</h2>
</header> </header>
<!-- Chart built with Chart.js 3 --> <!-- Chart built with Chart.js 3 -->
<!-- Change the height attribute to adjust the chart height --> <!-- Change the height attribute to adjust the chart height -->
@@ -51,6 +51,10 @@ export default {
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500], pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
}, },
// Blue line // Blue line
{ {
@@ -68,8 +72,9 @@ export default {
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.blue[400], pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
clip: 20,
}, },
// Green line // emerald line
{ {
label: 'Average', label: 'Average',
data: [ data: [
@@ -78,13 +83,14 @@ export default {
223, 188, 114, 162, 200, 150, 118, 223, 188, 114, 162, 200, 150, 118,
118, 76, 122, 230, 268, 118, 76, 122, 230, 268,
], ],
borderColor: tailwindConfig().theme.colors.green[500], borderColor: tailwindConfig().theme.colors.emerald[500],
fill: false, fill: false,
borderWidth: 2, borderWidth: 2,
tension: 0, tension: 0,
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 3, pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.green[500], pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
clip: 20,
}, },
], ],
}) })

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

@@ -1,15 +1,15 @@
<template> <template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100 flex items-center"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
<h2 class="font-semibold text-gray-800">Sales VS Refunds</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Sales VS Refunds</h2>
<Tooltip class="ml-2" size="lg"> <Tooltip class="ml-2" size="lg">
<div class="text-sm">Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div> <div class="text-sm">Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
</Tooltip> </Tooltip>
</header> </header>
<div class="px-5 py-3"> <div class="px-5 py-3">
<div class="flex items-start"> <div class="flex items-start">
<div class="text-3xl font-bold text-gray-800 mr-2">+$6,796</div> <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-yellow-500 rounded-full">-34%</div> <div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-34%</div>
</div> </div>
</div> </div>
<!-- Chart built with Chart.js 3 --> <!-- Chart built with Chart.js 3 -->

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

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

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

@@ -1,11 +1,11 @@
<template> <template>
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-gray-800">Reason for Refunds</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Reason for Refunds</h2>
</header> </header>
<div class="px-5 py-3"> <div class="px-5 py-3">
<div class="flex items-start"> <div class="flex items-start">
<div class="text-3xl font-bold text-gray-800 mr-2">449</div> <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-sm font-semibold text-white px-1.5 bg-yellow-500 rounded-full">-22%</div>
</div> </div>
</div> </div>

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

@@ -1,14 +1,14 @@
<template> <template>
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-gray-800">Recent Activity</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Recent Activity</h2>
</header> </header>
<div class="p-3"> <div class="p-3">
<!-- Card content --> <!-- Card content -->
<!-- "Today" group --> <!-- "Today" group -->
<div> <div>
<header class="text-xs uppercase text-gray-400 bg-gray-50 rounded-sm font-semibold p-2">Today</header> <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>
<ul class="my-1"> <ul class="my-1">
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
@@ -17,43 +17,43 @@
<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" /> <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> </svg>
</div> </div>
<div class="grow flex items-center border-b border-gray-100 text-sm py-2"> <div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a> mentioned <a class="font-medium text-gray-800" href="#0">Sara Smith</a> in a new post</div> <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="shrink-0 self-end ml-2"> <div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a> <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>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3"> <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-red-50" viewBox="0 0 36 36"> <svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
<path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" /> <path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" />
</svg> </svg>
</div> </div>
<div class="grow flex items-center border-b border-gray-100 text-sm py-2"> <div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center">The post <a class="font-medium text-gray-800" href="#0">Post Name</a> was removed by <a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a></div> <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="shrink-0 self-end ml-2"> <div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a> <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>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3"> <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-green-50" viewBox="0 0 36 36"> <svg class="w-9 h-9 fill-current text-emerald-50" 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" /> <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> </svg>
</div> </div>
<div class="grow flex items-center text-sm py-2"> <div class="grow flex items-center text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Patrick Sullivan</a> published a new <a class="font-medium text-gray-800" href="#0">post</a></div> <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="shrink-0 self-end ml-2"> <div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a> <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>
</div> </div>
</div> </div>
</div> </div>
@@ -62,7 +62,7 @@
</div> </div>
<!-- "Yesterday" group --> <!-- "Yesterday" group -->
<div> <div>
<header class="text-xs uppercase text-gray-400 bg-gray-50 rounded-sm font-semibold p-2">Yesterday</header> <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>
<ul class="my-1"> <ul class="my-1">
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
@@ -71,11 +71,11 @@
<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" /> <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> </svg>
</div> </div>
<div class="grow flex items-center border-b border-gray-100 text-sm py-2"> <div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">240+</a> users have subscribed to <a class="font-medium text-gray-800" href="#0">Newsletter #1</a></div> <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="shrink-0 self-end ml-2"> <div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a> <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>
</div> </div>
</div> </div>
</div> </div>
@@ -89,9 +89,9 @@
</div> </div>
<div class="grow flex items-center text-sm py-2"> <div class="grow flex items-center text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center">The post <a class="font-medium text-gray-800" href="#0">Post Name</a> was suspended by <a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a></div> <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="shrink-0 self-end ml-2"> <div class="shrink-0 self-end ml-2">
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a> <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>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,107 +1,107 @@
<template> <template>
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200"> <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-gray-100"> <header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
<h2 class="font-semibold text-gray-800">Income/Expenses</h2> <h2 class="font-semibold text-slate-800 dark:text-slate-100">Income/Expenses</h2>
</header> </header>
<div class="p-3"> <div class="p-3">
<!-- Card content --> <!-- Card content -->
<!-- "Today" group --> <!-- "Today" group -->
<div> <div>
<header class="text-xs uppercase text-gray-400 bg-gray-50 rounded-sm font-semibold p-2">Today</header> <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>
<ul class="my-1"> <ul class="my-1">
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3"> <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-red-50" viewBox="0 0 36 36"> <svg class="w-9 h-9 fill-current text-rose-50" 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" /> <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
</svg> </svg>
</div> </div>
<div class="grow flex items-center border-b border-gray-100 text-sm py-2"> <div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Qonto</a> billing</div> <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="shrink-0 self-start ml-2"> <div class="shrink-0 self-start ml-2">
<span class="font-medium text-gray-800">-$49.88</span> <span class="font-medium text-slate-800 dark:text-slate-100">-$49.88</span>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3"> <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-green-50" viewBox="0 0 36 36"> <svg class="w-9 h-9 fill-current text-emerald-50" 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" /> <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> </svg>
</div> </div>
<div class="grow flex items-center border-b border-gray-100 text-sm py-2"> <div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div> <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="shrink-0 self-start ml-2"> <div class="shrink-0 self-start ml-2">
<span class="font-medium text-green-500">+249.88</span> <span class="font-medium text-emerald-500">+249.88</span>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3"> <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-green-50" viewBox="0 0 36 36"> <svg class="w-9 h-9 fill-current text-emerald-50" 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" /> <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> </svg>
</div> </div>
<div class="grow flex items-center border-b border-gray-100 text-sm py-2"> <div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Notion Labs Inc</a></div> <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="shrink-0 self-start ml-2"> <div class="shrink-0 self-start ml-2">
<span class="font-medium text-green-500">+99.99</span> <span class="font-medium text-emerald-500">+99.99</span>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3"> <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-green-50" viewBox="0 0 36 36"> <svg class="w-9 h-9 fill-current text-emerald-50" 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" /> <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> </svg>
</div> </div>
<div class="grow flex items-center border-b border-gray-100 text-sm py-2"> <div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Market Cap Ltd</a></div> <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="shrink-0 self-start ml-2"> <div class="shrink-0 self-start ml-2">
<span class="font-medium text-green-500">+1,200.88</span> <span class="font-medium text-emerald-500">+1,200.88</span>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-gray-200 my-2 mr-3"> <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-gray-400" viewBox="0 0 36 36"> <svg class="w-9 h-9 fill-current text-slate-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" /> <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> </svg>
</div> </div>
<div class="grow flex items-center border-b border-gray-100 text-sm py-2"> <div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div> <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="shrink-0 self-start ml-2"> <div class="shrink-0 self-start ml-2">
<span class="font-medium text-gray-800 line-through">+$99.99</span> <span class="font-medium text-slate-800 dark:text-slate-100 line-through">+$99.99</span>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<!-- Item --> <!-- Item -->
<li class="flex px-2"> <li class="flex px-2">
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3"> <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-red-50" viewBox="0 0 36 36"> <svg class="w-9 h-9 fill-current text-rose-50" 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" /> <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
</svg> </svg>
</div> </div>
<div class="grow flex items-center text-sm py-2"> <div class="grow flex items-center text-sm py-2">
<div class="grow flex justify-between"> <div class="grow flex justify-between">
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div> <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="shrink-0 self-start ml-2"> <div class="shrink-0 self-start ml-2">
<span class="font-medium text-gray-800">-$49.88</span> <span class="font-medium text-slate-800 dark:text-slate-100">-$49.88</span>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,5 +1,5 @@
<template> <template>
<div class="relative bg-indigo-200 p-4 sm:p-6 rounded-sm overflow-hidden mb-8"> <div class="relative bg-indigo-200 dark:bg-indigo-500 p-4 sm:p-6 rounded-sm overflow-hidden mb-8">
<!-- Background illustration --> <!-- Background illustration -->
<div class="absolute right-0 top-0 -mt-4 mr-16 pointer-events-none hidden xl:block" aria-hidden="true"> <div class="absolute right-0 top-0 -mt-4 mr-16 pointer-events-none hidden xl:block" aria-hidden="true">
@@ -45,8 +45,8 @@
<!-- Content --> <!-- Content -->
<div class="relative"> <div class="relative">
<h1 class="text-2xl md:text-3xl text-gray-800 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1> <h1 class="text-2xl md:text-3xl text-slate-800 dark:text-slate-100 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
<p>Here is what’s happening with your projects today:</p> <p class="dark:text-indigo-200">Here is what’s happening with your projects today:</p>
</div> </div>
</div> </div>