mirror of
https://github.com/cruip/vuejs-admin-dashboard-template.git
synced 2026-02-04 05:32:26 +08:00
2.0.0
This commit is contained in:
pasqualevitiello
@@ -1,5 +1,9 @@
|
||||
# CHANGELOG.md
|
||||
|
||||
## [2.0.0] - 2023-06-01
|
||||
|
||||
- Dark version added
|
||||
|
||||
## [1.4.3] - 2023-04-11
|
||||
|
||||
- Update dependencies
|
||||
|
||||
39
index.html
39
index.html
@@ -1,20 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body class="font-inter antialiased bg-gray-100 text-gray-600">
|
||||
<script>
|
||||
if (localStorage.getItem('sidebar-expanded') == 'true') {
|
||||
document.querySelector('body').classList.add('sidebar-expanded');
|
||||
} else {
|
||||
document.querySelector('body').classList.remove('sidebar-expanded');
|
||||
}
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
|
||||
<body class="font-inter antialiased bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400">
|
||||
<script>
|
||||
if (localStorage.getItem('sidebar-expanded') == 'true') {
|
||||
document.querySelector('body').classList.add('sidebar-expanded');
|
||||
} else {
|
||||
document.querySelector('body').classList.remove('sidebar-expanded');
|
||||
}
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
656
package-lock.json
generated
656
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
@@ -8,20 +8,21 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@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",
|
||||
"flatpickr": "^4.6.13",
|
||||
"moment": "^2.29.4",
|
||||
"vue": "^3.2.20",
|
||||
"vue-flatpickr-component": "^11.0.3",
|
||||
"vue-router": "^4.1.6"
|
||||
"vue-router": "^4.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vue/compiler-sfc": "^3.2.20",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.21",
|
||||
"tailwindcss": "^3.3.1",
|
||||
"vite": "^4.2.1"
|
||||
"postcss": "^8.4.24",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"vite": "^4.3.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useDark } from '@vueuse/core'
|
||||
import { chartColors } from './ChartjsConfig'
|
||||
|
||||
import {
|
||||
Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
|
||||
@@ -28,6 +30,8 @@ export default {
|
||||
const canvas = ref(null)
|
||||
const legend = ref(null)
|
||||
let chart = null
|
||||
const darkMode = useDark()
|
||||
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
|
||||
|
||||
onMounted(() => {
|
||||
const ctx = canvas.value
|
||||
@@ -51,7 +55,11 @@ export default {
|
||||
ticks: {
|
||||
maxTicksLimit: 5,
|
||||
callback: (value) => formatValue(value),
|
||||
color: darkMode.value ? textColor.dark : textColor.light,
|
||||
},
|
||||
grid: {
|
||||
color: darkMode.value ? gridColor.dark : gridColor.light,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
type: 'time',
|
||||
@@ -64,10 +72,13 @@ export default {
|
||||
},
|
||||
border: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
color: darkMode.value ? textColor.dark : textColor.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
@@ -79,6 +90,9 @@ export default {
|
||||
title: () => false, // Disable tooltip title
|
||||
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: {
|
||||
@@ -129,14 +143,14 @@ export default {
|
||||
labelContainer.style.display = 'flex'
|
||||
labelContainer.style.alignItems = 'center'
|
||||
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.lineHeight = tailwindConfig().theme.fontSize['3xl'][1].lineHeight
|
||||
value.style.fontWeight = tailwindConfig().theme.fontWeight.bold
|
||||
value.style.marginRight = tailwindConfig().theme.margin[2]
|
||||
value.style.pointerEvents = 'none'
|
||||
const label = document.createElement('span')
|
||||
label.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.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
|
||||
const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0)
|
||||
@@ -158,6 +172,27 @@ export default {
|
||||
|
||||
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 {
|
||||
canvas,
|
||||
legend,
|
||||
|
||||
@@ -3,7 +3,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useDark } from '@vueuse/core'
|
||||
import { chartColors } from './ChartjsConfig'
|
||||
|
||||
import {
|
||||
Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
|
||||
} from 'chart.js'
|
||||
@@ -21,6 +24,8 @@ export default {
|
||||
|
||||
const canvas = ref(null)
|
||||
let chart = null
|
||||
const darkMode = useDark()
|
||||
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
|
||||
|
||||
onMounted(() => {
|
||||
const ctx = canvas.value
|
||||
@@ -46,7 +51,11 @@ export default {
|
||||
ticks: {
|
||||
maxTicksLimit: 5,
|
||||
callback: (value) => formatValue(value),
|
||||
color: darkMode.value ? textColor.dark : textColor.light,
|
||||
},
|
||||
grid: {
|
||||
color: darkMode.value ? gridColor.dark : gridColor.light,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
stacked: true,
|
||||
@@ -60,13 +69,14 @@ export default {
|
||||
},
|
||||
border: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
autoSkipPadding: 48,
|
||||
maxRotation: 0,
|
||||
color: darkMode.value ? textColor.dark : textColor.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -79,6 +89,9 @@ export default {
|
||||
title: () => false, // Disable tooltip title
|
||||
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: {
|
||||
@@ -96,6 +109,27 @@ export default {
|
||||
|
||||
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 {
|
||||
canvas,
|
||||
}
|
||||
|
||||
@@ -4,14 +4,17 @@
|
||||
<canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
|
||||
</div>
|
||||
<div class="px-5 pt-2 pb-2">
|
||||
<ul ref="legend" class="text-sm divide-y divide-gray-100"></ul>
|
||||
<ul 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-slate-100 dark:divide-slate-700"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useDark } from '@vueuse/core'
|
||||
import { chartColors } from './ChartjsConfig'
|
||||
|
||||
import {
|
||||
Chart, BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend,
|
||||
} from 'chart.js'
|
||||
@@ -30,6 +33,8 @@ export default {
|
||||
const canvas = ref(null)
|
||||
const legend = ref(null)
|
||||
let chart = null
|
||||
const darkMode = useDark()
|
||||
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -72,6 +77,9 @@ export default {
|
||||
title: () => false, // Disable tooltip title
|
||||
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: {
|
||||
@@ -134,6 +142,21 @@ export default {
|
||||
|
||||
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 {
|
||||
canvas,
|
||||
legend,
|
||||
|
||||
@@ -1,20 +1,14 @@
|
||||
// Import Chart.js
|
||||
import { Chart, Tooltip } from 'chart.js'
|
||||
// Import Tailwind config
|
||||
import { tailwindConfig } from '../utils/Utils'
|
||||
import { tailwindConfig, hexToRGB } from '../utils/Utils'
|
||||
|
||||
Chart.register(Tooltip)
|
||||
|
||||
// Define Chart.js default settings
|
||||
Chart.defaults.font.family = '"Inter", sans-serif'
|
||||
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.borderColor = tailwindConfig().theme.colors.gray[200]
|
||||
Chart.defaults.plugins.tooltip.displayColors = false
|
||||
Chart.defaults.plugins.tooltip.mode = 'nearest'
|
||||
Chart.defaults.plugins.tooltip.intersect = false
|
||||
@@ -39,4 +33,39 @@ Chart.register({
|
||||
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)`
|
||||
},
|
||||
}
|
||||
|
||||
@@ -10,7 +10,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useDark } from '@vueuse/core'
|
||||
import { chartColors } from './ChartjsConfig'
|
||||
|
||||
import {
|
||||
Chart, DoughnutController, ArcElement, TimeScale, Tooltip,
|
||||
} from 'chart.js'
|
||||
@@ -29,6 +32,8 @@ export default {
|
||||
const canvas = ref(null)
|
||||
const legend = ref(null)
|
||||
let chart = null
|
||||
const darkMode = useDark()
|
||||
const { tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
|
||||
|
||||
onMounted(() => {
|
||||
const ctx = canvas.value
|
||||
@@ -44,6 +49,12 @@ export default {
|
||||
legend: {
|
||||
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: {
|
||||
intersect: false,
|
||||
@@ -71,12 +82,7 @@ export default {
|
||||
li.style.margin = tailwindConfig().theme.margin[1]
|
||||
// Button element
|
||||
const button = document.createElement('button')
|
||||
button.classList.add('btn-xs')
|
||||
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.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.opacity = item.hidden ? '.3' : ''
|
||||
button.onclick = () => {
|
||||
c.toggleDataVisibility(item.index, !item.index)
|
||||
@@ -109,6 +115,23 @@ export default {
|
||||
|
||||
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 {
|
||||
canvas,
|
||||
legend,
|
||||
|
||||
@@ -3,14 +3,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useDark } from '@vueuse/core'
|
||||
import { chartColors } from './ChartjsConfig'
|
||||
|
||||
import {
|
||||
Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
|
||||
} from 'chart.js'
|
||||
import 'chartjs-adapter-moment'
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig, formatValue } from '../utils/Utils'
|
||||
import { formatValue } from '../utils/Utils'
|
||||
|
||||
Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip)
|
||||
|
||||
@@ -21,15 +24,18 @@ export default {
|
||||
|
||||
const canvas = ref(null)
|
||||
let chart = null
|
||||
const darkMode = useDark()
|
||||
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor, chartAreaBg } = chartColors
|
||||
|
||||
onMounted(() => {
|
||||
const ctx = canvas.value
|
||||
|
||||
chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: props.data,
|
||||
options: {
|
||||
chartArea: {
|
||||
backgroundColor: tailwindConfig().theme.colors.gray[50],
|
||||
backgroundColor: darkMode.value ? chartAreaBg.dark : chartAreaBg.light,
|
||||
},
|
||||
layout: {
|
||||
padding: 20,
|
||||
@@ -54,6 +60,12 @@ export default {
|
||||
title: () => false, // Disable tooltip title
|
||||
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: {
|
||||
display: false,
|
||||
@@ -71,6 +83,23 @@ export default {
|
||||
|
||||
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 {
|
||||
canvas,
|
||||
}
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div class="px-5 py-3">
|
||||
<div class="flex flex-wrap justify-between items-end">
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 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-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$1,482</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-22%</div>
|
||||
</div>
|
||||
<div class="grow ml-2 mb-1">
|
||||
<ul ref="legend" class="flex flex-wrap justify-end"></ul>
|
||||
@@ -17,7 +17,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useDark } from '@vueuse/core'
|
||||
import { chartColors } from './ChartjsConfig'
|
||||
|
||||
import {
|
||||
Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
|
||||
} from 'chart.js'
|
||||
@@ -36,6 +39,8 @@ export default {
|
||||
const canvas = ref(null)
|
||||
const legend = ref(null)
|
||||
let chart = null
|
||||
const darkMode = useDark()
|
||||
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
|
||||
|
||||
onMounted(() => {
|
||||
const ctx = canvas.value
|
||||
@@ -51,13 +56,15 @@ export default {
|
||||
border: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
maxTicksLimit: 5,
|
||||
callback: (value) => formatValue(value),
|
||||
color: darkMode.value ? textColor.dark : textColor.light,
|
||||
},
|
||||
grid: {
|
||||
color: darkMode.value ? gridColor.dark : gridColor.light,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
type: 'time',
|
||||
@@ -70,13 +77,14 @@ export default {
|
||||
},
|
||||
border: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
autoSkipPadding: 48,
|
||||
maxRotation: 0,
|
||||
color: darkMode.value ? textColor.dark : textColor.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -89,6 +97,9 @@ export default {
|
||||
title: () => false, // Disable tooltip title
|
||||
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: {
|
||||
@@ -133,7 +144,7 @@ export default {
|
||||
box.style.pointerEvents = 'none'
|
||||
// Label
|
||||
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.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
|
||||
const labelText = document.createTextNode(item.text)
|
||||
@@ -150,6 +161,27 @@ export default {
|
||||
|
||||
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 {
|
||||
canvas,
|
||||
legend,
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
<template>
|
||||
<div class="px-5 py-3">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grow">
|
||||
<canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
|
||||
<canvas ref="canvas" :width="width" :height="height"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip,
|
||||
} from 'chart.js'
|
||||
@@ -31,6 +34,8 @@ export default {
|
||||
const chartValue = ref(null)
|
||||
const chartDeviation = ref(null)
|
||||
let chart = null
|
||||
const darkMode = useDark()
|
||||
const { textColor, gridColor, tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
|
||||
|
||||
// function that updates header values
|
||||
const handleHeaderValues = (data, chartValue, chartDeviation) => {
|
||||
@@ -39,9 +44,9 @@ export default {
|
||||
const diff = ((currentValue - previousValue) / previousValue) * 100
|
||||
chartValue.value.innerHTML = data.datasets[0].data[data.datasets[0].data.length - 1]
|
||||
if (diff < 0) {
|
||||
chartDeviation.value.style.backgroundColor = tailwindConfig().theme.colors.yellow[500]
|
||||
chartDeviation.value.style.backgroundColor = tailwindConfig().theme.colors.amber[500]
|
||||
} 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)}%`
|
||||
}
|
||||
@@ -65,7 +70,11 @@ export default {
|
||||
ticks: {
|
||||
maxTicksLimit: 5,
|
||||
callback: (value) => formatValue(value),
|
||||
color: darkMode.value ? textColor.dark : textColor.light,
|
||||
},
|
||||
grid: {
|
||||
color: darkMode.value ? gridColor.dark : gridColor.light,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
type: 'time',
|
||||
@@ -79,13 +88,14 @@ export default {
|
||||
},
|
||||
border: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
autoSkipPadding: 48,
|
||||
maxRotation: 0,
|
||||
color: darkMode.value ? textColor.dark : textColor.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -100,6 +110,10 @@ export default {
|
||||
callbacks: {
|
||||
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: {
|
||||
@@ -108,7 +122,6 @@ export default {
|
||||
},
|
||||
animation: false,
|
||||
maintainAspectRatio: false,
|
||||
resizeDelay: 200,
|
||||
},
|
||||
})
|
||||
// output header values
|
||||
@@ -123,9 +136,34 @@ export default {
|
||||
// update chart
|
||||
chart.data = data
|
||||
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 {
|
||||
canvas,
|
||||
chartValue,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div>
|
||||
<button
|
||||
ref="trigger"
|
||||
class="text-gray-400 hover:text-gray-500 rounded-full"
|
||||
:class="{ 'bg-gray-100 text-gray-500': dropdownOpen }"
|
||||
class="rounded-full"
|
||||
:class="dropdownOpen ? 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400' : 'text-slate-400 hover:text-slate-500 dark:text-slate-500 dark:hover:text-slate-400'"
|
||||
aria-haspopup="true"
|
||||
@click.prevent="dropdownOpen = !dropdownOpen"
|
||||
:aria-expanded="dropdownOpen"
|
||||
@@ -23,7 +23,7 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-36 bg-white 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
|
||||
ref="dropdown"
|
||||
@focusin="dropdownOpen = true"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="relative inline-flex">
|
||||
<button
|
||||
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"
|
||||
@click.prevent="dropdownOpen = !dropdownOpen"
|
||||
:aria-expanded="dropdownOpen"
|
||||
@@ -20,9 +20,9 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full 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 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">
|
||||
<li class="py-1 px-3">
|
||||
<label class="flex items-center">
|
||||
@@ -61,10 +61,10 @@
|
||||
</label>
|
||||
</li>
|
||||
</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">
|
||||
<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>
|
||||
<button class="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white" @click="dropdownOpen = false" @focusout="dropdownOpen = false">Apply</button>
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
<div class="relative inline-flex">
|
||||
<button
|
||||
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="{ 'bg-gray-200': dropdownOpen }"
|
||||
class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full"
|
||||
:class="{ 'bg-slate-200': dropdownOpen }"
|
||||
aria-haspopup="true"
|
||||
@click.prevent="dropdownOpen = !dropdownOpen"
|
||||
:aria-expanded="dropdownOpen"
|
||||
>
|
||||
<span class="sr-only">Info</span>
|
||||
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-current text-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>
|
||||
</button>
|
||||
<transition
|
||||
@@ -21,16 +21,16 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white border border-gray-200 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 v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 py-1.5 rounded shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
|
||||
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase pt-1.5 pb-2 px-3">Need help?</div>
|
||||
<ul
|
||||
ref="dropdown"
|
||||
@focusin="dropdownOpen = true"
|
||||
@focusout="dropdownOpen = false"
|
||||
>
|
||||
<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">
|
||||
<svg class="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
|
||||
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
|
||||
<svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-500 shrink-0 mr-2" viewBox="0 0 12 12">
|
||||
<rect y="3" width="12" height="9" rx="1" />
|
||||
<path d="M2 0h8v2H2z" />
|
||||
</svg>
|
||||
@@ -38,16 +38,16 @@
|
||||
</router-link>
|
||||
</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">
|
||||
<svg class="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
|
||||
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
|
||||
<svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-500 shrink-0 mr-2" viewBox="0 0 12 12">
|
||||
<path d="M10.5 0h-9A1.5 1.5 0 000 1.5v9A1.5 1.5 0 001.5 12h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 0zM10 7L8.207 5.207l-3 3-1.414-1.414 3-3L5 2h5v5z" />
|
||||
</svg>
|
||||
<span>Support Site</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 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">
|
||||
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
|
||||
<svg class="w-3 h-3 fill-current text-indigo-300 dark:text-indigo-500 shrink-0 mr-2" viewBox="0 0 12 12">
|
||||
<path d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z" />
|
||||
</svg>
|
||||
<span>Contact us</span>
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
<div class="relative inline-flex">
|
||||
<button
|
||||
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="{ 'bg-gray-200': dropdownOpen }"
|
||||
class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full"
|
||||
:class="{ 'bg-slate-200': dropdownOpen }"
|
||||
aria-haspopup="true"
|
||||
@click.prevent="dropdownOpen = !dropdownOpen"
|
||||
:aria-expanded="dropdownOpen"
|
||||
>
|
||||
<span class="sr-only">Notifications</span>
|
||||
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-current text-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-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-500 dark:text-slate-400" d="M6.5 0C2.91 0 0 2.462 0 5.5c0 1.075.37 2.074 1 2.922V12l2.699-1.542A7.454 7.454 0 006.5 11c3.59 0 6.5-2.462 6.5-5.5S10.09 0 6.5 0z" />
|
||||
<path class="fill-current text-slate-400 dark:text-slate-500" d="M16 9.5c0-.987-.429-1.897-1.147-2.639C14.124 10.348 10.66 13 6.5 13c-.103 0-.202-.018-.305-.021C7.231 13.617 8.556 14 10 14c.449 0 .886-.04 1.307-.11L15 16v-4h-.012C15.627 11.285 16 10.425 16 9.5z" />
|
||||
</svg>
|
||||
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-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>
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-200 transform"
|
||||
@@ -23,29 +23,29 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full -mr-48 sm:mr-0 min-w-80 bg-white border border-gray-200 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 v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full -mr-48 sm:mr-0 min-w-80 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 py-1.5 rounded shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
|
||||
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase pt-1.5 pb-2 px-4">Notifications</div>
|
||||
<ul
|
||||
ref="dropdown"
|
||||
@focusin="dropdownOpen = true"
|
||||
@focusout="dropdownOpen = false"
|
||||
>
|
||||
<li class="border-b border-gray-200 last:border-0">
|
||||
<router-link class="block py-2 px-4 hover:bg-gray-50" 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-xs font-medium text-gray-400">Feb 12, 2021</span>
|
||||
<li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
|
||||
<router-link class="block py-2 px-4 hover:bg-slate-50 dark:hover:bg-slate-700/20" to="#0" @click="dropdownOpen = false">
|
||||
<span class="block text-sm mb-2">📣 <span class="font-medium text-slate-800 dark:text-slate-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Feb 12, 2021</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="border-b border-gray-200 last:border-0">
|
||||
<router-link class="block py-2 px-4 hover:bg-gray-50" 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-xs font-medium text-gray-400">Feb 9, 2021</span>
|
||||
<li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
|
||||
<router-link class="block py-2 px-4 hover:bg-slate-50 dark:hover:bg-slate-700/20" to="#0" @click="dropdownOpen = false">
|
||||
<span class="block text-sm mb-2">📣 <span class="font-medium text-slate-800 dark:text-slate-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Feb 9, 2021</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="border-b border-gray-200 last:border-0">
|
||||
<router-link class="block py-2 px-4 hover:bg-gray-50" 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-xs font-medium text-gray-400">Jan 24, 2020</span>
|
||||
<li class="border-b border-slate-200 dark:border-slate-700 last:border-0">
|
||||
<router-link class="block py-2 px-4 hover:bg-slate-50 dark:hover:bg-slate-700/20" to="#0" @click="dropdownOpen = false">
|
||||
<span class="block text-sm mb-2">🚀<span class="font-medium text-slate-800 dark:text-slate-100">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-slate-400 dark:text-slate-500">Jan 24, 2020</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
>
|
||||
<img class="w-8 h-8 rounded-full" :src="UserAvatar" width="32" height="32" alt="User" />
|
||||
<div class="flex items-center truncate">
|
||||
<span class="truncate ml-2 text-sm font-medium group-hover:text-gray-800">Acme Inc.</span>
|
||||
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400" viewBox="0 0 12 12">
|
||||
<span class="truncate ml-2 text-sm font-medium dark:text-slate-300 group-hover:text-slate-800 dark:group-hover:text-slate-200">Acme Inc.</span>
|
||||
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
|
||||
</svg>
|
||||
</div>
|
||||
@@ -23,10 +23,10 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white border border-gray-200 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="font-medium text-gray-800">Acme Inc.</div>
|
||||
<div class="text-xs text-gray-500 italic">Administrator</div>
|
||||
<div v-show="dropdownOpen" class="origin-top-right z-10 absolute top-full min-w-44 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 py-1.5 rounded shadow-lg overflow-hidden mt-1" :class="align === 'right' ? 'right-0' : 'left-0'">
|
||||
<div class="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200 dark:border-slate-700">
|
||||
<div class="font-medium text-slate-800 dark:text-slate-100">Acme Inc.</div>
|
||||
<div class="text-xs text-slate-500 dark:text-slate-400 italic">Administrator</div>
|
||||
</div>
|
||||
<ul
|
||||
ref="dropdown"
|
||||
@@ -34,10 +34,10 @@
|
||||
@focusout="dropdownOpen = false"
|
||||
>
|
||||
<li>
|
||||
<router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 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>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
leave-from-class="opacity-100"
|
||||
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>
|
||||
<!-- Modal dialog -->
|
||||
<transition
|
||||
@@ -19,15 +19,15 @@
|
||||
leave-from-class="opacity-100 translate-y-0"
|
||||
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 ref="modalContent" class="bg-white overflow-auto max-w-2xl w-full max-h-full rounded shadow-lg">
|
||||
<div v-show="modalOpen" :id="id" class="fixed inset-0 z-50 overflow-hidden flex items-start top-20 mb-4 justify-center px-4 sm:px-6" role="dialog" aria-modal="true">
|
||||
<div ref="modalContent" class="bg-white dark:bg-slate-800 border border-transparent dark:border-slate-700 overflow-auto max-w-2xl w-full max-h-full rounded shadow-lg">
|
||||
<!-- Search form -->
|
||||
<form class="border-b border-gray-200">
|
||||
<form class="border-b border-slate-200 dark:border-slate-700">
|
||||
<div class="relative">
|
||||
<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">
|
||||
<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="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
@@ -37,51 +37,51 @@
|
||||
<div class="py-4 px-2">
|
||||
<!-- Recent searches -->
|
||||
<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">
|
||||
<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')">
|
||||
<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">
|
||||
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
|
||||
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
|
||||
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
|
||||
</svg>
|
||||
<span>Form Builder - 23 hours on-demand video</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="flex items-center p-2 text-gray-800 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">
|
||||
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
|
||||
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
|
||||
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
|
||||
</svg>
|
||||
<span>Access Mosaic on mobile and TV</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="flex items-center p-2 text-gray-800 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">
|
||||
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
|
||||
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
|
||||
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
|
||||
</svg>
|
||||
<span>Product Update - Q4 2021</span>
|
||||
</router-link>
|
||||
</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')">
|
||||
<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">
|
||||
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
|
||||
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
|
||||
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
|
||||
</svg>
|
||||
<span>Master Digital Marketing Strategy course</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="flex items-center p-2 text-gray-800 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">
|
||||
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
|
||||
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
|
||||
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
|
||||
</svg>
|
||||
<span>Dedicated forms for products</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="flex items-center p-2 text-gray-800 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">
|
||||
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
|
||||
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
|
||||
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
|
||||
</svg>
|
||||
<span>Product Update - Q4 2021</span>
|
||||
@@ -91,22 +91,22 @@
|
||||
</div>
|
||||
<!-- Recent pages -->
|
||||
<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">
|
||||
<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')">
|
||||
<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">
|
||||
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
|
||||
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
|
||||
<path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
|
||||
</svg>
|
||||
<span><span class="font-medium 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>
|
||||
</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')">
|
||||
<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">
|
||||
<router-link class="flex items-center p-2 text-slate-800 dark:text-slate-100 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
|
||||
<svg class="w-4 h-4 fill-current text-slate-400 dark:text-slate-500 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
|
||||
<path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
|
||||
</svg>
|
||||
<span><span class="font-medium 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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
23
src/components/ThemeToggle.vue
Normal file
23
src/components/ThemeToggle.vue
Normal 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>
|
||||
@@ -12,7 +12,7 @@
|
||||
aria-expanded="tooltipOpen"
|
||||
@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" />
|
||||
</svg>
|
||||
</button>
|
||||
@@ -26,9 +26,9 @@
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-show="tooltipOpen" class="rounded overflow-hidden"
|
||||
v-show="tooltipOpen" class="rounded border overflow-hidden shadow-lg"
|
||||
:class="[
|
||||
bg === 'dark' ? 'bg-gray-800' : 'bg-white border border-gray-200 shadow-lg',
|
||||
colorClasses(bg),
|
||||
sizeClasses(size),
|
||||
positionInnerClasses(position)
|
||||
]"
|
||||
@@ -53,46 +53,58 @@ export default {
|
||||
const positionOuterClasses = (position) => {
|
||||
switch (position) {
|
||||
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':
|
||||
return 'right-full top-1/2 transform -translate-y-1/2';
|
||||
return 'right-full top-1/2 -translate-y-1/2';
|
||||
case 'bottom':
|
||||
return 'top-full left-1/2 transform -translate-x-1/2';
|
||||
return 'top-full left-1/2 -translate-x-1/2';
|
||||
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) => {
|
||||
switch (size) {
|
||||
case 'lg':
|
||||
return 'min-w-72 p-3';
|
||||
case 'md':
|
||||
return 'min-w-56 p-3';
|
||||
case 'sm':
|
||||
return 'min-w-44 p-2';
|
||||
default:
|
||||
return 'p-2';
|
||||
const sizeClasses = (size) => {
|
||||
switch (size) {
|
||||
case 'lg':
|
||||
return 'min-w-72 p-3';
|
||||
case 'md':
|
||||
return 'min-w-56 p-3';
|
||||
case 'sm':
|
||||
return 'min-w-44 p-2';
|
||||
default:
|
||||
return 'p-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';
|
||||
}
|
||||
}
|
||||
const colorClasses = (bg) => {
|
||||
switch (bg) {
|
||||
case 'light':
|
||||
return 'bg-white text-slate-600 border-slate-200'
|
||||
case 'dark':
|
||||
return 'bg-slate-700 text-slate-100 border-slate-600'
|
||||
default:
|
||||
return 'text-slate-600 bg-white dark:bg-slate-700 dark:text-slate-100 border-slate-200 dark:border-slate-600'
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
tooltipOpen,
|
||||
positionOuterClasses,
|
||||
sizeClasses,
|
||||
colorClasses,
|
||||
positionInnerClasses,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
.flatpickr-calendar {
|
||||
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);
|
||||
padding: var(--calendarPadding);
|
||||
width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
|
||||
@@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
.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);
|
||||
height: var(--daySize);
|
||||
line-height: var(--daySize);
|
||||
@@ -74,6 +74,16 @@
|
||||
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.prevMonthDay,
|
||||
.flatpickr-day.nextMonthDay,
|
||||
@@ -96,7 +106,7 @@
|
||||
.flatpickr-day.notAllowed,
|
||||
.flatpickr-day.notAllowed.prevMonthDay,
|
||||
.flatpickr-day.notAllowed.nextMonthDay {
|
||||
@apply text-slate-400;
|
||||
@apply text-slate-400 dark:text-slate-500;
|
||||
}
|
||||
|
||||
.rangeMode .flatpickr-day {
|
||||
@@ -158,7 +168,7 @@
|
||||
.flatpickr-months .flatpickr-next-month {
|
||||
position: static;
|
||||
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,
|
||||
@@ -167,12 +177,9 @@
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month:hover,
|
||||
.flatpickr-months .flatpickr-next-month:hover,
|
||||
.flatpickr-months .flatpickr-prev-month:hover svg,
|
||||
.flatpickr-months .flatpickr-next-month:hover svg {
|
||||
fill: inherit;
|
||||
@apply text-slate-400;
|
||||
@apply fill-current;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month {
|
||||
@@ -184,7 +191,7 @@
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month {
|
||||
@apply text-slate-800;
|
||||
@apply text-slate-800 dark:text-slate-100;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
}
|
||||
@@ -220,7 +227,7 @@
|
||||
}
|
||||
|
||||
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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -63,7 +63,7 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
.form-select,
|
||||
.form-checkbox,
|
||||
.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,
|
||||
@@ -78,12 +78,12 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
.form-textarea,
|
||||
.form-multiselect,
|
||||
.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-textarea {
|
||||
@apply placeholder-slate-400;
|
||||
@apply placeholder-slate-400 dark:placeholder-slate-500;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@@ -92,7 +92,43 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
|
||||
.form-checkbox,
|
||||
.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 */
|
||||
|
||||
@@ -5,9 +5,6 @@
|
||||
|
||||
/* Additional styles */
|
||||
@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/theme.css';
|
||||
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
@@ -5,6 +5,7 @@ module.exports = {
|
||||
'./index.html',
|
||||
'./src/**/*.{vue,js,ts,jsx,tsx}',
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
boxShadow: {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<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 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>
|
||||
<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>
|
||||
<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" />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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="flex items-center justify-between h-16 -mb-px">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="flex">
|
||||
|
||||
<!-- 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>
|
||||
<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" />
|
||||
@@ -20,24 +20,21 @@
|
||||
|
||||
<!-- Header: Right side -->
|
||||
<div class="flex items-center space-x-3">
|
||||
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition duration-150 rounded-full ml-3"
|
||||
:class="{ 'bg-gray-200': searchModalOpen }"
|
||||
@click.stop="searchModalOpen = true"
|
||||
aria-controls="search-modal"
|
||||
>
|
||||
<span class="sr-only">Search</span>
|
||||
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-current text-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" />
|
||||
<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" />
|
||||
<div>
|
||||
<button class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full ml-3" :class="{ 'bg-slate-200': searchModalOpen }" @click.stop="searchModalOpen = true" aria-controls="search-modal">
|
||||
<span class="sr-only">Search</span>
|
||||
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-current text-slate-500 dark:text-slate-400" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path class="fill-current text-slate-400 dark:text-slate-500" d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
<SearchModal id="search-modal" searchId="search" :modalOpen="searchModalOpen" @open-modal="searchModalOpen = true" @close-modal="searchModalOpen = false" />
|
||||
</div>
|
||||
<Notifications align="right" />
|
||||
<Help align="right" />
|
||||
<ThemeToggle />
|
||||
<!-- Divider -->
|
||||
<hr class="w-px h-6 bg-gray-200" />
|
||||
<hr class="w-px h-6 bg-slate-200 dark:bg-slate-700 border-none" />
|
||||
<UserMenu align="right" />
|
||||
|
||||
</div>
|
||||
@@ -53,6 +50,7 @@ import { ref } from 'vue'
|
||||
import SearchModal from '../components/ModalSearch.vue'
|
||||
import Notifications from '../components/DropdownNotifications.vue'
|
||||
import Help from '../components/DropdownHelp.vue'
|
||||
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||
import UserMenu from '../components/DropdownProfile.vue'
|
||||
|
||||
export default {
|
||||
@@ -62,13 +60,14 @@ export default {
|
||||
SearchModal,
|
||||
Notifications,
|
||||
Help,
|
||||
ThemeToggle,
|
||||
UserMenu,
|
||||
},
|
||||
setup() {
|
||||
const searchModalOpen = ref(false)
|
||||
return {
|
||||
searchModalOpen,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<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" />
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</router-link>
|
||||
</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>
|
||||
<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" />
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<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">
|
||||
<header class="flex justify-between items-start mb-2">
|
||||
<!-- Icon -->
|
||||
<img src="../../images/icon-01.svg" width="32" height="32" alt="Icon 01" />
|
||||
<EditMenu align="right" class="relative inline-flex">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</EditMenu>
|
||||
</header>
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Plus</h2>
|
||||
<div class="text-xs font-semibold text-gray-400 uppercase mb-1">Sales</div>
|
||||
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Plus</h2>
|
||||
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 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-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$24,780</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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 -->
|
||||
<LineChart :data="chartData" width="389" height="128" />
|
||||
</div>
|
||||
@@ -75,6 +75,9 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
// Gray line
|
||||
@@ -85,12 +88,15 @@ export default {
|
||||
314, 314, 314, 388, 314, 202, 202,
|
||||
202, 202, 314, 720, 642,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.gray[300],
|
||||
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
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,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<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">
|
||||
<header class="flex justify-between items-start mb-2">
|
||||
<!-- Icon -->
|
||||
<img src="../../images/icon-02.svg" width="32" height="32" alt="Icon 02" />
|
||||
<EditMenu align="right" class="relative inline-flex">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</EditMenu>
|
||||
</header>
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Advanced</h2>
|
||||
<div class="text-xs font-semibold text-gray-400 uppercase mb-1">Sales</div>
|
||||
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Advanced</h2>
|
||||
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 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-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$17,489</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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 -->
|
||||
<LineChart :data="chartData" width="389" height="128" />
|
||||
</div>
|
||||
@@ -34,7 +34,6 @@
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import LineChart from '../../charts/LineChart01.vue'
|
||||
import Icon from '../../images/icon-02.svg'
|
||||
import EditMenu from '../../components/DropdownEditMenu.vue'
|
||||
|
||||
// Import utilities
|
||||
@@ -76,6 +75,9 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
// Gray line
|
||||
@@ -86,12 +88,15 @@ export default {
|
||||
154, 273, 191, 191, 126, 263, 349,
|
||||
252, 423, 622, 470, 532,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.gray[300],
|
||||
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
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,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<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">
|
||||
<header class="flex justify-between items-start mb-2">
|
||||
<!-- Icon -->
|
||||
<img src="../../images/icon-03.svg" width="32" height="32" alt="Icon 03" />
|
||||
<EditMenu align="right" class="relative inline-flex">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</EditMenu>
|
||||
</header>
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Professional</h2>
|
||||
<div class="text-xs font-semibold text-gray-400 uppercase mb-1">Sales</div>
|
||||
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Professional</h2>
|
||||
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 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-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$9,962</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+29%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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 -->
|
||||
<LineChart :data="chartData" width="389" height="128" />
|
||||
</div>
|
||||
@@ -76,6 +76,9 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
// Gray line
|
||||
@@ -86,12 +89,15 @@ export default {
|
||||
145, 145, 354, 260, 188, 188, 300,
|
||||
300, 282, 364, 660, 554,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.gray[300],
|
||||
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
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,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Direct VS Indirect</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Direct VS Indirect</h2>
|
||||
</header>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100 flex items-center">
|
||||
<h2 class="font-semibold text-gray-800">Real Time Value</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Real Time Value</h2>
|
||||
<Tooltip class="ml-2">
|
||||
<div class="text-xs text-center whitespace-nowrap">Built with <a class="underline" href="https://www.chartjs.org/" target="_blank" rel="noreferrer">Chart.js</a></div>
|
||||
</Tooltip>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<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">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Top Countries</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Countries</h2>
|
||||
</header>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
@@ -12,7 +12,6 @@
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import DoughnutChart from '../../charts/DoughnutChart.vue'
|
||||
import EditMenu from '../../components/DropdownEditMenu.vue'
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig } from '../../utils/Utils'
|
||||
@@ -21,7 +20,6 @@ export default {
|
||||
name: 'DashboardCard06',
|
||||
components: {
|
||||
DoughnutChart,
|
||||
EditMenu,
|
||||
},
|
||||
setup() {
|
||||
const chartData = ref({
|
||||
@@ -42,7 +40,7 @@ export default {
|
||||
tailwindConfig().theme.colors.blue[500],
|
||||
tailwindConfig().theme.colors.indigo[900],
|
||||
],
|
||||
hoverBorderColor: tailwindConfig().theme.colors.white,
|
||||
borderWidth: 0,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Top Channels</h2>
|
||||
<div class="col-span-full xl:col-span-8 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Channels</h2>
|
||||
</header>
|
||||
<div class="p-3">
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<table class="table-auto w-full dark:text-slate-300">
|
||||
<!-- 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>
|
||||
<th class="p-2">
|
||||
<div class="font-semibold text-left">Source</div>
|
||||
@@ -29,7 +29,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- Table body -->
|
||||
<tbody class="text-sm font-medium divide-y divide-gray-100">
|
||||
<tbody class="text-sm font-medium divide-y divide-slate-100 dark:divide-slate-700">
|
||||
<!-- Row -->
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
@@ -38,14 +38,14 @@
|
||||
<circle fill="#24292E" cx="18" cy="18" r="18" />
|
||||
<path d="M18 10.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V24c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" fill="#FFF" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Github.com</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Github.com</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">2.4K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$3,877</div>
|
||||
<div class="text-center text-emerald-500">$3,877</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">267</div>
|
||||
@@ -62,14 +62,14 @@
|
||||
<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" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Twitter</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Twitter</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">2.2K</div>
|
||||
</td>
|
||||
<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 class="p-2">
|
||||
<div class="text-center">249</div>
|
||||
@@ -86,14 +86,14 @@
|
||||
<circle fill="#EA4335" cx="18" cy="18" r="18" />
|
||||
<path d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18z" fill="#FFF" fill-rule="nonzero" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Google (organic)</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Google (organic)</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">2.0K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$2,444</div>
|
||||
<div class="text-center text-emerald-500">$2,444</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">224</div>
|
||||
@@ -110,14 +110,14 @@
|
||||
<circle fill="#4BC9FF" cx="18" cy="18" r="18" />
|
||||
<path d="M26 14.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C14 19.9 13.4 15 12 15c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z" fill="#FFF" fill-rule="nonzero" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Vimeo.com</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Vimeo.com</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">1.9K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$2,236</div>
|
||||
<div class="text-center text-emerald-500">$2,236</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">220</div>
|
||||
@@ -134,14 +134,14 @@
|
||||
<circle fill="#0E2439" cx="18" cy="18" r="18" />
|
||||
<path d="M14.232 12.818V23H11.77V12.818h2.46zM15.772 23V12.818h2.462v4.087h4.012v-4.087h2.456V23h-2.456v-4.092h-4.012V23h-2.461z" fill="#E6ECF4" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Indiehackers.com</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Indiehackers.com</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">1.7K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$2,034</div>
|
||||
<div class="text-center text-emerald-500">$2,034</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">204</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100 flex items-center">
|
||||
<h2 class="font-semibold text-gray-800">Sales Over Time (all stores)</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Sales Over Time (all stores)</h2>
|
||||
</header>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
@@ -51,6 +51,10 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
// Blue line
|
||||
{
|
||||
@@ -68,8 +72,9 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
|
||||
clip: 20,
|
||||
},
|
||||
// Green line
|
||||
// emerald line
|
||||
{
|
||||
label: 'Average',
|
||||
data: [
|
||||
@@ -78,13 +83,14 @@ export default {
|
||||
223, 188, 114, 162, 200, 150, 118,
|
||||
118, 76, 122, 230, 268,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.green[500],
|
||||
borderColor: tailwindConfig().theme.colors.emerald[500],
|
||||
fill: false,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.green[500],
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
|
||||
clip: 20,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100 flex items-center">
|
||||
<h2 class="font-semibold text-gray-800">Sales VS Refunds</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Sales VS Refunds</h2>
|
||||
<Tooltip class="ml-2" size="lg">
|
||||
<div class="text-sm">Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
|
||||
</Tooltip>
|
||||
</header>
|
||||
<div class="px-5 py-3">
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 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-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">+$6,796</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-34%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Customers</h2>
|
||||
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Customers</h2>
|
||||
</header>
|
||||
<div class="p-3">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<!-- Table header -->
|
||||
<thead class="text-xs font-semibold uppercase 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>
|
||||
<th class="p-2 whitespace-nowrap">
|
||||
<div class="font-semibold text-left">Name</div>
|
||||
@@ -26,7 +26,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- Table body -->
|
||||
<tbody class="text-sm divide-y divide-gray-100">
|
||||
<tbody class="text-sm divide-y divide-slate-100 dark:divide-slate-700">
|
||||
<tr
|
||||
v-for="customer in customers"
|
||||
:key="customer.id"
|
||||
@@ -36,7 +36,7 @@
|
||||
<div class="w-10 h-10 shrink-0 mr-2 sm:mr-3">
|
||||
<img class="rounded-full" :src="customer.image" width="40" height="40" :alt="customer.name" />
|
||||
</div>
|
||||
<div class="font-medium text-gray-800">{{customer.name}}</div>
|
||||
<div class="font-medium text-slate-800 dark:text-slate-100">{{customer.name}}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2 whitespace-nowrap">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Reason for Refunds</h2>
|
||||
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Reason for Refunds</h2>
|
||||
</header>
|
||||
<div class="px-5 py-3">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Recent Activity</h2>
|
||||
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Recent Activity</h2>
|
||||
</header>
|
||||
<div class="p-3">
|
||||
|
||||
<!-- Card content -->
|
||||
<!-- "Today" group -->
|
||||
<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">
|
||||
<!-- Item -->
|
||||
<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" />
|
||||
</svg>
|
||||
</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="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">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></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"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
|
||||
<path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-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="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">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></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"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M15 13v-3l-5 4 5 4v-3h8a1 1 0 000-2h-8zM21 21h-8a1 1 0 000 2h8v3l5-4-5-4v3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-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">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></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"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,7 +62,7 @@
|
||||
</div>
|
||||
<!-- "Yesterday" group -->
|
||||
<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">
|
||||
<!-- Item -->
|
||||
<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" />
|
||||
</svg>
|
||||
</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="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">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></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"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,9 +89,9 @@
|
||||
</div>
|
||||
<div class="grow flex items-center text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center">The post <a class="font-medium text-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">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></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"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,107 +1,107 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Income/Expenses</h2>
|
||||
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Income/Expenses</h2>
|
||||
</header>
|
||||
<div class="p-3">
|
||||
|
||||
<!-- Card content -->
|
||||
<!-- "Today" group -->
|
||||
<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">
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
|
||||
<path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-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="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">
|
||||
<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>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-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="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">
|
||||
<span class="font-medium text-green-500">+249.88</span>
|
||||
<span class="font-medium text-emerald-500">+249.88</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-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="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">
|
||||
<span class="font-medium text-green-500">+99.99</span>
|
||||
<span class="font-medium text-emerald-500">+99.99</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-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="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">
|
||||
<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>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-gray-200 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-gray-400" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-slate-200 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-slate-400" viewBox="0 0 36 36">
|
||||
<path d="M21.477 22.89l-8.368-8.367a6 6 0 008.367 8.367zm1.414-1.413a6 6 0 00-8.367-8.367l8.367 8.367zM18 26a8 8 0 110-16 8 8 0 010 16z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-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="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">
|
||||
<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>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
|
||||
<path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-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">
|
||||
<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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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 -->
|
||||
<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 -->
|
||||
<div class="relative">
|
||||
<h1 class="text-2xl md:text-3xl text-gray-800 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
|
||||
<p>Here is what’s happening with your projects today:</p>
|
||||
<h1 class="text-2xl md:text-3xl text-slate-800 dark:text-slate-100 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
|
||||
<p class="dark:text-indigo-200">Here is what’s happening with your projects today:</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user