Skip to content

Commit 8bd8a69

Browse files
vikdieselvikdiesel
committed
upd: simplify color styles usage (prefer css over js)
1 parent 8bfa91e commit 8bd8a69

File tree

16 files changed

+137
-123
lines changed

16 files changed

+137
-123
lines changed

‎.laravel-guide/resources/js/app.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,6 @@ createInertiaApp({
3434

3535
const styleStore = useStyleStore(pinia);
3636

37-
/* App style */
38-
styleStore.setStyle(localStorage[styleKey] ?? "basic");
39-
4037
/* Dark mode */
4138
if (
4239
(!localStorage[darkModeKey] &&

‎.nuxt-guide/README.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ module.exports = {
9090
```vue
9191
<script setup>
9292
import { useStyleStore } from '@/stores/style.js'
93-
import { darkModeKey, styleKey } from '@/config.js'
93+
import { darkModeKey } from '@/config.js'
9494
9595
useHead({
9696
titleTemplate: (titleChunk) => {
@@ -102,12 +102,6 @@ useHead({
102102
103103
const styleStore = useStyleStore()
104104
105-
const currentStyle = typeof localStorage !== 'undefined' && localStorage[styleKey]
106-
? localStorage[styleKey]
107-
: 'basic'
108-
109-
styleStore.setStyle(currentStyle)
110-
111105
const currentStoredDarkMode = typeof localStorage !== 'undefined' && localStorage[darkModeKey] === '1'
112106
113107
if ((!currentStoredDarkMode && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) || currentStoredDarkMode) {

‎index.html‎

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,59 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
<!doctype html>
2+
<html lang="en" class="style-basic">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="/favicon.png">
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<link rel="icon" href="/favicon.png" />
88
<title>Admin One - Vue.js 3 Tailwind dashboard template</title>
99

10-
<meta name="description" content="Admin One - free Vue.js 3 Tailwind dashboard">
10+
<meta name="description" content="Admin One - free Vue.js 3 Tailwind dashboard" />
1111

12-
<meta property="og:url" content="https://justboil.github.io/admin-one-vue-tailwind/">
13-
<meta property="og:site_name" content="JustBoil.me">
14-
<meta property="og:title" content="Admin One Vue.js 3 Tailwind free">
15-
<meta property="og:description" content="Admin One - free Vue.js 3 Tailwind dashboard with dark mode. Vite or Nuxt or Laravel">
16-
<meta property="og:image" content="https://static.justboil.me/templates/one/repo-tailwind-vue.png">
17-
<meta property="og:image:type" content="image/png">
18-
<meta property="og:image:width" content="1920">
19-
<meta property="og:image:height" content="960">
12+
<meta property="og:url" content="https://justboil.github.io/admin-one-vue-tailwind/" />
13+
<meta property="og:site_name" content="JustBoil.me" />
14+
<meta property="og:title" content="Admin One Vue.js 3 Tailwind free" />
15+
<meta
16+
property="og:description"
17+
content="Admin One - free Vue.js 3 Tailwind dashboard with dark mode. Vite or Nuxt or Laravel"
18+
/>
19+
<meta
20+
property="og:image"
21+
content="https://static.justboil.me/templates/one/repo-tailwind-vue.png"
22+
/>
23+
<meta property="og:image:type" content="image/png" />
24+
<meta property="og:image:width" content="1920" />
25+
<meta property="og:image:height" content="960" />
2026

21-
<meta property="twitter:card" content="summary_large_image">
22-
<meta property="twitter:title" content="Admin One Vue.js 3 Tailwind free">
23-
<meta property="twitter:description" content="Admin One - free Vue.js 3 Tailwind dashboard with dark mode. Vite or Nuxt or Laravel">
24-
<meta property="twitter:image:src" content="https://static.justboil.me/templates/one/repo-tailwind-vue.png">
25-
<meta property="twitter:image:width" content="1920">
26-
<meta property="twitter:image:height" content="960">
27+
<meta property="twitter:card" content="summary_large_image" />
28+
<meta property="twitter:title" content="Admin One Vue.js 3 Tailwind free" />
29+
<meta
30+
property="twitter:description"
31+
content="Admin One - free Vue.js 3 Tailwind dashboard with dark mode. Vite or Nuxt or Laravel"
32+
/>
33+
<meta
34+
property="twitter:image:src"
35+
content="https://static.justboil.me/templates/one/repo-tailwind-vue.png"
36+
/>
37+
<meta property="twitter:image:width" content="1920" />
38+
<meta property="twitter:image:height" content="960" />
2739

2840
<!-- Global site tag (gtag.js) - Google Analytics -->
2941
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130795909-1"></script>
3042
<script>
31-
window.dataLayer = window.dataLayer || [];
32-
function gtag(){dataLayer.push(arguments);}
33-
gtag('js', new Date());
34-
gtag('config', 'UA-130795909-1');
43+
window.dataLayer = window.dataLayer || []
44+
function gtag() {
45+
dataLayer.push(arguments)
46+
}
47+
gtag('js', new Date())
48+
gtag('config', 'UA-130795909-1')
3549
</script>
3650
</head>
3751
<body>
3852
<noscript>
39-
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
53+
<strong
54+
>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it
55+
to continue.</strong
56+
>
4057
</noscript>
4158
<div id="app"></div>
4259
<script type="module" src="/src/main.js"></script>

‎postcss.config.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
/* eslint-env node */
22
module.exports = {
3-
plugins: [
4-
require("postcss-import"),
5-
require("tailwindcss"),
6-
require("autoprefixer"),
7-
],
8-
};
3+
plugins: {
4+
'postcss-import': {},
5+
'tailwindcss/nesting': {},
6+
tailwindcss: {},
7+
autoprefixer: {}
8+
}
9+
}

‎src/components/AsideMenuItem.vue‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup>
22
import { ref, computed } from 'vue'
33
import { RouterLink } from 'vue-router'
4-
import { useStyleStore } from '@/stores/style.js'
54
import { mdiMinus, mdiPlus } from '@mdi/js'
65
import { getButtonColor } from '@/colors.js'
76
import BaseIcon from '@/components/BaseIcon.vue'
@@ -17,21 +16,17 @@ const props = defineProps({
1716
1817
const emit = defineEmits(['menu-click'])
1918
20-
const styleStore = useStyleStore()
21-
2219
const hasColor = computed(() => props.item && props.item.color)
2320
24-
const asideMenuItemActiveStyle = computed(() =>
25-
hasColor.value ? '' : styleStore.asideMenuItemActiveStyle
26-
)
21+
const asideMenuItemActiveStyle = computed(() => (hasColor.value ? '' : 'aside-menu-item-active'))
2722
2823
const isDropdownActive = ref(false)
2924
3025
const componentClass = computed(() => [
3126
props.isDropdownList ? 'py-3 px-6 text-sm' : 'py-3',
3227
hasColor.value
3328
? getButtonColor(props.item.color, false, true)
34-
: `${styleStore.asideMenuItemStyle} dark:text-slate-300 dark:hover:text-white`
29+
: `aside-menu-item dark:text-slate-300 dark:hover:text-white`
3530
])
3631
3732
const hasDropdown = computed(() => !!props.item.menu)
@@ -84,10 +79,7 @@ const menuClick = (event) => {
8479
<AsideMenuList
8580
v-if="hasDropdown"
8681
:menu="item.menu"
87-
:class="[
88-
styleStore.asideMenuDropdownStyle,
89-
isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden'
90-
]"
82+
:class="['aside-menu-dropdown', isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden']"
9183
is-dropdown-list
9284
/>
9385
</li>

‎src/components/AsideMenuLayer.vue‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,8 @@ const asideLgCloseClick = (event) => {
3838
id="aside"
3939
class="lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden"
4040
>
41-
<div
42-
:class="styleStore.asideStyle"
43-
class="lg:rounded-2xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900"
44-
>
45-
<div
46-
:class="styleStore.asideBrandStyle"
47-
class="flex flex-row h-14 items-center justify-between dark:bg-slate-900"
48-
>
41+
<div class="aside lg:rounded-2xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900">
42+
<div class="aside-brand flex flex-row h-14 items-center justify-between dark:bg-slate-900">
4943
<div class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
5044
<b class="font-black">One</b>
5145
</div>
@@ -54,7 +48,7 @@ const asideLgCloseClick = (event) => {
5448
</button>
5549
</div>
5650
<div
57-
:class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle"
51+
:class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : 'aside-scrollbars'"
5852
class="flex-1 overflow-y-auto overflow-x-hidden"
5953
>
6054
<AsideMenuList :menu="menu" @menu-click="menuClick" />

‎src/components/NavBarItem.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
33
import { RouterLink } from 'vue-router'
44
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
5-
import { useStyleStore } from '@/stores/style.js'
65
import { useMainStore } from '@/stores/main.js'
76
import BaseIcon from '@/components/BaseIcon.vue'
87
import UserAvatarCurrentUser from '@/components/UserAvatarCurrentUser.vue'
@@ -30,13 +29,11 @@ const is = computed(() => {
3029
return 'div'
3130
})
3231
33-
const styleStore = useStyleStore()
34-
3532
const componentClass = computed(() => {
3633
const base = [
3734
isDropdownActive.value
38-
? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`
39-
: `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
35+
? `navbar-item-label-active dark:text-slate-400`
36+
: `navbar-item-label dark:text-white dark:hover:text-slate-400`,
4037
props.item.menu ? 'lg:py-2 lg:px-3' : 'py-2 px-3'
4138
]
4239

‎src/components/NavBarItemPlain.vue‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
11
<script setup>
2-
import { useStyleStore } from '@/stores/style'
3-
42
defineProps({
53
display: {
64
type: String,
75
default: 'flex'
86
},
97
useMargin: Boolean
108
})
11-
12-
const styleStore = useStyleStore()
139
</script>
1410

1511
<template>
1612
<div
17-
:class="[
18-
display,
19-
styleStore.navBarItemLabelStyle,
20-
styleStore.navBarItemLabelHoverStyle,
21-
useMargin ? 'my-2 mx-3' : 'py-2 px-3'
22-
]"
23-
class="items-center cursor-pointer dark:text-white dark:hover:text-slate-400"
13+
:class="[display, useMargin ? 'my-2 mx-3' : 'py-2 px-3']"
14+
class="navbar-item-label items-center cursor-pointer dark:text-white dark:hover:text-slate-400"
2415
>
2516
<slot />
2617
</div>

‎src/components/OverlayLayer.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup>
2-
import { useStyleStore } from '@/stores/style.js'
3-
42
defineProps({
53
zIndex: {
64
type: String,
@@ -17,8 +15,6 @@ const emit = defineEmits(['overlay-click'])
1715
const overlayClick = (event) => {
1816
emit('overlay-click', event)
1917
}
20-
21-
const styleStore = useStyleStore()
2218
</script>
2319

2420
<template>
@@ -35,8 +31,7 @@ const styleStore = useStyleStore()
3531
leave-to-class="opacity-0"
3632
>
3733
<div
38-
class="absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
39-
:class="styleStore.overlayStyle"
34+
class="overlay absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
4035
@click="overlayClick"
4136
/>
4237
</transition>

‎src/config.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
export const darkModeKey = 'darkMode'
22

3-
export const styleKey = 'style'
4-
53
export const containerMaxW = 'xl:max-w-6xl xl:mx-auto'

0 commit comments

Comments
 (0)