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

4.0.0 - Updgrade to Tailwind v4

Browse Source
This commit is contained in:
pasqualevitiello
2025-02-04 00:27:59 +01:00
parent deafb3554b
commit b12db930e5
37 changed files with 1542 additions and 3124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@@ -1,5 +1,10 @@
# CHANGELOG.md
## [4.0.0] - 2025-02-04
- Updgrade to Tailwind v4
- Update dependencies
## [3.1.0] 2024-12-08
- Upgrade to Vite 6

11
README.md
View File

@@ -3,6 +3,9 @@
![Mosaic TailwindCSS template preview](https://github.com/cruip/vuejs-admin-dashboard-template/assets/2683512/3b9af06c-f3b2-45c5-8c60-052989cbebcb)
**Mosaic Lite Vue** is a responsive dashboard template built on top of TailwindCSS and fully coded in Vue.js. This template is a great starting point for anyone who wants to create a user interface for SaaS products, administrator dashboards, modern web apps, and more.
**UPDATE 2025-02-04** Added Tailwind v4 support!
Use it for whatever you want, and be sure to reach us out on [Twitter](https://twitter.com/Cruip_com) if you build anything cool/useful with it.
[Also available in React](https://github.com/cruip/tailwind-dashboard-template)
@@ -39,17 +42,17 @@ This project was built with [Vue 3](https://v3.vuejs.org/) and [Vite](https://vi
### Project setup
```
npm install
pnpm install
```
#### Compiles and hot-reloads for development
```
npm run dev
pnpm run dev
```
#### Compiles and minifies for production
```
npm run build
pnpm run build
```
#### Customize configuration
@@ -62,7 +65,7 @@ See [Configuration Reference](https://vitejs.dev/guide/).
## Terms and License
- Released under the [GPL](https://www.gnu.org/licenses/gpl-3.0.html).
- Copyright 2021 [Cruip](https://cruip.com/).
- Copyright 2025 [Cruip](https://cruip.com/).
- Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template.
- Attribution is not required, although it is really appreciated.

2755
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -19,11 +19,11 @@
"vue-router": "^4.2.5"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.0.0",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"tailwindcss": "^4.0.0",
"vite": "^6.0.3"
}
}

1158
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

3
postcss.config.cjs
View File

@@ -1,6 +1,5 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
}

26
src/charts/BarChart01.vue
View File

@@ -10,7 +10,7 @@
<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { getChartColors } from './ChartjsConfig'
import {
Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
@@ -18,7 +18,7 @@ import {
import 'chartjs-adapter-moment'
// Import utilities
import { tailwindConfig, formatValue } from '../utils/Utils'
import { formatValue } from '../utils/Utils'
Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend)
@@ -31,7 +31,7 @@ export default {
const legend = ref(null)
let chart = null
const darkMode = useDark()
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
onMounted(() => {
const ctx = canvas.value
@@ -130,10 +130,10 @@ export default {
// Color box
const box = document.createElement('span')
box.style.display = 'block'
box.style.width = tailwindConfig().theme.width[3]
box.style.height = tailwindConfig().theme.height[3]
box.style.borderRadius = tailwindConfig().theme.borderRadius.full
box.style.marginRight = tailwindConfig().theme.margin[2]
box.style.width = '12px'
box.style.height = '12px'
box.style.borderRadius = 'calc(infinity * 1px)'
box.style.marginRight = '8px'
box.style.borderWidth = '3px'
box.style.borderColor = item.fillStyle
box.style.pointerEvents = 'none'
@@ -143,15 +143,15 @@ export default {
labelContainer.style.alignItems = 'center'
const value = document.createElement('span')
value.classList.add('text-gray-800', 'dark:text-gray-100')
value.style.fontSize = tailwindConfig().theme.fontSize['3xl'][0]
value.style.lineHeight = tailwindConfig().theme.fontSize['3xl'][1].lineHeight
value.style.fontWeight = tailwindConfig().theme.fontWeight.bold
value.style.marginRight = tailwindConfig().theme.margin[2]
value.style.fontSize = '30px'
value.style.lineHeight = 'calc(2.25 / 1.875)'
value.style.fontWeight = '700'
value.style.marginRight = '8px'
value.style.pointerEvents = 'none'
const label = document.createElement('span')
label.classList.add('text-gray-500', 'dark:text-gray-400')
label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
label.style.fontSize = '14px'
label.style.lineHeight = 'calc(1.25 / 0.875)'
const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0)
const valueText = document.createTextNode(formatValue(theValue))
const labelText = document.createTextNode(item.text)

4
src/charts/BarChart02.vue
View File

@@ -5,7 +5,7 @@
<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { getChartColors } from './ChartjsConfig'
import {
Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
@@ -25,7 +25,7 @@ export default {
const canvas = ref(null)
let chart = null
const darkMode = useDark()
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
onMounted(() => {
const ctx = canvas.value

24
src/charts/BarChart03.vue
View File

@@ -13,7 +13,7 @@
<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { getChartColors } from './ChartjsConfig'
import {
Chart, BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend,
@@ -21,7 +21,7 @@ import {
import 'chartjs-adapter-moment'
// Import utilities
import { tailwindConfig } from '../utils/Utils'
import { getCssVariable } from '../utils/Utils'
Chart.register(BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend)
@@ -34,7 +34,7 @@ export default {
const legend = ref(null)
let chart = null
const darkMode = useDark()
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
onMounted(() => {
@@ -108,22 +108,22 @@ export default {
li.style.display = 'flex'
li.style.justifyContent = 'space-between'
li.style.alignItems = 'center'
li.style.paddingTop = tailwindConfig().theme.padding[2.5]
li.style.paddingBottom = tailwindConfig().theme.padding[2.5]
li.style.paddingTop = '10px'
li.style.paddingBottom = '10px'
const wrapper = document.createElement('div')
wrapper.style.display = 'flex'
wrapper.style.alignItems = 'center'
const box = document.createElement('div')
box.style.width = tailwindConfig().theme.width[3]
box.style.height = tailwindConfig().theme.width[3]
box.style.borderRadius = tailwindConfig().theme.borderRadius.sm
box.style.marginRight = tailwindConfig().theme.margin[3]
box.style.width = '12px'
box.style.height = '12px'
box.style.borderRadius = '4px'
box.style.marginRight = '12px'
box.style.backgroundColor = item.fillStyle
const label = document.createElement('div')
const value = document.createElement('div')
value.style.fontWeight = tailwindConfig().theme.fontWeight.medium
value.style.marginLeft = tailwindConfig().theme.margin[3]
value.style.color = item.text === 'Other' ? tailwindConfig().theme.colors.gray[400] : item.fillStyle
value.style.fontWeight = '500'
value.style.marginLeft = '12px'
value.style.color = item.text === 'Other' ? getCssVariable('--color-gray-400') : item.fillStyle
const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0)
const valueText = document.createTextNode(`${parseInt(theValue / max * 100)}%`)
const labelText = document.createTextNode(item.text)

34
src/charts/ChartjsConfig.js
View File

@@ -1,7 +1,7 @@
// Import Chart.js
import { Chart, Tooltip } from 'chart.js'
// Import Tailwind config
import { tailwindConfig, hexToRGB } from '../utils/Utils'
import { adjustColorOpacity, getCssVariable } from '../utils/Utils'
Chart.register(Tooltip)
@@ -30,33 +30,33 @@ export const chartAreaGradient = (ctx, chartArea, colorStops) => {
return gradient;
};
export const chartColors = {
export const getChartColors = () => ({
textColor: {
light: tailwindConfig().theme.colors.gray[400],
dark: tailwindConfig().theme.colors.gray[500]
light: getCssVariable('--color-gray-400'),
dark: getCssVariable('--color-gray-500')
},
gridColor: {
light: tailwindConfig().theme.colors.gray[100],
dark: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[700])}, 0.6)`
light: getCssVariable('--color-gray-100'),
dark: adjustColorOpacity(getCssVariable('--color-gray-700'), 0.6)
},
backdropColor: {
light: tailwindConfig().theme.colors.white,
dark: tailwindConfig().theme.colors.gray[800]
light: getCssVariable('--color-white'),
dark: getCssVariable('--color-gray-800')
},
tooltipTitleColor: {
light: tailwindConfig().theme.colors.gray[800],
dark: tailwindConfig().theme.colors.gray[100]
light: getCssVariable('--color-gray-800'),
dark: getCssVariable('--color-gray-100')
},
tooltipBodyColor : {
light: tailwindConfig().theme.colors.gray[500],
dark: tailwindConfig().theme.colors.gray[400]
light: getCssVariable('--color-gray-500'),
dark: getCssVariable('--color-gray-400')
},
tooltipBgColor: {
light: tailwindConfig().theme.colors.white,
dark: tailwindConfig().theme.colors.gray[700]
light: getCssVariable('--color-white'),
dark: getCssVariable('--color-gray-700')
},
tooltipBorderColor: {
light: tailwindConfig().theme.colors.gray[200],
dark: tailwindConfig().theme.colors.gray[600]
light: getCssVariable('--color-gray-200'),
dark: getCssVariable('--color-gray-600')
},
}
})

19
src/charts/DoughnutChart.vue
View File

@@ -12,16 +12,13 @@
<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { getChartColors } from './ChartjsConfig'
import {
Chart, DoughnutController, ArcElement, TimeScale, Tooltip,
} from 'chart.js'
import 'chartjs-adapter-moment'
// Import utilities
import { tailwindConfig } from '../utils/Utils'
Chart.register(DoughnutController, ArcElement, TimeScale, Tooltip)
export default {
@@ -33,7 +30,7 @@ export default {
const legend = ref(null)
let chart = null
const darkMode = useDark()
const { tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
const { tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
onMounted(() => {
const ctx = canvas.value
@@ -79,10 +76,10 @@ export default {
const items = c.options.plugins.legend.labels.generateLabels(c)
items.forEach((item) => {
const li = document.createElement('li')
li.style.margin = tailwindConfig().theme.margin[1]
li.style.margin = '4px'
// Button element
const button = document.createElement('button')
button.classList.add('btn-xs', 'bg-white', 'dark:bg-gray-700', 'text-gray-500', 'dark:text-gray-400', 'shadow-sm', 'shadow-black/[0.08]', 'rounded-full')
button.classList.add('btn-xs', 'bg-white', 'dark:bg-gray-700', 'text-gray-500', 'dark:text-gray-400', 'shadow-xs', 'shadow-black/[0.08]', 'rounded-full')
button.style.opacity = item.hidden ? '.3' : ''
button.onclick = () => {
c.toggleDataVisibility(item.index, !item.index)
@@ -91,11 +88,11 @@ export default {
// Color box
const box = document.createElement('span')
box.style.display = 'block'
box.style.width = tailwindConfig().theme.width[2]
box.style.height = tailwindConfig().theme.height[2]
box.style.width = '8px'
box.style.height = '8px'
box.style.backgroundColor = item.fillStyle
box.style.borderRadius = tailwindConfig().theme.borderRadius.sm
box.style.marginRight = tailwindConfig().theme.margin[1]
box.style.borderRadius = '4px'
box.style.marginRight = '4px'
box.style.pointerEvents = 'none'
// Label
const label = document.createElement('span')

4
src/charts/LineChart01.vue
View File

@@ -5,7 +5,7 @@
<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { getChartColors } from './ChartjsConfig'
import {
Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
@@ -25,7 +25,7 @@ export default {
const canvas = ref(null)
let chart = null
const darkMode = useDark()
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
onMounted(() => {
const ctx = canvas.value

18
src/charts/LineChart02.vue
View File

@@ -19,7 +19,7 @@
<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { getChartColors } from './ChartjsConfig'
import {
Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
@@ -27,7 +27,7 @@ import {
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)
@@ -40,7 +40,7 @@ export default {
const legend = ref(null)
let chart = null
const darkMode = useDark()
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
onMounted(() => {
const ctx = canvas.value
@@ -134,18 +134,18 @@ export default {
// Color box
const box = document.createElement('span')
box.style.display = 'block'
box.style.width = tailwindConfig().theme.width[3]
box.style.height = tailwindConfig().theme.height[3]
box.style.borderRadius = tailwindConfig().theme.borderRadius.full
box.style.marginRight = tailwindConfig().theme.margin[2]
box.style.width = '12px'
box.style.height = '12px'
box.style.borderRadius = 'calc(infinity * 1px)'
box.style.marginRight = '8px'
box.style.borderWidth = '3px'
box.style.borderColor = c.data.datasets[item.datasetIndex].borderColor
box.style.pointerEvents = 'none'
// Label
const label = document.createElement('span')
label.classList.add('text-gray-500', 'dark:text-gray-400')
label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
label.style.fontSize = '14px'
label.style.lineHeight = 'calc(1.25 / 0.875)'
const labelText = document.createTextNode(item.text)
label.appendChild(labelText)
li.appendChild(button)

14
src/charts/RealtimeChart.vue
View File

@@ -13,7 +13,7 @@
<script>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDark } from '@vueuse/core'
import { chartColors } from './ChartjsConfig'
import { getChartColors } from './ChartjsConfig'
import {
Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip,
@@ -21,7 +21,7 @@ import {
import 'chartjs-adapter-moment'
// Import utilities
import { tailwindConfig, hexToRGB, formatValue } from '../utils/Utils'
import { adjustColorOpacity, getCssVariable, formatValue } from '../utils/Utils'
Chart.register(LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip)
@@ -35,7 +35,7 @@ export default {
const chartDeviation = ref(null)
let chart = null
const darkMode = useDark()
const { textColor, gridColor, tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
const { textColor, gridColor, tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
// function that updates header values
const handleHeaderValues = (data, chartValue, chartDeviation) => {
@@ -44,11 +44,11 @@ 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 = `rgba(${hexToRGB(tailwindConfig().theme.colors.red[500])}, 0.2)`
chartDeviation.value.style.color = tailwindConfig().theme.colors.red[700];
chartDeviation.value.style.backgroundColor = adjustColorOpacity(getCssVariable('--color-red-500'), 0.2)
chartDeviation.value.style.color = getCssVariable('--color-red-700');
} else {
chartDeviation.value.style.backgroundColor = `rgba(${hexToRGB(tailwindConfig().theme.colors.green[500])}, 0.2)`
chartDeviation.value.style.color = tailwindConfig().theme.colors.green[700];
chartDeviation.value.style.backgroundColor = adjustColorOpacity(getCssVariable('--color-green-500'), 0.2)
chartDeviation.value.style.color = getCssVariable('--color-green-700');
}
chartDeviation.value.innerHTML = `${diff > 0 ? '+' : ''}${diff.toFixed(2)}%`
}

2
src/components/ModalSearch.vue
View File

@@ -8,7 +8,7 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="modalOpen" class="fixed inset-0 bg-gray-900 bg-opacity-30 z-50 transition-opacity" aria-hidden="true"></div>
<div v-show="modalOpen" class="fixed inset-0 bg-gray-900/30 z-50 transition-opacity" aria-hidden="true"></div>
</transition>
<!-- Modal dialog -->
<transition

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

@@ -26,7 +26,7 @@
width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
}
@screen lg {
@media (width >= theme(--breakpoint-lg)) {
.flatpickr-calendar {
@apply left-0 right-auto;
margin-left: 0;

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

@@ -15,7 +15,7 @@
@apply text-2xl font-extrabold tracking-tight;
}
@screen md {
@media (width >= theme(--breakpoint-md)) {
.h1 {
@apply text-5xl;
}
@@ -30,7 +30,7 @@
.btn-lg,
.btn-sm,
.btn-xs {
@apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition;
@apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-xs transition;
}
.btn {
@@ -67,14 +67,14 @@ input[type="search"]::-webkit-search-results-decoration {
}
.form-checkbox {
@apply rounded;
@apply rounded-sm;
}
.form-input,
.form-textarea,
.form-multiselect,
.form-select {
@apply text-sm text-gray-800 dark:text-gray-100 leading-5 py-2 px-3 border-gray-200 hover:border-gray-300 focus:border-gray-300 dark:border-gray-700/60 dark:hover:border-gray-600 dark:focus:border-gray-600 shadow-sm rounded-lg;
@apply text-sm text-gray-800 dark:text-gray-100 leading-5 py-2 px-3 border-gray-200 hover:border-gray-300 focus:border-gray-300 dark:border-gray-700/60 dark:hover:border-gray-600 dark:focus:border-gray-600 shadow-xs rounded-lg;
}
.form-input,
@@ -88,7 +88,7 @@ input[type="search"]::-webkit-search-results-decoration {
.form-checkbox,
.form-radio {
@apply text-violet-500 checked:bg-violet-500 dark:checked:border-transparent border border-gray-300 focus:border-violet-300 dark:border-gray-700/60 dark:focus:border-violet-500/50;
@apply text-violet-500 checked:bg-violet-500 checked:border-transparent border border-gray-300 dark:border-gray-700/60 dark:checked:border-transparent focus-visible:not-checked:ring-2 focus-visible:not-checked:ring-violet-500/50;
}
/* Switch element */
@@ -111,8 +111,12 @@ input[type="search"]::-webkit-search-results-decoration {
transition: all .15s ease-out;
}
.form-switch input[type="checkbox"] + label {
@apply bg-gray-400 dark:bg-gray-700;
}
.form-switch input[type="checkbox"]:checked + label {
@apply bg-violet-500;
@apply bg-violet-500;
}
.form-switch input[type="checkbox"]:checked + label > span:first-child {

141
src/css/style.css
View File

@@ -1,10 +1,139 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss';
@import './additional-styles/flatpickr.css';
@import './additional-styles/utility-patterns.css' layer(components);
/* Additional styles */
@import 'additional-styles/utility-patterns.css';
@import 'additional-styles/flatpickr.css';
@plugin "@tailwindcss/forms" {
strategy: base;
}
@import 'tailwindcss/utilities';
@custom-variant dark (&:is(.dark *));
@custom-variant sidebar-expanded (&:is(.sidebar-expanded *));
@theme {
--shadow-sm: 0 1px 1px 0 rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.02);
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #bfc4cd;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-gray-950: #030712;
--color-violet-50: #f1eeff;
--color-violet-100: #e6e1ff;
--color-violet-200: #d2cbff;
--color-violet-300: #b7acff;
--color-violet-400: #9c8cff;
--color-violet-500: #8470ff;
--color-violet-600: #755ff8;
--color-violet-700: #5d47de;
--color-violet-800: #4634b1;
--color-violet-900: #2f227c;
--color-violet-950: #1c1357;
--color-sky-50: #e3f3ff;
--color-sky-100: #d1ecff;
--color-sky-200: #b6e1ff;
--color-sky-300: #a0d7ff;
--color-sky-400: #7bc8ff;
--color-sky-500: #67bfff;
--color-sky-600: #56b1f3;
--color-sky-700: #3193da;
--color-sky-800: #1c71ae;
--color-sky-900: #124d79;
--color-sky-950: #0b324f;
--color-green-50: #d2ffe2;
--color-green-100: #b1fdcd;
--color-green-200: #8bf0b0;
--color-green-300: #67e294;
--color-green-400: #4bd37d;
--color-green-500: #3ec972;
--color-green-600: #34bd68;
--color-green-700: #239f52;
--color-green-800: #15773a;
--color-green-900: #0f5429;
--color-green-950: #0a3f1e;
--color-red-50: #ffe8e8;
--color-red-100: #ffd1d1;
--color-red-200: #ffb2b2;
--color-red-300: #ff9494;
--color-red-400: #ff7474;
--color-red-500: #ff5656;
--color-red-600: #fa4949;
--color-red-700: #e63939;
--color-red-800: #c52727;
--color-red-900: #941818;
--color-red-950: #600f0f;
--color-yellow-50: #fff2c9;
--color-yellow-100: #ffe7a0;
--color-yellow-200: #ffe081;
--color-yellow-300: #ffd968;
--color-yellow-400: #f7cd4c;
--color-yellow-500: #f0bb33;
--color-yellow-600: #dfad2b;
--color-yellow-700: #bc9021;
--color-yellow-800: #816316;
--color-yellow-900: #4f3d0e;
--color-yellow-950: #342809;
--font-inter: "Inter", "sans-serif";
--text-xs: 0.75rem;
--text-xs--line-height: 1.5;
--text-sm: 0.875rem;
--text-sm--line-height: 1.5715;
--text-base: 1rem;
--text-base--line-height: 1.5;
--text-base--letter-spacing: -0.01em;
--text-lg: 1.125rem;
--text-lg--line-height: 1.5;
--text-lg--letter-spacing: -0.01em;
--text-xl: 1.25rem;
--text-xl--line-height: 1.5;
--text-xl--letter-spacing: -0.01em;
--text-2xl: 1.5rem;
--text-2xl--line-height: 1.33;
--text-2xl--letter-spacing: -0.01em;
--text-3xl: 1.88rem;
--text-3xl--line-height: 1.33;
--text-3xl--letter-spacing: -0.01em;
--text-4xl: 2.25rem;
--text-4xl--line-height: 1.25;
--text-4xl--letter-spacing: -0.02em;
--text-5xl: 3rem;
--text-5xl--line-height: 1.25;
--text-5xl--letter-spacing: -0.02em;
--text-6xl: 3.75rem;
--text-6xl--line-height: 1.2;
--text-6xl--letter-spacing: -0.02em;
--breakpoint-xs: 480px;
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

2
src/partials/Banner.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-50">
<div class="bg-gray-800 border border-transparent dark:border-gray-700/60 text-gray-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
<div class="bg-gray-800 border border-transparent dark:border-gray-700/60 text-gray-50 text-sm p-3 md:rounded-sm shadow-lg flex justify-between">
<div class='text-gray-500 inline-flex'><a class="font-medium hover:underline text-gray-50" href="https://github.com/cruip/vuejs-admin-dashboard-template" target="_blank" rel="noreferrer">Download<span class="hidden sm:inline"> on GitHub</span></a> <span class="italic px-1.5">or</span> <a class="font-medium hover:underline text-emerald-400" href="https://cruip.com/mosaic/" target="_blank" rel="noreferrer">Check Premium Version</a></div>
<button class="text-gray-500 hover:text-gray-400 pl-2 ml-3 border-l border-gray-700/60" @click="open = false">
<span class="sr-only">Close</span>

2
src/partials/Header.vue
View File

@@ -2,7 +2,7 @@
<header
class="sticky top-0 before:absolute before:inset-0 before:backdrop-blur-md max-lg:before:bg-white/90 dark:max-lg:before:bg-gray-800/90 before:-z-10 z-30"
:class="[
variant === 'v2' || variant === 'v3' ? 'before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10' : 'max-lg:shadow-sm lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90',
variant === 'v2' || variant === 'v3' ? 'before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10' : 'max-lg:shadow-xs lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90',
variant === 'v2' ? 'dark:before:bg-gray-800' : '',
variant === 'v3' ? 'dark:before:bg-gray-900' : '',
]"

10
src/partials/Sidebar.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="min-w-fit">
<!-- Sidebar backdrop (mobile only) -->
<div class="fixed inset-0 bg-gray-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true"></div>
<div class="fixed inset-0 bg-gray-900/30 z-40 lg:hidden lg:z-auto transition-opacity duration-200" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true"></div>
<!-- Sidebar -->
<div
id="sidebar"
ref="sidebar"
class="flex lg:!flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out"
:class="[variant === 'v2' ? 'border-r border-gray-200 dark:border-gray-700/60' : 'rounded-r-2xl shadow-sm', sidebarOpen ? 'translate-x-0' : '-translate-x-64']"
class="flex lg:flex! flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:w-64! shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out"
:class="[variant === 'v2' ? 'border-r border-gray-200 dark:border-gray-700/60' : 'rounded-r-2xl shadow-xs', sidebarOpen ? 'translate-x-0' : '-translate-x-64']"
>
<!-- Sidebar header -->
@@ -399,8 +399,8 @@
<span class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Messages</span>
</div>
<!-- Badge -->
<div class="flex flex-shrink-0 ml-2">
<span class="inline-flex items-center justify-center h-5 text-xs font-medium text-white bg-violet-400 px-2 rounded">4</span>
<div class="flex shrink-0 ml-2">
<span class="inline-flex items-center justify-center h-5 text-xs font-medium text-white bg-violet-400 px-2 rounded-sm">4</span>
</div>
</div>
</a>

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Plus</h2>
@@ -36,7 +36,7 @@ import LineChart from '../../charts/LineChart01.vue'
import EditMenu from '../../components/DropdownEditMenu.vue'
// Import utilities
import { tailwindConfig, hexToRGB } from '../../utils/Utils'
import { adjustColorOpacity, getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard01',
@@ -71,16 +71,16 @@ export default {
const chart = context.chart;
const {ctx, chartArea} = chart;
return chartAreaGradient(ctx, chartArea, [
{ stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
{ stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
{ stop: 0, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0) },
{ stop: 1, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0.2) }
]);
},
borderColor: tailwindConfig().theme.colors.violet[500],
borderColor: getCssVariable('--color-violet-500'),
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBackgroundColor: getCssVariable('--color-violet-500'),
pointHoverBackgroundColor: getCssVariable('--color-violet-500'),
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
@@ -94,12 +94,12 @@ export default {
314, 314, 314, 388, 314, 202, 202,
202, 202, 314, 720, 642,
],
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
borderColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
pointHoverBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Advanced</h2>
@@ -36,7 +36,7 @@ import LineChart from '../../charts/LineChart01.vue'
import EditMenu from '../../components/DropdownEditMenu.vue'
// Import utilities
import { tailwindConfig, hexToRGB } from '../../utils/Utils'
import { adjustColorOpacity, getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard01',
@@ -71,16 +71,16 @@ export default {
const chart = context.chart;
const {ctx, chartArea} = chart;
return chartAreaGradient(ctx, chartArea, [
{ stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
{ stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
{ stop: 0, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0) },
{ stop: 1, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0.2) }
]);
},
borderColor: tailwindConfig().theme.colors.violet[500],
borderColor: getCssVariable('--color-violet-500'),
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBackgroundColor: getCssVariable('--color-violet-500'),
pointHoverBackgroundColor: getCssVariable('--color-violet-500'),
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
@@ -94,12 +94,12 @@ export default {
154, 273, 191, 191, 126, 263, 349,
252, 423, 622, 470, 532,
],
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
borderColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
pointHoverBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<div class="px-5 pt-5">
<header class="flex justify-between items-start mb-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Professional</h2>
@@ -36,7 +36,7 @@ import LineChart from '../../charts/LineChart01.vue'
import EditMenu from '../../components/DropdownEditMenu.vue'
// Import utilities
import { tailwindConfig, hexToRGB } from '../../utils/Utils'
import { adjustColorOpacity, getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard01',
@@ -71,16 +71,16 @@ export default {
const chart = context.chart;
const {ctx, chartArea} = chart;
return chartAreaGradient(ctx, chartArea, [
{ stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
{ stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
{ stop: 0, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0) },
{ stop: 1, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0.2) }
]);
},
borderColor: tailwindConfig().theme.colors.violet[500],
borderColor: getCssVariable('--color-violet-500'),
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBackgroundColor: getCssVariable('--color-violet-500'),
pointHoverBackgroundColor: getCssVariable('--color-violet-500'),
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
@@ -94,12 +94,12 @@ export default {
145, 145, 354, 260, 188, 188, 300,
300, 282, 364, 660, 554,
],
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
borderColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
pointBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
pointHoverBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Direct VS Indirect</h2>
</header>
@@ -14,7 +14,7 @@ import { ref } from 'vue'
import BarChart from '../../charts/BarChart01.vue'
// Import utilities
import { tailwindConfig } from '../../utils/Utils'
import { getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard03',
@@ -34,8 +34,8 @@ export default {
data: [
800, 1600, 900, 1300, 1950, 1700,
],
backgroundColor: tailwindConfig().theme.colors.sky[500],
hoverBackgroundColor: tailwindConfig().theme.colors.sky[600],
backgroundColor: getCssVariable('--color-sky-500'),
hoverBackgroundColor: getCssVariable('--color-sky-600'),
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,
@@ -46,8 +46,8 @@ export default {
data: [
4900, 2600, 5350, 4800, 5200, 4800,
],
backgroundColor: tailwindConfig().theme.colors.violet[500],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
backgroundColor: getCssVariable('--color-violet-500'),
hoverBackgroundColor: getCssVariable('--color-violet-600'),
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Real Time Value</h2>
<Tooltip class="ml-2">
@@ -19,7 +19,7 @@ import { chartAreaGradient } from '../../charts/ChartjsConfig'
import RealtimeChart from '../../charts/RealtimeChart.vue'
// Import utilities
import { tailwindConfig, hexToRGB } from '../../utils/Utils'
import { adjustColorOpacity, getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard05',
@@ -95,15 +95,15 @@ export default {
const chart = context.chart;
const {ctx, chartArea} = chart;
return chartAreaGradient(ctx, chartArea, [
{ stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
{ stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
{ stop: 0, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0) },
{ stop: 1, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0.2) }
]);
},
borderColor: tailwindConfig().theme.colors.violet[500],
borderColor: getCssVariable('--color-violet-500'),
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBackgroundColor: getCssVariable('--color-violet-500'),
clip: 20,
tension: 0.2,
},

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Top Countries</h2>
</header>
@@ -14,7 +14,7 @@ import { ref } from 'vue'
import DoughnutChart from '../../charts/DoughnutChart.vue'
// Import utilities
import { tailwindConfig } from '../../utils/Utils'
import { getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard06',
@@ -31,14 +31,14 @@ export default {
35, 30, 35,
],
backgroundColor: [
tailwindConfig().theme.colors.violet[500],
tailwindConfig().theme.colors.sky[500],
tailwindConfig().theme.colors.violet[800],
getCssVariable('--color-violet-500'),
getCssVariable('--color-sky-500'),
getCssVariable('--color-violet-800'),
],
hoverBackgroundColor: [
tailwindConfig().theme.colors.violet[600],
tailwindConfig().theme.colors.sky[600],
tailwindConfig().theme.colors.violet[900],
getCssVariable('--color-violet-600'),
getCssVariable('--color-sky-600'),
getCssVariable('--color-violet-900'),
],
borderWidth: 0,
},

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

@@ -1,5 +1,5 @@
<template>
<div class="col-span-full xl:col-span-8 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="col-span-full xl:col-span-8 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Top Channels</h2>
</header>
@@ -9,7 +9,7 @@
<div class="overflow-x-auto">
<table class="table-auto w-full dark:text-gray-300">
<!-- Table header -->
<thead class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm">
<thead class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 rounded-xs">
<tr>
<th class="p-2">
<div class="font-semibold text-left">Source</div>

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Sales Over Time (all stores)</h2>
</header>
@@ -11,11 +11,10 @@
<script>
import { ref } from 'vue'
import { chartAreaGradient } from '../../charts/ChartjsConfig'
import LineChart from '../../charts/LineChart02.vue'
// Import utilities
import { tailwindConfig } from '../../utils/Utils'
import { getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard08',
@@ -45,13 +44,13 @@ export default {
122, 110, 104, 152, 166, 233, 268,
252, 284, 284, 333, 323,
],
borderColor: tailwindConfig().theme.colors.violet[500],
borderColor: getCssVariable('--color-violet-500'),
fill: false,
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
pointBackgroundColor: getCssVariable('--color-violet-500'),
pointHoverBackgroundColor: getCssVariable('--color-violet-500'),
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
clip: 20,
@@ -66,12 +65,12 @@ export default {
276, 0, 124, 42, 124, 88, 88,
215, 156, 88, 124, 64,
],
borderColor: tailwindConfig().theme.colors.sky[500],
borderColor: getCssVariable('--color-sky-500'),
fill: false,
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.sky[500],
pointBackgroundColor: getCssVariable('--color-sky-500'),
clip: 20,
tension: 0.2,
},
@@ -84,12 +83,12 @@ export default {
223, 188, 114, 162, 200, 150, 118,
118, 76, 122, 230, 268,
],
borderColor: tailwindConfig().theme.colors.green[500],
borderColor: getCssVariable('--color-green-500'),
fill: false,
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 3,
pointBackgroundColor: tailwindConfig().theme.colors.green[500],
pointBackgroundColor: getCssVariable('--color-green-500'),
clip: 20,
tension: 0.2,
},

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Sales VS Refunds</h2>
<Tooltip class="ml-2" size="lg">
@@ -17,7 +17,7 @@
<!-- Change the height attribute to adjust the chart height -->
<BarChart :data="chartData" width="595" height="248" />
</div>
</div>
</div>
</template>
<script>
@@ -26,7 +26,7 @@ import Tooltip from '../../components/Tooltip.vue'
import BarChart from '../../charts/BarChart02.vue'
// Import utilities
import { tailwindConfig } from '../../utils/Utils'
import { getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard09',
@@ -47,11 +47,11 @@ export default {
data: [
6200, 9200, 6600, 8800, 5200, 9200,
],
backgroundColor: tailwindConfig().theme.colors.violet[500],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,
backgroundColor: getCssVariable('--color-violet-500'),
hoverBackgroundColor: getCssVariable('--color-violet-600'),
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,
},
// Blue bars
{
@@ -59,8 +59,8 @@ export default {
data: [
-4000, -2600, -5350, -4000, -7500, -2000,
],
backgroundColor: tailwindConfig().theme.colors.violet[200],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[300],
backgroundColor: getCssVariable('--color-violet-200'),
hoverBackgroundColor: getCssVariable('--color-violet-300'),
barPercentage: 0.7,
categoryPercentage: 0.7,
borderRadius: 4,
@@ -70,7 +70,7 @@ export default {
return {
chartData,
}
}
}
}
</script>

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

@@ -1,5 +1,5 @@
<template>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Customers</h2>
</header>
@@ -9,7 +9,7 @@
<div class="overflow-x-auto">
<table class="table-auto w-full">
<!-- Table header -->
<thead class="text-xs font-semibold uppercase dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50">
<thead class="text-xs font-semibold uppercase dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50">
<tr>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-left">Name</div>

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

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Reason for Refunds</h2>
</header>
@@ -22,7 +22,7 @@ import { ref } from 'vue'
import BarChart from '../../charts/BarChart03.vue'
// Import utilities
import { tailwindConfig } from '../../utils/Utils'
import { getCssVariable } from '../../utils/Utils'
export default {
name: 'DashboardCard11',
@@ -36,40 +36,40 @@ export default {
{
label: 'Having difficulties using the product',
data: [131],
backgroundColor: tailwindConfig().theme.colors.violet[500],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
backgroundColor: getCssVariable('--color-violet-500'),
hoverBackgroundColor: getCssVariable('--color-violet-600'),
barPercentage: 1,
categoryPercentage: 1,
},
{
label: 'Missing features I need',
data: [100],
backgroundColor: tailwindConfig().theme.colors.violet[700],
hoverBackgroundColor: tailwindConfig().theme.colors.violet[800],
backgroundColor: getCssVariable('--color-violet-700'),
hoverBackgroundColor: getCssVariable('--color-violet-800'),
barPercentage: 1,
categoryPercentage: 1,
},
{
label: 'Not satisfied about the quality of the product',
data: [81],
backgroundColor: tailwindConfig().theme.colors['sky'][500],
hoverBackgroundColor: tailwindConfig().theme.colors['sky'][600],
backgroundColor: getCssVariable('--color-sky-500'),
hoverBackgroundColor: getCssVariable('--color-sky-600'),
barPercentage: 1,
categoryPercentage: 1,
},
{
label: 'The product doesn’t look as advertised',
data: [65],
backgroundColor: tailwindConfig().theme.colors.green[500],
hoverBackgroundColor: tailwindConfig().theme.colors.green[600],
backgroundColor: getCssVariable('--color-green-500'),
hoverBackgroundColor: getCssVariable('--color-green-600'),
barPercentage: 1,
categoryPercentage: 1,
},
{
label: 'Other',
data: [72],
backgroundColor: tailwindConfig().theme.colors.gray[200],
hoverBackgroundColor: tailwindConfig().theme.colors.gray[300],
backgroundColor: getCssVariable('--color-gray-200'),
hoverBackgroundColor: getCssVariable('--color-gray-300'),
barPercentage: 1,
categoryPercentage: 1,
},

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

@@ -1,5 +1,5 @@
<template>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Recent Activity</h2>
</header>
@@ -8,7 +8,7 @@
<!-- Card content -->
<!-- "Today" group -->
<div>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 rounded-xs font-semibold p-2">Today</header>
<ul class="my-1">
<!-- Item -->
<li class="flex px-2">
@@ -62,7 +62,7 @@
</div>
<!-- "Yesterday" group -->
<div>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Yesterday</header>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 rounded-xs font-semibold p-2">Yesterday</header>
<ul class="my-1">
<!-- Item -->
<li class="flex px-2">
@@ -105,6 +105,6 @@
<script>
export default {
name: 'DashboardCard12',
name: 'DashboardCard10',
}
</script>

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

@@ -1,5 +1,5 @@
<template>
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
<div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
<header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
<h2 class="font-semibold text-gray-800 dark:text-gray-100">Income/Expenses</h2>
</header>
@@ -8,7 +8,7 @@
<!-- Card content -->
<!-- "Today" group -->
<div>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
<header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 rounded-xs font-semibold p-2">Today</header>
<ul class="my-1">
<!-- Item -->
<li class="flex px-2">
@@ -115,6 +115,6 @@
<script>
export default {
name: 'DashboardCard113',
name: 'DashboardCard11',
}
</script>

75
src/utils/Utils.js
View File

@@ -1,26 +1,3 @@
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfigFile from '@tailwindConfig'
export const tailwindConfig = () => {
return resolveConfig(tailwindConfigFile)
}
export const hexToRGB = (h) => {
let r = 0;
let g = 0;
let b = 0;
if (h.length === 4) {
r = `0x${h[1]}${h[1]}`;
g = `0x${h[2]}${h[2]}`;
b = `0x${h[3]}${h[3]}`;
} else if (h.length === 7) {
r = `0x${h[1]}${h[2]}`;
g = `0x${h[3]}${h[4]}`;
b = `0x${h[5]}${h[6]}`;
}
return `${+r},${+g},${+b}`;
};
export const formatValue = (value) => Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
@@ -32,3 +9,55 @@ export const formatThousands = (value) => Intl.NumberFormat('en-US', {
maximumSignificantDigits: 3,
notation: 'compact',
}).format(value);
export const getCssVariable = (variable) => {
return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
};
const adjustHexOpacity = (hexColor, opacity) => {
// Remove the '#' if it exists
hexColor = hexColor.replace('#', '');
// Convert hex to RGB
const r = parseInt(hexColor.substring(0, 2), 16);
const g = parseInt(hexColor.substring(2, 4), 16);
const b = parseInt(hexColor.substring(4, 6), 16);
// Return RGBA string
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
const adjustHSLOpacity = (hslColor, opacity) => {
// Convert HSL to HSLA
return hslColor.replace('hsl(', 'hsla(').replace(')', `, ${opacity})`);
};
const adjustOKLCHOpacity = (oklchColor, opacity) => {
// Add alpha value to OKLCH color
return oklchColor.replace(/oklch\((.*?)\)/, (match, p1) => `oklch(${p1} / ${opacity})`);
};
export const adjustColorOpacity = (color, opacity) => {
if (color.startsWith('#')) {
return adjustHexOpacity(color, opacity);
} else if (color.startsWith('hsl')) {
return adjustHSLOpacity(color, opacity);
} else if (color.startsWith('oklch')) {
return adjustOKLCHOpacity(color, opacity);
} else {
throw new Error('Unsupported color format');
}
};
export const oklchToRGBA = (oklchColor) => {
// Create a temporary div to use for color conversion
const tempDiv = document.createElement('div');
tempDiv.style.color = oklchColor;
document.body.appendChild(tempDiv);
// Get the computed style and convert to RGB
const computedColor = window.getComputedStyle(tempDiv).color;
document.body.removeChild(tempDiv);
return computedColor;
};

139
tailwind.config.js
View File

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

11
vite.config.js
View File

@@ -1,4 +1,3 @@
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
@@ -8,16 +7,6 @@ export default defineConfig({
'process.env': process.env
},
plugins: [vue()],
resolve: {
alias: {
'@tailwindConfig': path.resolve(__dirname, 'tailwind.config.js'),
},
},
optimizeDeps: {
include: [
'@tailwindConfig',
]
},
build: {
commonjsOptions: {
transformMixedEsModules: true,