├── .browserslistrc
├── .devcontainer
    ├── Dockerfile
    └── devcontainer.json
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── deploy.demo.sh
├── dev
    ├── App.vue
    ├── main.js
    └── plugins
    │   ├── vue-json-tree-view.js
    │   ├── vuetify-extra.js
    │   └── vuetify.js
├── docs
    └── reopen-inside-docker.png
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── components
    │   ├── AppBar.vue
    │   ├── AppSnackbar.vue
    │   ├── AppSnackbar
    │   │   ├── Empty.vue
    │   │   ├── Error.vue
    │   │   ├── Info.vue
    │   │   └── Warning.vue
    │   ├── CardPage.vue
    │   ├── CardPage
    │   │   ├── EmptyFormat.vue
    │   │   └── SimpleTitle.vue
    │   └── LoginForm.vue
    └── plugin.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.devcontainer/Dockerfile:
--------------------------------------------------------------------------------
 1 | # [Choice] Node.js version: 14, 12, 10
 2 | ARG VARIANT=12
 3 | FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
 4 | 
 5 | ENV PATH /app/node_modules/.bin:$PATH
 6 | 
 7 | RUN sudo -u node npm install -g http-server @vue/cli @vue/cli-service-global
 8 | WORKDIR /app
 9 | 
10 | EXPOSE 8080
11 | 
12 | # [Optional] Uncomment this section to install additional OS packages.
13 | # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
14 | #     && apt-get -y install --no-install-recommends <your-package-list-here>
15 | 


--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "Vue (Community)",
 3 | 	"build": {
 4 | 		"dockerfile": "Dockerfile",
 5 | 		"context": "..",
 6 | 		// Update 'VARIANT' to pick a Node version: 10, 12, 14
 7 | 		"args": { "VARIANT": "12" }
 8 | 	},
 9 | 
10 | 	// Set *default* container specific settings.json values on container create.
11 | 	"settings": {
12 | 		"terminal.integrated.shell.linux": "/bin/zsh"
13 | 	},
14 | 	
15 | 	// Add the IDs of extensions you want installed when the container is created.
16 | 	"extensions": [
17 | 		"dbaeumer.vscode-eslint",
18 | 		"octref.vetur"
19 | 	],
20 | 	
21 | 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
22 | 	"forwardPorts": [
23 | 		8080
24 | 	],
25 | 	
26 | 	// Use 'postCreateCommand' to run commands after the container is created.
27 | 	// "postCreateCommand": "uname -a",
28 | 	
29 | 	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
30 | 	// "remoteUser": "node"
31 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /demo
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 
24 | # npm package for testing
25 | *.tgz


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Luca D'Amico (menteora)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # IMPORTANT!
  2 | 
  3 | There's a **BUG** in **v1.0.0-beta.0**, use previous version:
  4 | 
  5 | ```
  6 | npm install  @menteora/vuetify-extra@0.3.2
  7 | ```
  8 | 
  9 | # vuetify-extra
 10 | Vue library with common used components based on Vuetify.
 11 | 
 12 | Demo here: https://menteora.github.io/vuetify-extra/
 13 | 
 14 | 2020/12/18 - v1.0.0-beta.0 - reduced library size from 300kb to 9kb (removed any duplicated vuetify code)
 15 | 
 16 | 2020/11/03 - [**NEW!** Docker Integration](#Docker-Integration)
 17 | 
 18 | ## Project setup
 19 | ### Install Library
 20 | - Install Vuetify 2 ([see documentation](https://vuetifyjs.com/en/getting-started/quick-start))
 21 | - Install Vuetify Extra:
 22 | 
 23 | ```
 24 | npm install @menteora/vuetify-extra
 25 | ```
 26 | 
 27 | ### Use Plugin
 28 | 
 29 | - Use Vuetify-Extra plugin after Vuetify
 30 | - Example of `/src/main.js` with Vuetify and Vuetify-Extra plugins:
 31 | 
 32 | ```javascript
 33 | import Vue from 'vue'
 34 | import App from './App.vue'
 35 | import vuetify from './plugins/vuetify'
 36 | import './plugins/vuetify-extra'
 37 | 
 38 | Vue.config.productionTip = false
 39 | 
 40 | new Vue({
 41 |   vuetify,
 42 |   render: h => h(App)
 43 | }).$mount('#app')
 44 | ```
 45 | 
 46 | - Example of standard Vuetify plugin installation in `plugins/vuetify.js`:
 47 | 
 48 | ```javascript
 49 | import Vue from 'vue'
 50 | import Vuetify from 'vuetify/lib'
 51 | 
 52 | Vue.use(Vuetify)
 53 | 
 54 | export default new Vuetify({
 55 |   icons: {
 56 |     iconfont: 'mdi'
 57 |   }
 58 | })
 59 | ```
 60 | 
 61 | - Example Vuetify-Extra plugin installation in `plugins/vuetify-extra.js`:
 62 | 
 63 | ```javascript
 64 | import Vue from 'vue'
 65 | import VuetifyExtra from '@menteora/vuetify-extra'
 66 | 
 67 | Vue.use(VuetifyExtra)
 68 | ```
 69 | 
 70 | ## Docker Integration
 71 | - Install Docker (refer to official Guide)
 72 | - Install "Docker" Extension on VSCode
 73 | - Open Folder with VSCode
 74 | - Answer "Reopen in Container" 
 75 | 
 76 | ![reopen inside docker button](docs/reopen-inside-docker.png)
 77 | 
 78 | ## Project setup
 79 | 
 80 | ### See demo in action:
 81 | ```
 82 | npm run serve
 83 | ```
 84 | 
 85 | ### Compiles and minifies Library for production
 86 | ```
 87 | npm run build
 88 | ```
 89 | 
 90 | ### Lints and fixes files
 91 | ```
 92 | npm run lint
 93 | ```
 94 | 
 95 | ### Customize configuration
 96 | See [Configuration Reference](https://cli.vuejs.org/config/).
 97 | 
 98 | 
 99 | ## Update workflow
100 | 
101 | 1. Update & commit code
102 | 
103 | ### Github pages updates
104 | 2. Update demo `npm run deploy:demo`
105 | 3. Test demo
106 | 
107 | ### Github updates
108 | 4. Update release inside package.json
109 | 5. Tag commit `git tag v0.3.1`
110 | 6. Push Tags `git push origin --tags`
111 | 
112 | ### Npm updates
113 | 7. Update build `npm run build`
114 | 8. Login on npm `npm login`
115 | 8. Update package on npm `npm publish`
116 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/deploy.demo.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # abort on errors
 4 | # set -e
 5 | 
 6 | # build
 7 | # npm run build:demo
 8 | 
 9 | # navigate into the build output directory
10 | cd demo
11 | 
12 | git init
13 | git add -A
14 | 
15 | git config --global user.name "menteora"
16 | git config --global user.email "menteora@gmail.com"
17 | 
18 | git commit -m 'deploy'
19 | 
20 | git push -f https://github.com/menteora/vuetify-extra.git master:gh-pages
21 | 
22 | cd -


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-main>
 4 |       <app-bar :menu-items="mItems" />
 5 |       <v-container>
 6 |         <v-card outlined tile>
 7 |           <v-card-title class="font-weight-light">Test App Bar</v-card-title>
 8 |           <v-card-text>
 9 |             <v-checkbox v-model="mItems" label="Home" :value="menuItems[0]"></v-checkbox>
10 |             <v-checkbox v-model="mItems" label="Fake" :value="menuItems[1]"></v-checkbox>
11 |           </v-card-text>
12 |         </v-card>
13 |         <json-tree v-if="mItems" :data="mItems"></json-tree>
14 |       </v-container>
15 |       <login-form @login="getLoginData" />
16 |       <v-container>
17 |         <json-tree v-if="jsonEmitted" :data="jsonEmitted"></json-tree>
18 |       </v-container>
19 |       <v-container>
20 |         <v-card outlined tile>
21 |           <v-card-title class="font-weight-light">Test App Message Snackbar</v-card-title>
22 |           <v-card-text>
23 |             <v-text-field v-model="textMessage" class="mt-3 pa-6" outlined></v-text-field>
24 |             <v-radio-group v-model="snackbarType" :mandatory="false">
25 |               <v-radio label="Error" value="error"></v-radio>
26 |               <v-radio label="Info" value="info"></v-radio>
27 |               <v-radio label="Warning" value="warning"></v-radio>
28 |               <v-radio label="Default" value="empty"></v-radio>
29 |             </v-radio-group>
30 |           </v-card-text>
31 |           <v-card-actions>
32 |             <v-btn text @click="$appMessage.show({message:textMessage, type:snackbarType})">Popup Message</v-btn>
33 |           </v-card-actions>
34 |         </v-card>
35 |       </v-container>
36 |       <app-snackbar />
37 |       <card-page simple-title>
38 |         <template v-slot:outside>Simple title outside card not working</template>
39 |         <template v-slot:inside>Simple title inside card work</template>
40 |         <v-card-text>Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well.</v-card-text>
41 |       </card-page>
42 |       <card-page simple-title title-position="outside">
43 |         <template v-slot:outside>Simple title outside card work</template>
44 |         <template v-slot:inside>Simple title inside card not work</template>
45 |         <v-card-text>Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well.</v-card-text>
46 |       </card-page>
47 |       <card-page>
48 |         <template v-slot:outside>
49 |           <h2>Custom title outside card not working</h2>
50 |         </template>
51 |         <template v-slot:inside>
52 |           <h2>Custom title inside card work</h2>
53 |         </template>
54 |         <v-card-text>Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well.</v-card-text>
55 |       </card-page>
56 |       <card-page title-position="outside">
57 |         <template v-slot:outside>
58 |           <h2>Custom title outside card work</h2>
59 |         </template>
60 |         <template v-slot:inside>
61 |           <h2>Custom title inside card not work</h2>
62 |         </template>
63 |         <v-card-text>Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well.</v-card-text>
64 |       </card-page>
65 |     </v-main>
66 |   </v-app>
67 | </template>
68 | 
69 | <script>
70 | export default {
71 |   name: 'App',
72 |   data: () => ({
73 |     jsonEmitted: null,
74 |     mItems: [],
75 |     textMessage: 'Hello World!',
76 |     snackbarType: null,
77 |     menuItems: [
78 |       { title: 'Home', icon: 'mdi-home', to: '/vuetify-extra/' },
79 |       { title: 'Fake', icon: 'mdi-bug', to: '/vuetify-extra/fake-url' }
80 |     ]
81 |   }),
82 |   methods: {
83 |     getLoginData (values) {
84 |       this.jsonEmitted = values
85 |     }
86 |   }
87 | }
88 | </script>
89 | 


--------------------------------------------------------------------------------
/dev/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuetify from './plugins/vuetify'
 4 | import './plugins/vuetify-extra'
 5 | import JsonTree from 'vue-json-tree'
 6 | Vue.component('json-tree', JsonTree)
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | new Vue({
11 |   vuetify,
12 |   render: h => h(App)
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/dev/plugins/vue-json-tree-view.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import TreeView from 'vue-json-tree-view'
3 | Vue.use(TreeView)
4 | 


--------------------------------------------------------------------------------
/dev/plugins/vuetify-extra.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VuetifyExtra from '@/plugin' /* point to /src/plugin.js for dev purpose
3 | in production replace with: import VuetifyExtra from '@menteora/vuetify-extra' and
4 | import '@menteora/vuetify-extra/dist/menteora.css' */
5 | 
6 | Vue.use(VuetifyExtra)
7 | 


--------------------------------------------------------------------------------
/dev/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuetify from 'vuetify/lib'
 3 | 
 4 | Vue.use(Vuetify)
 5 | 
 6 | export default new Vuetify({
 7 |   icons: {
 8 |     iconfont: 'mdi'
 9 |   }
10 | })
11 | 


--------------------------------------------------------------------------------
/docs/reopen-inside-docker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/menteora/vuetify-extra/c611682e72e449b5c91adbd9dfce4aa8be2bf5dd/docs/reopen-inside-docker.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@menteora/vuetify-extra",
 3 |   "version": "0.3.2",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve ./dev/main.js",
 7 |     "build:demo": "vue-cli-service build --dest demo ./dev/main.js",
 8 |     "build": "vue-cli-service build --target lib --name menteora src/plugin.js",
 9 |     "build:local": "vue-cli-service build --target lib --name menteora src/plugin.js && npm pack",
10 |     "lint": "vue-cli-service lint --fix && vue-cli-service lint dev --fix",
11 |     "deploy:demo": "vue-cli-service build --dest demo ./dev/main.js && ./deploy.demo.sh"
12 |   },
13 |   "files": [
14 |     "dist"
15 |   ],
16 |   "main": "./dist/menteora.common.js",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "https://github.com/menteora/vuetify-extra"
20 |   },
21 |   "dependencies": {},
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "^4.5.7",
24 |     "@vue/cli-plugin-eslint": "^4.5.7",
25 |     "@vue/cli-service": "^4.5.7",
26 |     "@vue/eslint-config-standard": "^5.1.2",
27 |     "babel-eslint": "^10.1.0",
28 |     "core-js": "^3.6.5",
29 |     "eslint": "^7.10.0",
30 |     "eslint-plugin-import": "^2.22.1",
31 |     "eslint-plugin-node": "^11.1.0",
32 |     "eslint-plugin-promise": "^4.2.1",
33 |     "eslint-plugin-standard": "^4.0.0",
34 |     "eslint-plugin-vue": "^7.0.1",
35 |     "sass": "^1.27.0",
36 |     "sass-loader": "^10.0.2",
37 |     "vue": "^2.6.12",
38 |     "vue-cli-plugin-vuetify": "^2.0.7",
39 |     "vue-json-tree-view": "^2.1.6",
40 |     "vue-json-tree": "^0.4.3",
41 |     "vue-template-compiler": "^2.6.12",
42 |     "vuetify": "^2.3.13",
43 |     "vuetify-loader": "^1.6.0"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/menteora/vuetify-extra/c611682e72e449b5c91adbd9dfce4aa8be2bf5dd/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vuetify-extra</title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but vuetify-extra doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/components/AppBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-navigation-drawer app fixed temporary clipped v-model="drawer">
 4 |       <v-list>
 5 |         <v-list-item v-for="(item, i) in menuItems" :key="i" v-bind="routerProps(item.to)" exact>
 6 |           <v-list-item-icon>
 7 |             <v-icon>{{ item.icon }}</v-icon>
 8 |           </v-list-item-icon>
 9 |           <v-list-item-content>
10 |             <v-list-item-title>{{ item.title }}</v-list-item-title>
11 |           </v-list-item-content>
12 |         </v-list-item>
13 |       </v-list>
14 |     </v-navigation-drawer>
15 | 
16 |     <v-toolbar fixed>
17 |       <v-app-bar-nav-icon class="hidden-md-and-up" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
18 |       <v-spacer></v-spacer>
19 |       <v-toolbar-items class="hidden-sm-and-down" v-for="(item, i) in menuItems" :key="i">
20 |         <v-btn v-bind="routerProps(item.to)" text exact>
21 |           <v-icon left v-html="item.icon"></v-icon>
22 |           {{ item.title }}
23 |         </v-btn>
24 |       </v-toolbar-items>
25 |     </v-toolbar>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   props: {
32 |     menuItems: {
33 |       type: Array,
34 |       default: () => [
35 |         {
36 |           title: 'Home',
37 |           icon: 'mdi-home',
38 |           to: '/'
39 |         }
40 |       ]
41 |     }
42 |   },
43 |   data () {
44 |     return {
45 |       drawer: false
46 |     }
47 |   },
48 |   methods: {
49 |     routerProps (value) {
50 |       const prop = typeof this.$route === 'undefined' ? 'href' : 'to'
51 |       return { [prop]: value }
52 |     }
53 |   }
54 | }
55 | </script>
56 | 


--------------------------------------------------------------------------------
/src/components/AppSnackbar.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |   <v-snackbar v-model="snackbar" :color="type" :timeout="4000" vertical="vertical">
 4 |     <component v-bind:is="type">{{ message }}</component>
 5 |     <v-btn dark text @click="snackbar = false">Chiudi</v-btn>
 6 |   </v-snackbar>
 7 | </template>
 8 | 
 9 | <script>
10 | import Plugin from '../plugin.js'
11 | import Info from './AppSnackbar/Info.vue'
12 | import Error from './AppSnackbar/Error.vue'
13 | import Warning from './AppSnackbar/Warning.vue'
14 | import Empty from './AppSnackbar/Empty.vue'
15 | 
16 | export default {
17 |   components: {
18 |     Info,
19 |     Error,
20 |     Warning,
21 |     Empty
22 |   },
23 |   data () {
24 |     return {
25 |       snackbar: false,
26 |       message: '',
27 |       type: 'empty'
28 |     }
29 |   },
30 |   methods: {
31 |     show (params) {
32 |       this.snackbar = true
33 |       this.message = params.message
34 |       this.type = params.type ? params.type : this.type
35 |     }
36 |   },
37 |   beforeMount () {
38 |     Plugin.EventBus.$on('app-message-show', params => {
39 |       this.show(params)
40 |     })
41 |   }
42 | }
43 | </script>
44 | 
45 | <style scoped>
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/AppSnackbar/Empty.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <slot></slot>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/components/AppSnackbar/Error.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <v-icon left color="white">mdi-close-circle</v-icon>
4 |     <slot></slot>
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/src/components/AppSnackbar/Info.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <v-icon left color="white">mdi-information-outline</v-icon>
4 |     <slot></slot>
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/src/components/AppSnackbar/Warning.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <v-icon left color="white">mdi-alert</v-icon>
4 |     <slot></slot>
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/src/components/CardPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-layout align-center justify-center>
 4 |       <v-flex xs12 sm12 md12 lg9 xl8>
 5 |         <component v-bind:is="type">
 6 |           <template v-slot:[titlePosition]>
 7 |             <slot :name="titlePosition"></slot>
 8 |           </template>
 9 |           <slot></slot>
10 |         </component>
11 |       </v-flex>
12 |     </v-layout>
13 |   </v-container>
14 | </template>
15 | 
16 | <script>
17 | import EmptyFormat from './CardPage/EmptyFormat'
18 | import SimpleTitle from './CardPage/SimpleTitle'
19 | 
20 | export default {
21 |   props: {
22 |     titlePosition: {
23 |       type: String,
24 |       default: 'inside'
25 |     },
26 |     simpleTitle: {
27 |       type: Boolean,
28 |       default: false
29 |     }
30 |   },
31 |   components: {
32 |     EmptyFormat,
33 |     SimpleTitle
34 |   },
35 |   data () {
36 |     return {
37 |       drawer: false
38 |     }
39 |   },
40 |   computed: {
41 |     type: function () {
42 |       return this.simpleTitle ? 'simple-title' : 'empty-format'
43 |     }
44 |   }
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/components/CardPage/EmptyFormat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot name="outside"></slot>
 4 |     <v-card class="mx-auto pa-xs-auto pa-sm-5 pa-md-8" :elevation="1">
 5 |       <slot name="inside"></slot>
 6 |       <slot></slot>
 7 |     </v-card>
 8 |   </div>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/CardPage/SimpleTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 v-if="$slots['outside']" class="headline pa-3 font-weight-light"><slot name="outside"></slot></h1>
 4 |     <v-card class="mx-auto pa-xs-auto pa-sm-5 pa-md-8" :elevation="1">
 5 |       <v-card-title v-if="$slots['inside']" class="font-weight-light"><slot name="inside"></slot></v-card-title>
 6 |       <v-divider v-if="$slots['inside']" />
 7 |       <slot></slot>
 8 |     </v-card>
 9 |   </div>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/LoginForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-layout align-center justify-center>
 4 |       <v-flex xs12 sm8 md6 lg5 xl4>
 5 |         <v-card class="card--flex-toolbar">
 6 |           <v-app-bar flat>
 7 |             <v-toolbar-title class="display-1 text-uppercase">
 8 |               <span class="font-weight-light">{{ loginLabel }}</span>
 9 |             </v-toolbar-title>
10 |           </v-app-bar>
11 |           <v-card-text>
12 |             <v-text-field v-model="username" :label="userLabel" required></v-text-field>
13 |             <v-text-field type="password" v-model="password" :label="passwordLabel" required></v-text-field>
14 |           </v-card-text>
15 |           <v-card-actions>
16 |             <v-btn block text @click="login()">{{ loginLabel }}</v-btn>
17 |           </v-card-actions>
18 |         </v-card>
19 |       </v-flex>
20 |     </v-layout>
21 |   </v-container>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   props: {
27 |     userLabel: {
28 |       type: String,
29 |       default: 'User'
30 |     },
31 |     passwordLabel: {
32 |       type: String,
33 |       default: 'Password'
34 |     },
35 |     loginLabel: {
36 |       type: String,
37 |       default: 'Login'
38 |     }
39 |   },
40 |   data () {
41 |     return {
42 |       username: '',
43 |       password: ''
44 |     }
45 |   },
46 |   methods: {
47 |     login () {
48 |       let data = null
49 |       data = {
50 |         username: this.username,
51 |         password: this.password
52 |       }
53 |       this.$emit('login', data)
54 |     }
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
 1 | // Import vue components
 2 | // import * as components from './components/index'
 3 | // var components = {}
 4 | 
 5 | // install function executed by Vue.use()
 6 | function install (Vue) {
 7 |   if (install.installed) return
 8 |   install.installed = true
 9 | 
10 |   // For each matching file name...
11 |   requireComponent.keys().forEach((fileName) => {
12 |     // Get the component config
13 |     const componentConfig = requireComponent(fileName)
14 |     // Get the PascalCase version of the component name
15 |     const componentName = fileName
16 |       .split('/')
17 |       .pop()
18 |       .replace(/\.\w+$/, '')
19 |     // components[componentName] = componentConfig.default || componentConfig
20 |     // Globally register the component
21 |     Vue.component(componentName, componentConfig.default || componentConfig)
22 |   })
23 |   // Register Global event to show AppMessage, related to AppSnackbar
24 |   // https://medium.com/@panzelva/writing-modals-for-vue-js-callable-from-anywhere-6994d180451
25 |   this.EventBus = new Vue()
26 |   Vue.prototype.$appMessage = {
27 |     show (params) {
28 |       plugin.EventBus.$emit('app-message-show', params)
29 |     }
30 |   }
31 | }
32 | 
33 | // Create module definition for Vue.use()
34 | const plugin = {
35 |   install
36 | }
37 | 
38 | // To auto-install when vue is found
39 | 
40 | let GlobalVue = null
41 | if (typeof window !== 'undefined') {
42 |   GlobalVue = window.Vue
43 | } else if (typeof global !== 'undefined') {
44 |   GlobalVue = global.Vue
45 | }
46 | if (GlobalVue) {
47 |   GlobalVue.use(plugin)
48 | }
49 | 
50 | const requireComponent = require.context(
51 |   // Look for files in the current directory
52 |   './components',
53 |   // Do not look in subdirectories
54 |   false,
55 |   // Only include "_base-" prefixed .vue files
56 |   /[\w-]+\.vue$/
57 | )
58 | 
59 | // Default export is library as a whole, registered via Vue.use()
60 | export default plugin
61 | 
62 | // To allow individual component use, export components
63 | // each can be registered via Vue.component()
64 | // console.log({components})
65 | // export {components}
66 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | // For demo build bundle
2 | module.exports = {
3 |   publicPath: '/vuetify-extra/'
4 | }
5 | 


--------------------------------------------------------------------------------