Skip to content

Commit

Permalink
v1.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
vikdiesel committed Jul 19, 2021
1 parent e9d3e27 commit 2df9a4c
Show file tree
Hide file tree
Showing 54 changed files with 11,887 additions and 16,238 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

* Built with **Vue.js 3**, **Tailwind CSS** framework & **Composition API**
* SPA with **Vuex** & **Router**
* **Production CSS** is only **24kb**
* **Production CSS** is only **27kb**
* Reusable components
* Free under MIT License

Expand Down
25,374 changes: 10,337 additions & 15,037 deletions package-lock.json

Large diffs are not rendered by default.

11 changes: 4 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "admin-one-vue-tailwind",
"version": "1.1.0",
"version": "1.2.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --modern",
"build": "vue-cli-service build",
"build:gh-pages": "DEPLOY_ENV=GH_PAGES vue-cli-service build --report",
"lint": "vue-cli-service lint",
"deploy": "gh-pages -d dist"
Expand All @@ -13,17 +13,13 @@
"axios": "^0.21.1",
"chart.js": "^3.3.2",
"core-js": "^3.6.5",
"dayjs": "^1.10.5",
"install": "^0.13.0",
"lodash": "^4.17.21",
"npm": "^7.17.0",
"numeral": "^2.0.6",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vue3-chart-v2": "^0.8.2",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@tailwindcss/forms": "^0.3.3",
"@vue/cli-plugin-babel": "^5.0.0-beta.2",
"@vue/cli-plugin-eslint": "^5.0.0-beta.2",
"@vue/cli-plugin-router": "^5.0.0-beta.2",
Expand All @@ -42,6 +38,7 @@
"gh-pages": "^3.2.0",
"postcss": "^8.3.0",
"postcss-import": "^14.0.2",
"tailwind-scrollbar": "^1.3.1",
"tailwindcss": "^2.1.4"
}
}
74 changes: 1 addition & 73 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@

<script>
// @ is an alias to /src
import { ref } from 'vue'
import { useStore } from 'vuex'
import { mdiDesktopMac, mdiTable, mdiSquareEditOutline, mdiAccountCircle, mdiLock, mdiViewList, mdiCreditCard, mdiHelpCircle, mdiGithub } from '@mdi/js'
import menu from '@/menu.js'
import NavBar from '@/components/NavBar'
import AsideMenu from '@/components/AsideMenu'
import FooterBar from '@/components/FooterBar'
Expand All @@ -30,77 +29,6 @@ export default {
avatar: 'https://avatars.dicebear.com/v2/gridy/John-Doe.svg'
})
const menu = ref(
[
'General',
[
{
to: '/',
icon: mdiDesktopMac,
label: 'Dashboard'
}
],
'Examples',
[
{
to: '/tables',
label: 'Tables',
icon: mdiTable,
updateMark: true
},
{
to: '/forms',
label: 'Forms',
icon: mdiSquareEditOutline
},
{
to: '/profile',
label: 'Profile',
icon: mdiAccountCircle
},
{
to: '/login',
label: 'Login',
icon: mdiLock
},
{
label: 'Submenus',
subLabel: 'Submenus Example',
icon: mdiViewList,
menu: [
{
href: '#void',
label: 'Sub-item One'
},
{
href: '#void',
label: 'Sub-item Two'
}
]
}
],
'About',
[
{
href: 'https://admin-one.justboil.me',
label: 'Premium Demo',
icon: mdiCreditCard,
prevent: true
},
{
href: 'https://justboil.me/tailwind-admin-templates',
label: 'About',
icon: mdiHelpCircle
},
{
href: 'https://github.com/justboil/admin-one-vue-tailwind',
label: 'GitHub',
icon: mdiGithub
}
]
]
)
return {
menu
}
Expand Down
52 changes: 52 additions & 0 deletions src/colors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
export const colorsBg = {
white: ['bg-white text-black'],
light: ['bg-gray-100 text-black'],
success: ['bg-green-500 text-white'],
danger: ['bg-red-500 text-white'],
warning: ['bg-yellow-500 text-white'],
info: ['bg-blue-500 text-white']
}

export const colorsBorders = {
white: ['border-gray-300'],
light: ['border-gray-200'],
success: ['border-green-600'],
danger: ['border-red-600'],
warning: ['border-yellow-600'],
info: ['border-blue-600']
}

export const colorsText = {
light: ['text-gray-700'],
success: ['text-green-500'],
danger: ['text-red-500'],
warning: ['text-yellow-500'],
info: ['text-blue-500']
}

export const colorsOutline = {
white: [...colorsBg.white, ...colorsBorders.white],
light: [...colorsText.light, ...colorsBorders.light],
success: [...colorsText.success, ...colorsBorders.success],
danger: [...colorsText.danger, ...colorsBorders.danger],
warning: [...colorsText.warning, ...colorsBorders.warning],
info: [...colorsText.info, ...colorsBorders.info]
}

export const colorsButtons = {
white: ['hover:bg-gray-50', ...colorsBg.white, ...colorsBorders.white],
light: ['hover:bg-gray-200', ...colorsBg.light, ...colorsBorders.light],
success: ['hover:bg-green-600', ...colorsBg.success, ...colorsBorders.success],
danger: ['hover:bg-red-600', ...colorsBg.danger, ...colorsBorders.danger],
warning: ['hover:bg-yellow-600', ...colorsBg.warning, ...colorsBorders.warning],
info: ['hover:bg-blue-600', ...colorsBg.info, ...colorsBorders.info]
}

export const colorsButtonsOutline = {
white: colorsButtons.white,
light: ['hover:bg-gray-100', ...colorsText.light, ...colorsBorders.light],
success: ['hover:bg-green-500 hover:text-white', ...colorsText.success, ...colorsBorders.success],
danger: ['hover:bg-red-500 hover:text-white', ...colorsText.danger, ...colorsBorders.danger],
warning: ['hover:bg-yellow-500 hover:text-white', ...colorsText.warning, ...colorsBorders.warning],
info: ['hover:bg-blue-500 hover:text-white', ...colorsText.info, ...colorsBorders.info]
}
41 changes: 28 additions & 13 deletions src/components/AsideMenu.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
<template>
<aside
v-show="isAsideVisible"
class="w-60 fixed top-0 z-40 h-screen bg-gray-800 transition-all md:left-0"
:class="{ '-left-60': !isAsideMobileExpanded, 'left-0': isAsideMobileExpanded }"
v-show="!isFormScreen"
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"
:class="[ isAsideMobileExpanded ? 'left-0' : '-left-60', isAsideLgActive ? 'block' : 'lg:hidden xl:block' ]"
>
<aside-tools is-main-menu>
<template #label>
Admin <b class="font-black">One</b>
</template>
</aside-tools>
<div class="flex flex-row w-full bg-gray-900 text-white flex-1 h-14 items-center">
<nav-bar-item type="hidden lg:flex xl:hidden" color="" @click="asideLgClose">
<icon :path="mdiMenu" class="cursor-pointer" size="24" />
</nav-bar-item>
<div class="flex-1 px-3">
<span>Admin</span> <b class="font-black">One</b>
</div>
</div>
<div>
<template v-for="(menuGroup, index) in menu">
<p v-if="typeof menuGroup === 'string'" :key="`a-${index}`" class="p-3 text-xs uppercase text-gray-400">
Expand All @@ -28,12 +32,14 @@
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import AsideTools from '@/components/AsideTools'
import { mdiMenu } from '@mdi/js'
import AsideMenuList from '@/components/AsideMenuList'
import NavBarItem from '@/components/NavBarItem'
import Icon from '@/components/Icon'
export default {
name: 'AsideMenu',
components: { AsideTools, AsideMenuList },
components: { AsideMenuList, NavBarItem, Icon },
props: {
menu: {
type: Array,
Expand All @@ -43,10 +49,16 @@ export default {
setup () {
const store = useStore()
const isAsideVisible = computed(() => !store.state.isFormScreen)
const isFormScreen = computed(() => store.state.isFormScreen)
const isAsideMobileExpanded = computed(() => store.state.isAsideMobileExpanded)
const isAsideLgActive = computed(() => store.state.isAsideLgActive)
const asideLgClose = () => {
store.dispatch('asideLgToggle', false)
}
const menuClick = (event, item) => {
if (item.prevent) {
event.preventDefault()
Expand All @@ -55,9 +67,12 @@ export default {
}
return {
isAsideVisible,
isFormScreen,
isAsideMobileExpanded,
menuClick
isAsideLgActive,
asideLgClose,
menuClick,
mdiMenu
}
}
}
Expand Down
23 changes: 0 additions & 23 deletions src/components/AsideTools.vue

This file was deleted.

66 changes: 66 additions & 0 deletions src/components/BottomOtherPagesSection.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<template>
<titled-section>
<h1 class="flex items-center justify-center flex-col md:flex-row text-2xl text-gray-500 mb-12">
<span class="md:mr-3">Please star this project on</span>
<a
href="https://github.com/justboil/admin-one-vue-tailwind"
class="inline-flex items-center justify-center text-blue-500"
target="_blank"
>
<icon :path="mdiGithub" size="36" class="mr-1" />
<span>GitHub</span>
</a>
</h1>
<h1 class="text-2xl text-gray-500">
Check out other components and layouts at<br>
<template v-for="(screen, index) in screens" :key="screen.path">
<router-link
:to="screen.path"
class="text-blue-500"
>{{ screen.title }}</router-link>
<template v-if="index + 1 < screens.length">, </template>
</template>
<br>
screen samples
</h1>
</titled-section>
</template>

<script>
import { useRouter } from 'vue-router'
import { mdiGithub } from '@mdi/js'
import TitledSection from '@/components/TitledSection'
import Icon from '@/components/Icon'
export default {
name: 'BottomOtherPagesSection',
components: {
TitledSection,
Icon
},
setup () {
const router = useRouter()
const routes = router.getRoutes()
const screens = []
for (const routeIndex in routes) {
const path = routes[routeIndex].path
const title = routes[routeIndex].meta && routes[routeIndex].meta.title ? routes[routeIndex].meta.title : null
if (title) {
screens.push({
path,
title
})
}
}
return {
screens,
mdiGithub
}
}
}
</script>
Loading

0 comments on commit 2df9a4c

Please sign in to comment.