vue
/
vuetify-demo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

初始化

This commit is contained in:
cloud 2020-03-24 23:26:17 +08:00
parent 5151982501
commit fa2f1397b8
91 changed files with 6791 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.browserslistrc Normal file
View File

@ -0,0 +1,2 @@
> 1%
last 2 versions

5
.editorconfig Normal file
View File

@ -0,0 +1,5 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

2
.env Normal file
View File

@ -0,0 +1,2 @@
VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

14
.eslintrc.js Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: 'vuetify',
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
parserOptions: {
parser: 'babel-eslint',
},
}

25
.gitignore vendored Normal file
View File

@ -0,0 +1,25 @@
.DS_Store
node_modules
/dist
package-lock.json
/tests/e2e/videos/
/tests/e2e/screenshots/
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

7
CHANGELOG.md Normal file
View File

@ -0,0 +1,7 @@
# Change Log
## [2.1.0] 2020-02-29
- refactor: all the product was changed and now it's the same version with PRO version and also the structure it's the same
## [1.0.0] 2018-10-16
### Initial Release

13
ISSUE_TEMPLATE.md Normal file
View File

@ -0,0 +1,13 @@
<!--
IMPORTANT: Please use the following link to create a new issue:
https://www.creative-tim.com/new-issue/vuetify-material-dashboard
**If your issue was not created using the app above, it will be closed immediately.**
-->
<!--
Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉 https://www.creative-tim.com/bundles
👉 https://www.creative-tim.com
-->

9
LICENSE.md Normal file
View File

@ -0,0 +1,9 @@
MIT License
Copyright (c) 2019 [Creative Tim](https://www.creative-tim.com)
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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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.

251
README.md
View File

@ -1,3 +1,250 @@
# vuetify-demo # [Vuetify Material Dashboard](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=vtymdp-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/share?url=https%3A%2F%2Fwww.creative-tim.com%2Fvuetify-material-dashboard&text=Vuetify%20Material%20Dashboard%20PRO%20by%20Creative%20Tim&via=CreativeTim&hashtags=vuejs%20%23vuex%20%23vuetify%20%23material)
vuetify 免费演示站
![version](https://img.shields.io/badge/version-2.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/ct-vuetify-material-dashboard.svg)](https://github.com/creativetimofficial/ct-vuetify-material-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/creativetimofficial/ct-vuetify-material-dashboard.svg?maxAge=259200)](https://github.com/creativetimofficial/ct-vuetify-material-dashboard/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim/material-dashboard) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)
![Product Gif](https://s3.amazonaws.com/creativetim_bucket/products/207/original/opt_mdp_vuetify_thumbnail.jpg?1566575158)
**Vuetify Material Dashboard** is a beautiful resource built over [Vuetify](https://vuetifyjs.com/en/), [Vuex](https://vuex.vuejs.org/installation.html) and [Vuejs](https://vuejs.org/). It will help you get started developing dashboards in no time. Vuetify Material Dashboard is the official Vuejs version of the Original [Material Dashboard PRO](https://www.creative-tim.com/product/material-dashboard). Using the Dashboard is pretty simple but requires basic knowledge of Javascript, [Vuejs](https://vuejs.org/v2/guide/) and [Vue-Router](https://router.vuejs.org/en/).
We have created it thinking about things you actually need in a dashboard. **Vuetify Material Dashboard** contains handpicked and optimized Vuejs plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on [Creative Tim](https://www.creative-tim.com) is a customization of this product.
**Vuetify** is developed exactly according to Material Design spec. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
**Vuex** is a state management pattern + library for **Vue.js** applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.
Let us know what you think and what we can improve below. And good luck with development!
## Getting Started
- Install Nodejs from [Nodejs Official Page](https://nodejs.org/en/)
- Open your terminal
- Navigate to the project
- Run `npm install` or `yarn install` if you use [Yarn](https://yarnpkg.com/en/)
- Run `npm run dev` or `yarn serve` to start a local development server
- A new tab will be opened in your browser
You can also run additional npm tasks such as
- `npm run build` to build your app for production
- `npm run lint` to run linting.
## Vuetify
Vuetify is developed exactly according to Material Design spec. Every component is hand crafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
## Vuex
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official [devtools](https://github.com/vuejs/vue-devtools) extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
## Vue-cli
We used the latest 3.x [Vue CLI](https://github.com/vuejs/vue-cli) which aims to reduce project configuration
to as little as possible. Almost everything is inside `package.json` + some other related files such as
`.babel.config.js`, `.eslintrc.js` and `.postcssrc.js`.
Let us know what you think and what we can improve below. And good luck with development!
#### Special thanks
During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:
- [Vuetify](https://vuetifyjs.com/en/) for the wonderful framework
Let us know your thoughts below. And good luck with development!
## Table of Contents
* [Versions](#versions)
* [Demo](#demo)
* [Quick Start](#quick-start)
* [Documentation](#documentation)
* [File Structure](#file-structure)
* [Browser Support](#browser-support)
* [Resources](#resources)
* [Reporting Issues](#reporting-issues)
* [Technical Support or Questions](#technical-support-or-questions)
* [Licensing](#licensing)
* [Useful Links](#useful-links)
## Versions
[<img src="https://pbs.twimg.com/profile_images/900908683927982080/GWykKJ7r_400x400.jpg" width="60" height="60" />](https://www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=vtymdp-readme)
[<img src="https://s3.amazonaws.com/creativetim_bucket/github/html.png" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-pro?ref=vtymdp-readme)
[<img src="https://s3.amazonaws.com/creativetim_bucket/github/react.svg" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-pro-react?ref=vtymdp-readme)
[<img src="https://s3.amazonaws.com/creativetim_bucket/github/vuejs.png" width="60" height="60" />](https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=vtymdp-readme)
[<img src="https://s3.amazonaws.com/creativetim_bucket/github/angular.png" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-pro-angular2?ref=vtymdp-readme)
Vuetify | Vue | React | Angular | HTML |
| --- | --- | --- | --- | --- |
| [![Vuetify Material Dashboard PRO](https://s3.amazonaws.com/creativetim_bucket/products/207/original/opt_mdp_vuetify_thumbnail.jpg)](https://www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=vtymdp-readme) | [![Vue Material Dashboard PRO](https://s3.amazonaws.com/creativetim_bucket/products/87/original/opt_mdp_vue_thumbnail.jpg)](https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=vtymdp-readme) | [![Material Dashboard PRO React](https://s3.amazonaws.com/creativetim_bucket/products/80/original/opt_mdp_react_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-pro-react?ref=vtymdp-readme) | [![Material Dashboard PRO Angular](https://s3.amazonaws.com/creativetim_bucket/products/55/original/opt_mdp_angular_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-angular2?ref=vtymdp-readme) | [![Material Dashboard PRO HTML](https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-pro/examples/dashboard.html?ref=vtymdp-readme)
## Demo
- [Start page](https://demos.creative-tim.com/vuetify-material-dashboard?ref=vtymdp-readme)
- [Notifications page](https://demos.creative-tim.com/vuetify-material-dashboard/#/components/notifications?ref=vtymdp-readme)
[View More](https://demos.creative-tim.com/vuetify-material-dashboard-pro?ref=vtymdp-readme).
## Quick start
Quick start options:
- Download from [Creative Tim](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=vtymdp-readme)
## Documentation
The documentation for the **Vuetify Material Dashboard** is hosted on vuetify [website](https://vuetifyjs.com/en/components/api-explorer).
## File Structure
Within the download you'll find the following directories and files:
```
vuetify-material-dashboard
├── README.md
├── CHANGELOG.md
├── babel.config.js
├── cypress.json
├── jest.config.js
├── now.json
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vuetify.svg
│   ├── components
│   │   └── base
│   │   ├── Card.vue
│   │   ├── Item.vue
│   │   ├── ItemGroup.vue
│   │   ├── ItemSubGroup.vue
│   │   ├── MaterialAlert.vue
│   │   ├── MaterialCard.vue
│   │   ├── MaterialChartCard.vue
│   │   ├── MaterialSnackbar.vue
│   │   ├── MaterialStatsCard.vue
│   │   ├── MaterialTabs.vue
│   │   ├── MaterialTestimony.vue
│   │   ├── Subheading.vue
│   │   └── VComponent.vue
│   ├── i18n.js
│   ├── locales
│   │   └── en.json
│   ├── main.js
│   ├── plugins
│   │   ├── base.js
│   │   ├── chartist.js
│   │   ├── vee-validate.js
│   │   └── vuetify.js
│   ├── router.js
│   ├── sass
│   │   ├── main.scss
│   │   ├── overrides.sass
│   │   └── vuetify-material
│   │   └── _sidebar.sass
│   ├── store.js
│   └── views
│   └── dashboard
│      ├── Charts.vue
│      ├── Dashboard.vue
│      ├── Index.vue
│      ├── Widgets.vue
│      ├── component
│      │   ├── Buttons.vue
│      │   ├── Grid.vue
│      │   ├── Icons.vue
│      │   ├── Notifications.vue
│      │   ├── Tabs.vue
│      │   └── Typography.vue
│      ├── components
│      │   └── core
│      │   ├── AppBar.vue
│      │   ├── Drawer.vue
│      │   ├── Footer.vue
│      │   ├── Settings.vue
│      │   └── View.vue
│      ├── maps
│      │   └── GoogleMaps.vue
│      ├── pages
│      │   └── UserProfile.vue
│      └── tables
│      └── RegularTables.vue
├── tests
│   ├── e2e
│   │   ├── plugins
│   │   │   └── index.js
│   │   ├── specs
│   │   │   └── test.js
│   │   └── support
│   │   ├── commands.js
│   │   └── index.js
│   └── unit
│   └── example.spec.js
├── vue.config.js
```
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
<img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64">
## Resources
- [Live Preview](https://demos.creative-tim.com/vuetify-material-dashboard?ref=vtymdp-readme)
- Download Page: [Download](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=vtymdp-readme)
- Documentation is [Here](https://vuetifyjs.com/en/components/api-explorer)
- License Agreement: [License](https://www.creative-tim.com/license)
- Support: [Contact](https://www.creative-tim.com/contact-us)
- Issues: [Github Issues Page](https://github.com/creativetimofficial/ct-vuetify-material-dashboard/issues)
- Vue Material Dashboard PRO - [Demo](https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=vtymdp-readme)
- For Front End Development - [Material Kit Pro ](https://www.creative-tim.com/product/material-kit-pro?ref=vtymdp-readme)
## Reporting Issues
We use GitHub Issues as the official bug tracker for the **Vuetify Material Dashboard**. Here are some advices for our users that want to report an issue:
1. Make sure that you are using the latest version of the **Vuetify Material Dashboard**. Check the **CHANGELOG** from your dashboard on our [website](https://www.creative-tim.com/).
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
## Technical Support or Questions
If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us) instead of opening an issue.
## Licensing
- Copyright 2018 Creative Tim (https://www.creative-tim.com)
- Creative Tim [license](https://www.creative-tim.com/license)
## Useful Links
- [More products](https://www.creative-tim.com/bootstrap-themes) from Creative Tim
- [Vue products](https://www.creative-tim.com/bootstrap-themes/vuejs-themes) from Creative Tim
- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
- [Freebies](https://www.creative-tim.com/bootstrap-themes/free) from Creative Tim
- [Affiliate Program](https://www.creative-tim.com/affiliates/new) (earn money)
##### Social Media
Twitter: <https://twitter.com/CreativeTim>
Facebook: <https://www.facebook.com/CreativeTim>
Dribbble: <https://dribbble.com/creativetim>
Google+: <https://plus.google.com/+CreativetimPage>
Instagram: <https://instagram.com/creativetimofficial>

5
babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app',
],
}

3
cypress.json Normal file
View File

@ -0,0 +1,3 @@
{
"pluginsFile": "tests/e2e/plugins/index.js"
}

30
jest.config.js Normal file
View File

@ -0,0 +1,30 @@
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue',
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: [
'/node_modules/',
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
snapshotSerializers: [
'jest-serializer-vue',
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
}

3
now.json Normal file
View File

@ -0,0 +1,3 @@
{
"version": 2
}

47
package.json Normal file
View File

@ -0,0 +1,47 @@
{
"name": "vuetify-material-dashboard",
"version": "2.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve --open",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
"now-start": "vue-cli-service serve",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"core-js": "^3.6.2",
"vue": "^2.6.11",
"vue-i18n": "^8.15.3",
"vue-router": "^3.1.3",
"vuetify": "^2.2.11",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.2",
"@vue/cli-plugin-e2e-cypress": "^4.1.2",
"@vue/cli-plugin-eslint": "^4.1.2",
"@vue/cli-plugin-unit-jest": "^4.1.2",
"@vue/cli-service": "^4.1.2",
"@vue/eslint-config-standard": "^5.0.1",
"@vue/test-utils": "1.0.0-beta.30",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"eslint": "^6.8.0",
"eslint-config-vuetify": "^0.4.1",
"eslint-plugin-vue": "^6.1.2",
"sass": "^1.24.3",
"sass-loader": "^8.0.0",
"vee-validate": "^3.2.2",
"vue-chartist": "^2.2.1",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-cli-plugin-vuetify": "^2.0.3",
"vue-template-compiler": "^2.6.11",
"vue-world-map": "^0.1.1",
"vuetify-loader": "^1.4.3"
}
}

5
postcss.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {},
},
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

36
public/index.html Normal file
View File

@ -0,0 +1,36 @@
<!--
=========================================================
* Vuetify Material Dashboard - v2.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title>Vuetify Material Dashboard - by Creative Tim</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but material doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

9
src/App.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<router-view />
</template>
<script>
export default {
name: 'App',
}
</script>

BIN
src/assets/clint-mckoy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
src/assets/lock.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 808 KiB

BIN
src/assets/login.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/assets/pricing.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 637 KiB

BIN
src/assets/register.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 465 KiB

1
src/assets/vuetify.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#aeddff;}</style></defs><title>Artboard 47</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-2" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-3" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 518 B

9
src/components/base/Card.vue Normal file
View File

@ -0,0 +1,9 @@
<script>
import { VCard } from 'vuetify/lib'
export default {
name: 'Card',
extends: VCard,
}
</script>

69
src/components/base/Item.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<v-list-item
:href="href"
:rel="href && href !== '#' ? 'noopener' : undefined"
:target="href && href !== '#' ? '_blank' : undefined"
:to="item.to"
:active-class="`primary ${!isDark ? 'black' : 'white'}--text`"
>
<v-list-item-icon
v-if="text"
class="v-list-item__icon--text"
v-text="computedText"
/>
<v-list-item-icon v-else-if="item.icon">
<v-icon v-text="item.icon" />
</v-list-item-icon>
<v-list-item-content v-if="item.title || item.subtitle">
<v-list-item-title v-text="item.title" />
<v-list-item-subtitle v-text="item.subtitle" />
</v-list-item-content>
</v-list-item>
</template>
<script>
import Themeable from 'vuetify/lib/mixins/themeable'
export default {
name: 'Item',
mixins: [Themeable],
props: {
item: {
type: Object,
default: () => ({
href: undefined,
icon: undefined,
subtitle: undefined,
title: undefined,
to: undefined,
}),
},
text: {
type: Boolean,
default: false,
},
},
computed: {
computedText () {
if (!this.item || !this.item.title) return ''
let text = ''
this.item.title.split(' ').forEach(val => {
text += val.substring(0, 1)
})
return text
},
href () {
return this.item.href || (!this.item.to ? '#' : undefined)
},
},
}
</script>

124
src/components/base/ItemGroup.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<v-list-group
:group="group"
:prepend-icon="item.icon"
:sub-group="subGroup"
append-icon="mdi-menu-down"
:color="barColor !== 'rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)' ? 'white' : 'grey darken-1'"
>
<template v-slot:activator>
<v-list-item-icon
v-if="text"
class="v-list-item__icon--text"
v-text="computedText"
/>
<v-list-item-avatar
v-else-if="item.avatar"
class="align-self-center"
color="white"
contain
>
<v-img src="https://demos.creative-tim.com/vuetify-material-dashboard/favicon.ico" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title" />
</v-list-item-content>
</template>
<template v-for="(child, i) in children">
<base-item-sub-group
v-if="child.children"
:key="`sub-group-${i}`"
:item="child"
/>
<base-item
v-else
:key="`item-${i}`"
:item="child"
text
/>
</template>
</v-list-group>
</template>
<script>
// Utilities
import kebabCase from 'lodash/kebabCase'
import { mapState } from 'vuex'
export default {
name: 'ItemGroup',
inheritAttrs: false,
props: {
item: {
type: Object,
default: () => ({
avatar: undefined,
group: undefined,
title: undefined,
children: [],
}),
},
subGroup: {
type: Boolean,
default: false,
},
text: {
type: Boolean,
default: false,
},
},
computed: {
...mapState(['barColor']),
children () {
return this.item.children.map(item => ({
...item,
to: !item.to ? undefined : `${this.item.group}/${item.to}`,
}))
},
computedText () {
if (!this.item || !this.item.title) return ''
let text = ''
this.item.title.split(' ').forEach(val => {
text += val.substring(0, 1)
})
return text
},
group () {
return this.genGroup(this.item.children)
},
},
methods: {
genGroup (children) {
return children
.filter(item => item.to)
.map(item => {
const parent = item.group || this.item.group
let group = `${parent}/${kebabCase(item.to)}`
if (item.children) {
group = `${group}|${this.genGroup(item.children)}`
}
return group
}).join('|')
},
},
}
</script>
<style>
.v-list-group__activator p {
margin-bottom: 0;
}
</style>

25
src/components/base/ItemSubGroup.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<base-item-group
:item="item"
text
sub-group
/>
</template>
<script>
export default {
name: 'ItemSubGroup',
props: {
item: {
type: Object,
default: () => ({
avatar: undefined,
group: undefined,
title: undefined,
children: [],
}),
},
},
}
</script>

60
src/components/base/MaterialAlert.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<v-alert
v-bind="$attrs"
class="v-alert--material"
dark
v-on="$listeners"
>
<template
v-if="$attrs.icon"
v-slot:prepend
>
<v-icon
class="v-alert__icon elevation-6 white"
light
:color="$attrs.color"
>
{{ $attrs.icon }}
</v-icon>
</template>
<slot />
<template
v-if="$attrs.dismissible"
v-slot:close="{ toggle }"
>
<v-btn
:aria-label="$vuetify.lang.t('$vuetify.close')"
color
icon
small
@click="toggle"
>
<v-icon>
$vuetify.icons.cancel
</v-icon>
</v-btn>
</template>
</v-alert>
</template>
<script>
export default {
name: 'MaterialAlert',
}
</script>
<style lang="sass">
.v-alert--material
margin-top: 32px
.v-alert__icon
top: -36px
.v-alert__dismissible
align-self: flex-start
margin: 0 !important
padding: 0 !important
</style>

148
src/components/base/MaterialCard.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<v-card
v-bind="$attrs"
:class="classes"
class="v-card--material pa-3"
>
<div class="d-flex grow flex-wrap">
<v-avatar
v-if="avatar"
size="128"
class="mx-auto v-card--material__avatar elevation-6"
color="grey"
>
<v-img :src="avatar" />
</v-avatar>
<v-sheet
v-else
:class="{
'pa-7': !$slots.image
}"
:color="color"
:max-height="icon ? 90 : undefined"
:width="icon ? 'auto' : '100%'"
elevation="6"
class="text-start v-card--material__heading mb-n6"
dark
>
<slot
v-if="$slots.heading"
name="heading"
/>
<slot
v-else-if="$slots.image"
name="image"
/>
<div
v-else-if="title && !icon"
class="display-1 font-weight-light"
v-text="title"
/>
<v-icon
v-else-if="icon"
size="32"
v-text="icon"
/>
<div
v-if="text"
class="headline font-weight-thin"
v-text="text"
/>
</v-sheet>
<div
v-if="$slots['after-heading']"
class="ml-6"
>
<slot name="after-heading" />
</div>
<div
v-else-if="icon && title"
class="ml-4"
>
<div
class="card-title font-weight-light"
v-text="title"
/>
</div>
</div>
<slot />
<template v-if="$slots.actions">
<v-divider class="mt-2" />
<v-card-actions class="pb-0">
<slot name="actions" />
</v-card-actions>
</template>
</v-card>
</template>
<script>
export default {
name: 'MaterialCard',
props: {
avatar: {
type: String,
default: '',
},
color: {
type: String,
default: 'success',
},
icon: {
type: String,
default: undefined,
},
image: {
type: Boolean,
default: false,
},
text: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
},
computed: {
classes () {
return {
'v-card--material--has-heading': this.hasHeading,
}
},
hasHeading () {
return Boolean(this.$slots.heading || this.title || this.icon)
},
hasAltHeading () {
return Boolean(this.$slots.heading || (this.title && this.icon))
},
},
}
</script>
<style lang="sass">
.v-card--material
&__avatar
position: relative
top: -64px
margin-bottom: -32px
&__heading
position: relative
top: -40px
transition: .3s ease
z-index: 1
</style>

95
src/components/base/MaterialChartCard.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<base-material-card
class="v-card--material-chart"
v-bind="$attrs"
v-on="$listeners"
>
<template v-slot:heading>
<chartist
:data="data"
:event-handlers="eventHandlers"
:options="options"
:ratio="ratio"
:responsive-options="responsiveOptions"
:type="type"
style="max-height: 150px;"
/>
</template>
<slot
slot="reveal-actions"
name="reveal-actions"
/>
<slot />
<slot
slot="actions"
name="actions"
/>
</base-material-card>
</template>
<script>
export default {
name: 'MaterialChartCard',
inheritAttrs: false,
props: {
data: {
type: Object,
default: () => ({}),
},
eventHandlers: {
type: Array,
default: () => ([]),
},
options: {
type: Object,
default: () => ({}),
},
ratio: {
type: String,
default: undefined,
},
responsiveOptions: {
type: Array,
default: () => ([]),
},
type: {
type: String,
required: true,
validator: v => ['Bar', 'Line', 'Pie'].includes(v),
},
},
}
</script>
<style lang="sass">
.v-card--material-chart
p
color: #999
.v-card--material__heading
max-height: 185px
.ct-label
color: inherit
opacity: .7
font-size: 0.975rem
font-weight: 100
.ct-grid
stroke: rgba(255, 255, 255, 0.2)
.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut
stroke: rgba(255,255,255,.8)
.ct-series-a .ct-slice-pie,
.ct-series-a .ct-area
fill: rgba(255,255,255,.4)
</style>

71
src/components/base/MaterialSnackbar.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<v-snackbar
v-model="internalValue"
class="v-snackbar--material"
v-bind="{
...$attrs,
'color': 'transparent'
}"
>
<base-material-alert
v-model="internalValue"
:color="$attrs.color"
:dismissible="dismissible"
:type="type"
class="ma-0"
dark
>
<slot />
</base-material-alert>
</v-snackbar>
</template>
<script>
export default {
name: 'BaseMaterialSnackbar',
props: {
dismissible: {
type: Boolean,
default: true,
},
type: {
type: String,
default: '',
},
value: Boolean,
},
data () {
return {
internalValue: this.value,
}
},
watch: {
internalValue (val, oldVal) {
if (val === oldVal) return
this.$emit('input', val)
},
value (val, oldVal) {
if (val === oldVal) return
this.internalValue = val
},
},
}
</script>
<style lang="sass">
.v-snackbar--material
margin-top: 32px
margin-bottom: 32px
.v-alert--material,
.v-snack__wrapper
border-radius: 4px
.v-snack__content
overflow: visible
padding: 0
</style>

113
src/components/base/MaterialStatsCard.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<base-material-card
:icon="icon"
class="v-card--material-stats"
v-bind="$attrs"
v-on="$listeners"
>
<template v-slot:after-heading>
<div class="ml-auto text-right">
<div
class="body-3 grey--text font-weight-light"
v-text="title"
/>
<h3 class="display-2 font-weight-light text--primary">
{{ value }} <small>{{ smallValue }}</small>
</h3>
</div>
</template>
<v-col
cols="12"
class="px-0"
>
<v-divider />
</v-col>
<v-icon
:color="subIconColor"
size="16"
class="ml-2 mr-1"
>
{{ subIcon }}
</v-icon>
<span
:class="subTextColor"
class="caption grey--text font-weight-light"
v-text="subText"
/>
</base-material-card>
</template>
<script>
import Card from './Card'
export default {
name: 'MaterialStatsCard',
inheritAttrs: false,
props: {
...Card.props,
icon: {
type: String,
required: true,
},
subIcon: {
type: String,
default: undefined,
},
subIconColor: {
type: String,
default: undefined,
},
subTextColor: {
type: String,
default: undefined,
},
subText: {
type: String,
default: undefined,
},
title: {
type: String,
default: undefined,
},
value: {
type: String,
default: undefined,
},
smallValue: {
type: String,
default: undefined,
},
},
}
</script>
<style lang="sass">
.v-card--material-stats
display: flex
flex-wrap: wrap
position: relative
> div:first-child
justify-content: space-between
.v-card
border-radius: 4px
flex: 0 1 auto
.v-card__text
display: inline-block
flex: 1 0 calc(100% - 120px)
position: absolute
top: 0
right: 0
width: 100%
.v-card__actions
flex: 1 0 100%
</style>

43
src/components/base/MaterialTabs.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<v-tabs
v-model="internalValue"
:active-class="`${color} ${$vuetify.theme.dark ? 'black' : 'white'}--text`"
class="v-tabs--pill"
hide-slider
v-bind="$attrs"
>
<slot />
<slot name="items" />
</v-tabs>
</template>
<script>
// Mixins
import Proxyable from 'vuetify/lib/mixins/proxyable'
export default {
name: 'MaterialTabs',
mixins: [Proxyable],
props: {
color: {
type: String,
default: 'primary',
},
},
}
</script>
<style lang="sass">
.v-tabs--pill
.v-tab,
.v-tab:before
border-radius: 24px
&.v-tabs--icons-and-text
.v-tab,
.v-tab:before
border-radius: 4px
</style>

76
src/components/base/MaterialTestimony.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<v-card class="text-center v-card--testimony">
<div class="pt-6">
<v-icon
color="black"
x-large
>
mdi-format-quote-close
</v-icon>
</div>
<v-card-text
class="display-1 font-weight-light font-italic mb-3"
v-text="blurb"
/>
<div
class="display-2 font-weight-light mb-2"
v-text="author"
/>
<div
class="body-2 text-uppercase grey--text"
v-text="handle"
/>
<v-avatar
class="elevation-12"
color="grey"
size="100"
>
<v-img
:alt="`${author} Testimonial`"
:src="avatar"
/>
</v-avatar>
<div />
</v-card>
</template>
<script>
export default {
name: 'BaseMaterialTestimony',
props: {
author: {
type: String,
default: '',
},
avatar: {
type: String,
default: 'https://demos.creative-tim.com/material-dashboard/assets/img/faces/card-profile1-square.jpg',
},
blurb: {
type: String,
default: '',
},
handle: {
type: String,
default: '',
},
},
}
</script>
<style lang="sass">
.v-card--testimony
padding-bottom: 72px
margin-bottom: 64px
.v-avatar
position: absolute
left: calc(50% - 64px)
top: calc(100% - 64px)
</style>

34
src/components/base/Subheading.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="display-2 font-weight-light col col-12 text-left text--primary pa-0 mb-8">
<h5 class="font-weight-light">
{{ subheading }}
<template v-if="text">
<span
class="subtitle-1"
v-text="text"
/>
</template>
</h5>
<div class="pt-2">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'Subheading',
props: {
subheading: {
type: String,
default: '',
},
text: {
type: String,
default: '',
},
},
}
</script>

40
src/components/base/VComponent.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<section class="mb-12 text-center">
<h1
class="font-weight-light mb-2 headline"
v-text="`Vuetify ${heading}`"
/>
<span
class="font-weight-light subtitle-1"
>
Please checkout the
<a
:href="`https://vuetifyjs.com/${link}`"
rel="noopener"
target="_blank"
class="secondary--text"
style="text-decoration:none;"
>
full documentation
</a>
</span>
</section>
</template>
<script>
export default {
name: 'VComponent',
props: {
heading: {
type: String,
default: '',
},
link: {
type: String,
default: '',
},
},
}
</script>

19
src/i18n.js Normal file
View File

@ -0,0 +1,19 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from 'vuetify/lib/locale/en'
Vue.use(VueI18n)
const messages = {
en: {
...require('@/locales/en.json'),
$vuetify: en,
},
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages,
})

45
src/locales/en.json Normal file
View File

@ -0,0 +1,45 @@
{
"avatar": "Vuetify MD",
"buttons": "Buttons",
"calendar": "Calendar",
"charts": "Charts",
"components": "Components",
"ct": "CT",
"dashboard": "Dashboard",
"dtables": "Data Tables",
"eforms": "Extended Forms",
"error": "Error Page",
"etables": "Extended Tables",
"example": "Example",
"forms": "Forms",
"fullscreen": "Full Screen Map",
"google": "Google Maps",
"grid": "Grid System",
"icons": "Icons",
"lock": "Lock Screen Page",
"login": "Login Page",
"maps": "Maps",
"multi": "Multi Level Collapse",
"notifications": "Notifications",
"pages": "Pages",
"plan": "Choose Plan",
"pricing": "Pricing",
"my-profile": "My Profile",
"edit-profile": "Edit Profile",
"register": "Register Page",
"rforms": "Regular Forms",
"rtables": "Regular Tables",
"rtl": "RTL Support",
"search": "Search",
"settings": "Settings",
"tables": "Tables",
"tabs": "Tabs",
"tim": "Creative Tim",
"timeline": "Timeline",
"typography": "Typography",
"upgrade": "Upgrade To PRO",
"user": "User Profile",
"vforms": "Validation Forms",
"widgets": "Widgets",
"wizard": "Wizard"
}

32
src/main.js Normal file
View File

@ -0,0 +1,32 @@
// =========================================================
// * Vuetify Material Dashboard - v2.1.0
// =========================================================
//
// * Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard
// * Copyright 2019 Creative Tim (https://www.creative-tim.com)
//
// * Coded by Creative Tim
//
// =========================================================
//
// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/base'
import './plugins/chartist'
import './plugins/vee-validate'
import vuetify from './plugins/vuetify'
import i18n from './i18n'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
i18n,
render: h => h(App),
}).$mount('#app')

17
src/plugins/base.js Normal file
View File

@ -0,0 +1,17 @@
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
'@/components/base', true, /\.vue$/,
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = upperFirst(
camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')),
)
Vue.component(`Base${componentName}`, componentConfig.default || componentConfig)
})

4
src/plugins/chartist.js Normal file
View File

@ -0,0 +1,4 @@
import Vue from 'vue'
import 'chartist/dist/chartist.min.css'
Vue.use(require('vue-chartist'))

22
src/plugins/vee-validate.js Normal file
View File

@ -0,0 +1,22 @@
import Vue from 'vue'
import {
extend,
ValidationObserver,
ValidationProvider,
} from 'vee-validate'
import {
email,
max,
min,
numeric,
required,
} from 'vee-validate/dist/rules'
extend('email', email)
extend('max', max)
extend('min', min)
extend('numeric', numeric)
extend('required', required)
Vue.component('validation-provider', ValidationProvider)
Vue.component('validation-observer', ValidationObserver)

25
src/plugins/vuetify.js Normal file
View File

@ -0,0 +1,25 @@
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import i18n from '@/i18n'
import '@/sass/overrides.sass'
Vue.use(Vuetify)
const theme = {
primary: '#4CAF50',
secondary: '#9C27b0',
accent: '#9C27b0',
info: '#00CAE3',
}
export default new Vuetify({
lang: {
t: (key, ...params) => i18n.t(key, params),
},
theme: {
themes: {
dark: theme,
light: theme,
},
},
})

62
src/router.js Normal file
View File

@ -0,0 +1,62 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/',
component: () => import('@/views/dashboard/Index'),
children: [
// Dashboard
{
name: 'Dashboard',
path: '',
component: () => import('@/views/dashboard/Dashboard'),
},
// Pages
{
name: 'User Profile',
path: 'pages/user',
component: () => import('@/views/dashboard/pages/UserProfile'),
},
{
name: 'Notifications',
path: 'components/notifications',
component: () => import('@/views/dashboard/component/Notifications'),
},
{
name: 'Icons',
path: 'components/icons',
component: () => import('@/views/dashboard/component/Icons'),
},
{
name: 'Typography',
path: 'components/typography',
component: () => import('@/views/dashboard/component/Typography'),
},
// Tables
{
name: 'Regular Tables',
path: 'tables/regular-tables',
component: () => import('@/views/dashboard/tables/RegularTables'),
},
// Maps
{
name: 'Google Maps',
path: 'maps/google-maps',
component: () => import('@/views/dashboard/maps/GoogleMaps'),
},
// Upgrade
{
name: 'Upgrade',
path: 'upgrade',
component: () => import('@/views/dashboard/Upgrade'),
},
],
},
],
})

47
src/sass/overrides.sass Normal file
View File

@ -0,0 +1,47 @@
// =========================================================
// * Vuetify Material Dashboard - v2.1.0
// =========================================================
//
// * Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard
// * Copyright 2019 Creative Tim (https://www.creative-tim.com)
//
// * Coded by Creative Tim
//
// =========================================================
//
// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
// Creative Tim refine style code
@import vuetify-material/sidebar
@import vuetify-material/appbar
@import vuetify-material/buttons
@import vuetify-material/pagination
@import vuetify-material/footer
@import vuetify-material/view
@import vuetify-material/settings
@import vuetify-material/card
@import vuetify-material/table
@import vuetify-material/tab
@import vuetify-material/notification
@import vuetify-material/modal
@import vuetify-material/map
@import vuetify-material/chip
.v-btn.v-size--default,
.v-btn.v-size--large
&:not(.v-btn--icon):not(.v-btn--fab)
padding: 0 30px !important
.theme--light.v-list-item .v-list-item__action-text,
.theme--light.v-list-item .v-list-item__subtitle
color: #999
.theme--light.v-text-field>.v-input__control>.v-input__slot:before
border-color: #d2d2d2
.v-label.v-label,
.v-alert.v-alert
font-size: $font-size-root
.theme--light .v-content
background-color: #eee

34
src/sass/variables.scss Normal file
View File

@ -0,0 +1,34 @@
$font-size-root: 14px;
$sheet-border-radius: 4px;
$list-item-title-font-size: 0.929rem;
$list-item-dense-title-font-size: 0.929rem;
$list-item-dense-title-font-weight: initial;
$fab-icon-sizes: ( small: 20 );
$btn-font-sizes: ( default: 1rem, large: 1rem );
$btn-sizes: ( default: 41, large: 54 );
$btn-letter-spacing: 0;
$btn-font-weight: 400;
$card-text-font-size: 16px;
$headings: (
'h1': (
'size': 3.3125rem,
'line-height': 1.15em
),
'h2': (
'size': 2.25rem,
'line-height': 1.5em
),
'h3': (
'size': 1.5625rem,
'line-height': 1.4em
),
'h4': (
'size': 1.125rem,
'line-height': 1.4em
),
'h5': ( 'size': 1.0625rem ),
'h6': ( 'size': .75rem ),
'subtitle-2': ( 'size': 1rem ),
'overline': ( 'letter-spacing': 0 )
);

54
src/sass/vuetify-material/_appbar.sass Normal file
View File

@ -0,0 +1,54 @@
#app-bar
.v-badge__badge
font-size: 9px
padding: 5px 6px
// -----------------------
.v-toolbar__content,
.v-toolbar__extension
padding: 0px 15px 0 31px
.v-sheet
.v-toolbar__content
.v-btn.v-size--default:not(.v-btn--icon):not(.v-btn--fab),
.v-btn.v-size--large:not(.v-btn--icon):not(.v-btn--fab)
margin-bottom: 5px
padding: 10px 15px !important
.theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
background-color: #fff
.v-icon
color: #999
.theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
background-color: #fff
margin-right: 17px
margin-bottom: 2px
.theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined):hover
background-color: #fff
.v-toolbar__content
height: 75px
.v-toolbar__content .v-btn--flat
.v-icon
margin-right: 3px
.theme--light.v-label
color: rgba(0, 0, 0, 0.3)
.v-menu__content .v-list--nav
padding: .3125rem 0
border-radius: 4px
.v-list-item
padding: 10px 20px
margin: 0 .3125rem
margin-bottom: 0px !important
min-height: 40px
border-radius: 2px
.v-list-item__title
font-weight: 400
font-size: 13px
.v-navigation-drawer .v-icon.v-icon
font-size: 24px

67
src/sass/vuetify-material/_buttons.sass Normal file
View File

@ -0,0 +1,67 @@
.v-btn.v-size--default
font-size: .85rem
.v-icon.v-icon
font-size: 20px
.v-btn__content .v-icon--left
margin-right: 4px
.v-sheet button.v-btn.v-size--default:not(.v-btn--icon):not(.v-btn--fab)
padding: 12px 30px !important
.theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
background-color: #999
color: #fff
&:hover
background-color: #999
color: #fff
.v-btn.white
.v-btn__content
color: #999
.v-sheet .v-btn.v-size--large:not(.v-btn--icon):not(.v-btn--fab)
padding: 18px 36px !important
.v-btn--fab.v-size--small
height: 41px
width: 41px
.v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before
opacity: 0
.v-btn:not(.v-btn--text):not(.v-btn--outlined):focus:before
opacity: 0
.v-btn.v-size--default:not(.v-btn--icon):not(.v-btn--fab),
.v-btn.v-size--large:not(.v-btn--icon):not(.v-btn--fab)
padding: 10px 15px !important
// Button group
.v-item-group
.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
margin-right: 0
.v-btn-toggle
.v-btn
opacity: 1
.v-btn-toggle > .v-btn.v-size--default
height: inherit
.theme--light.v-btn-toggle .v-btn.v-btn
border-color: #999 !important
&.primary
border-color: #e91e63 !important
&.secondary
border-color: #9c27b0 !important
&.success
border-color: #4caf50 !important
&.warning
border-color: #fb8c00 !important
&.error
border-color: #ff5252 !important
&.info
border-color: #00cae3 !important

107
src/sass/vuetify-material/_card.sass Normal file
View File

@ -0,0 +1,107 @@
.v-card
border-radius: 6px
margin-top: 30px
margin-bottom: 15px
.card-title
font-size: 18px
.v-card--material__heading
top: -30px
.subtitle-1
color: hsla(0,0%,100%,.8)
.display-2
font-size: 18px !important
.caption
font-size: 12px !important
letter-spacing: 0 !important
.v-card__actions
padding-top: 15px
.display-2
font-size: 18px !important
.v-divider
border-color: #eee
.ct-label
font-size: 14px
.v-card--material-chart .v-card--material__heading .ct-label
font-weight: 300
.v-btn--icon.v-size--default .v-icon,
.v-btn--fab.v-size--default .v-icon
font-size: 18px
.v-card--material .v-image
.v-image__image
border-radius: 6px
.v-card__title
font-size: 18px
padding-top: 7px
padding-bottom: 2px
.theme--light
.v-card > .v-card__text
color: #333
.card-title
color: #3c4858
.theme--dark
.card-title
color: #fff
.v-timeline-item .v-card
margin-top: 0
.v-card--wizard
.v-tabs-bar
height: 42px
.v-card__actions
.v-btn
margin-right: 0 !important
.v-tabs .v-tab--active:hover::before, .theme--light.v-tabs .v-tab--active::before
opacity: 0
.v-tabs .v-tab:hover::before
opacity: 0
.v-card--plan
.body-2
font-weight: 500
letter-spacing: 0 !important
margin-top: 10px
margin-bottom: 8px
.display-2
margin-top: 30px
.v-card__text
color: #999
margin-bottom: 16px
.v-btn
margin-right: 0 !important
.v-avatar
margin-top: 10px
.v-card--testimony
.v-card__text
color: #999 !important
.display-2
font-size: 18px !important
.body-2
font-weight: 500
font-size: 12px !important
.v-avatar
left: calc(50% - 50px)
.ct-square:before
float: none

9
src/sass/vuetify-material/_chip.sass Normal file
View File

@ -0,0 +1,9 @@
.v-chip.v-size--small
height: 20px
.v-chip__content
font-size: 10px
font-weight: 500
.v-chip__close
font-size: 15px
margin-top: -1px

29
src/sass/vuetify-material/_footer.sass Normal file
View File

@ -0,0 +1,29 @@
.v-footer
padding: 20px 0 20px 4px
border-top: 1px solid #e7e7e7 !important
position: relative
a
padding: 15px 18px 15px 16px
font-size: 12px !important
.body-1
font-size: 16px !important
padding-right: 18px
letter-spacing: 0px !important
a
color: #9c27b0 !important
padding: 0
text-transform: inherit !important
font-size: 16px !important
font-weight: 300 !important
.v-icon
margin-top: -3px
&.v-footer--absolute
position: absolute !important
.theme--light.v-footer
background-color: transparent
.body-1
color: #3c4858
.v-icon
color: #3c4858

3
src/sass/vuetify-material/_map.sass Normal file
View File

@ -0,0 +1,3 @@
.mapouter
position: relative !important
height: 100vh !important

25
src/sass/vuetify-material/_modal.sass Normal file
View File

@ -0,0 +1,25 @@
.v-dialog
.v-card
margin: 0
.v-card__title
font-weight: 300
font-size: 18px
display: inline-block
text-align: center
width: 100%
padding: 24px 24px 0
.v-icon
position: absolute
top: 15px
right: 20px
color: #999
opacity: .5
font-size: 16px
&:hover
opacity: 1
.v-dialog > .v-card > .v-card__text
padding-top: 24px
font-weight: 300
line-height: 1.75em
letter-spacing: 0

12
src/sass/vuetify-material/_notification.sass Normal file
View File

@ -0,0 +1,12 @@
.v-alert
padding: 20px 15px
.v-alert__wrapper
.v-alert__icon
height: 38px
min-width: 38px
.v-alert__content
font-weight: 300
span
font-size: 12px
font-weight: 500

5
src/sass/vuetify-material/_pagination.sass Normal file
View File

@ -0,0 +1,5 @@
.v-pagination
.v-pagination__item,
.v-pagination__navigation
&:focus
outline: none

36
src/sass/vuetify-material/_settings.sass Normal file
View File

@ -0,0 +1,36 @@
#settings
z-index: 200
.v-settings
border-radius: 10px
.v-card
margin-top: 0
.v-card__text
strong
height: 30px
line-height: 25px
font-size: 12px
font-weight: 600
text-transform: uppercase
text-align: center
.v-avatar
border-color: #fff
border-radius: 50% !important
cursor: pointer
display: inline-block
height: 23px
margin-right: 12px
position: relative
width: 23px
padding: 8px
.v-settings__item
border-radius: 10px
.v-image
border-radius: 7px !important
.v-settings__item:not(.v-settings__item--active)
border-color: #fff !important
.v-divider.secondary
border-color: rgb(221, 221, 221) !important

68
src/sass/vuetify-material/_sidebar.sass Normal file
View File

@ -0,0 +1,68 @@
.v-application .v-navigation-drawer .v-navigation-drawer__content .v-list-item .v-list-item__content .v-list-item__title.display-2
font-size: 18px !important
margin-top: 12px
margin-bottom: 12px
.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
font-size: 14px
font-weight: 300
.v-application--is-ltr .v-list-item__avatar:first-child
margin-right: 11px
.v-application .v-navigation-drawer .v-navigation-drawer__content .v-list-item__icon.v-list-group__header__append-icon .v-icon
font-size: 19px
.v-application--is-ltr #core-navigation-drawer div.v-list-item__icon--text,
.v-application--is-ltr #core-navigation-drawer div.v-list-item__icon:first-child
margin-left: 5px !important
margin-right: 18px
opacity: .8
.v-application--is-ltr .v-list-item__action:last-of-type:not(:only-child),
.v-application--is-ltr .v-list-item__avatar:last-of-type:not(:only-child),
.v-application--is-ltr .v-list-item__icon:last-of-type:not(:only-child)
margin-right: 2px
.v-list--nav.v-list--dense .v-list-item:not(:last-child):not(:only-child),
.v-list--nav .v-list-item--dense:not(:last-child):not(:only-child),
.v-list--rounded.v-list--dense .v-list-item:not(:last-child):not(:only-child),
.v-list--rounded .v-list-item--dense:not(:last-child):not(:only-child)
margin-bottom: 3px
.v-list-item .v-list-item__title, .v-list-item .v-list-item__subtitle
line-height: 1.2
font-weight: 300
font-size: 14px
.v-list-group__items .v-list-item
font-size: 13px
margin-bottom: 5px !important
.v-list-item__title
font-size: 13px
.v-list-item__icon
margin-top: 14px
.v-list-group__items .v-list-group--sub-group .v-list-group__header .v-list-item__icon--text
margin-top: 15px !important
.v-list-item__icon
margin: 12px 0
.theme--dark.v-list-item--active:hover::before, .theme--dark.v-list-item--active::before
opacity: 0
.v-navigation-drawer
.v-list-item__content
transition: all 0.3s linear 0s
.v-list--nav
padding-left: 15px
padding-right: 15px
.theme--dark.v-navigation-drawer .v-divider
background-color: rgba(181, 181, 181, 0.2)
border-color: rgba(181, 181, 181, 0.1)
width: calc(100% - 30px)
margin-left: 15px

12
src/sass/vuetify-material/_tab.sass Normal file
View File

@ -0,0 +1,12 @@
.v-card--wizard
.v-tabs-bar
.v-slide-group__wrapper
overflow: visible
display: -webkit-inline-box
contain: inherit
.v-slide-group__content
z-index: 2
.v-tab:not(:first-child)
margin-left: 5px

22
src/sass/vuetify-material/_table.sass Normal file
View File

@ -0,0 +1,22 @@
.v-data-table td
font-weight: 300
padding: 12px 8px
.v-data-table table thead tr th
font-weight: 300
font-size: 17px
padding: 0px 8px
.v-data-table table tbody tr td .v-btn
margin-right: 0px !important
.v-data-table .v-data-table-header__sort-badge
font-size: 10px
.v-data-table.theme--dark
tr th
color: #fff !important
.theme--light
.v-data-table table thead tr th
color: #333

23
src/sass/vuetify-material/_view.sass Normal file
View File

@ -0,0 +1,23 @@
.v-content__wrap
.container--fluid
padding-left: 30px
padding-right: 30px
.v-application .headline
font-size: 25px !important
padding-bottom: 0
.v-application .black--text
color: #333 !important
.v-application .small
font-weight: 300
line-height: 2rem
small
font-weight: 400
@media(max-width:960px)
.v-content__wrap
.container--fluid
padding-left: 15px
padding-right: 15px

23
src/store.js Normal file
View File

@ -0,0 +1,23 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
barColor: 'rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)',
barImage: 'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg',
drawer: null,
},
mutations: {
SET_BAR_IMAGE (state, payload) {
state.barImage = payload
},
SET_DRAWER (state, payload) {
state.drawer = payload
},
},
actions: {
},
})

601
src/views/dashboard/Dashboard.vue Normal file
View File

@ -0,0 +1,601 @@
<template>
<v-container
id="dashboard"
fluid
tag="section"
>
<v-row>
<v-col
cols="12"
lg="4"
>
<base-material-chart-card
:data="emailsSubscriptionChart.data"
:options="emailsSubscriptionChart.options"
:responsive-options="emailsSubscriptionChart.responsiveOptions"
color="#E91E63"
hover-reveal
type="Bar"
>
<template v-slot:reveal-actions>
<v-tooltip bottom>
<template v-slot:activator="{ attrs, on }">
<v-btn
v-bind="attrs"
color="info"
icon
v-on="on"
>
<v-icon
color="info"
>
mdi-refresh
</v-icon>
</v-btn>
</template>
<span>Refresh</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ attrs, on }">
<v-btn
v-bind="attrs"
light
icon
v-on="on"
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<span>Change Date</span>
</v-tooltip>
</template>
<h4 class="card-title font-weight-light mt-2 ml-2">
Website Views
</h4>
<p class="d-inline-flex font-weight-light ml-2 mt-1">
Last Campaign Performance
</p>
<template v-slot:actions>
<v-icon
class="mr-1"
small
>
mdi-clock-outline
</v-icon>
<span class="caption grey--text font-weight-light">updated 10 minutes ago</span>
</template>
</base-material-chart-card>
</v-col>
<v-col
cols="12"
lg="4"
>
<base-material-chart-card
:data="dailySalesChart.data"
:options="dailySalesChart.options"
color="success"
hover-reveal
type="Line"
>
<template v-slot:reveal-actions>
<v-tooltip bottom>
<template v-slot:activator="{ attrs, on }">
<v-btn
v-bind="attrs"
color="info"
icon
v-on="on"
>
<v-icon
color="info"
>
mdi-refresh
</v-icon>
</v-btn>
</template>
<span>Refresh</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ attrs, on }">
<v-btn
v-bind="attrs"
light
icon
v-on="on"
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<span>Change Date</span>
</v-tooltip>
</template>
<h4 class="card-title font-weight-light mt-2 ml-2">
Daily Sales
</h4>
<p class="d-inline-flex font-weight-light ml-2 mt-1">
<v-icon
color="green"
small
>
mdi-arrow-up
</v-icon>
<span class="green--text">55%</span>&nbsp;
increase in today's sales
</p>
<template v-slot:actions>
<v-icon
class="mr-1"
small
>
mdi-clock-outline
</v-icon>
<span class="caption grey--text font-weight-light">updated 4 minutes ago</span>
</template>
</base-material-chart-card>
</v-col>
<v-col
cols="12"
lg="4"
>
<base-material-chart-card
:data="dataCompletedTasksChart.data"
:options="dataCompletedTasksChart.options"
hover-reveal
color="info"
type="Line"
>
<template v-slot:reveal-actions>
<v-tooltip bottom>
<template v-slot:activator="{ attrs, on }">
<v-btn
v-bind="attrs"
color="info"
icon
v-on="on"
>
<v-icon
color="info"
>
mdi-refresh
</v-icon>
</v-btn>
</template>
<span>Refresh</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ attrs, on }">
<v-btn
v-bind="attrs"
light
icon
v-on="on"
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<span>Change Date</span>
</v-tooltip>
</template>
<h3 class="card-title font-weight-light mt-2 ml-2">
Completed Tasks
</h3>
<p class="d-inline-flex font-weight-light ml-2 mt-1">
Last Last Campaign Performance
</p>
<template v-slot:actions>
<v-icon
class="mr-1"
small
>
mdi-clock-outline
</v-icon>
<span class="caption grey--text font-weight-light">campaign sent 26 minutes ago</span>
</template>
</base-material-chart-card>
</v-col>
<v-col
cols="12"
sm="6"
lg="3"
>
<base-material-stats-card
color="info"
icon="mdi-twitter"
title="Followers"
value="+245"
sub-icon="mdi-clock"
sub-text="Just Updated"
/>
</v-col>
<v-col
cols="12"
sm="6"
lg="3"
>
<base-material-stats-card
color="primary"
icon="mdi-poll"
title="Website Visits"
value="75.521"
sub-icon="mdi-tag"
sub-text="Tracked from Google Analytics"
/>
</v-col>
<v-col
cols="12"
sm="6"
lg="3"
>
<base-material-stats-card
color="success"
icon="mdi-store"
title="Revenue"
value="$ 34,245"
sub-icon="mdi-calendar"
sub-text="Last 24 Hours"
/>
</v-col>
<v-col
cols="12"
sm="6"
lg="3"
>
<base-material-stats-card
color="orange"
icon="mdi-sofa"
title="Bookings"
value="184"
sub-icon="mdi-alert"
sub-icon-color="red"
sub-text="Get More Space..."
/>
</v-col>
<v-col
cols="12"
md="6"
>
<base-material-card
color="warning"
class="px-5 py-3"
>
<template v-slot:heading>
<div class="display-2 font-weight-light">
Employees Stats
</div>
<div class="subtitle-1 font-weight-light">
New employees on 15th September, 2016
</div>
</template>
<v-card-text>
<v-data-table
:headers="headers"
:items="items"
/>
</v-card-text>
</base-material-card>
</v-col>
<v-col
cols="12"
md="6"
>
<base-material-card class="px-5 py-3">
<template v-slot:heading>
<v-tabs
v-model="tabs"
background-color="transparent"
slider-color="white"
>
<span
class="subheading font-weight-light mx-3"
style="align-self: center"
>Tasks:</span>
<v-tab class="mr-3">
<v-icon class="mr-2">
mdi-bug
</v-icon>
Bugs
</v-tab>
<v-tab class="mr-3">
<v-icon class="mr-2">
mdi-code-tags
</v-icon>
Website
</v-tab>
<v-tab>
<v-icon class="mr-2">
mdi-cloud
</v-icon>
Server
</v-tab>
</v-tabs>
</template>
<v-tabs-items
v-model="tabs"
class="transparent"
>
<v-tab-item
v-for="n in 3"
:key="n"
>
<v-card-text>
<template v-for="(task, i) in tasks[tabs]">
<v-row
:key="i"
align="center"
>
<v-col cols="1">
<v-list-item-action>
<v-checkbox
v-model="task.value"
color="secondary"
/>
</v-list-item-action>
</v-col>
<v-col cols="9">
<div
class="font-weight-light"
v-text="task.text"
/>
</v-col>
<v-col
cols="2"
class="text-right"
>
<v-icon class="mx-1">
mdi-pencil
</v-icon>
<v-icon
color="error"
class="mx-1"
>
mdi-close
</v-icon>
</v-col>
</v-row>
</template>
</v-card-text>
</v-tab-item>
</v-tabs-items>
</base-material-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'DashboardDashboard',
data () {
return {
dailySalesChart: {
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
series: [
[12, 17, 7, 17, 23, 18, 38],
],
},
options: {
lineSmooth: this.$chartist.Interpolation.cardinal({
tension: 0,
}),
low: 0,
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
chartPadding: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
},
},
dataCompletedTasksChart: {
data: {
labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'],
series: [
[230, 750, 450, 300, 280, 240, 200, 190],
],
},
options: {
lineSmooth: this.$chartist.Interpolation.cardinal({
tension: 0,
}),
low: 0,
high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
chartPadding: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
},
},
emailsSubscriptionChart: {
data: {
labels: ['Ja', 'Fe', 'Ma', 'Ap', 'Mai', 'Ju', 'Jul', 'Au', 'Se', 'Oc', 'No', 'De'],
series: [
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
],
},
options: {
axisX: {
showGrid: false,
},
low: 0,
high: 1000,
chartPadding: {
top: 0,
right: 5,
bottom: 0,
left: 0,
},
},
responsiveOptions: [
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0]
},
},
}],
],
},
headers: [
{
sortable: false,
text: 'ID',
value: 'id',
},
{
sortable: false,
text: 'Name',
value: 'name',
},
{
sortable: false,
text: 'Salary',
value: 'salary',
align: 'right',
},
{
sortable: false,
text: 'Country',
value: 'country',
align: 'right',
},
{
sortable: false,
text: 'City',
value: 'city',
align: 'right',
},
],
items: [
{
id: 1,
name: 'Dakota Rice',
country: 'Niger',
city: 'Oud-Tunrhout',
salary: '$35,738',
},
{
id: 2,
name: 'Minerva Hooper',
country: 'Curaçao',
city: 'Sinaai-Waas',
salary: '$23,738',
},
{
id: 3,
name: 'Sage Rodriguez',
country: 'Netherlands',
city: 'Overland Park',
salary: '$56,142',
},
{
id: 4,
name: 'Philip Chanley',
country: 'Korea, South',
city: 'Gloucester',
salary: '$38,735',
},
{
id: 5,
name: 'Doris Greene',
country: 'Malawi',
city: 'Feldkirchen in Kārnten',
salary: '$63,542',
},
],
tabs: 0,
tasks: {
0: [
{
text: 'Sign contract for "What are conference organizers afraid of?"',
value: true,
},
{
text: 'Lines From Great Russian Literature? Or E-mails From My Boss?',
value: false,
},
{
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
value: false,
},
{
text: 'Create 4 Invisible User Experiences you Never Knew About',
value: true,
},
],
1: [
{
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
value: true,
},
{
text: 'Sign contract for "What are conference organizers afraid of?"',
value: false,
},
],
2: [
{
text: 'Lines From Great Russian Literature? Or E-mails From My Boss?',
value: false,
},
{
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
value: true,
},
{
text: 'Sign contract for "What are conference organizers afraid of?"',
value: true,
},
],
},
list: {
0: false,
1: false,
2: false,
},
}
},
methods: {
complete (index) {
this.list[index] = !this.list[index]
},
},
}
</script>

28
src/views/dashboard/Index.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<v-app>
<dashboard-core-app-bar />
<dashboard-core-drawer />
<dashboard-core-view />
<dashboard-core-settings />
</v-app>
</template>
<script>
export default {
name: 'DashboardIndex',
components: {
DashboardCoreAppBar: () => import('./components/core/AppBar'),
DashboardCoreDrawer: () => import('./components/core/Drawer'),
DashboardCoreSettings: () => import('./components/core/Settings'),
DashboardCoreView: () => import('./components/core/View'),
},
data: () => ({
expandOnHover: false,
}),
}
</script>

131
src/views/dashboard/Upgrade.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<v-container
id="upgrade"
fluid
tag="section"
>
<v-row justify="center">
<v-col
cols="12"
md="8"
>
<base-material-card color="primary">
<template v-slot:heading>
<div class="display-2 font-weight-light">
Vuetify Material Dashboard
</div>
<div class="subtitle-1 font-weight-light">
Are you looking for more components? Please check our Premium Version of Vuetify Material Dashboard
</div>
</template>
<v-simple-table>
<thead>
<tr>
<th />
<th class="subheading font-weight-light text-center">
Free
</th>
<th class="subheading font-weight-light text-center">
PRO
</th>
</tr>
</thead>
<tbody class="text-center">
<tr>
<th class="text-left font-weight-light subtitle-1">
Components
</th>
<td>60</td>
<td>200</td>
</tr>
<tr>
<th class="text-left font-weight-light subtitle-1">
Plugins
</th>
<td>2</td>
<td>4</td>
</tr>
<tr>
<th class="text-left font-weight-light subtitle-1">
Example Pages
</th>
<td>3</td>
<td>8</td>
</tr>
<tr>
<th class="text-left font-weight-light subtitle-1">
Login, Register, Pricing, Lock Pages
</th>
<td>
<v-icon color="error">
mdi-close
</v-icon>
</td>
<td>
<v-icon color="success">
mdi-check
</v-icon>
</td>
</tr>
<tr>
<th class="text-left font-weight-light subtitle-1">
Premium Support
</th>
<td>
<v-icon color="error">
mdi-close
</v-icon>
</td>
<td>
<v-icon color="success">
mdi-check
</v-icon>
</td>
</tr>
<tr>
<th />
<td>Free</td>
<td>Just for <b class="subheading">$79</b></td>
</tr>
<tr>
<th />
<td>
<v-btn
color="grey"
disabled
>
Current Version
</v-btn>
</td>
<td>
<v-btn
color="success"
target="_blank"
href="https://www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=vtymd-upgrade-page"
>
Upgrade to Pro
</v-btn>
</td>
</tr>
</tbody>
</v-simple-table>
</base-material-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'DashboardDashboard',
}
</script>
<style lang="sass">
#upgrade
.v-data-table
th, td
border: none !important
</style>

432
src/views/dashboard/component/Buttons.vue Normal file
View File

@ -0,0 +1,432 @@
<template>
<v-container
id="buttons"
fluid
tag="section"
>
<base-v-component
heading="Buttons"
link="components/buttons"
/>
<v-card>
<v-card-text class="pt-0">
<v-row>
<v-col
cols="12"
md="6"
>
<base-subheading>
<h5 class="font-weight-light">
Pick your Color
</h5>
</base-subheading>
<div>
<v-btn
v-for="(color, i) in colors"
:key="i"
elevation="1"
:color="color === 'default' ? undefined : color"
class="ma-1"
>
{{ color }}
</v-btn>
</div>
</v-col>
<v-col
class="pt-0"
cols="12"
md="6"
>
<base-subheading>
<h5 class="font-weight-light">
Buttons with Label
</h5>
</base-subheading>
<div>
<v-btn
v-for="(dir, i) in ['left', 'right']"
:key="i"
elevation="1"
class="ma-1"
>
<v-icon
:left="dir === 'left'"
:right="dir === 'right'"
:class="dir === 'right' && 'order-last'"
v-text="icons[dir]"
/>
{{ dir }}
</v-btn>
<v-btn
v-for="(color, i) in colors.slice(2)"
:key="`btn-${i}`"
elevation="1"
:color="color === 'default' ? undefined : color"
class="ma-1"
>
<v-icon
left
v-text="icons[color]"
/>
{{ color }}
</v-btn>
</div>
</v-col>
<v-col
cols="12"
md="6"
>
<base-subheading>
<h5 class="font-weight-light">
Pick your Size
</h5>
</base-subheading>
<v-btn
v-for="n in 3"
:key="n"
elevation="1"
:small="n === 1"
:large="n === 3"
class="ma-1"
color="secondary"
>
{{ n === 1 ? 'small' : n === 2 ? 'regular' : 'large' }}
</v-btn>
</v-col>
<v-col
cols="12"
md="6"
>
<base-subheading>
<h5 class="font-weight-light">
Pick your Style
</h5>
</base-subheading>
<v-btn
class="ma-1"
color="secondary"
>
Default
</v-btn>
<v-btn
class="ma-1"
elevation="1"
color="secondary"
rounded
>
Rounded
</v-btn>
<v-btn
class="ma-1"
color="secondary"
elevation="1"
rounded
>
<v-icon left>
mdi-heart
</v-icon>
With Icon
</v-btn>
<v-btn
class="ma-1"
color="secondary"
elevation="1"
fab
small
>
<v-icon>
mdi-heart
</v-icon>
</v-btn>
<v-btn
class="ma-1"
color="secondary"
text
>
Simple
</v-btn>
</v-col>
<v-col
cols="12"
md="6"
>
<base-subheading>
<h5 class="font-weight-light">
Pagination
</h5>
</base-subheading>
<v-pagination
:length="5"
:value="1"
circle
class="justify-start"
/>
<v-pagination
:length="3"
:value="2"
circle
class="justify-start"
next-icon="mdi-menu-right"
prev-icon="mdi-menu-left"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<base-subheading>
<h5 class="font-weight-light">
Button Group
</h5>
</base-subheading>
<v-sheet>
<v-btn-toggle color="teal">
<v-btn
v-for="dir in ['left', 'middle', 'right']"
:key="dir"
>
{{ dir }}
</v-btn>
</v-btn-toggle>
</v-sheet>
<div class="my-6" />
<v-btn-toggle
color="teal"
rounded
>
<v-btn
v-for="n in 4"
:key="n"
>
{{ n }}
</v-btn>
</v-btn-toggle>
<div class="my-2" />
<v-btn-toggle
color="teal"
rounded
>
<v-btn
v-for="n in 3"
:key="n"
>
{{ n + 4 }}
</v-btn>
</v-btn-toggle>
</v-col>
<template v-for="(s, i) in social">
<v-col
:key="i"
cols="12"
class="py-1"
>
<base-subheading
v-if="i === 0"
:key="`heading-${i}`"
>
<h5 class="font-weight-light">
Social buttons
</h5>
</base-subheading>
<v-row dense>
<v-col
cols="auto"
md="4"
sm="5"
>
<v-btn
elevation="1"
:color="s.color"
dark
>
<v-icon
left
v-text="s.icon"
/>
{{ s.text }}
</v-btn>
</v-col>
<v-col
cols="auto"
md="1"
sm="1"
>
<v-btn
elevation="1"
:color="s.color"
dark
min-width="0"
max-width="41"
>
<v-icon v-text="s.icon" />
</v-btn>
</v-col>
<v-col
cols="auto"
md="1"
sm="1"
>
<v-btn
elevation="1"
:color="s.color"
dark
fab
min-width="0"
small
>
<v-icon v-text="s.icon" />
</v-btn>
</v-col>
<v-col
cols="auto"
md="1"
sm="1"
>
<v-btn
:color="s.color"
dark
icon
min-width="0"
>
<v-icon
:color="s.color"
v-text="s.icon"
/>
</v-btn>
</v-col>
<v-col
cols="auto"
md="3"
sm="4"
>
<v-btn
:color="s.color"
dark
text
>
<v-icon
left
:color="s.color"
v-text="s.icon"
/>
{{ s.text }}
</v-btn>
</v-col>
</v-row>
</v-col>
</template>
</v-row>
</v-card-text>
</v-card>
</v-container>
</template>
<script>
export default {
name: 'DashboardButtons',
data: () => ({
colors: [
'default',
'secondary',
'info',
'success',
'warning',
'error',
],
icons: {
left: 'mdi-chevron-left',
right: 'mdi-chevron-right',
info: 'mdi-exclamation',
success: 'mdi-check',
warning: 'mdi-alert',
error: 'mdi-close',
},
social: [
{
color: '#55ACEE',
icon: 'mdi-twitter',
text: 'Connect with Twitter',
},
{
color: '#3B5998',
icon: 'mdi-facebook',
text: 'Share - 2.2K',
},
{
color: '#DD4b39',
icon: 'mdi-google-plus',
text: 'Share on Google+',
},
{
color: '#0976B4',
icon: 'mdi-linkedin',
text: 'Connect with LinkedIn',
},
{
color: '#CC2127',
icon: 'mdi-pinterest',
text: 'Pint It - 212',
},
{
color: '#E52D27',
icon: 'mdi-youtube',
text: 'View on Youtube',
},
{
color: '#35465C',
icon: 'mdi-tumblr',
text: 'Repost',
},
{
color: '#333333',
icon: 'mdi-github-circle',
text: 'Connect with Github',
},
{
color: '#1769FF',
icon: 'mdi-behance',
text: 'Follow Us',
},
{
color: '#EA4C89',
icon: 'mdi-dribbble',
text: 'Follow us on Dribbble',
},
{
color: '#FF4500',
icon: 'mdi-reddit',
text: 'Repost - 232',
},
],
}),
}
</script>

300
src/views/dashboard/component/Grid.vue Normal file
View File

@ -0,0 +1,300 @@
<template>
<v-container
id="grid"
fluid
tag="section"
>
<base-v-component
heading="Grid System"
link="components/grid"
/>
<v-row class="text-center">
<base-subheading
subheading="XS Grid"
text="Always Horizontal"
class="pb-0 pl-3 mt-5"
/>
<v-col
v-for="n in 3"
:key="`cols-${n}`"
cols="4"
class="pt-0"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-4
</v-card-text>
</v-card>
</v-col>
<base-subheading
subheading="SM Grid"
text="Collapsed at 600px"
class="pb-0 pl-3 mt-5"
/>
<v-col
v-for="n in 3"
:key="`sm-${n}`"
cols="12"
sm="4"
class="pt-0"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-sm-4
</v-card-text>
</v-card>
</v-col>
<base-subheading
subheading="MD Grid"
text="Collapsed at 960px"
class="pb-0 pl-3 mt-5"
/>
<v-col
v-for="n in 3"
:key="`md-${n}`"
cols="12"
md="4"
class="pt-0"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-md-4
</v-card-text>
</v-card>
</v-col>
<base-subheading
subheading="LG Grid"
text="Collapsed at 1280px"
class="pb-0 pl-3 mt-5"
/>
<v-col
v-for="n in 3"
:key="`lg-${n}`"
cols="12"
lg="4"
class="pt-0"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-lg-4
</v-card-text>
</v-card>
</v-col>
<base-subheading
subheading="XL Grid"
text="Collapsed at 1920px"
class="pb-0 pl-3 mt-5"
/>
<v-col
v-for="n in 3"
:key="`xl-${n}`"
cols="12"
xl="4"
class="pt-0"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-xl-4
</v-card-text>
</v-card>
</v-col>
<base-subheading
subheading="Mixed Grid"
text="Showing different sizes on different screens"
class="pb-0 pl-3 mt-5"
/>
<v-col
v-for="n in 4 "
:key="`mixed-${n}`"
sm="6"
lg="3"
class="pt-0"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-xl-4
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row class="text-center">
<base-subheading
subheading="Offset Grid"
text="Adding some space when neede"
class="pb-0 pl-3 mt-5"
/>
<v-col
md="3"
class="pt-0"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-md-3
</v-card-text>
</v-card>
</v-col>
<v-col
md="3"
class="ml-auto"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-md-4 ml-auto mr-auto
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row class="text-center">
<v-col
v-for="n in 2"
:key="`offset-${n}`"
class="ml-auto mr-auto"
md="4"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-md-4 ml-auto mr-auto
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row class="text-center mb-12">
<v-col
class="ml-auto mr-auto"
md="6"
>
<v-card class="mt-0">
<v-card-text class="red--text text--darken-4">
col-md-6 ml-auto mr-auto
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row>
<paragraph-heading class="text-center pb-0">
<h4 class="font-weight-light">
Paragraphs
</h4>
</paragraph-heading>
<v-col cols="12 pt-0">
<v-card>
<v-container fluid>
<v-row>
<v-col
cols="12"
md="6"
>
<paragraph-heading>Some Title Here</paragraph-heading>
<v-card-text class="font-weight-light">
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.
</v-card-text>
</v-col>
<v-col
cols="12"
md="6"
>
<paragraph-heading>Another Title Here</paragraph-heading>
<v-card-text class="font-weight-light">
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.
</v-card-text>
</v-col>
<v-col
cols="12"
md="4"
>
<paragraph-heading>Some Title Here</paragraph-heading>
<v-card-text class="font-weight-light">
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
</v-card-text>
</v-col>
<v-col
cols="12"
md="4"
>
<paragraph-heading>Another Title Here</paragraph-heading>
<v-card-text class="font-weight-light">
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
</v-card-text>
</v-col>
<v-col
cols="12"
md="4"
>
<paragraph-heading>Another Title Here</paragraph-heading>
<v-card-text class="font-weight-light">
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
</v-card-text>
</v-col>
<v-col
cols="12"
md="4"
>
<paragraph-heading>Some Title Here</paragraph-heading>
<v-card-text class="font-weight-light">
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
</v-card-text>
</v-col>
<v-col
cols="12"
md="8"
>
<paragraph-heading>Another Title Here</paragraph-heading>
<v-card-text class="font-weight-light">
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
</v-card-text>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'DashboardGrid',
components: {
ParagraphHeading: {
render (h) {
return h('div', {
class: 'headline font-weight-light col cols-12',
}, this.$slots.default)
},
},
},
}
</script>

301
src/views/dashboard/component/Icons.vue Normal file
View File

@ -0,0 +1,301 @@
<template>
<v-container
id="icons"
fluid
tag="section"
>
<base-v-component
heading="Icons"
link="components/icons"
/>
<v-row>
<v-col cols="12">
<base-material-card color="green">
<template v-slot:heading>
<div class="display-2 font-weight-light">
Material Design Icons
</div>
<div class="subtitle-1 font-weight-light">
See all available
<a
class="white--text"
href="https://materialdesignicons.com/"
target="_blank"
>
Icons
</a>
</div>
</template>
<v-row
align="center"
justify="center"
>
<v-col
v-for="icon in icons"
:key="icon"
class="ma-2"
>
<v-tooltip
content-class="top"
top
>
<template v-slot:activator="{ attrs, on }">
<v-icon
v-bind="attrs"
v-on="on"
>
{{ icon }}
</v-icon>
</template>
<span>{{ icon }}</span>
</v-tooltip>
</v-col>
</v-row>
</base-material-card>
</v-col>
<v-col
class="mx-auto"
cols="auto"
>
<v-btn
color="success"
href="https://materialdesignicons.com/"
large
target="_blank"
>
<v-icon left>
mdi-material-design
</v-icon>
<span>See all icons</span>
</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'DashboardIcons',
data: () => ({
icons: [
'mdi-access-point',
'mdi-access-point-network',
'mdi-account',
'mdi-account-alert',
'mdi-account-box',
'mdi-account-box-multiple',
'mdi-account-box-outline',
'mdi-account-card-details',
'mdi-account-check',
'mdi-account-circle',
'mdi-account-convert',
'mdi-account-edit',
'mdi-account-group',
'mdi-account-heart',
'mdi-account-key',
'mdi-account-location',
'mdi-account-minus',
'mdi-account-multiple',
'mdi-account-multiple-check',
'mdi-account-multiple-minus',
'mdi-account-multiple-outline',
'mdi-account-multiple-plus',
'mdi-account-multiple-plus-outline',
'mdi-account-network',
'mdi-account-off',
'mdi-account-outline',
'mdi-account-plus',
'mdi-account-plus-outline',
'mdi-account-remove',
'mdi-account-search',
'mdi-account-search-outline',
'mdi-account-settings',
'mdi-account-settings-variant',
'mdi-account-star',
'mdi-account-switch',
'mdi-accusoft',
'mdi-adjust',
'mdi-adobe',
'mdi-air-conditioner',
'mdi-airballoon',
'mdi-airplane',
'mdi-airplane-landing',
'mdi-airplane-off',
'mdi-airplane-takeoff',
'mdi-airplay',
'mdi-airport',
'mdi-alarm',
'mdi-alarm-bell',
'mdi-alarm-check',
'mdi-alarm-light',
'mdi-alarm-multiple',
'mdi-alarm-off',
'mdi-alarm-plus',
'mdi-alarm-snooze',
'mdi-album',
'mdi-alert',
'mdi-alert-box',
'mdi-alert-circle',
'mdi-alert-circle-outline',
'mdi-alert-decagram',
'mdi-alert-octagon',
'mdi-alert-octagram',
'mdi-alert-outline',
'mdi-alien',
'mdi-all-inclusive',
'mdi-alpha',
'mdi-alphabetical',
'mdi-altimeter',
'mdi-amazon',
'mdi-amazon-alexa',
'mdi-amazon-drive',
'mdi-ambulance',
'mdi-amplifier',
'mdi-anchor',
'mdi-android',
'mdi-android-debug-bridge',
'mdi-android-head',
'mdi-android-studio',
'mdi-angle-acute',
'mdi-angle-obtuse',
'mdi-angle-right',
'mdi-angular',
'mdi-angularjs',
'mdi-animation',
'mdi-animation-play',
'mdi-anvil',
'mdi-apple',
'mdi-apple-finder',
'mdi-apple-icloud',
'mdi-apple-ios',
'mdi-apple-keyboard-caps',
'mdi-apple-keyboard-command',
'mdi-apple-keyboard-control',
'mdi-apple-keyboard-option',
'mdi-apple-keyboard-shift',
'mdi-apple-safari',
'mdi-application',
'mdi-approval',
'mdi-apps',
'mdi-arch',
'mdi-archive',
'mdi-arrange-bring-forward',
'mdi-arrange-bring-to-front',
'mdi-arrange-send-backward',
'mdi-arrange-send-to-back',
'mdi-arrow-all',
'mdi-arrow-bottom-left',
'mdi-arrow-bottom-left-bold-outline',
'mdi-arrow-bottom-left-thick',
'mdi-arrow-bottom-right',
'mdi-arrow-bottom-right-bold-outline',
'mdi-arrow-bottom-right-thick',
'mdi-arrow-collapse',
'mdi-arrow-collapse-all',
'mdi-arrow-collapse-down',
'mdi-arrow-collapse-horizontal',
'mdi-arrow-collapse-left',
'mdi-arrow-collapse-right',
'mdi-arrow-collapse-up',
'mdi-arrow-collapse-vertical',
'mdi-arrow-decision',
'mdi-arrow-decision-auto',
'mdi-arrow-decision-auto-outline',
'mdi-arrow-decision-outline',
'mdi-arrow-down',
'mdi-arrow-down-bold',
'mdi-arrow-down-bold-box',
'mdi-arrow-down-bold-box-outline',
'mdi-arrow-down-bold-circle',
'mdi-arrow-down-bold-circle-outline',
'mdi-arrow-down-bold-hexagon-outline',
'mdi-arrow-down-bold-outline',
'mdi-arrow-down-box',
'mdi-arrow-down-drop-circle',
'mdi-arrow-down-drop-circle-outline',
'mdi-arrow-down-thick',
'mdi-arrow-expand',
'mdi-arrow-expand-all',
'mdi-arrow-expand-down',
'mdi-arrow-expand-horizontal',
'mdi-arrow-expand-left',
'mdi-arrow-expand-right',
'mdi-arrow-expand-up',
'mdi-arrow-expand-vertical',
'mdi-arrow-left',
'mdi-arrow-left-bold',
'mdi-arrow-left-bold-box',
'mdi-arrow-left-bold-box-outline',
'mdi-arrow-left-bold-circle',
'mdi-arrow-left-bold-circle-outline',
'mdi-arrow-left-bold-hexagon-outline',
'mdi-arrow-left-bold-outline',
'mdi-arrow-left-box',
'mdi-arrow-left-drop-circle',
'mdi-arrow-left-drop-circle-outline',
'mdi-arrow-left-right-bold-outline',
'mdi-arrow-left-thick',
'mdi-arrow-right',
'mdi-arrow-right-bold',
'mdi-arrow-right-bold-box',
'mdi-arrow-right-bold-box-outline',
'mdi-arrow-right-bold-circle',
'mdi-arrow-right-bold-circle-outline',
'mdi-arrow-right-bold-hexagon-outline',
'mdi-arrow-right-bold-outline',
'mdi-arrow-right-box',
'mdi-arrow-right-drop-circle',
'mdi-arrow-right-drop-circle-outline',
'mdi-arrow-right-thick',
'mdi-arrow-split-horizontal',
'mdi-arrow-split-vertical',
'mdi-arrow-top-left',
'mdi-arrow-top-left-bold-outline',
'mdi-arrow-top-left-thick',
'mdi-arrow-top-right',
'mdi-arrow-top-right-bold-outline',
'mdi-arrow-top-right-thick',
'mdi-arrow-up',
'mdi-arrow-up-bold',
'mdi-arrow-up-bold-box',
'mdi-arrow-up-bold-box-outline',
'mdi-arrow-up-bold-circle',
'mdi-arrow-up-bold-circle-outline',
'mdi-arrow-up-bold-hexagon-outline',
'mdi-arrow-up-bold-outline',
'mdi-arrow-up-box',
'mdi-arrow-up-down-bold-outline',
'mdi-arrow-up-drop-circle',
'mdi-arrow-up-drop-circle-outline',
'mdi-arrow-up-thick',
'mdi-artist',
'mdi-assistant',
'mdi-asterisk',
'mdi-at',
'mdi-atlassian',
'mdi-atom',
'mdi-attachment',
'mdi-audio-video',
'mdi-audiobook',
'mdi-augmented-reality',
'mdi-auto-fix',
'mdi-auto-upload',
'mdi-autorenew',
'mdi-av-timer',
'mdi-axe',
'mdi-azure',
'mdi-baby',
'mdi-baby-buggy',
'mdi-backburger',
'mdi-backspace',
'mdi-backup-restore',
'mdi-badminton',
],
}),
}
</script>

406
src/views/dashboard/component/Notifications.vue Normal file
View File

@ -0,0 +1,406 @@
<template>
<v-container
id="alerts"
fluid
tag="section"
>
<base-v-component
heading="Alerts"
link="components/alerts"
/>
<v-row>
<v-col
cols="12"
md="6"
>
<v-card>
<v-card-text>
<base-subheading subheading="Notification Style" />
<base-material-alert
color="info"
dark
>
This is a plain notification.
</base-material-alert>
<base-material-alert
color="info"
dark
dismissible
>
This is a notification with close button.
</base-material-alert>
<base-material-alert
color="info"
dark
dismissible
icon="mdi-bell"
>
This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
</base-material-alert>
<base-material-alert
color="primary"
dark
dismissible
icon="mdi-bell"
>
You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
</base-material-alert>
</v-card-text>
</v-card>
</v-col>
<v-col
cols="12"
md="6"
>
<v-card>
<v-card-text>
<base-subheading subheading="Notification states" />
<base-material-alert
v-for="color in colors"
:key="color"
:color="color"
dark
dismissible
>
<span
class="text-uppercase"
v-text="color"
/> — This is a regular alert made with the color of "{{ color }}"
</base-material-alert>
<base-material-alert
color="secondary"
dark
dismissible
>
<span>PRIMARY</span> — This is a regular alert made with the color "secondary"
</base-material-alert>
<base-material-alert
color="pink darken-1"
dark
dismissible
>
<span>PINK DARKEN-1</span> — This is a regular alert made with the color "pink darken-1"
</base-material-alert>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12">
<v-card>
<v-card-text class="text-center">
<base-subheading
class="text-center"
subheading="Snackbar Locations"
/>
<v-row
class="mt-n12"
justify="center"
>
<v-col
cols="10"
lg="8"
>
<v-row>
<v-col
v-for="dir in directions"
:key="dir"
cols="4"
>
<v-btn
color="secondary"
default
class="v-btn--block"
@click="randomColor(), direction = dir, snackbar = true"
>
{{ dir }}
</v-btn>
</v-col>
</v-row>
</v-col>
</v-row>
<base-subheading
class="text-center"
subheading="Dialogs"
/>
<v-row
class="mt-n12"
justify="center"
>
<v-col
cols="10"
lg="8"
>
<v-row>
<v-col cols="4">
<v-btn
color="secondary"
default
rounded
@click="dialog = true"
>
Classic Dialog
</v-btn>
</v-col>
<v-col cols="4">
<v-btn
color="info"
default
rounded
@click="dialog2 = true"
>
Notice Modal
</v-btn>
</v-col>
<v-col cols="4">
<v-btn
color="pink darken-1"
dark
default
rounded
@click="dialog3 = true"
>
Small Alert Modal
</v-btn>
</v-col>
</v-row>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
<base-material-snackbar
v-model="snackbar"
:type="color"
v-bind="{
[parsedDirection[0]]: true,
[parsedDirection[1]]: true
}"
>
Welcome to <span class="font-weight-bold">&nbsp;MATERIAL DASHBOARD&nbsp;</span> — a beautiful admin panel for every web developer.
</base-material-snackbar>
<v-dialog
v-model="dialog"
max-width="500"
>
<v-card class="text-center">
<v-card-title>
Dialog Title
<v-spacer />
<v-icon
aria-label="Close"
@click="dialog = false"
>
mdi-close
</v-icon>
</v-card-title>
<v-card-text>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="error"
text
@click="dialog = false"
>
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog
v-model="dialog2"
max-width="500"
>
<v-card>
<v-card-title>
How do you become an affiliate?
<v-spacer />
<v-icon
aria-label="Close"
@click="dialog2 = false"
>
mdi-close
</v-icon>
</v-card-title>
<v-card-text class="body-1 text-center">
<v-row>
<v-col
cols="12"
md="8"
>
<div>
<div>
<strong>1. Register</strong>
</div>
<div class="grey--text">
The first step is to create an account at Creative Tim. You can choose a social network or go for the classic version, whatever works best for you.
</div>
</div>
</v-col>
<v-col
class="hidden-sm-and-down"
md="4"
>
<v-sheet>
<v-img
src="https://demos.creative-tim.com/material-dashboard/assets/img/card-1.jpg"
height="100"
width="200"
/>
</v-sheet>
</v-col>
<v-col
cols="12"
md="8"
>
<div>
<div>
<strong>2. Apply</strong>
</div>
<div class="grey--text">
The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.
</div>
</div>
</v-col>
<v-col
class="hidden-sm-and-down"
md="4"
>
<v-sheet>
<v-img
src="https://demos.creative-tim.com/material-dashboard/assets/img/card-2.jpg"
height="100"
width="200"
/>
</v-sheet>
</v-col>
<v-col cols="12">
If you have more questions, don't hesitate to contact us or send us a tweet @creativetim. We're here to help!
</v-col>
</v-row>
<v-btn
class="mt-6"
color="info"
depressed
default
rounded
@click="dialog2 = false"
>
Sounds good
</v-btn>
</v-card-text>
</v-card>
</v-dialog>
<v-dialog
v-model="dialog3"
max-width="300"
>
<v-card>
<v-card-title>
Are you sure?
<v-spacer />
<v-icon
aria-label="Close"
@click="dialog3 = false"
>
mdi-close
</v-icon>
</v-card-title>
<v-card-text class="pb-6 pt-12 text-center">
<v-btn
class="mr-3"
text
@click="dialog3 = false"
>
Nevermind
</v-btn>
<v-btn
color="success"
text
@click="dialog3 = false"
>
Yes
</v-btn>
</v-card-text>
</v-card>
</v-dialog>
</v-container>
</template>
<script>
export default {
name: 'DashboardNotifications',
data: () => ({
color: 'info',
colors: [
'info',
'success',
'warning',
'error',
],
dialog: false,
dialog2: false,
dialog3: false,
direction: 'top center',
directions: [
'top left',
'top center',
'top right',
'bottom left',
'bottom center',
'bottom right',
],
snackbar: false,
}),
computed: {
parsedDirection () {
return this.direction.split(' ')
},
},
methods: {
randomColor () {
this.color = this.colors[Math.floor(Math.random() * this.colors.length)]
},
},
}
</script>

418
src/views/dashboard/component/Tabs.vue Normal file
View File

@ -0,0 +1,418 @@
<template>
<v-container
id="panels"
fluid
tag="section"
>
<base-v-component
heading="Tabs"
link="components/tabs"
/>
<v-row>
<v-col
cols="12"
md="6"
>
<v-card class="my-0">
<v-card-text>
<base-subheading
subheading="Navigation Pills"
text="Horizontal Tabs"
/>
<base-material-tabs color="warning">
<v-tab
v-for="(tab, i) in tabs"
:key="i"
>
{{ tab }}
</v-tab>
<v-tab-item>
<v-card
flat
class="my-0"
>
<v-card-text>
<p>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</p>
<p>
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</p>
<div>This is very nice.</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card
flat
class="my-0"
>
<v-card-text>
<p>
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
</p>
<div>
Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card
flat
class="my-0"
>
<v-card-text>
<p>
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
</p>
<div>
Dynamically innovate resource-leveling customer service for state of the art customer service.
</div>
</v-card-text>
</v-card>
</v-tab-item>
</base-material-tabs>
</v-card-text>
</v-card>
</v-col>
<v-col
cols="12"
md="6"
>
<v-card class="mt-0">
<v-card-text>
<base-subheading
subheading="Navigation Pills"
text="Vertical Tabs"
/>
<base-material-tabs
color="success"
vertical
>
<v-tab
v-for="(tab, i) in tabs"
:key="i"
class="mb-1"
>
{{ tab }}
</v-tab>
<v-tab-item>
<v-card
flat
class="my-0"
>
<v-card-text class="pt-0">
<p>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</p>
<p>
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</p>
<div>This is very nice.</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card
flat
class="my-0"
>
<v-card-text class="pt-0">
<p>
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
</p>
<div>
Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card
flat
class="my-0"
>
<v-card-text class="pt-0">
<p>
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
</p>
<div>
Dynamically innovate resource-leveling customer service for state of the art customer service.
</div>
</v-card-text>
</v-card>
</v-tab-item>
</base-material-tabs>
</v-card-text>
</v-card>
</v-col>
<v-col
cols="12"
md="6"
>
<v-card>
<v-card-text>
<base-subheading subheading="Collapsible Accordion" />
<v-expansion-panels>
<v-expansion-panel
v-for="n in 5"
:key="n"
>
<v-expansion-panel-header>
Collapsible Group Item #{{ n }}
</v-expansion-panel-header>
<v-expansion-panel-content>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-card-text>
</v-card>
</v-col>
<v-col
class="mb-12"
cols="12"
md="6"
>
<v-card>
<v-card-text>
<base-subheading
subheading="Navigation Pills"
text="Vertical Tabs"
/>
<base-material-tabs
color="success"
icons-and-text
vertical
>
<v-tab
v-for="(tab, i) in tabs2"
:key="i"
class="mb-5"
>
{{ tab.text }}
<v-icon v-text="tab.icon" />
</v-tab>
<v-tab-item>
<v-card
flat
class="my-0"
>
<v-card-text class="pt-0">
<p>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</p>
<p>
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</p>
<div>
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card
flat
class="my-0"
>
<v-card-text class="pt-0">
<p>
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
</p>
<div>
Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
</v-card-text>
</v-card>
</v-tab-item>
</base-material-tabs>
</v-card-text>
</v-card>
</v-col>
<v-col
class="mx-auto"
cols="12"
md="8"
>
<div class="text-center headline font-weight-light mb-12 pl-0">
Page Subcategories
</div>
<base-material-tabs
v-model="tab"
background-color="transparent"
centered
color="warning"
icons-and-text
>
<v-tab
v-for="(tab, i) in tabs3"
:key="i"
>
{{ tab.text }}
<v-icon v-text="tab.icon" />
</v-tab>
<v-tabs-items
v-model="tab"
class="pt-12 transparent"
>
<v-tab-item>
<v-card class="mt-0 px-5">
<v-card-text>
<base-subheading subheading="Description about product">
<p class="grey--text body-2 font-weight-light">
More Information here
</p>
</base-subheading>
<p>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</p>
<div>
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card class="mt-0 px-5">
<v-card-text>
<base-subheading subheading="Location of the product product">
<p class="grey--text body-2 font-weight-light">
More Information here
</p>
</base-subheading>
<p>
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
</p>
<div>
Dramatically maintain clicks-and-mortar solutions without functional solutions
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card class="mt-0 px-5">
<v-card-text>
<base-subheading subheading="Legal info of the product product">
<p class="grey--text body-2 font-weight-light">
More Information here
</p>
</base-subheading>
<p>
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
</p>
<div>
Dynamically innovate resource-leveling customer service for state of the art customer service.
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card class="mt-0 px-5">
<v-card-text>
<base-subheading heading="Help center">
<p class="grey--text body-2 font-weight-light">
More Information here
</p>
</base-subheading>
<p>
From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.
</p>
<div>
Another Text. The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.
</div>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</base-material-tabs>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'DashboardPanels',
data: () => ({
tab: 0,
tabs: [
'Profile',
'Settings',
'Options',
],
tabs2: [
{
text: 'Home',
icon: 'mdi-view-dashboard',
},
{
text: 'Settings',
icon: 'mdi-clock-outline',
},
],
tabs3: [
{
text: 'Description',
icon: 'mdi-information',
},
{
text: 'Location',
icon: 'mdi-map-marker',
},
{
text: 'Legal Info',
icon: 'mdi-gavel',
},
{
text: 'Help Center',
icon: 'mdi-help-circle-outline',
},
],
}),
}
</script>

120
src/views/dashboard/component/Typography.vue Normal file
View File

@ -0,0 +1,120 @@
<template>
<v-container
id="typography"
fluid
tag="section"
>
<base-v-component
heading="Typography"
link="styles/typography"
/>
<v-row
align="center"
justify="center"
>
<v-col cols="12">
<base-material-card
color="green"
>
<template v-slot:heading>
<div class="display-2 font-weight-light">
Material Dashboard Heading
</div>
<div class="subtitle-1 font-weight-light">
Created using Roboto Font Family
</div>
</template>
<v-card-text>
<v-container
class="pa-0"
fluid
>
<v-row
v-for="(t, i) in typography"
:key="i"
align="center"
>
<v-col
cols="1"
md="3"
>
<span
class="tim-note"
v-text="t[0]"
/>
</v-col>
<v-col cols="8">
<component
:is="t[2]"
:class="i"
>
<template v-if="i !== 'quote'">
{{ t[1] }}
</template>
<p v-if="i === 'quote'">
{{ t[1] }}
</p>
<small v-if="i === 'quote'">Kanye West, Musician</small>
<template v-if="i === 'small'">
<br>
<small>Use 'small' tag for the headers</small>
</template>
</component>
</v-col>
</v-row>
</v-container>
</v-card-text>
</base-material-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
const leader = 'I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.'
const leaderShort = leader.slice(0, 105) + '...'
const material = 'The Life of Material Dashboard'
const small = 'Header with small subtitle'
export default {
data: () => ({
typography: {
'display-4': ['Display 4', material, 'h1'],
'display-3': ['Display 3', material, 'h2'],
'display-2': ['Display 2', material, 'h3'],
'display-1': ['Display 1', material, 'h4'],
headline: ['Headline', material, 'h5'],
'title text-uppercase': ['Title', material, 'h6'],
'': ['Paragraph', leader, 'p'],
blockquote: ['Quote', leader, 'blockquote'],
'text--disabled': ['Muted Text', leaderShort, 'p'],
'primary--text': ['Primary Text', leaderShort, 'p'],
'info--text': ['Info Text', leaderShort, 'p'],
'success--text': ['Success Text', leaderShort, 'p'],
'warning--text': ['Warning Text', leaderShort, 'p'],
'danger--text': ['Danger Text', leaderShort, 'p'],
small: ['Small Tag', small, 'h2'],
},
}),
}
</script>
<style lang="scss">
.tim-note {
bottom: 10px;
color: #c0c1c2;
display: block;
font-weight: 400;
font-size: 13px;
line-height: 13px;
left: 0;
margin-left: 20px;
width: 260px;
}
</style>

183
src/views/dashboard/components/core/AppBar.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<v-app-bar
id="app-bar"
absolute
app
color="transparent"
flat
height="75"
>
<v-btn
class="mr-3"
elevation="1"
fab
small
@click="setDrawer(!drawer)"
>
<v-icon v-if="value">
mdi-view-quilt
</v-icon>
<v-icon v-else>
mdi-dots-vertical
</v-icon>
</v-btn>
<v-toolbar-title
class="hidden-sm-and-down font-weight-light"
v-text="$route.name"
/>
<v-spacer />
<v-text-field
:label="$t('search')"
color="secondary"
hide-details
style="max-width: 165px;"
>
<template
v-if="$vuetify.breakpoint.mdAndUp"
v-slot:append-outer
>
<v-btn
class="mt-n2"
elevation="1"
fab
small
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</template>
</v-text-field>
<div class="mx-3" />
<v-btn
class="ml-2"
min-width="0"
text
to="/"
>
<v-icon>mdi-view-dashboard</v-icon>
</v-btn>
<v-menu
bottom
left
offset-y
origin="top right"
transition="scale-transition"
>
<template v-slot:activator="{ attrs, on }">
<v-btn
class="ml-2"
min-width="0"
text
v-bind="attrs"
v-on="on"
>
<v-badge
color="red"
overlap
bordered
>
<template v-slot:badge>
<span>5</span>
</template>
<v-icon>mdi-bell</v-icon>
</v-badge>
</v-btn>
</template>
<v-list
:tile="false"
nav
>
<div>
<app-bar-item
v-for="(n, i) in notifications"
:key="`item-${i}`"
>
<v-list-item-title v-text="n" />
</app-bar-item>
</div>
</v-list>
</v-menu>
<v-btn
class="ml-2"
min-width="0"
text
to="/pages/user"
>
<v-icon>mdi-account</v-icon>
</v-btn>
</v-app-bar>
</template>
<script>
// Components
import { VHover, VListItem } from 'vuetify/lib'
// Utilities
import { mapState, mapMutations } from 'vuex'
export default {
name: 'DashboardCoreAppBar',
components: {
AppBarItem: {
render (h) {
return h(VHover, {
scopedSlots: {
default: ({ hover }) => {
return h(VListItem, {
attrs: this.$attrs,
class: {
'black--text': !hover,
'white--text secondary elevation-12': hover,
},
props: {
activeClass: '',
dark: hover,
link: true,
...this.$attrs,
},
}, this.$slots.default)
},
},
})
},
},
},
props: {
value: {
type: Boolean,
default: false,
},
},
data: () => ({
notifications: [
'Mike John Responded to your email',
'You have 5 new tasks',
'You\'re now friends with Andrew',
'Another Notification',
'Another one',
],
}),
computed: {
...mapState(['drawer']),
},
methods: {
...mapMutations({
setDrawer: 'SET_DRAWER',
}),
},
}
</script>

235
src/views/dashboard/components/core/Drawer.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<v-navigation-drawer
id="core-navigation-drawer"
v-model="drawer"
:dark="barColor !== 'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)'"
:expand-on-hover="expandOnHover"
:right="$vuetify.rtl"
:src="barImage"
mobile-break-point="960"
app
width="260"
v-bind="$attrs"
>
<template v-slot:img="props">
<v-img
:gradient="`to bottom, ${barColor}`"
v-bind="props"
/>
</template>
<v-divider class="mb-1" />
<v-list
dense
nav
>
<v-list-item>
<v-list-item-avatar
class="align-self-center"
color="white"
contain
>
<v-img
src="https://demos.creative-tim.com/vuetify-material-dashboard/favicon.ico"
max-height="30"
/>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title
class="display-1"
v-text="profile.title"
/>
</v-list-item-content>
</v-list-item>
</v-list>
<v-divider class="mb-2" />
<v-list
expand
nav
>
<!-- Style cascading bug -->
<!-- https://github.com/vuetifyjs/vuetify/pull/8574 -->
<div />
<template v-for="(item, i) in computedItems">
<base-item-group
v-if="item.children"
:key="`group-${i}`"
:item="item"
>
<!-- -->
</base-item-group>
<base-item
v-else
:key="`item-${i}`"
:item="item"
/>
</template>
<!-- Style cascading bug -->
<!-- https://github.com/vuetifyjs/vuetify/pull/8574 -->
<div />
</v-list>
<template v-slot:append>
<base-item
:item="{
title: $t('upgrade'),
icon: 'mdi-package-up',
to: '/upgrade',
}"
/>
</template>
</v-navigation-drawer>
</template>
<script>
// Utilities
import {
mapState,
} from 'vuex'
export default {
name: 'DashboardCoreDrawer',
props: {
expandOnHover: {
type: Boolean,
default: false,
},
},
data: () => ({
items: [
{
icon: 'mdi-view-dashboard',
title: 'dashboard',
to: '/',
},
{
icon: 'mdi-account',
title: 'user',
to: '/pages/user',
},
{
title: 'rtables',
icon: 'mdi-clipboard-outline',
to: '/tables/regular-tables',
},
{
title: 'typography',
icon: 'mdi-format-font',
to: '/components/typography',
},
{
title: 'icons',
icon: 'mdi-chart-bubble',
to: '/components/icons',
},
{
title: 'google',
icon: 'mdi-map-marker',
to: '/maps/google-maps',
},
{
title: 'notifications',
icon: 'mdi-bell',
to: '/components/notifications',
},
],
}),
computed: {
...mapState(['barColor', 'barImage']),
drawer: {
get () {
return this.$store.state.drawer
},
set (val) {
this.$store.commit('SET_DRAWER', val)
},
},
computedItems () {
return this.items.map(this.mapItem)
},
profile () {
return {
avatar: true,
title: this.$t('avatar'),
}
},
},
methods: {
mapItem (item) {
return {
...item,
children: item.children ? item.children.map(this.mapItem) : undefined,
title: this.$t(item.title),
}
},
},
}
</script>
<style lang="sass">
@import '~vuetify/src/styles/tools/_rtl.sass'
#core-navigation-drawer
.v-list-group__header.v-list-item--active:before
opacity: .24
.v-list-item
&__icon--text,
&__icon:first-child
justify-content: center
text-align: center
width: 20px
+ltr()
margin-right: 24px
margin-left: 12px !important
+rtl()
margin-left: 24px
margin-right: 12px !important
.v-list--dense
.v-list-item
&__icon--text,
&__icon:first-child
margin-top: 10px
.v-list-group--sub-group
.v-list-item
+ltr()
padding-left: 8px
+rtl()
padding-right: 8px
.v-list-group__header
+ltr()
padding-right: 0
+rtl()
padding-right: 0
.v-list-item__icon--text
margin-top: 19px
order: 0
.v-list-group__header__prepend-icon
order: 2
+ltr()
margin-right: 8px
+rtl()
margin-left: 8px
</style>

78
src/views/dashboard/components/core/Footer.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<v-footer
id="dashboard-core-footer"
>
<v-container>
<v-row
align="center"
no-gutters
>
<v-col
v-for="(link, i) in links"
:key="i"
class="text-center mb-sm-0 mb-5"
cols="auto"
>
<a
:href="link.href"
class="mr-0 grey--text text--darken-3"
rel="noopener"
target="_blank"
v-text="link.text"
/>
</v-col>
<v-spacer class="hidden-sm-and-down" />
<v-col
cols="12"
md="auto"
>
<div class="body-1 font-weight-light pt-6 pt-md-0 text-center">
&copy; 2019, made with
<v-icon size="18">
mdi-heart
</v-icon>
by <a href="https://www.creative-tim.com">Creative Tim</a> for a better web.
</div>
</v-col>
</v-row>
</v-container>
</v-footer>
</template>
<script>
export default {
name: 'DashboardCoreFooter',
data: () => ({
links: [
{
href: '#',
text: 'Creative Tim',
},
{
href: '#',
text: 'About Us',
},
{
href: '#',
text: 'Blog',
},
{
href: '#',
text: 'Licenses',
},
],
}),
}
</script>
<style lang="sass">
#dashboard-core-footer
a
font-size: .825rem
font-weight: 500
text-decoration: none
text-transform: uppercase
</style>

263
src/views/dashboard/components/core/Settings.vue Normal file
View File

@ -0,0 +1,263 @@
<template>
<div id="settings-wrapper">
<v-card
id="settings"
class="py-2 px-4"
color="rgba(0, 0, 0, .3)"
dark
flat
link
min-width="100"
style="position: fixed; top: 115px; right: -35px; border-radius: 8px;"
>
<v-icon large>
mdi-settings
</v-icon>
</v-card>
<v-menu
v-model="menu"
:close-on-content-click="false"
activator="#settings"
bottom
content-class="v-settings"
left
nudge-left="8"
offset-x
origin="top right"
transition="scale-transition"
>
<v-card
class="text-center mb-0"
width="300"
>
<v-card-text>
<strong class="mb-3 d-inline-block">SIDEBAR FILTERS</strong>
<v-item-group v-model="color">
<v-item
v-for="color in colors"
:key="color"
:value="color"
>
<template v-slot="{ active, toggle }">
<v-avatar
:class="active && 'v-settings__item--active'"
:color="color"
class="v-settings__item"
size="25"
@click="toggle"
/>
</template>
</v-item>
</v-item-group>
<v-divider class="my-4 secondary" />
<v-row
align="center"
no-gutters
>
<v-col cols="auto">
Dark Mode
</v-col>
<v-spacer />
<v-col cols="auto">
<v-switch
v-model="$vuetify.theme.dark"
class="ma-0 pa-0"
color="secondary"
hide-details
/>
</v-col>
</v-row>
<v-divider class="my-4 secondary" />
<v-row
align="center"
no-gutters
>
<v-col cols="auto">
Sidebar Image
</v-col>
<v-spacer />
<v-col cols="auto">
<v-switch
v-model="showImg"
class="ma-0 pa-0"
color="secondary"
hide-details
/>
</v-col>
</v-row>
<v-divider class="my-4 secondary" />
<strong class="mb-3 d-inline-block">IMAGES</strong>
<v-item-group
v-model="image"
class="d-flex justify-space-between mb-3"
>
<v-item
v-for="image in images"
:key="image"
:value="image"
class="mx-1"
>
<template v-slot="{ active, toggle }">
<v-sheet
:class="active && 'v-settings__item--active'"
class="d-inline-block v-settings__item"
@click="toggle"
>
<v-img
:src="image"
height="100"
width="50"
/>
</v-sheet>
</template>
</v-item>
</v-item-group>
<v-btn
block
class="mb-3"
color="success"
href="https://www.creative-tim.com/product/vuetify-material-dashboard"
default
rel="noopener"
target="_blank"
>
Free Download
</v-btn>
<v-btn
block
class="mb-3"
color="grey darken-1"
dark
href="https://vuetifyjs.com/components/api-explorer"
default
rel="noopener"
target="_blank"
>
Documentation
</v-btn>
<div class="my-12" />
<div>
<strong class="mb-3 d-inline-block">THANK YOU FOR SHARING!</strong>
</div>
<v-btn
class="ma-1"
color="#55acee"
dark
default
rounded
>
<v-icon>mdi-twitter</v-icon>
- 45
</v-btn>
<v-btn
class="ma-1"
color="#3b5998"
dark
default
rounded
>
<v-icon>mdi-facebook</v-icon>
- 50
</v-btn>
</v-card-text>
</v-card>
</v-menu>
</div>
</template>
<script>
// Mixins
import Proxyable from 'vuetify/lib/mixins/proxyable'
import { mapMutations, mapState } from 'vuex'
export default {
name: 'DashboardCoreSettings',
mixins: [Proxyable],
data: () => ({
color: '#E91E63',
colors: [
'#9C27b0',
'#00CAE3',
'#4CAF50',
'#ff9800',
'#E91E63',
'#FF5252',
],
image: 'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg',
images: [
'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg',
'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-2.jpg',
'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-3.jpg',
'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-4.jpg',
],
menu: false,
saveImage: '',
showImg: true,
}),
computed: {
...mapState(['barImage']),
},
watch: {
color (val) {
this.$vuetify.theme.themes[this.isDark ? 'dark' : 'light'].primary = val
},
showImg (val) {
if (!val) {
this.saveImage = this.barImage
this.setBarImage('')
} else if (this.saveImage) {
this.setBarImage(this.saveImage)
this.saveImage = ''
} else {
this.setBarImage(val)
}
},
image (val) {
this.setBarImage(val)
},
},
methods: {
...mapMutations({
setBarImage: 'SET_BAR_IMAGE',
}),
},
}
</script>
<style lang="sass">
.v-settings
.v-item-group > *
cursor: pointer
&__item
border-width: 3px
border-style: solid
border-color: transparent !important
&--active
border-color: #00cae3 !important
</style>

17
src/views/dashboard/components/core/View.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<v-content>
<router-view />
<dashboard-core-footer />
</v-content>
</template>
<script>
export default {
name: 'DashboardCoreView',
components: {
DashboardCoreFooter: () => import('./Footer'),
},
}
</script>

78
src/views/dashboard/maps/GoogleMaps.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<v-container
id="google-maps"
fluid
tag="section"
>
<v-row>
<v-col cols="12">
<base-material-card
color="success"
title="Satellite Map"
class="px-5 py-3"
>
<v-card-text class="px-0 pb-0">
<v-sheet>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26356315.701909266!2d-113.65984645545673!3d36.25591957613731!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1566158729223!5m2!1sen!2sus"
width="100%"
height="450"
frameborder="0"
style="border:0"
allowfullscreen
/>
</v-sheet>
</v-card-text>
</base-material-card>
</v-col>
<v-col
cols="12"
md="6"
>
<base-material-card
color="success"
title="Satellite Map"
class="px-5 py-3"
>
<v-card-text class="px-0 pb-0">
<v-sheet>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15831228695!2d-74.11976206978034!3d40.697663747508045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1566158235149!5m2!1sen!2sus"
width="100%"
height="450"
frameborder="0"
style="border:0"
allowfullscreen
/>
</v-sheet>
</v-card-text>
</base-material-card>
</v-col>
<v-col
cols="12"
md="6"
>
<base-material-card
color="success"
title="Custom Skin & Settings Map"
class="px-5 py-3"
>
<v-card-text class="px-0 pb-0">
<v-sheet>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15831228695!2d-74.11976206978034!3d40.697663747508045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1566158235149!5m2!1sen!2sus"
width="100%"
height="450"
frameborder="0"
style="border:0"
allowfullscreen
/>
</v-sheet>
</v-card-text>
</base-material-card>
</v-col>
</v-row>
</v-container>
</template>

409
src/views/dashboard/pages/Rtl.vue Normal file
View File

@ -0,0 +1,409 @@
<template>
<v-container
id="rtl"
fluid
tag="section"
>
<v-row class="mb-10">
<v-col
cols="12"
md="6"
>
<base-material-card
color="warning"
text="بالإنزال وفي. خيار ومضى العمليات تم ذلك, تم معقل مرمى"
title="لتكاليف يبق"
>
<v-card-text>
<v-data-table
:headers="headers"
:items="items"
/>
</v-card-text>
</base-material-card>
</v-col>
<v-col
cols="12"
md="6"
>
<base-material-card>
<template v-slot:heading>
<v-tabs
v-model="tabs"
background-color="transparent"
slider-color="white"
>
<span
class="subheading font-weight-light mx-3"
style="align-self: center"
>
منتصف:
</span>
<v-tab class="mr-3">
<v-icon class="me-2">
mdi-bug
</v-icon>
ضرب
</v-tab>
<v-tab class="mr-3">
<v-icon class="me-2">
mdi-code-tags
</v-icon>
السفن
</v-tab>
<v-tab>
<v-icon class="me-2">
mdi-cloud
</v-icon>
فصل.
</v-tab>
</v-tabs>
</template>
<v-tabs-items
v-model="tabs"
class="transparent"
>
<v-tab-item
v-for="n in 3"
:key="n"
>
<v-card-text>
<template v-for="(task, i) in tasks[tabs]">
<v-row
:key="i"
align="center"
>
<v-col cols="1">
<v-list-item-action>
<v-checkbox
v-model="task.value"
color="secondary"
/>
</v-list-item-action>
</v-col>
<v-col cols="9">
<div v-text="task.text" />
</v-col>
<v-col
cols="2"
class="text-right"
>
<v-icon class="mx-1">
mdi-pencil
</v-icon>
<v-icon
color="error"
class="mx-1"
>
mdi-close
</v-icon>
</v-col>
</v-row>
</template>
</v-card-text>
</v-tab-item>
</v-tabs-items>
</base-material-card>
</v-col>
<v-col
cols="12"
md="6"
>
<v-row>
<template v-for="(plan, i) in plans">
<v-col
:key="i"
cols="12"
md="6"
>
<pages-plan-card :plan="plan" />
</v-col>
</template>
<v-col cols="12">
<base-material-testimony
blurb="بعد و وسوء الأحمر, دون عقبت الهادي أم, قد حول قادة حكومة يتعلّق. أخذ حصدت اوروبا أن, كلا مهمّات اسبوعين التخطيط عل. وإيطالي الأوروبي و نفس. صفحة احداث أضف ان, هو مرجع نهاية لهيمنة كما. تم مايو لفشل المدن دول, جعل أن عسكرياً التّحول استرجاع."
author="أليك طومسون"
handle="@أليك طومسون"
/>
</v-col>
</v-row>
</v-col>
<v-col
cols="12"
md="6"
>
<v-timeline
align-top
dense
>
<v-timeline-item
v-for="(timeline, i) in timelines"
:key="i"
:color="timeline.color"
:icon="timeline.icon"
fill-dot
large
>
<v-card class="pa-6">
<v-chip
:color="timeline.color"
class="overline mb-3"
small
>
{{ timeline.chip }}
</v-chip>
<p
class="subtitle-1"
v-text="timeline.text"
/>
<div
class="text-uppercase body-2"
v-text="timeline.subtext"
/>
<template v-if="timeline.action">
<v-divider class="mb-3" />
<v-menu
v-model="menu"
bottom
offset-y
origin=" top left"
right
transition="scale-transition"
>
<template v-slot:activator="{ attrs, on }">
<v-btn
v-bind="attrs"
:color="timeline.action"
large
rounded
v-on="on"
>
<v-icon
left
v-text="timeline.actionIcon"
/>
<v-icon right>
{{ menu ? 'mdi-menu-up' : 'mdi-menu-down' }}
</v-icon>
</v-btn>
</template>
<v-sheet>
<v-list>
<v-list-item
v-for="a in timeline.actions"
:key="a"
link
>
<v-list-item-title v-text="a" />
</v-list-item>
</v-list>
</v-sheet>
</v-menu>
</template>
</v-card>
</v-timeline-item>
</v-timeline>
</v-col>
</v-row>
</v-container>
</template>
<script>
// Components
import PagesPlanCard from '@/views/pages/components/PlanCard'
export default {
name: 'Widgets',
components: {
PagesPlanCard,
},
data: () => ({
headers: [
{
sortable: false,
text: 'هوية شخصية',
value: 'id',
},
{
sortable: false,
text: 'اسم',
value: 'name',
},
{
sortable: false,
text: 'راتب',
value: 'salary',
align: 'right',
},
{
sortable: false,
text: 'بلد',
value: 'country',
align: 'right',
},
{
sortable: false,
text: 'مدينة',
value: 'city',
align: 'right',
},
],
items: [
{
id: 1,
name: 'داكوتا رايس',
country: 'النيجر',
city: 'العود-تورنهاوت',
salary: '$35,738',
},
{
id: 2,
name: 'مينيرفا هوبر',
country: 'كوراساو',
city: 'Sinaai-واس',
salary: '$23,738',
},
{
id: 3,
name: 'سيج رودريجيز',
country: 'هولندا',
city: 'أوفرلاند بارك',
salary: '$56,142',
},
{
id: 4,
name: 'فيليب شانلي',
country: 'كوريا، جنوب',
city: 'غلوستر',
salary: '$38,735',
},
{
id: 5,
name: 'دوريس جرين',
country: 'مالاوي',
city: 'فيلدكيرشن في كارنتن',
salary: '$63,542',
},
],
menu: false,
plans: [
{
best: true,
heading: 'جيوب سليمان، الإنزال',
icon: 'mdi-home',
title: '29$',
text: 'الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.',
},
{
heading: 'المتحدة لتقليعة',
icon: 'mdi-sofa',
title: 'قائمة',
text: 'الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.',
},
],
tabs: 0,
tasks: {
0: [
{
text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
value: true,
},
{
text: 'خطوط من الأدب الروسي العظيم؟ أو رسائل البريد الإلكتروني من بوسي؟',
value: false,
},
{
text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
value: false,
},
{
text: 'قم بإنشاء 4 تجارب مستخدم غير مرئية لم تعرف عنها أبدًا',
value: true,
},
],
1: [
{
text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
value: true,
},
{
text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
value: false,
},
],
2: [
{
text: 'خطوط من الأدب الروسي العظيم؟ أو رسائل البريد الإلكتروني من بوسي؟',
value: false,
},
{
text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
value: true,
},
{
text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
value: true,
},
],
},
timelines: [
{
chip: 'جهة أي',
color: 'error',
icon: 'mdi-briefcase',
text: 'قام كل ماذا العصبة اوروبا. أي جورج العالمي أخر, كان تم أطراف القوى استبدال. أسر ميناء تكتيكاً الجديدة، كل. جُل اللا التكاليف بـ, عرفها النزاع لليابان بـ أضف. انتهت المدن الثالث من وقد.وقبل قادة إحتار عن أخر. حين ونتج أخرى قد. بالعمل بالمطالبة فقد قد. عن جنوب ومضى الشتاء.',
subtext: 'مدن أن هُزم سكان, مكن.',
},
{
chip: 'جُل حكومة',
color: 'success',
icon: 'mdi-puzzle',
text: 'عل فكانت الثقيلة بلا. شيء بخطوط بالرّغم التبرعات عن, يطول بأيدي لم كلّ. معقل الغالي واتّجه لم وتم, أن الصفحة بالمحور حول, بال مرمى الصفحات قُدُماً و. الأخذ سبتمبر العالم من ذلك. ان يبق شدّت الأبرياء, الى الربيع، والمانيا كل.ودول الأهداف التقليدي عل أضف, كلا يقوم الأخذ الآلاف بل.',
},
{
chip: 'هذا غينيا',
color: 'info',
icon: 'mdi-fingerprint',
text: 'جهة المارق والديون التقليدية في, هو وترك المجتمع بريطانيا ذلك, لمّ ما العالم، اليابان،. ٣٠ فقامت أوروبا مشاركة بعد, ٢٠٠٤ الجو مساعدة ما حدى. في عليها وبحلول معارضة بعض. عن الأرض وبداية العمليات ولم. الجو جديداً الأوروبيّون أم به،. ثم التي نتيجة الآلاف جعل, عن المارق السادس قام. ما أخر فقامت الأجل الشرق،, فصل كل وسوء الأرواح. ثم بعد وشعار بأيدي. قبل وكسبت الغالي الولايات بل, ٣٠ أمّا أخرى لأداء أضف. هو منتصف معزّزة على. بـ أفريقيا التغييرات مما, أثره،.',
action: 'info',
actionIcon: 'mdi-wrench',
actions: [
'عمل',
'عمل آخر',
'شيء آخر هنا',
],
},
],
}),
created () {
this.$vuetify.rtl = true
this.$i18n.locale = 'ar'
},
beforeDestroy () {
this.$vuetify.rtl = false
this.$i18n.locale = 'en'
},
}
</script>

134
src/views/dashboard/pages/Timeline.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<v-container
id="timeline"
fluid
tag="section"
>
<base-v-component
heading="Timelines"
link="components/timelines"
/>
<v-row>
<v-col>
<v-timeline align-top>
<v-timeline-item
v-for="(timeline, i) in timelines"
:key="i"
:color="timeline.color"
:icon="timeline.icon"
fill-dot
large
>
<v-card class="pa-6">
<v-chip
:color="timeline.color"
class="overline mb-3"
small
>
{{ timeline.chip }}
</v-chip>
<p
class="subtitle-1 font-weight-light"
v-text="timeline.text"
/>
<div
class="text-uppercase body-2"
v-text="timeline.subtext"
/>
<template v-if="timeline.action">
<v-divider class="mb-3" />
<v-menu
v-model="menu"
bottom
offset-y
origin="top left"
right
transition="scale-transition"
>
<template v-slot:activator="{ attrs, on }">
<v-btn
v-bind="attrs"
:color="timeline.action"
large
rounded
v-on="on"
>
<v-icon
left
v-text="timeline.actionIcon"
/>
<v-icon right>
{{ menu ? 'mdi-menu-up' : 'mdi-menu-down' }}
</v-icon>
</v-btn>
</template>
<v-sheet>
<v-list>
<v-list-item
v-for="a in timeline.actions"
:key="a"
link
>
<v-list-item-title v-text="a" />
</v-list-item>
</v-list>
</v-sheet>
</v-menu>
</template>
</v-card>
</v-timeline-item>
</v-timeline>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'DashboardPagesTimeline',
data: () => ({
menu: false,
timelines: [
{
chip: 'Some title',
color: 'error',
icon: 'mdi-briefcase',
text: 'Wifey made the best Father\'s Day meal ever. So thankful so happy so blessed. Thank you for making my family We just had fun with the “future” theme !!! It was a fun night all together ... The always rude Kanye Show at 2am Sold Out Famous viewing @ Figueroa and 12th in downtown.',
subtext: '11 hours ago via twitter',
},
{
chip: 'Another one',
color: 'success',
icon: 'mdi-puzzle',
text: 'Thank God for the support of my wife and real friends. I also wanted to point out that it’s the first album to go number 1 off of streaming!!! I love you Ellen and also my number one design rule of anything I do from shoes to music to homes is that Kim has to like it....',
},
{
chip: 'Another title',
color: 'info',
icon: 'mdi-fingerprint',
text: 'Called I Miss the Old Kanye That’s all it was Kanye And I love you like Kanye loves Kanye Famous viewing @ Figueroa and 12th in downtown LA 11:10PM. What if Kanye made a song about Kanye Royère doesn\'t make a Polar bear bed but the Polar bear couch is my favorite piece of furniture we own It wasn’t any Kanyes Set on his goals Kanye',
action: 'info',
actionIcon: 'mdi-wrench',
actions: [
'Action',
'Another Action',
'Something else here',
],
},
{
chip: 'Another one',
color: 'warning',
icon: 'mdi-airplane-landing',
text: 'Tune into Big Boy\'s 92.3 I\'m about to play the first single from Cruel Winter also to Kim’s hair and makeup Lorraine jewelry and the whole style squad at Balmain and the Yeezy team. Thank you Anna for the invite thank you to the whole Vogue team',
},
],
}),
}
</script>

178
src/views/dashboard/pages/UserProfile.vue Normal file
View File

@ -0,0 +1,178 @@
<template>
<v-container
id="user-profile"
fluid
tag="section"
>
<v-row justify="center">
<v-col
cols="12"
md="8"
>
<base-material-card>
<template v-slot:heading>
<div class="display-2 font-weight-light">
Edit Profile
</div>
<div class="subtitle-1 font-weight-light">
Complete your profile
</div>
</template>
<v-form>
<v-container class="py-0">
<v-row>
<v-col
cols="12"
md="4"
>
<v-text-field
label="Company (disabled)"
disabled
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
class="purple-input"
label="User Name"
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
label="Email Address"
class="purple-input"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<v-text-field
label="First Name"
class="purple-input"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<v-text-field
label="Last Name"
class="purple-input"
/>
</v-col>
<v-col cols="12">
<v-text-field
label="Adress"
class="purple-input"
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
label="City"
class="purple-input"
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
label="Country"
class="purple-input"
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
class="purple-input"
label="Postal Code"
type="number"
/>
</v-col>
<v-col cols="12">
<v-textarea
class="purple-input"
label="About Me"
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>
</v-col>
<v-col
cols="12"
class="text-right"
>
<v-btn
color="success"
class="mr-0"
>
Update Profile
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</base-material-card>
</v-col>
<v-col
cols="12"
md="4"
>
<base-material-card
class="v-card-profile"
avatar="https://demos.creative-tim.com/vue-material-dashboard/img/marc.aba54d65.jpg"
>
<v-card-text class="text-center">
<h6 class="display-1 mb-1 grey--text">
CEO / CO-FOUNDER
</h6>
<h4 class="display-2 font-weight-light mb-3 black--text">
Alec Thompson
</h4>
<p class="font-weight-light grey--text">
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
</p>
<v-btn
color="success"
rounded
class="mr-0"
>
Follow
</v-btn>
</v-card-text>
</base-material-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
//
}
</script>

188
src/views/dashboard/tables/RegularTables.vue Normal file
View File

@ -0,0 +1,188 @@
<template>
<v-container
id="regular-tables"
fluid
tag="section"
>
<base-v-component
heading="Simple Tables"
link="components/simple-tables"
/>
<base-material-card
icon="mdi-clipboard-text"
title="Simple Table"
class="px-5 py-3"
>
<v-simple-table>
<thead>
<tr>
<th class="primary--text">
ID
</th>
<th class="primary--text">
Name
</th>
<th class="primary--text">
Country
</th>
<th class="primary--text">
City
</th>
<th class="text-right primary--text">
Salary
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dakota Rice</td>
<td>Niger</td>
<td>Oud-Turnhout</td>
<td class="text-right">
$36,738
</td>
</tr>
<tr>
<td>2</td>
<td>Minverva Hooper</td>
<td>Curaçao</td>
<td>Sinaas-Waas</td>
<td class="text-right">
$23,789
</td>
</tr>
<tr>
<td>3</td>
<td>Sage Rodriguez</td>
<td>Netherlands</td>
<td>Baileux</td>
<td class="text-right">
$56,142
</td>
</tr>
<tr>
<td>4</td>
<td>Philip Chaney</td>
<td>Korea, South</td>
<td>Overland Park</td>
<td class="text-right">
$38,735
</td>
</tr>
<tr>
<td>5</td>
<td>Doris Greene</td>
<td>Malawi</td>
<td>Feldkirchen in Kärnten</td>
<td class="text-right">
$63,542
</td>
</tr>
<tr>
<td>6</td>
<td>Mason Porter</td>
<td>Chile</td>
<td>Gloucester</td>
<td class="text-right">
$78,615
</td>
</tr>
</tbody>
</v-simple-table>
</base-material-card>
<div class="py-3" />
<base-material-card
color="success"
dark
icon="mdi-clipboard-plus"
title="Table on Dark Background"
class="px-5 py-3"
>
<v-simple-table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
<th class="text-right">
Salary
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dakota Rice</td>
<td>Niger</td>
<td>Oud-Turnhout</td>
<td class="text-right">
$36,738
</td>
</tr>
<tr>
<td>2</td>
<td>Minverva Hooper</td>
<td>Curaçao</td>
<td>Sinaas-Waas</td>
<td class="text-right">
$23,789
</td>
</tr>
<tr>
<td>3</td>
<td>Sage Rodriguez</td>
<td>Netherlands</td>
<td>Baileux</td>
<td class="text-right">
$56,142
</td>
</tr>
<tr>
<td>4</td>
<td>Philip Chaney</td>
<td>Korea, South</td>
<td>Overland Park</td>
<td class="text-right">
$38,735
</td>
</tr>
<tr>
<td>5</td>
<td>Doris Greene</td>
<td>Malawi</td>
<td>Feldkirchen in Kärnten</td>
<td class="text-right">
$63,542
</td>
</tr>
<tr>
<td>6</td>
<td>Mason Porter</td>
<td>Chile</td>
<td>Gloucester</td>
<td class="text-right">
$78,615
</td>
</tr>
</tbody>
</v-simple-table>
</base-material-card>
</v-container>
</template>

12
tests/e2e/.eslintrc.js Normal file
View File

@ -0,0 +1,12 @@
module.exports = {
plugins: [
'cypress',
],
env: {
mocha: true,
'cypress/globals': true,
},
rules: {
strict: 'off',
},
}

24
tests/e2e/plugins/index.js Normal file
View File

@ -0,0 +1,24 @@
// https://docs.cypress.io/guides/guides/plugins-guide.html
// if you need a custom webpack configuration you can uncomment the following import
// and then use the `file:preprocessor` event
// as explained in the cypress docs
// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
/* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */
// const webpack = require('@cypress/webpack-preprocessor')
module.exports = (on, config) => {
// on('file:preprocessor', webpack({
// webpackOptions: require('@vue/cli-service/webpack.config'),
// watchOptions: {}
// }))
return Object.assign({}, config, {
fixturesFolder: 'tests/e2e/fixtures',
integrationFolder: 'tests/e2e/specs',
screenshotsFolder: 'tests/e2e/screenshots',
videosFolder: 'tests/e2e/videos',
supportFile: 'tests/e2e/support/index.js',
})
}

8
tests/e2e/specs/test.js Normal file
View File

@ -0,0 +1,8 @@
// https://docs.cypress.io/api/introduction/api.html
describe('My First Test', () => {
it('Visits the app root url', () => {
cy.visit('/')
cy.contains('h1', 'Welcome to Your Vue.js App')
})
})

25
tests/e2e/support/commands.js Normal file
View File

@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

20
tests/e2e/support/index.js Normal file
View File

@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')

5
tests/unit/.eslintrc.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
env: {
jest: true,
},
}

7
tests/unit/example.spec.js Normal file
View File

@ -0,0 +1,7 @@
import { shallowMount } from '@vue/test-utils'
import App from '@/App.vue'
test('App should work', () => {
const wrapper = shallowMount(App)
expect(wrapper.text()).toMatch('Welcome to Your Vue.js App')
})

16
vue.config.js Normal file
View File

@ -0,0 +1,16 @@
module.exports = {
devServer: {
disableHostCheck: true,
},
transpileDependencies: ['vuetify'],
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: false,
},
},
}