v1.3.0

README.md

@@ -1,12 +1,13 @@
-# [Admin One — Free Vue.js 3 Tailwind Admin Dashboard](https://justboil.me/tailwind-admin-templates)
+# [Admin One — Free Vue.js 3 Tailwind Admin Dashboard with dark mode](https://justboil.me/tailwind-admin-templates/free-vue-dashboard)
 
-[![version](https://img.shields.io/github/v/release/justboil/admin-one-vue-tailwind?1.1.0)](https://justboil.me/tailwind-admin-templates)  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://justboil.me/tailwind-admin-templates)
+[![version](https://img.shields.io/github/v/release/justboil/admin-one-vue-tailwind?1.1.0)](https://justboil.me/tailwind-admin-templates/free-vue-dashboard)  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://justboil.me/tailwind-admin-templates)
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-vue3-tailwind/repository-preview-hi-res.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-vue3-tailwind/repository-preview-hi-res.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
 **Admin One** is simple, beautiful and free Vue.js 3 Tailwind CSS admin dashboard
 
 * Built with **Vue.js 3**, **Tailwind CSS** framework & **Composition API** 
+* **Dark mode**
 * SPA with **Vuex** & **Router**
 * **Production CSS** is only **27kb**
 * Reusable components
@@ -19,21 +20,21 @@
 
 Mobile layout with hidden aside menu and collapsable cards & tables
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-m-hi-res.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-m-hi-res.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
 ### Small laptops 1024px
 
 Small laptop layout with show/hide aside menu option
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-1024.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-1024.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-1024-menu.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-1024-menu.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
 ### Laptops & desktops
 
 Classic layout with aside menus on the left
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-no-libs.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-no-libs.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
 ## Table of Contents
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin-one-vue-tailwind",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

src/components/AsideMenu.vue

@@ -1,8 +1,8 @@
 <template>
   <aside
-    v-show="!isFormScreen"
+    v-show="!isFullScreen"
     class="w-60 fixed top-0 z-40 h-screen bg-gray-800 transition-position lg:left-0 overflow-y-scroll
-    scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-900 hover:scrollbar-thumb-gray-900
+    scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-600 scrollbar-track-gray-900
     dark:scrollbar-track-gray-800 dark:bg-gray-900"
     :class="[ isAsideMobileExpanded ? 'left-0' : '-left-60', isAsideLgActive ? 'block' : 'lg:hidden xl:block' ]"
   >
@@ -50,7 +50,7 @@ export default {
   setup () {
     const store = useStore()
 
-    const isFormScreen = computed(() => store.state.isFormScreen)
+    const isFullScreen = computed(() => store.state.isFullScreen)
 
     const isAsideMobileExpanded = computed(() => store.state.isAsideMobileExpanded)
 
@@ -65,7 +65,7 @@ export default {
     }
 
     return {
-      isFormScreen,
+      isFullScreen,
       isAsideMobileExpanded,
       isAsideLgActive,
       asideLgClose,

src/components/AsideMenuItem.vue

@@ -4,6 +4,7 @@
       :is="componentIs"
       :to="itemTo"
       :href="itemHref"
+      :target="itemTarget"
       exact-active-class="bg-gray-700 dark:bg-gray-800"
       class="flex text-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-700"
       :class="[isSubmenuList ? 'p-3 text-sm' : 'py-2']"
@@ -51,6 +52,8 @@ export default {
 
     const itemHref = computed(() => props.item.href || null)
 
+    const itemTarget = computed(() => componentIs.value === 'a' && props.item.target ? props.item.target : null)
+
     const menuClick = event => {
       emit('menu-click', event, props.item)
 
@@ -66,6 +69,7 @@ export default {
       dropdownIcon,
       itemTo,
       itemHref,
+      itemTarget,
       menuClick
     }
   }

src/components/BottomOtherPagesSection.vue

@@ -11,7 +11,7 @@
           <span>GitHub</span>
         </a>
     </h1>
-    <h1 class="text-2xl text-gray-500 dark:text-gray-400">
+    <h1 class="text-2xl text-gray-500 dark:text-gray-400 mb-12">
       Check out other components and layouts at<br>
       <template v-for="(screen, index) in screens" :key="screen.path">
         <router-link
@@ -23,6 +23,9 @@
       <br>
       screen samples
     </h1>
+    <h1 class="text-2xl text-gray-500 dark:text-gray-400">
+      Get more with <a href="https://justboil.me/tailwind-admin-templates/vue-dashboard" target="_blank" class="text-blue-500">Premium version</a>
+    </h1>
   </titled-section>
 </template>
 

src/components/FooterBar.vue

@@ -2,7 +2,8 @@
   <footer v-show="isFooterBarVisible" class="bg-white py-2 px-6 dark:bg-gray-900">
     <level>
       <div>
-        <b>&copy; {{ year }}, JustBoil.me</b> &mdash; Admin One Demo
+        <b>&copy; {{ year }}, JustBoil.me</b>.
+        Get more with <a href="https://justboil.me/tailwind-admin-templates/vue-dashboard" target="_blank" class="text-blue-500">Premium version</a>
       </div>
       <div class="md:py-2">
       <a href="https://justboil.me">
@@ -30,7 +31,7 @@ export default {
 
     const year = computed(() => new Date().getFullYear())
 
-    const isFooterBarVisible = computed(() => !store.state.isFormScreen)
+    const isFooterBarVisible = computed(() => !store.state.isFullScreen)
 
     return {
       year,

src/components/FullScreenSection.vue

@@ -41,7 +41,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/HeroBar.vue

@@ -4,13 +4,19 @@
       <h1 class="text-3xl font-semibold leading-tight">
         <slot />
       </h1>
-      <jb-button href="https://tailwind-vue.justboil.me/" target="_blank" label="Premium version" :icon="mdiMonitorClean" />
+      <jb-button
+        :label="darkMode ? 'Light Mode' : 'Dark Mode'"
+        :icon="mdiThemeLightDark"
+        @click="darkModeToggle"
+      />
     </level>
   </section>
 </template>
 
 <script>
-import { mdiMonitorClean } from '@mdi/js'
+import { mdiThemeLightDark } from '@mdi/js'
+import { useStore } from 'vuex'
+import { computed } from 'vue'
 import Level from '@/components/Level'
 import JbButton from '@/components/JbButton'
 
@@ -21,8 +27,18 @@ export default {
     JbButton
   },
   setup () {
+    const store = useStore()
+
+    const darkMode = computed(() => store.state.darkMode)
+
+    const darkModeToggle = () => {
+      store.dispatch('darkMode')
+    }
+
     return {
-      mdiMonitorClean
+      darkMode,
+      darkModeToggle,
+      mdiThemeLightDark
     }
   }
 }

src/components/MainSection.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     class="px-0 md:px-6"
-    :class="[ isFormScreen ? 'flex h-screen items-center justify-center' : 'py-6' ]"
+    :class="[ isFullScreen ? 'flex h-screen items-center justify-center' : 'py-6' ]"
   >
     <slot/>
   </section>
@@ -16,10 +16,10 @@ export default {
   setup () {
     const store = useStore()
 
-    const isFormScreen = computed(() => store.state.isFormScreen)
+    const isFullScreen = computed(() => store.state.isFullScreen)
 
     return {
-      isFormScreen
+      isFullScreen
     }
   }
 }

src/components/NavBar.vue

@@ -126,7 +126,7 @@ export default {
       store.dispatch('darkMode')
     }
 
-    const isNavBarVisible = computed(() => !store.state.isFormScreen)
+    const isNavBarVisible = computed(() => !store.state.isFullScreen)
 
     const isAsideMobileExpanded = computed(() => store.state.isAsideMobileExpanded)
 

src/css/_app.css

@@ -14,6 +14,6 @@ body {
   @apply overflow-hidden lg:overflow-visible;
 }
 
-.form-screen body {
+.full-screen body {
   @apply p-0;
 }

src/main.js

@@ -10,7 +10,8 @@ import './css/main.css'
 store.dispatch('fetch', 'clients')
 store.dispatch('fetch', 'history')
 
-store.dispatch('darkMode')
+/* Dark mode */
+// store.dispatch('darkMode')
 
 /* Default title tag */
 const defaultDocumentTitle = 'Admin One Vue 3 Tailwind'
@@ -20,7 +21,7 @@ router.beforeEach(to => {
   store.dispatch('asideMobileToggle', false)
   store.dispatch('asideLgToggle', false)
 
-  store.dispatch('formScreenToggle', !!to.meta.formScreen)
+  store.dispatch('fullScreenToggle', !!to.meta.fullScreen)
 })
 
 router.afterEach(to => {

src/menu.js

@@ -76,14 +76,16 @@ export default [
   'About',
   [
     {
-      href: 'https://tailwind-vue.justboil.me/',
+      href: 'https://justboil.me/tailwind-admin-templates/vue-dashboard',
       label: 'Premium version',
-      icon: mdiMonitorClean
+      icon: mdiMonitorClean,
+      target: '_blank'
     },
     {
       href: 'https://github.com/justboil/admin-one-vue-tailwind',
       label: 'GitHub',
-      icon: mdiGithub
+      icon: mdiGithub,
+      target: '_blank'
     }
   ]
 ]

src/router/index.js

@@ -58,7 +58,7 @@ const routes = [
   {
     meta: {
       title: 'Login',
-      formScreen: true
+      fullScreen: true
     },
     path: '/login',
     name: 'login',
@@ -67,7 +67,7 @@ const routes = [
   {
     meta: {
       title: 'Error',
-      formScreen: true
+      fullScreen: true
     },
     path: '/error',
     name: 'error',

src/store/index.js

@@ -8,8 +8,8 @@ export default createStore({
     userEmail: null,
     userAvatar: null,
 
-    /* FormScreen - fullscreen form layout (e.g. login page) */
-    isFormScreen: false,
+    /* fullScreen - fullscreen form layout (e.g. login page) */
+    isFullScreen: false,
 
     /* Aside */
     isAsideMobileExpanded: false,
@@ -59,10 +59,10 @@ export default createStore({
       commit('basic', { key: 'isAsideLgActive', value: payload !== null ? payload : !state.isAsideLgActive })
     },
 
-    formScreenToggle ({ commit, state }, value) {
-      commit('basic', { key: 'isFormScreen', value })
+    fullScreenToggle ({ commit, state }, value) {
+      commit('basic', { key: 'isFullScreen', value })
 
-      document.documentElement.classList[value ? 'add' : 'remove']('form-screen')
+      document.documentElement.classList[value ? 'add' : 'remove']('full-screen')
     },
 
     darkMode ({ commit, state }) {

src/views/Responsive.vue

@@ -24,7 +24,7 @@
   <main-section>
     <div class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden">
       <img
-        src="https://justboil.me/images/one-tailwind/repository-preview-1024.png"
+        src="https://justboil.me/images/one-tailwind/repository-preview-1024.png?v=1.3"
         class="block"
       >
     </div>
@@ -33,7 +33,7 @@
   <main-section>
     <div class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden">
       <img
-        src="https://justboil.me/images/one-tailwind/repository-preview-1024-menu.png"
+        src="https://justboil.me/images/one-tailwind/repository-preview-1024-menu.png?v=1.3"
         class="block"
       >
     </div>
@@ -46,7 +46,7 @@
   <main-section>
     <div class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden">
       <img
-        src="https://justboil.me/images/one-tailwind/repository-preview-no-libs.png"
+        src="https://justboil.me/images/one-tailwind/repository-preview-no-libs.png?v=1.3"
         class="block"
       >
     </div>