├── now.json ├── .browserslistrc ├── .env ├── cypress.json ├── babel.config.js ├── postcss.config.js ├── tests ├── unit │ ├── .eslintrc.js │ └── example.spec.js └── e2e │ ├── .eslintrc.js │ ├── specs │ └── test.js │ ├── support │ ├── index.js │ └── commands.js │ └── plugins │ └── index.js ├── public ├── favicon.ico ├── favicon.png └── index.html ├── src ├── sass │ ├── vuetify-material │ │ ├── _map.sass │ │ ├── _pagination.sass │ │ ├── _chip.sass │ │ ├── _notification.sass │ │ ├── _tab.sass │ │ ├── _table.sass │ │ ├── _view.sass │ │ ├── _modal.sass │ │ ├── _footer.sass │ │ ├── _settings.sass │ │ ├── _appbar.sass │ │ ├── _buttons.sass │ │ ├── _card.sass │ │ └── _sidebar.sass │ ├── variables.scss │ └── overrides.sass ├── assets │ ├── lock.jpg │ ├── login.jpg │ ├── logo.png │ ├── pricing.jpg │ ├── register.jpg │ ├── clint-mckoy.jpg │ └── vuetify.svg ├── plugins │ ├── chartist.js │ ├── vuetify.js │ ├── vee-validate.js │ └── base.js ├── App.vue ├── components │ └── base │ │ ├── Card.vue │ │ ├── ItemSubGroup.vue │ │ ├── Subheading.vue │ │ ├── VComponent.vue │ │ ├── MaterialTabs.vue │ │ ├── MaterialAlert.vue │ │ ├── MaterialSnackbar.vue │ │ ├── MaterialTestimony.vue │ │ ├── Item.vue │ │ ├── MaterialChartCard.vue │ │ ├── MaterialStatsCard.vue │ │ ├── ItemGroup.vue │ │ └── MaterialCard.vue ├── views │ └── dashboard │ │ ├── components │ │ └── core │ │ │ ├── View.vue │ │ │ ├── Footer.vue │ │ │ ├── AppBar.vue │ │ │ ├── Drawer.vue │ │ │ └── Settings.vue │ │ ├── Index.vue │ │ ├── maps │ │ └── GoogleMaps.vue │ │ ├── component │ │ ├── Typography.vue │ │ ├── Icons.vue │ │ ├── Grid.vue │ │ ├── Buttons.vue │ │ ├── Notifications.vue │ │ └── Tabs.vue │ │ ├── Upgrade.vue │ │ ├── pages │ │ ├── Timeline.vue │ │ ├── UserProfile.vue │ │ └── Rtl.vue │ │ ├── tables │ │ └── RegularTables.vue │ │ └── Dashboard.vue ├── i18n.js ├── store.js ├── main.js ├── locales │ └── en.json └── router.js ├── .editorconfig ├── CHANGELOG.md ├── vue.config.js ├── .eslintrc.js ├── .gitignore ├── ISSUE_TEMPLATE.md ├── jest.config.js ├── LICENSE.md ├── package.json └── README.md /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2 3 | } 4 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | VUE_APP_I18N_LOCALE=en 2 | VUE_APP_I18N_FALLBACK_LOCALE=en 3 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app', 4 | ], 5 | } 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vuetify-material-dashboard/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vuetify-material-dashboard/HEAD/public/favicon.png -------------------------------------------------------------------------------- /src/sass/vuetify-material/_map.sass: -------------------------------------------------------------------------------- 1 | .mapouter 2 | position: relative !important 3 | height: 100vh !important 4 | -------------------------------------------------------------------------------- /src/assets/lock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vuetify-material-dashboard/HEAD/src/assets/lock.jpg -------------------------------------------------------------------------------- /src/assets/login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vuetify-material-dashboard/HEAD/src/assets/login.jpg -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vuetify-material-dashboard/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/pricing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vuetify-material-dashboard/HEAD/src/assets/pricing.jpg -------------------------------------------------------------------------------- /src/assets/register.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vuetify-material-dashboard/HEAD/src/assets/register.jpg -------------------------------------------------------------------------------- /src/assets/clint-mckoy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vuetify-material-dashboard/HEAD/src/assets/clint-mckoy.jpg -------------------------------------------------------------------------------- /src/plugins/chartist.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import 'chartist/dist/chartist.min.css' 3 | 4 | Vue.use(require('vue-chartist')) 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_pagination.sass: -------------------------------------------------------------------------------- 1 | .v-pagination 2 | .v-pagination__item, 3 | .v-pagination__navigation 4 | &:focus 5 | outline: none 6 | -------------------------------------------------------------------------------- /src/components/base/Card.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_chip.sass: -------------------------------------------------------------------------------- 1 | .v-chip.v-size--small 2 | height: 20px 3 | 4 | .v-chip__content 5 | font-size: 10px 6 | font-weight: 500 7 | .v-chip__close 8 | font-size: 15px 9 | margin-top: -1px 10 | -------------------------------------------------------------------------------- /tests/e2e/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | 'cypress', 4 | ], 5 | env: { 6 | mocha: true, 7 | 'cypress/globals': true, 8 | }, 9 | rules: { 10 | strict: 'off', 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [2.1.0] 2020-02-29 4 | - refactor: all the product was changed and now it's the same version with PRO version and also the structure it's the same 5 | 6 | ## [1.0.0] 2018-10-16 7 | ### Initial Release 8 | -------------------------------------------------------------------------------- /tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe('My First Test', () => { 4 | it('Visits the app root url', () => { 5 | cy.visit('/') 6 | cy.contains('h1', 'Welcome to Your Vue.js App') 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /tests/unit/example.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import App from '@/App.vue' 3 | 4 | test('App should work', () => { 5 | const wrapper = shallowMount(App) 6 | expect(wrapper.text()).toMatch('Welcome to Your Vue.js App') 7 | }) 8 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_notification.sass: -------------------------------------------------------------------------------- 1 | .v-alert 2 | padding: 20px 15px 3 | 4 | .v-alert__wrapper 5 | .v-alert__icon 6 | height: 38px 7 | min-width: 38px 8 | .v-alert__content 9 | font-weight: 300 10 | span 11 | font-size: 12px 12 | font-weight: 500 13 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_tab.sass: -------------------------------------------------------------------------------- 1 | .v-card--wizard 2 | .v-tabs-bar 3 | .v-slide-group__wrapper 4 | overflow: visible 5 | display: -webkit-inline-box 6 | contain: inherit 7 | 8 | .v-slide-group__content 9 | z-index: 2 10 | 11 | .v-tab:not(:first-child) 12 | margin-left: 5px 13 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devServer: { 3 | disableHostCheck: true, 4 | }, 5 | 6 | transpileDependencies: ['vuetify'], 7 | 8 | pluginOptions: { 9 | i18n: { 10 | locale: 'en', 11 | fallbackLocale: 'en', 12 | localeDir: 'locales', 13 | enableInSFC: false, 14 | }, 15 | }, 16 | } 17 | -------------------------------------------------------------------------------- /src/views/dashboard/components/core/View.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: 'vuetify', 7 | rules: { 8 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 9 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 10 | }, 11 | parserOptions: { 12 | parser: 'babel-eslint', 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | package-lock.json 5 | 6 | /tests/e2e/videos/ 7 | /tests/e2e/screenshots/ 8 | 9 | # local env files 10 | .env.local 11 | .env.*.local 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # Editor directories and files 19 | .idea 20 | .vscode 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /src/i18n.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueI18n from 'vue-i18n' 3 | 4 | import en from 'vuetify/lib/locale/en' 5 | 6 | Vue.use(VueI18n) 7 | 8 | const messages = { 9 | en: { 10 | ...require('@/locales/en.json'), 11 | $vuetify: en, 12 | }, 13 | } 14 | 15 | export default new VueI18n({ 16 | locale: process.env.VUE_APP_I18N_LOCALE || 'en', 17 | fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', 18 | messages, 19 | }) 20 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/components/base/ItemSubGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /src/assets/vuetify.svg: -------------------------------------------------------------------------------- 1 | Artboard 47 2 | -------------------------------------------------------------------------------- /src/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuetify from 'vuetify/lib' 3 | import i18n from '@/i18n' 4 | import '@/sass/overrides.sass' 5 | 6 | Vue.use(Vuetify) 7 | 8 | const theme = { 9 | primary: '#4CAF50', 10 | secondary: '#9C27b0', 11 | accent: '#9C27b0', 12 | info: '#00CAE3', 13 | } 14 | 15 | export default new Vuetify({ 16 | lang: { 17 | t: (key, ...params) => i18n.t(key, params), 18 | }, 19 | theme: { 20 | themes: { 21 | dark: theme, 22 | light: theme, 23 | }, 24 | }, 25 | }) 26 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_table.sass: -------------------------------------------------------------------------------- 1 | .v-data-table td 2 | font-weight: 300 3 | padding: 12px 8px 4 | 5 | .v-data-table table thead tr th 6 | font-weight: 300 7 | font-size: 17px 8 | padding: 0px 8px 9 | 10 | .v-data-table table tbody tr td .v-btn 11 | margin-right: 0px !important 12 | 13 | .v-data-table .v-data-table-header__sort-badge 14 | font-size: 10px 15 | 16 | .v-data-table.theme--dark 17 | tr th 18 | color: #fff !important 19 | 20 | .theme--light 21 | .v-data-table table thead tr th 22 | color: #333 23 | -------------------------------------------------------------------------------- /src/plugins/vee-validate.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { 3 | extend, 4 | ValidationObserver, 5 | ValidationProvider, 6 | } from 'vee-validate' 7 | import { 8 | email, 9 | max, 10 | min, 11 | numeric, 12 | required, 13 | } from 'vee-validate/dist/rules' 14 | 15 | extend('email', email) 16 | extend('max', max) 17 | extend('min', min) 18 | extend('numeric', numeric) 19 | extend('required', required) 20 | 21 | Vue.component('validation-provider', ValidationProvider) 22 | Vue.component('validation-observer', ValidationObserver) 23 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_view.sass: -------------------------------------------------------------------------------- 1 | .v-content__wrap 2 | .container--fluid 3 | padding-left: 30px 4 | padding-right: 30px 5 | 6 | .v-application .headline 7 | font-size: 25px !important 8 | padding-bottom: 0 9 | 10 | .v-application .black--text 11 | color: #333 !important 12 | 13 | .v-application .small 14 | font-weight: 300 15 | line-height: 2rem 16 | small 17 | font-weight: 400 18 | 19 | @media(max-width:960px) 20 | .v-content__wrap 21 | .container--fluid 22 | padding-left: 15px 23 | padding-right: 15px 24 | -------------------------------------------------------------------------------- /src/plugins/base.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import upperFirst from 'lodash/upperFirst' 3 | import camelCase from 'lodash/camelCase' 4 | 5 | const requireComponent = require.context( 6 | '@/components/base', true, /\.vue$/, 7 | ) 8 | 9 | requireComponent.keys().forEach(fileName => { 10 | const componentConfig = requireComponent(fileName) 11 | 12 | const componentName = upperFirst( 13 | camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')), 14 | ) 15 | 16 | Vue.component(`Base${componentName}`, componentConfig.default || componentConfig) 17 | }) 18 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | barColor: 'rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)', 9 | barImage: 'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg', 10 | drawer: null, 11 | }, 12 | mutations: { 13 | SET_BAR_IMAGE (state, payload) { 14 | state.barImage = payload 15 | }, 16 | SET_DRAWER (state, payload) { 17 | state.drawer = payload 18 | }, 19 | }, 20 | actions: { 21 | 22 | }, 23 | }) 24 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_modal.sass: -------------------------------------------------------------------------------- 1 | .v-dialog 2 | .v-card 3 | margin: 0 4 | .v-card__title 5 | font-weight: 300 6 | font-size: 18px 7 | display: inline-block 8 | text-align: center 9 | width: 100% 10 | padding: 24px 24px 0 11 | .v-icon 12 | position: absolute 13 | top: 15px 14 | right: 20px 15 | color: #999 16 | opacity: .5 17 | font-size: 16px 18 | &:hover 19 | opacity: 1 20 | 21 | .v-dialog > .v-card > .v-card__text 22 | padding-top: 24px 23 | font-weight: 300 24 | line-height: 1.75em 25 | letter-spacing: 0 26 | -------------------------------------------------------------------------------- /src/views/dashboard/Index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /src/components/base/Subheading.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_footer.sass: -------------------------------------------------------------------------------- 1 | .v-footer 2 | padding: 20px 0 20px 4px 3 | border-top: 1px solid #e7e7e7 !important 4 | position: relative 5 | a 6 | padding: 15px 18px 15px 16px 7 | font-size: 12px !important 8 | .body-1 9 | font-size: 16px !important 10 | padding-right: 18px 11 | letter-spacing: 0px !important 12 | a 13 | color: #9c27b0 !important 14 | padding: 0 15 | text-transform: inherit !important 16 | font-size: 16px !important 17 | font-weight: 300 !important 18 | .v-icon 19 | margin-top: -3px 20 | 21 | &.v-footer--absolute 22 | position: absolute !important 23 | 24 | .theme--light.v-footer 25 | background-color: transparent 26 | .body-1 27 | color: #3c4858 28 | .v-icon 29 | color: #3c4858 30 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'js', 4 | 'jsx', 5 | 'json', 6 | 'vue', 7 | ], 8 | transform: { 9 | '^.+\\.vue$': 'vue-jest', 10 | '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', 11 | '^.+\\.jsx?$': 'babel-jest', 12 | }, 13 | transformIgnorePatterns: [ 14 | '/node_modules/', 15 | ], 16 | moduleNameMapper: { 17 | '^@/(.*)$': '/src/$1', 18 | }, 19 | snapshotSerializers: [ 20 | 'jest-serializer-vue', 21 | ], 22 | testMatch: [ 23 | '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)', 24 | ], 25 | testURL: 'http://localhost/', 26 | watchPlugins: [ 27 | 'jest-watch-typeahead/filename', 28 | 'jest-watch-typeahead/testname', 29 | ], 30 | } 31 | -------------------------------------------------------------------------------- /src/components/base/VComponent.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 41 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_settings.sass: -------------------------------------------------------------------------------- 1 | #settings 2 | z-index: 200 3 | 4 | .v-settings 5 | border-radius: 10px 6 | .v-card 7 | margin-top: 0 8 | .v-card__text 9 | strong 10 | height: 30px 11 | line-height: 25px 12 | font-size: 12px 13 | font-weight: 600 14 | text-transform: uppercase 15 | text-align: center 16 | .v-avatar 17 | border-color: #fff 18 | border-radius: 50% !important 19 | cursor: pointer 20 | display: inline-block 21 | height: 23px 22 | margin-right: 12px 23 | position: relative 24 | width: 23px 25 | padding: 8px 26 | 27 | .v-settings__item 28 | border-radius: 10px 29 | .v-image 30 | border-radius: 7px !important 31 | 32 | .v-settings__item:not(.v-settings__item--active) 33 | border-color: #fff !important 34 | 35 | .v-divider.secondary 36 | border-color: rgb(221, 221, 221) !important 37 | -------------------------------------------------------------------------------- /src/components/base/MaterialTabs.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 32 | 33 | 44 | -------------------------------------------------------------------------------- /src/sass/variables.scss: -------------------------------------------------------------------------------- 1 | $font-size-root: 14px; 2 | $sheet-border-radius: 4px; 3 | $list-item-title-font-size: 0.929rem; 4 | $list-item-dense-title-font-size: 0.929rem; 5 | $list-item-dense-title-font-weight: initial; 6 | $fab-icon-sizes: ( small: 20 ); 7 | $btn-font-sizes: ( default: 1rem, large: 1rem ); 8 | $btn-sizes: ( default: 41, large: 54 ); 9 | $btn-letter-spacing: 0; 10 | $btn-font-weight: 400; 11 | $card-text-font-size: 16px; 12 | 13 | $headings: ( 14 | 'h1': ( 15 | 'size': 3.3125rem, 16 | 'line-height': 1.15em 17 | ), 18 | 'h2': ( 19 | 'size': 2.25rem, 20 | 'line-height': 1.5em 21 | ), 22 | 'h3': ( 23 | 'size': 1.5625rem, 24 | 'line-height': 1.4em 25 | ), 26 | 'h4': ( 27 | 'size': 1.125rem, 28 | 'line-height': 1.4em 29 | ), 30 | 'h5': ( 'size': 1.0625rem ), 31 | 'h6': ( 'size': .75rem ), 32 | 'subtitle-2': ( 'size': 1rem ), 33 | 'overline': ( 'letter-spacing': 0 ) 34 | ); 35 | -------------------------------------------------------------------------------- /tests/e2e/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/guides/guides/plugins-guide.html 2 | 3 | // if you need a custom webpack configuration you can uncomment the following import 4 | // and then use the `file:preprocessor` event 5 | // as explained in the cypress docs 6 | // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples 7 | 8 | /* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */ 9 | // const webpack = require('@cypress/webpack-preprocessor') 10 | 11 | module.exports = (on, config) => { 12 | // on('file:preprocessor', webpack({ 13 | // webpackOptions: require('@vue/cli-service/webpack.config'), 14 | // watchOptions: {} 15 | // })) 16 | 17 | return Object.assign({}, config, { 18 | fixturesFolder: 'tests/e2e/fixtures', 19 | integrationFolder: 'tests/e2e/specs', 20 | screenshotsFolder: 'tests/e2e/screenshots', 21 | videosFolder: 'tests/e2e/videos', 22 | supportFile: 'tests/e2e/support/index.js', 23 | }) 24 | } 25 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // ========================================================= 2 | // * Vuetify Material Dashboard - v2.1.0 3 | // ========================================================= 4 | // 5 | // * Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard 6 | // * Copyright 2019 Creative Tim (https://www.creative-tim.com) 7 | // 8 | // * Coded by Creative Tim 9 | // 10 | // ========================================================= 11 | // 12 | // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 13 | 14 | import Vue from 'vue' 15 | import App from './App.vue' 16 | import router from './router' 17 | import store from './store' 18 | import './plugins/base' 19 | import './plugins/chartist' 20 | import './plugins/vee-validate' 21 | import vuetify from './plugins/vuetify' 22 | import i18n from './i18n' 23 | 24 | Vue.config.productionTip = false 25 | 26 | new Vue({ 27 | router, 28 | store, 29 | vuetify, 30 | i18n, 31 | render: h => h(App), 32 | }).$mount('#app') 33 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 [Creative Tim](https://www.creative-tim.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /src/components/base/MaterialAlert.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 47 | 48 | 61 | -------------------------------------------------------------------------------- /src/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "avatar": "Vuetify MD", 3 | "buttons": "Buttons", 4 | "calendar": "Calendar", 5 | "charts": "Charts", 6 | "components": "Components", 7 | "ct": "CT", 8 | "dashboard": "Dashboard", 9 | "dtables": "Data Tables", 10 | "eforms": "Extended Forms", 11 | "error": "Error Page", 12 | "etables": "Extended Tables", 13 | "example": "Example", 14 | "forms": "Forms", 15 | "fullscreen": "Full Screen Map", 16 | "google": "Google Maps", 17 | "grid": "Grid System", 18 | "icons": "Icons", 19 | "lock": "Lock Screen Page", 20 | "login": "Login Page", 21 | "maps": "Maps", 22 | "multi": "Multi Level Collapse", 23 | "notifications": "Notifications", 24 | "pages": "Pages", 25 | "plan": "Choose Plan", 26 | "pricing": "Pricing", 27 | "my-profile": "My Profile", 28 | "edit-profile": "Edit Profile", 29 | "register": "Register Page", 30 | "rforms": "Regular Forms", 31 | "rtables": "Regular Tables", 32 | "rtl": "RTL Support", 33 | "search": "Search", 34 | "settings": "Settings", 35 | "tables": "Tables", 36 | "tabs": "Tabs", 37 | "tim": "Creative Tim", 38 | "timeline": "Timeline", 39 | "typography": "Typography", 40 | "upgrade": "Upgrade To PRO", 41 | "user": "User Profile", 42 | "vforms": "Validation Forms", 43 | "widgets": "Widgets", 44 | "wizard": "Wizard" 45 | } 46 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Vuetify Material Dashboard - by Creative Tim 26 | 27 | 28 | 29 | 30 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_appbar.sass: -------------------------------------------------------------------------------- 1 | #app-bar 2 | .v-badge__badge 3 | font-size: 9px 4 | padding: 5px 6px 5 | 6 | // ----------------------- 7 | .v-toolbar__content, 8 | .v-toolbar__extension 9 | padding: 0px 15px 0 31px 10 | 11 | .v-sheet 12 | .v-toolbar__content 13 | .v-btn.v-size--default:not(.v-btn--icon):not(.v-btn--fab), 14 | .v-btn.v-size--large:not(.v-btn--icon):not(.v-btn--fab) 15 | margin-bottom: 5px 16 | padding: 10px 15px !important 17 | .theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) 18 | background-color: #fff 19 | .v-icon 20 | color: #999 21 | 22 | .theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) 23 | background-color: #fff 24 | margin-right: 17px 25 | margin-bottom: 2px 26 | 27 | .theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined):hover 28 | background-color: #fff 29 | 30 | .v-toolbar__content 31 | height: 75px 32 | 33 | .v-toolbar__content .v-btn--flat 34 | .v-icon 35 | margin-right: 3px 36 | 37 | .theme--light.v-label 38 | color: rgba(0, 0, 0, 0.3) 39 | 40 | .v-menu__content .v-list--nav 41 | padding: .3125rem 0 42 | border-radius: 4px 43 | .v-list-item 44 | padding: 10px 20px 45 | margin: 0 .3125rem 46 | margin-bottom: 0px !important 47 | min-height: 40px 48 | border-radius: 2px 49 | .v-list-item__title 50 | font-weight: 400 51 | font-size: 13px 52 | 53 | .v-navigation-drawer .v-icon.v-icon 54 | font-size: 24px 55 | -------------------------------------------------------------------------------- /src/components/base/MaterialSnackbar.vue: -------------------------------------------------------------------------------- 1 | 22 | 58 | 59 | 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuetify-material-dashboard", 3 | "version": "2.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vue-cli-service serve --open", 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint", 10 | "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'", 11 | "now-start": "vue-cli-service serve", 12 | "test:e2e": "vue-cli-service test:e2e", 13 | "test:unit": "vue-cli-service test:unit" 14 | }, 15 | "dependencies": { 16 | "core-js": "^3.6.2", 17 | "vue": "^2.6.11", 18 | "vue-i18n": "^8.15.3", 19 | "vue-router": "^3.1.3", 20 | "vuetify": "^2.2.11", 21 | "vuex": "^3.1.2" 22 | }, 23 | "devDependencies": { 24 | "@vue/cli-plugin-babel": "^4.1.2", 25 | "@vue/cli-plugin-e2e-cypress": "^4.1.2", 26 | "@vue/cli-plugin-eslint": "^4.1.2", 27 | "@vue/cli-plugin-unit-jest": "^4.1.2", 28 | "@vue/cli-service": "^4.1.2", 29 | "@vue/eslint-config-standard": "^5.0.1", 30 | "@vue/test-utils": "1.0.0-beta.30", 31 | "babel-core": "7.0.0-bridge.0", 32 | "babel-eslint": "^10.0.3", 33 | "babel-jest": "^24.9.0", 34 | "eslint": "^6.8.0", 35 | "eslint-config-vuetify": "^0.4.1", 36 | "eslint-plugin-vue": "^6.1.2", 37 | "sass": "^1.24.3", 38 | "sass-loader": "^8.0.0", 39 | "vee-validate": "^3.2.2", 40 | "vue-chartist": "^2.2.1", 41 | "vue-cli-plugin-i18n": "^0.6.0", 42 | "vue-cli-plugin-vuetify": "^2.0.3", 43 | "vue-template-compiler": "^2.6.11", 44 | "vue-world-map": "^0.1.1", 45 | "vuetify-loader": "^1.4.3" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/sass/overrides.sass: -------------------------------------------------------------------------------- 1 | // ========================================================= 2 | // * Vuetify Material Dashboard - v2.1.0 3 | // ========================================================= 4 | // 5 | // * Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard 6 | // * Copyright 2019 Creative Tim (https://www.creative-tim.com) 7 | // 8 | // * Coded by Creative Tim 9 | // 10 | // ========================================================= 11 | // 12 | // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 13 | 14 | // Creative Tim refine style code 15 | @import vuetify-material/sidebar 16 | @import vuetify-material/appbar 17 | @import vuetify-material/buttons 18 | @import vuetify-material/pagination 19 | @import vuetify-material/footer 20 | @import vuetify-material/view 21 | @import vuetify-material/settings 22 | @import vuetify-material/card 23 | @import vuetify-material/table 24 | @import vuetify-material/tab 25 | @import vuetify-material/notification 26 | @import vuetify-material/modal 27 | @import vuetify-material/map 28 | @import vuetify-material/chip 29 | 30 | .v-btn.v-size--default, 31 | .v-btn.v-size--large 32 | &:not(.v-btn--icon):not(.v-btn--fab) 33 | padding: 0 30px !important 34 | 35 | .theme--light.v-list-item .v-list-item__action-text, 36 | .theme--light.v-list-item .v-list-item__subtitle 37 | color: #999 38 | 39 | .theme--light.v-text-field>.v-input__control>.v-input__slot:before 40 | border-color: #d2d2d2 41 | 42 | .v-label.v-label, 43 | .v-alert.v-alert 44 | font-size: $font-size-root 45 | 46 | .theme--light .v-content 47 | background-color: #eee 48 | -------------------------------------------------------------------------------- /src/components/base/MaterialTestimony.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 66 | 67 | 77 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_buttons.sass: -------------------------------------------------------------------------------- 1 | .v-btn.v-size--default 2 | font-size: .85rem 3 | 4 | .v-icon.v-icon 5 | font-size: 20px 6 | 7 | .v-btn__content .v-icon--left 8 | margin-right: 4px 9 | 10 | .v-sheet button.v-btn.v-size--default:not(.v-btn--icon):not(.v-btn--fab) 11 | padding: 12px 30px !important 12 | 13 | .theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) 14 | background-color: #999 15 | color: #fff 16 | &:hover 17 | background-color: #999 18 | color: #fff 19 | 20 | .v-btn.white 21 | .v-btn__content 22 | color: #999 23 | 24 | .v-sheet .v-btn.v-size--large:not(.v-btn--icon):not(.v-btn--fab) 25 | padding: 18px 36px !important 26 | 27 | .v-btn--fab.v-size--small 28 | height: 41px 29 | width: 41px 30 | 31 | .v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before 32 | opacity: 0 33 | 34 | .v-btn:not(.v-btn--text):not(.v-btn--outlined):focus:before 35 | opacity: 0 36 | 37 | .v-btn.v-size--default:not(.v-btn--icon):not(.v-btn--fab), 38 | .v-btn.v-size--large:not(.v-btn--icon):not(.v-btn--fab) 39 | padding: 10px 15px !important 40 | 41 | // Button group 42 | 43 | .v-item-group 44 | .v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) 45 | margin-right: 0 46 | 47 | .v-btn-toggle 48 | .v-btn 49 | opacity: 1 50 | 51 | .v-btn-toggle > .v-btn.v-size--default 52 | height: inherit 53 | 54 | .theme--light.v-btn-toggle .v-btn.v-btn 55 | border-color: #999 !important 56 | &.primary 57 | border-color: #e91e63 !important 58 | &.secondary 59 | border-color: #9c27b0 !important 60 | &.success 61 | border-color: #4caf50 !important 62 | &.warning 63 | border-color: #fb8c00 !important 64 | &.error 65 | border-color: #ff5252 !important 66 | &.info 67 | border-color: #00cae3 !important 68 | -------------------------------------------------------------------------------- /src/components/base/Item.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 70 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | mode: 'hash', 8 | base: process.env.BASE_URL, 9 | routes: [ 10 | { 11 | path: '/', 12 | component: () => import('@/views/dashboard/Index'), 13 | children: [ 14 | // Dashboard 15 | { 16 | name: 'Dashboard', 17 | path: '', 18 | component: () => import('@/views/dashboard/Dashboard'), 19 | }, 20 | // Pages 21 | { 22 | name: 'User Profile', 23 | path: 'pages/user', 24 | component: () => import('@/views/dashboard/pages/UserProfile'), 25 | }, 26 | { 27 | name: 'Notifications', 28 | path: 'components/notifications', 29 | component: () => import('@/views/dashboard/component/Notifications'), 30 | }, 31 | { 32 | name: 'Icons', 33 | path: 'components/icons', 34 | component: () => import('@/views/dashboard/component/Icons'), 35 | }, 36 | { 37 | name: 'Typography', 38 | path: 'components/typography', 39 | component: () => import('@/views/dashboard/component/Typography'), 40 | }, 41 | // Tables 42 | { 43 | name: 'Regular Tables', 44 | path: 'tables/regular-tables', 45 | component: () => import('@/views/dashboard/tables/RegularTables'), 46 | }, 47 | // Maps 48 | { 49 | name: 'Google Maps', 50 | path: 'maps/google-maps', 51 | component: () => import('@/views/dashboard/maps/GoogleMaps'), 52 | }, 53 | // Upgrade 54 | { 55 | name: 'Upgrade', 56 | path: 'upgrade', 57 | component: () => import('@/views/dashboard/Upgrade'), 58 | }, 59 | ], 60 | }, 61 | ], 62 | }) 63 | -------------------------------------------------------------------------------- /src/views/dashboard/components/core/Footer.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 70 | 71 | 79 | -------------------------------------------------------------------------------- /src/components/base/MaterialChartCard.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 68 | 69 | 96 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_card.sass: -------------------------------------------------------------------------------- 1 | .v-card 2 | border-radius: 6px 3 | margin-top: 30px 4 | margin-bottom: 15px 5 | 6 | .card-title 7 | font-size: 18px 8 | 9 | .v-card--material__heading 10 | top: -30px 11 | 12 | .subtitle-1 13 | color: hsla(0,0%,100%,.8) 14 | 15 | .display-2 16 | font-size: 18px !important 17 | 18 | .caption 19 | font-size: 12px !important 20 | letter-spacing: 0 !important 21 | 22 | .v-card__actions 23 | padding-top: 15px 24 | .display-2 25 | font-size: 18px !important 26 | 27 | .v-divider 28 | border-color: #eee 29 | 30 | .ct-label 31 | font-size: 14px 32 | 33 | .v-card--material-chart .v-card--material__heading .ct-label 34 | font-weight: 300 35 | 36 | 37 | .v-btn--icon.v-size--default .v-icon, 38 | .v-btn--fab.v-size--default .v-icon 39 | font-size: 18px 40 | 41 | .v-card--material .v-image 42 | .v-image__image 43 | border-radius: 6px 44 | 45 | .v-card__title 46 | font-size: 18px 47 | padding-top: 7px 48 | padding-bottom: 2px 49 | 50 | .theme--light 51 | .v-card > .v-card__text 52 | color: #333 53 | .card-title 54 | color: #3c4858 55 | 56 | .theme--dark 57 | .card-title 58 | color: #fff 59 | 60 | 61 | .v-timeline-item .v-card 62 | margin-top: 0 63 | 64 | .v-card--wizard 65 | .v-tabs-bar 66 | height: 42px 67 | .v-card__actions 68 | .v-btn 69 | margin-right: 0 !important 70 | .v-tabs .v-tab--active:hover::before, .theme--light.v-tabs .v-tab--active::before 71 | opacity: 0 72 | .v-tabs .v-tab:hover::before 73 | opacity: 0 74 | 75 | .v-card--plan 76 | .body-2 77 | font-weight: 500 78 | letter-spacing: 0 !important 79 | margin-top: 10px 80 | margin-bottom: 8px 81 | .display-2 82 | margin-top: 30px 83 | 84 | .v-card__text 85 | color: #999 86 | margin-bottom: 16px 87 | .v-btn 88 | margin-right: 0 !important 89 | .v-avatar 90 | margin-top: 10px 91 | 92 | .v-card--testimony 93 | .v-card__text 94 | color: #999 !important 95 | 96 | .display-2 97 | font-size: 18px !important 98 | 99 | .body-2 100 | font-weight: 500 101 | font-size: 12px !important 102 | 103 | .v-avatar 104 | left: calc(50% - 50px) 105 | 106 | .ct-square:before 107 | float: none 108 | -------------------------------------------------------------------------------- /src/sass/vuetify-material/_sidebar.sass: -------------------------------------------------------------------------------- 1 | .v-application .v-navigation-drawer .v-navigation-drawer__content .v-list-item .v-list-item__content .v-list-item__title.display-2 2 | font-size: 18px !important 3 | margin-top: 12px 4 | margin-bottom: 12px 5 | 6 | .v-application .v-navigation-drawer .v-navigation-drawer__content .v-list .v-list-group .v-list-group__header .v-list-item__content .v-list-item__title 7 | font-size: 14px 8 | font-weight: 300 9 | 10 | .v-application--is-ltr .v-list-item__avatar:first-child 11 | margin-right: 11px 12 | 13 | .v-application .v-navigation-drawer .v-navigation-drawer__content .v-list-item__icon.v-list-group__header__append-icon .v-icon 14 | font-size: 19px 15 | 16 | .v-application--is-ltr #core-navigation-drawer div.v-list-item__icon--text, 17 | .v-application--is-ltr #core-navigation-drawer div.v-list-item__icon:first-child 18 | margin-left: 5px !important 19 | margin-right: 18px 20 | opacity: .8 21 | 22 | .v-application--is-ltr .v-list-item__action:last-of-type:not(:only-child), 23 | .v-application--is-ltr .v-list-item__avatar:last-of-type:not(:only-child), 24 | .v-application--is-ltr .v-list-item__icon:last-of-type:not(:only-child) 25 | margin-right: 2px 26 | 27 | .v-list--nav.v-list--dense .v-list-item:not(:last-child):not(:only-child), 28 | .v-list--nav .v-list-item--dense:not(:last-child):not(:only-child), 29 | .v-list--rounded.v-list--dense .v-list-item:not(:last-child):not(:only-child), 30 | .v-list--rounded .v-list-item--dense:not(:last-child):not(:only-child) 31 | margin-bottom: 3px 32 | 33 | .v-list-item .v-list-item__title, .v-list-item .v-list-item__subtitle 34 | line-height: 1.2 35 | font-weight: 300 36 | font-size: 14px 37 | 38 | .v-list-group__items .v-list-item 39 | font-size: 13px 40 | margin-bottom: 5px !important 41 | .v-list-item__title 42 | font-size: 13px 43 | .v-list-item__icon 44 | margin-top: 14px 45 | 46 | .v-list-group__items .v-list-group--sub-group .v-list-group__header .v-list-item__icon--text 47 | margin-top: 15px !important 48 | 49 | 50 | .v-list-item__icon 51 | margin: 12px 0 52 | 53 | .theme--dark.v-list-item--active:hover::before, .theme--dark.v-list-item--active::before 54 | opacity: 0 55 | 56 | .v-navigation-drawer 57 | .v-list-item__content 58 | transition: all 0.3s linear 0s 59 | 60 | .v-list--nav 61 | padding-left: 15px 62 | padding-right: 15px 63 | 64 | .theme--dark.v-navigation-drawer .v-divider 65 | background-color: rgba(181, 181, 181, 0.2) 66 | border-color: rgba(181, 181, 181, 0.1) 67 | width: calc(100% - 30px) 68 | margin-left: 15px 69 | -------------------------------------------------------------------------------- /src/components/base/MaterialStatsCard.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 89 | 90 | 114 | -------------------------------------------------------------------------------- /src/views/dashboard/maps/GoogleMaps.vue: -------------------------------------------------------------------------------- 1 |