├── public ├── robots.txt ├── favicon.ico ├── img │ └── icons │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── mstile-150x150.png │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── msapplication-icon-144x144.png │ │ └── safari-pinned-tab.svg ├── manifest.json └── index.html ├── .browserslistrc ├── cypress.json ├── .env ├── babel.config.js ├── .storybook-static ├── css │ └── iframe.f7142d08.css ├── favicon.ico ├── fonts │ ├── MaterialIcons-Regular.016c14ad.eot │ ├── MaterialIcons-Regular.55242ea5.ttf │ ├── MaterialIcons-Regular.8a9a261c.woff2 │ └── MaterialIcons-Regular.c38ebd3c.woff ├── mini-css-extract-plugin.html ├── index.html ├── static │ ├── runtime~iframe.e2823ec8946605a7f8a5.bundle.js │ ├── runtime~manager.09a0e75072b1975ba6ca.bundle.js │ ├── iframe.34c71e5b36f6a1f85e3d.bundle.js.map │ ├── runtime~iframe.e2823ec8946605a7f8a5.bundle.js.map │ ├── runtime~manager.09a0e75072b1975ba6ca.bundle.js.map │ └── iframe.34c71e5b36f6a1f85e3d.bundle.js └── iframe.html ├── tests ├── unit │ ├── .eslintrc.js │ ├── GridItem.spec.js │ └── Grid.spec.js └── e2e │ ├── .eslintrc.js │ ├── specs │ └── test.js │ ├── support │ ├── index.js │ └── commands.js │ └── plugins │ └── index.js ├── postcss.config.js ├── mock └── db.json ├── src ├── assets │ ├── vue.png │ ├── storybook.png │ └── vuetify.svg ├── plugins │ └── vuetify.js ├── i18n.js ├── views │ ├── AddItem.vue │ ├── PetView.vue │ └── GridView.vue ├── main.js ├── router.js ├── locales │ ├── en.json │ └── fr.json ├── registerServiceWorker.js ├── stories │ ├── index.stories.js │ ├── Layout.stories.js │ ├── Packages.stories.js │ ├── Applications.stories.js │ ├── ServiceRequests.stories.js │ ├── Customers.stories.js │ ├── Customer.stories.js │ ├── Dashboard.stories.js │ └── Application.stories.js ├── store.js ├── components │ ├── Layout.vue │ ├── Applications.vue │ ├── Packages.vue │ ├── ServiceRequests.vue │ ├── Dashboard.vue │ ├── Customers.vue │ ├── Application.vue │ └── Customer.vue └── App.vue ├── docs ├── .vuepress │ ├── public │ │ └── logo.png │ ├── enhanceApp.js │ └── config.js ├── README.md └── guide.md ├── .editorconfig ├── config └── storybook │ ├── addons.js │ └── config.js ├── vue.config.js ├── .gitignore ├── .eslintrc.js ├── Dockerfile ├── jest.config.js ├── docker-compose.yml ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | VUE_APP_I18N_LOCALE= 2 | VUE_APP_GTM_ID= 3 | VUE_APP_GTM_EXTRA_PARAMS= 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.storybook-static/css/iframe.f7142d08.css: -------------------------------------------------------------------------------- 1 | #layout .v-navigation-drawer__border{display:none} -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /mock/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "user": { 3 | "first_name": "José", 4 | "last_name": "Silva" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/src/assets/vue.png -------------------------------------------------------------------------------- /src/assets/storybook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/src/assets/storybook.png -------------------------------------------------------------------------------- /.storybook-static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/.storybook-static/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/docs/.vuepress/public/logo.png -------------------------------------------------------------------------------- /public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /config/storybook/addons.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import '@storybook/addon-actions/register' 3 | import '@storybook/addon-links/register' 4 | -------------------------------------------------------------------------------- /src/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuetify from 'vuetify/lib' 3 | import 'vuetify/src/stylus/app.styl' 4 | 5 | Vue.use(Vuetify, { 6 | iconfont: 'md' 7 | }) 8 | -------------------------------------------------------------------------------- /.storybook-static/fonts/MaterialIcons-Regular.016c14ad.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/.storybook-static/fonts/MaterialIcons-Regular.016c14ad.eot -------------------------------------------------------------------------------- /.storybook-static/fonts/MaterialIcons-Regular.55242ea5.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/.storybook-static/fonts/MaterialIcons-Regular.55242ea5.ttf -------------------------------------------------------------------------------- /.storybook-static/fonts/MaterialIcons-Regular.8a9a261c.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/.storybook-static/fonts/MaterialIcons-Regular.8a9a261c.woff2 -------------------------------------------------------------------------------- /.storybook-static/fonts/MaterialIcons-Regular.c38ebd3c.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/white-rabbit-japan/vue-vuetify-storybook/HEAD/.storybook-static/fonts/MaterialIcons-Regular.c38ebd3c.woff -------------------------------------------------------------------------------- /tests/e2e/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | 'cypress' 4 | ], 5 | env: { 6 | mocha: true, 7 | 'cypress/globals': true 8 | }, 9 | rules: { 10 | strict: 'off' 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pluginOptions: { 3 | i18n: { 4 | locale: 'en', 5 | fallbackLocale: 'en', 6 | localeDir: 'locales', 7 | enableInSFC: false 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe('My First Test', () => { 4 | it('Visits the app root url', () => { 5 | cy.visit('/') 6 | cy.contains('h1', 'Welcome to Your Vue.js App') 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /logo.png 4 | actionText: Get Started → 5 | actionLink: /guide 6 | features: 7 | - title: 'title1' 8 | details: Description1 9 | - title: 'title2' 10 | details: Description2 11 | - title: 'title2' 12 | details: Description3 13 | --- 14 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | export default ({ 2 | Vue, // the version of Vue being used in the VuePress app 3 | options, // the options for the root Vue instance 4 | router, // the router instance for the app 5 | siteData // site metadata 6 | }) => { 7 | // ...apply enhancements to the app 8 | } 9 | -------------------------------------------------------------------------------- /docs/guide.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | These instructions will get you the project up and running on your local machine for development and testing purposes. 3 | 4 | ## Instalation 5 | 6 | Clone the project 7 | 8 | ``` bash 9 | git clone git@github.com:jsilva-pt/vue-vuetify-storybook.git 10 | ``` 11 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'Business Area', 3 | description: 'Documentation', 4 | themeConfig: { 5 | nav: [ 6 | { text: 'Home', link: '/' }, 7 | { text: 'Guide', link: '/guide' } 8 | ], 9 | sidebar: [ 10 | '/', 11 | '/guide' 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /storybook-static 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 | -------------------------------------------------------------------------------- /src/i18n.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueI18n from 'vue-i18n' 3 | 4 | Vue.use(VueI18n) 5 | 6 | // Prevent non existence of VUE_APP_I18N_LOCALE 7 | const locale = process.env.VUE_APP_I18N_LOCALE || 'en' 8 | 9 | export default new VueI18n({ 10 | locale, 11 | fallbackLocale: locale, 12 | messages: { 13 | [locale]: require(`@/locales/${locale}.json`) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /tests/unit/GridItem.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import GridItem from '@/components/GridItem.vue' 3 | 4 | describe('GridItem', () => { 5 | it('emits event when clicking the card', () => { 6 | const wrapper = mount(GridItem) 7 | 8 | wrapper.findAll('.material-icons').trigger('click') 9 | expect(wrapper.emitted()['favorite-clicked']).toBeTruthy() 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/views/AddItem.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 23 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import './plugins/vuetify' 3 | import App from './App.vue' 4 | import router from './router' 5 | import store from './store' 6 | import './registerServiceWorker' 7 | import i18n from './i18n' 8 | import 'material-design-icons-iconfont/dist/material-design-icons.css' 9 | 10 | Vue.config.productionTip = false 11 | 12 | new Vue({ 13 | router, 14 | store, 15 | i18n, 16 | render: h => h(App) 17 | }).$mount('#app') 18 | -------------------------------------------------------------------------------- /src/assets/vuetify.svg: -------------------------------------------------------------------------------- 1 | Artboard 46 2 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vuetify-storybook", 3 | "short_name": "vue-vuetify-storybook", 4 | "icons": [ 5 | { 6 | "src": "./img/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "./img/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "./index.html", 17 | "display": "standalone", 18 | "background_color": "#000000", 19 | "theme_color": "#4DBA87" 20 | } 21 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # app 2 | FROM node:10.14.1-alpine as app 3 | WORKDIR /app 4 | EXPOSE 8080 5 | CMD yarn install && yarn serve 6 | 7 | # storybook 8 | FROM node:10.14.1-alpine as storybook 9 | WORKDIR /app 10 | EXPOSE 8081 11 | CMD yarn install && yarn serve:storybook 12 | 13 | # docs 14 | FROM node:10.14.1-alpine as docs 15 | WORKDIR /app 16 | EXPOSE 8082 17 | CMD yarn install && yarn docs:dev 18 | 19 | # mock server 20 | FROM node:10.14.1-alpine as mockserver 21 | RUN npm install -g json-server 22 | WORKDIR /data 23 | EXPOSE 8090 24 | CMD json-server --watch db.json --port 8090 --host 0.0.0.0 25 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'js', 4 | 'jsx', 5 | 'json', 6 | 'vue' 7 | ], 8 | transform: { 9 | '^.+\\.vue$': 'vue-jest', 10 | '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', 11 | '^.+\\.jsx?$': 'babel-jest' 12 | }, 13 | moduleNameMapper: { 14 | '^@/(.*)$': '/src/$1' 15 | }, 16 | snapshotSerializers: [ 17 | 'jest-serializer-vue' 18 | ], 19 | testMatch: [ 20 | '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' 21 | ], 22 | testURL: 'http://localhost/' 23 | } 24 | -------------------------------------------------------------------------------- /config/storybook/config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import Vue from 'vue'; 3 | import { configure } from '@storybook/vue'; 4 | import Vuetify, { VApp } from 'vuetify/lib'; 5 | 6 | import 'vuetify/src/stylus/app.styl'; 7 | import 'material-design-icons-iconfont/dist/material-design-icons.css'; 8 | 9 | Vue.use(Vuetify, { 10 | iconfont: 'md' 11 | }) 12 | 13 | Vue.component('v-app', VApp) 14 | 15 | const req = require.context('../../src/stories', true, /.stories.js$/) 16 | 17 | function loadStories () { 18 | req.keys().forEach(filename => req(filename)) 19 | } 20 | 21 | configure(loadStories, module) 22 | -------------------------------------------------------------------------------- /.storybook-static/mini-css-extract-plugin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Storybook 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/views/PetView.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | 28 | 34 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | mode: 'history', 8 | base: process.env.BASE_URL, 9 | routes: [ 10 | { 11 | path: '/', 12 | name: 'grid', 13 | component: () => import(/* webpackChunkName: "GridView" */ './views/GridView.vue') 14 | }, 15 | { 16 | path: '/add', 17 | name: 'add', 18 | component: () => import(/* webpackChunkName: "AddItem" */ './views/AddItem.vue') 19 | }, 20 | { 21 | path: '/view', 22 | name: 'view', 23 | component: () => import(/* webpackChunkName: "AddItem" */ './views/PetView.vue') 24 | } 25 | ] 26 | }) 27 | -------------------------------------------------------------------------------- /src/locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Name", 3 | "pet": "Pet", 4 | "pets": { 5 | "dog": "Dog", 6 | "cat": "Cat" 7 | }, 8 | "gender": "Gender", 9 | "genders": { 10 | "female": "Female", 11 | "male": "Male" 12 | }, 13 | "size": "Size", 14 | "sizes": { 15 | "small": "Small", 16 | "medium": "Medium", 17 | "large": "Large" 18 | }, 19 | "age": "Age", 20 | "ages": { 21 | "kitten": "Kitten", 22 | "puppy": "Puppy", 23 | "young": "Young", 24 | "adult": "Adult", 25 | "senior": "Senior" 26 | }, 27 | "breed": "Breed", 28 | "breeds": { 29 | 30 | }, 31 | "hair": "Hair", 32 | "hairs": { 33 | "short": "Short", 34 | "medium": "Medium", 35 | "long": "Long" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/locales/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Name Fr", 3 | "pet": "Pet", 4 | "pets": { 5 | "dog": "Dog", 6 | "cat": "Cat" 7 | }, 8 | "gender": "Gender FR", 9 | "genders": { 10 | "female": "Female", 11 | "male": "Male" 12 | }, 13 | "size": "Size", 14 | "sizes": { 15 | "small": "Small", 16 | "medium": "Medium", 17 | "large": "Large" 18 | }, 19 | "age": "Age", 20 | "ages": { 21 | "kitten": "Kitten", 22 | "puppy": "Puppy", 23 | "young": "Young", 24 | "adult": "Adult", 25 | "senior": "Senior" 26 | }, 27 | "breed": "Breed", 28 | "breeds": { 29 | 30 | }, 31 | "hair": "Hair", 32 | "hairs": { 33 | "short": "Short", 34 | "medium": "Medium", 35 | "long": "Long" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from 'register-service-worker' 4 | 5 | if (process.env.NODE_ENV === 'production') { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready () { 8 | console.log( 9 | 'App is being served from cache by a service worker.\n' + 10 | 'For more details, visit https://goo.gl/AFskqB' 11 | ) 12 | }, 13 | cached () { 14 | console.log('Content has been cached for offline use.') 15 | }, 16 | updated () { 17 | console.log('New content is available; please refresh.') 18 | }, 19 | offline () { 20 | console.log('No internet connection found. App is running in offline mode.') 21 | }, 22 | error (error) { 23 | console.error('Error during service worker registration:', error) 24 | } 25 | }) 26 | } 27 | -------------------------------------------------------------------------------- /src/stories/index.stories.js: -------------------------------------------------------------------------------- 1 | // import { storiesOf } from '@storybook/vue' 2 | // import { action } from '@storybook/addon-actions' 3 | 4 | // import Vue from 'vue' 5 | // import { VBtn, VIcon } from 'vuetify/lib' 6 | 7 | // import store from '../store' 8 | 9 | // Vue.component('v-btn', VBtn) 10 | // Vue.component('v-icon', VIcon) 11 | 12 | // export const data = { 13 | // pet: 'dog', 14 | // name: 'Pepi', 15 | // size: 'small', 16 | // gender: 'male', 17 | // age: 'young', 18 | // breed: 'breed_1' 19 | // } 20 | 21 | // export const methods = { 22 | // onPetFormSubmit: action('onPetFormSubmit') 23 | // } 24 | 25 | // storiesOf('PetForm', module) 26 | // .addDecorator(() => ({ 27 | // template: '' 28 | // })) 29 | // .add('create', () => ({ 30 | // template: ` 31 | // oialarm`, 32 | // methods, 33 | // store 34 | // })) 35 | -------------------------------------------------------------------------------- /tests/e2e/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.4' 2 | services: 3 | 4 | app: 5 | build: 6 | context: . 7 | dockerfile: Dockerfile 8 | target: app 9 | ports: 10 | - '8080:8080' 11 | volumes: 12 | - '$PWD:/app' 13 | container_name: app 14 | 15 | 16 | storybook: 17 | build: 18 | context: . 19 | dockerfile: Dockerfile 20 | target: storybook 21 | ports: 22 | - '8081:8081' 23 | volumes: 24 | - '$PWD:/app' 25 | container_name: storybook 26 | 27 | 28 | docs: 29 | build: 30 | context: . 31 | dockerfile: Dockerfile 32 | target: docs 33 | ports: 34 | - '8082:8082' 35 | volumes: 36 | - '$PWD:/app' 37 | container_name: docs 38 | 39 | 40 | mock: 41 | build: 42 | context: . 43 | dockerfile: Dockerfile 44 | target: mockserver 45 | ports: 46 | - '8090:8090' 47 | volumes: 48 | - '$PWD/mock:/data' 49 | container_name: mockserver 50 | -------------------------------------------------------------------------------- /tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/guides/guides/plugins-guide.html 2 | 3 | // if you need a custom webpack configuration you can uncomment the following import 4 | // and then use the `file:preprocessor` event 5 | // as explained in the cypress docs 6 | // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples 7 | 8 | // /* eslint-disable import/no-extraneous-dependencies, global-require */ 9 | // const webpack = require('@cypress/webpack-preprocessor') 10 | 11 | module.exports = (on, config) => { 12 | // on('file:preprocessor', webpack({ 13 | // webpackOptions: require('@vue/cli-service/webpack.config'), 14 | // watchOptions: {} 15 | // })) 16 | 17 | return Object.assign({}, config, { 18 | fixturesFolder: 'tests/e2e/fixtures', 19 | integrationFolder: 'tests/e2e/specs', 20 | screenshotsFolder: 'tests/e2e/screenshots', 21 | videosFolder: 'tests/e2e/videos', 22 | supportFile: 'tests/e2e/support/index.js' 23 | }) 24 | } 25 | -------------------------------------------------------------------------------- /tests/unit/Grid.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Grid from '@/components/Grid.vue' 3 | import { items } from '@/stories/Grid.stories.js' 4 | 5 | describe('Grid', () => { 6 | it('emits event when clicking the card', () => { 7 | const wrapper = mount(Grid, { 8 | propsData: { items } 9 | }) 10 | 11 | const emitted = wrapper.emitted() 12 | 13 | wrapper.findAll('.grid-item').at(3).trigger('click') 14 | expect(emitted['item-clicked'][0]).toEqual([3]) 15 | 16 | wrapper.findAll('.grid-item').at(5).trigger('click') 17 | expect(emitted['item-clicked'][1]).toEqual([5]) 18 | }) 19 | 20 | it('emits event when adding or removing from favorites', () => { 21 | const wrapper = mount(Grid, { 22 | propsData: { items } 23 | }) 24 | 25 | const emitted = wrapper.emitted() 26 | 27 | wrapper.findAll('.grid-item').at(3).find('.material-icons').trigger('click') 28 | expect(emitted['item-favorite-clicked'][0]).toEqual([3]) 29 | 30 | wrapper.findAll('.grid-item').at(5).find('.material-icons').trigger('click') 31 | expect(emitted['item-favorite-clicked'][1]).toEqual([5]) 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /.storybook-static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Storybook 8 | 9 | 10 | 11 | 12 | 13 | 22 | 23 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <% if (process.env.VUE_APP_GTM_ID) { %> 5 | 10 | <% } %> 11 | 12 | 13 | 14 | 15 | 16 | vue-vuetify-storybook 17 | 18 | 19 | 20 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/views/GridView.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | 57 | 63 | -------------------------------------------------------------------------------- /.storybook-static/static/runtime~iframe.e2823ec8946605a7f8a5.bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,f,i=r[0],l=r[1],a=r[2],c=0,s=[];c state.sizes, 60 | ages: state => state.ages, 61 | breeds: state => state.breeds, 62 | hairs: state => state.hairs 63 | } 64 | }) 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vuetify-storybook", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "build:storybook": "vue-cli-service build:storybook -c config/storybook -o .storybook-static", 10 | "serve:storybook": "vue-cli-service serve:storybook -p 8081 -c config/storybook", 11 | "test:e2e": "vue-cli-service test:e2e", 12 | "test:unit": "vue-cli-service test:unit", 13 | "docs:dev": "vuepress dev -p 8082 docs", 14 | "docs:build": "vuepress build docs" 15 | }, 16 | "dependencies": { 17 | "material-design-icons-iconfont": "^4.0.2", 18 | "register-service-worker": "^1.0.0", 19 | "vue": "^2.5.17", 20 | "vue-i18n": "^8.0.0", 21 | "vue-router": "^3.0.1", 22 | "vuetify": "^1.3.0", 23 | "vuex": "^3.0.1" 24 | }, 25 | "devDependencies": { 26 | "@storybook/addon-actions": "4.0.0-alpha.20", 27 | "@storybook/addon-links": "4.0.0-alpha.20", 28 | "@vue/cli-plugin-babel": "^3.0.1", 29 | "@vue/cli-plugin-e2e-cypress": "^3.2.0", 30 | "@vue/cli-plugin-eslint": "^3.0.1", 31 | "@vue/cli-plugin-pwa": "^3.0.1", 32 | "@vue/cli-plugin-unit-jest": "^3.0.1", 33 | "@vue/cli-service": "^3.0.1", 34 | "@vue/eslint-config-standard": "^4.0.0", 35 | "@vue/test-utils": "^1.0.0-beta.20", 36 | "babel-core": "7.0.0-bridge.0", 37 | "babel-eslint": "^10.0.1", 38 | "babel-jest": "^23.6.0", 39 | "eslint": "^5.8.0", 40 | "eslint-plugin-vue": "^5.0.0-0", 41 | "stylus": "^0.54.5", 42 | "stylus-loader": "^3.0.1", 43 | "vue-cli-plugin-i18n": "^0.5.1", 44 | "vue-cli-plugin-storybook": "^0.4.8", 45 | "vue-cli-plugin-vuetify": "^0.4.5", 46 | "vue-template-compiler": "^2.5.17", 47 | "vuepress": "^0.14.8", 48 | "vuetify-loader": "^1.0.5" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/stories/Layout.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/vue'; 2 | import { action } from '@storybook/addon-actions'; 3 | import { linkTo } from '@storybook/addon-links'; 4 | 5 | import Vue from 'vue'; 6 | import { 7 | VNavigationDrawer, 8 | VBtn, 9 | VList, 10 | VLayout, 11 | VFlex, 12 | VSubheader, 13 | VDivider, 14 | VListTile, 15 | VListTileContent, 16 | VListTileAction, 17 | // VApp, 18 | VListTileTitle, 19 | VTextField, 20 | VSpacer, 21 | VToolbar, 22 | VContent, 23 | VIcon, 24 | VToolbarSideIcon, 25 | VContainer 26 | } from 'vuetify/lib'; 27 | 28 | import 'vuetify/src/stylus/app.styl'; 29 | 30 | import i18n from '../i18n'; 31 | import store from '../store'; 32 | 33 | import Layout from '../components/Layout.vue'; 34 | 35 | Vue.component('v-navigation-drawer', VNavigationDrawer) 36 | Vue.component('v-btn', VBtn) 37 | Vue.component('v-list', VList) 38 | Vue.component('v-layout', VLayout) 39 | Vue.component('v-flex', VFlex) 40 | Vue.component('v-subheader', VSubheader) 41 | Vue.component('v-divider', VDivider) 42 | Vue.component('v-list-tile', VListTile) 43 | Vue.component('v-list-tile-content', VListTileContent) 44 | Vue.component('v-toolbar', VToolbar) 45 | Vue.component('v-content', VContent) 46 | Vue.component('v-container', VContainer) 47 | Vue.component('v-icon', VIcon) 48 | Vue.component('v-list-tile-actio', VListTileAction) 49 | Vue.component('v-list-tile-title', VListTileTitle) 50 | Vue.component('v-text-field', VTextField) 51 | Vue.component('v-spacer', VSpacer) 52 | Vue.component('v-toolbar-side-icon', VToolbarSideIcon) 53 | // Vue.component('v-app', VApp) 54 | 55 | storiesOf('Layout', module) 56 | .addDecorator(() => ({ 57 | template: '' 58 | })) 59 | .add('default', () => ({ 60 | components: { Layout }, 61 | template: ` 62 | `, 63 | i18n, 64 | store 65 | })) 66 | -------------------------------------------------------------------------------- /.storybook-static/static/iframe.34c71e5b36f6a1f85e3d.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/iframe.34c71e5b36f6a1f85e3d.bundle.js","sources":["webpack:///./src/stories/ServiceRequests.stories.js"],"sourcesContent":["import { storiesOf } from '@storybook/vue';\nimport { action } from '@storybook/addon-actions';\n\nimport Vue from 'vue';\nimport {\n VNavigationDrawer,\n VBtn,\n VList,\n VLayout,\n VFlex,\n VSubheader,\n VDivider,\n VListTile,\n VListTileContent,\n VListTileAction,\n // VApp,\n VListTileTitle,\n VTextField,\n VSpacer,\n VToolbar,\n VContent,\n VIcon,\n VToolbarSideIcon,\n VContainer,\n VDataTable,\n VChip\n} from 'vuetify/lib';\n\nimport 'vuetify/src/stylus/app.styl';\n\nimport i18n from '../i18n';\nimport store from '../store';\n\nimport ServiceRequests from '../components/ServiceRequests.vue';\n\nVue.component('v-navigation-drawer', VNavigationDrawer)\nVue.component('v-btn', VBtn)\nVue.component('v-list', VList)\nVue.component('v-layout', VLayout)\nVue.component('v-flex', VFlex)\nVue.component('v-subheader', VSubheader)\nVue.component('v-divider', VDivider)\nVue.component('v-list-tile', VListTile)\nVue.component('v-list-tile-content', VListTileContent)\nVue.component('v-toolbar', VToolbar)\nVue.component('v-content', VContent)\nVue.component('v-container', VContainer)\nVue.component('v-icon', VIcon)\nVue.component('v-list-tile-actio', VListTileAction)\nVue.component('v-list-tile-title', VListTileTitle)\nVue.component('v-text-field', VTextField)\nVue.component('v-data-table', VDataTable)\nVue.component('v-spacer', VSpacer)\nVue.component('v-toolbar-side-icon', VToolbarSideIcon)\nVue.component('v-chip', VChip)\n\n// Vue.component('v-app', VApp)\n\nstoriesOf('ServiceRequests', module)\n .addDecorator(() => ({\n template: ''\n }))\n .add('default', () => ({\n components: { ServiceRequests },\n template: `\n `,\n i18n,\n store\n }))\n"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /src/stories/Packages.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/vue'; 2 | import { action } from '@storybook/addon-actions'; 3 | 4 | import Vue from 'vue'; 5 | import { 6 | VNavigationDrawer, 7 | VBtn, 8 | VList, 9 | VLayout, 10 | VFlex, 11 | VSubheader, 12 | VDivider, 13 | VListTile, 14 | VListTileContent, 15 | VListTileAction, 16 | // VApp, 17 | VListTileTitle, 18 | VTextField, 19 | VSpacer, 20 | VToolbar, 21 | VContent, 22 | VIcon, 23 | VToolbarSideIcon, 24 | VContainer, 25 | VDataTable, 26 | VChip 27 | } from 'vuetify/lib'; 28 | 29 | import 'vuetify/src/stylus/app.styl'; 30 | 31 | import i18n from '../i18n'; 32 | import store from '../store'; 33 | 34 | import Packages from '../components/Packages.vue'; 35 | 36 | Vue.component('v-navigation-drawer', VNavigationDrawer) 37 | Vue.component('v-btn', VBtn) 38 | Vue.component('v-list', VList) 39 | Vue.component('v-layout', VLayout) 40 | Vue.component('v-flex', VFlex) 41 | Vue.component('v-subheader', VSubheader) 42 | Vue.component('v-divider', VDivider) 43 | Vue.component('v-list-tile', VListTile) 44 | Vue.component('v-list-tile-content', VListTileContent) 45 | Vue.component('v-toolbar', VToolbar) 46 | Vue.component('v-content', VContent) 47 | Vue.component('v-container', VContainer) 48 | Vue.component('v-icon', VIcon) 49 | Vue.component('v-list-tile-actio', VListTileAction) 50 | Vue.component('v-list-tile-title', VListTileTitle) 51 | Vue.component('v-text-field', VTextField) 52 | Vue.component('v-data-table', VDataTable) 53 | Vue.component('v-spacer', VSpacer) 54 | Vue.component('v-toolbar-side-icon', VToolbarSideIcon) 55 | Vue.component('v-chip', VChip) 56 | 57 | // Vue.component('v-app', VApp) 58 | 59 | storiesOf('Packages', module) 60 | .addDecorator(() => ({ 61 | template: '' 62 | })) 63 | .add('default', () => ({ 64 | components: { Packages }, 65 | template: ` 66 | `, 67 | i18n, 68 | store 69 | })) 70 | -------------------------------------------------------------------------------- /src/stories/Applications.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/vue'; 2 | import { action } from '@storybook/addon-actions'; 3 | 4 | import Vue from 'vue'; 5 | import { 6 | VNavigationDrawer, 7 | VBtn, 8 | VList, 9 | VLayout, 10 | VFlex, 11 | VSubheader, 12 | VDivider, 13 | VListTile, 14 | VListTileContent, 15 | VListTileAction, 16 | // VApp, 17 | VListTileTitle, 18 | VTextField, 19 | VSpacer, 20 | VToolbar, 21 | VContent, 22 | VIcon, 23 | VToolbarSideIcon, 24 | VContainer, 25 | VDataTable, 26 | VChip 27 | } from 'vuetify/lib'; 28 | 29 | import 'vuetify/src/stylus/app.styl'; 30 | 31 | import i18n from '../i18n'; 32 | import store from '../store'; 33 | 34 | import Applications from '../components/Applications.vue'; 35 | 36 | Vue.component('v-navigation-drawer', VNavigationDrawer) 37 | Vue.component('v-btn', VBtn) 38 | Vue.component('v-list', VList) 39 | Vue.component('v-layout', VLayout) 40 | Vue.component('v-flex', VFlex) 41 | Vue.component('v-subheader', VSubheader) 42 | Vue.component('v-divider', VDivider) 43 | Vue.component('v-list-tile', VListTile) 44 | Vue.component('v-list-tile-content', VListTileContent) 45 | Vue.component('v-toolbar', VToolbar) 46 | Vue.component('v-content', VContent) 47 | Vue.component('v-container', VContainer) 48 | Vue.component('v-icon', VIcon) 49 | Vue.component('v-list-tile-actio', VListTileAction) 50 | Vue.component('v-list-tile-title', VListTileTitle) 51 | Vue.component('v-text-field', VTextField) 52 | Vue.component('v-data-table', VDataTable) 53 | Vue.component('v-spacer', VSpacer) 54 | Vue.component('v-toolbar-side-icon', VToolbarSideIcon) 55 | Vue.component('v-chip', VChip) 56 | 57 | // Vue.component('v-app', VApp) 58 | 59 | storiesOf('Applications', module) 60 | .addDecorator(() => ({ 61 | template: '' 62 | })) 63 | .add('default', () => ({ 64 | components: { Applications }, 65 | template: ` 66 | `, 67 | i18n, 68 | store 69 | })) 70 | -------------------------------------------------------------------------------- /src/stories/ServiceRequests.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/vue'; 2 | import { action } from '@storybook/addon-actions'; 3 | 4 | import Vue from 'vue'; 5 | import { 6 | VNavigationDrawer, 7 | VBtn, 8 | VList, 9 | VLayout, 10 | VFlex, 11 | VSubheader, 12 | VDivider, 13 | VListTile, 14 | VListTileContent, 15 | VListTileAction, 16 | // VApp, 17 | VListTileTitle, 18 | VTextField, 19 | VSpacer, 20 | VToolbar, 21 | VContent, 22 | VIcon, 23 | VToolbarSideIcon, 24 | VContainer, 25 | VDataTable, 26 | VChip 27 | } from 'vuetify/lib'; 28 | 29 | import 'vuetify/src/stylus/app.styl'; 30 | 31 | import i18n from '../i18n'; 32 | import store from '../store'; 33 | 34 | import ServiceRequests from '../components/ServiceRequests.vue'; 35 | 36 | Vue.component('v-navigation-drawer', VNavigationDrawer) 37 | Vue.component('v-btn', VBtn) 38 | Vue.component('v-list', VList) 39 | Vue.component('v-layout', VLayout) 40 | Vue.component('v-flex', VFlex) 41 | Vue.component('v-subheader', VSubheader) 42 | Vue.component('v-divider', VDivider) 43 | Vue.component('v-list-tile', VListTile) 44 | Vue.component('v-list-tile-content', VListTileContent) 45 | Vue.component('v-toolbar', VToolbar) 46 | Vue.component('v-content', VContent) 47 | Vue.component('v-container', VContainer) 48 | Vue.component('v-icon', VIcon) 49 | Vue.component('v-list-tile-actio', VListTileAction) 50 | Vue.component('v-list-tile-title', VListTileTitle) 51 | Vue.component('v-text-field', VTextField) 52 | Vue.component('v-data-table', VDataTable) 53 | Vue.component('v-spacer', VSpacer) 54 | Vue.component('v-toolbar-side-icon', VToolbarSideIcon) 55 | Vue.component('v-chip', VChip) 56 | 57 | // Vue.component('v-app', VApp) 58 | 59 | storiesOf('ServiceRequests', module) 60 | .addDecorator(() => ({ 61 | template: '' 62 | })) 63 | .add('default', () => ({ 64 | components: { ServiceRequests }, 65 | template: ` 66 | `, 67 | i18n, 68 | store 69 | })) 70 | -------------------------------------------------------------------------------- /src/stories/Customers.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/vue'; 2 | import { action } from '@storybook/addon-actions'; 3 | 4 | import Vue from 'vue'; 5 | import { 6 | VNavigationDrawer, 7 | VBtn, 8 | VList, 9 | VLayout, 10 | VAlert, 11 | VFlex, 12 | VSubheader, 13 | VDivider, 14 | VListTile, 15 | VListTileContent, 16 | VListTileTitle, 17 | VListTileSubTitle, 18 | VListTileAction, 19 | VTextField, 20 | VSpacer, 21 | VToolbar, 22 | VContent, 23 | VIcon, 24 | VToolbarSideIcon, 25 | VContainer, 26 | VDataTable, 27 | VBadge 28 | } from 'vuetify/lib'; 29 | 30 | import 'vuetify/src/stylus/app.styl'; 31 | 32 | import i18n from '../i18n'; 33 | import store from '../store'; 34 | 35 | import Customers from '../components/Customers.vue'; 36 | 37 | Vue.component('v-navigation-drawer', VNavigationDrawer) 38 | Vue.component('v-btn', VBtn) 39 | Vue.component('v-list', VList) 40 | Vue.component('v-alert', VAlert) 41 | Vue.component('v-badge', VBadge) 42 | Vue.component('v-layout', VLayout) 43 | Vue.component('v-flex', VFlex) 44 | Vue.component('v-subheader', VSubheader) 45 | Vue.component('v-divider', VDivider) 46 | Vue.component('v-list-tile', VListTile) 47 | Vue.component('v-list-tile-content', VListTileContent) 48 | Vue.component('v-toolbar', VToolbar) 49 | Vue.component('v-content', VContent) 50 | Vue.component('v-container', VContainer) 51 | Vue.component('v-icon', VIcon) 52 | Vue.component('v-list-tile-action', VListTileAction) 53 | Vue.component('v-list-tile-title', VListTileTitle) 54 | Vue.component('v-list-tile-sub-title', VListTileSubTitle) 55 | Vue.component('v-text-field', VTextField) 56 | Vue.component('v-data-table', VDataTable) 57 | Vue.component('v-spacer', VSpacer) 58 | Vue.component('v-toolbar-side-icon', VToolbarSideIcon) 59 | // Vue.component('v-app', VApp) 60 | 61 | storiesOf('Customers', module) 62 | .addDecorator(() => ({ 63 | template: '' 64 | })) 65 | .add('default', () => ({ 66 | components: { Customers }, 67 | template: ` 68 | `, 69 | i18n, 70 | store 71 | })) 72 | -------------------------------------------------------------------------------- /src/stories/Customer.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/vue'; 2 | import { action } from '@storybook/addon-actions'; 3 | 4 | import Vue from 'vue'; 5 | import { 6 | VNavigationDrawer, 7 | VBtn, 8 | VList, 9 | VLayout, 10 | VFlex, 11 | VCard, 12 | VSubheader, 13 | VDivider, 14 | VListTile, 15 | VCombobox, 16 | VListTileContent, 17 | VListTileAction, 18 | // VApp, 19 | VListTileTitle, 20 | VTextField, 21 | VSpacer, 22 | VToolbar, 23 | VTextarea, 24 | VSwitch, 25 | VContent, 26 | VIcon, 27 | VToolbarSideIcon, 28 | VContainer, 29 | VDataTable 30 | } from 'vuetify/lib'; 31 | 32 | import 'vuetify/src/stylus/app.styl'; 33 | 34 | import i18n from '../i18n'; 35 | import store from '../store'; 36 | 37 | import Customer from '../components/Customer.vue'; 38 | 39 | Vue.component('v-navigation-drawer', VNavigationDrawer) 40 | Vue.component('v-btn', VBtn) 41 | Vue.component('v-list', VList) 42 | Vue.component('v-combobox', VCombobox) 43 | Vue.component('v-layout', VLayout) 44 | Vue.component('v-flex', VFlex) 45 | Vue.component('v-textarea', VTextarea) 46 | Vue.component('v-subheader', VSubheader) 47 | Vue.component('v-card', VCard) 48 | Vue.component('v-divider', VDivider) 49 | Vue.component('v-list-tile', VListTile) 50 | Vue.component('v-list-tile-content', VListTileContent) 51 | Vue.component('v-toolbar', VToolbar) 52 | Vue.component('v-content', VContent) 53 | Vue.component('v-container', VContainer) 54 | Vue.component('v-icon', VIcon) 55 | Vue.component('v-list-tile-actio', VListTileAction) 56 | Vue.component('v-list-tile-title', VListTileTitle) 57 | Vue.component('v-text-field', VTextField) 58 | Vue.component('v-data-table', VDataTable) 59 | Vue.component('v-spacer', VSpacer) 60 | Vue.component('v-switch', VSwitch) 61 | Vue.component('v-toolbar-side-icon', VToolbarSideIcon) 62 | // Vue.component('v-app', VApp) 63 | 64 | storiesOf('Customer', module) 65 | .addDecorator(() => ({ 66 | template: '' 67 | })) 68 | .add('default', () => ({ 69 | components: { Customer }, 70 | template: ` 71 | `, 72 | i18n, 73 | store 74 | })) 75 | -------------------------------------------------------------------------------- /src/stories/Dashboard.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/vue'; 2 | import { action } from '@storybook/addon-actions'; 3 | 4 | import Vue from 'vue'; 5 | import { 6 | VNavigationDrawer, 7 | VBtn, 8 | VList, 9 | VAlert, 10 | VLayout, 11 | VFlex, 12 | VSubheader, 13 | VDivider, 14 | VListTile, 15 | VListTileContent, 16 | VListTileAction, 17 | // VApp, 18 | VListTileTitle, 19 | VTextField, 20 | VSpacer, 21 | VToolbar, 22 | VContent, 23 | VIcon, 24 | VToolbarSideIcon, 25 | VContainer, 26 | VDataTable, 27 | VChip, 28 | VForm, 29 | VImg, 30 | VCheckbox 31 | } from 'vuetify/lib'; 32 | 33 | import 'vuetify/src/stylus/app.styl'; 34 | 35 | import i18n from '../i18n'; 36 | import store from '../store'; 37 | 38 | import Dashboard from '../components/Dashboard.vue'; 39 | 40 | Vue.component('v-navigation-drawer', VNavigationDrawer) 41 | Vue.component('v-btn', VBtn) 42 | Vue.component('v-list', VList) 43 | Vue.component('v-checkbox', VCheckbox) 44 | Vue.component('v-alert', VAlert) 45 | Vue.component('v-layout', VLayout) 46 | Vue.component('v-img', VImg) 47 | Vue.component('v-flex', VFlex) 48 | Vue.component('v-subheader', VSubheader) 49 | Vue.component('v-divider', VDivider) 50 | Vue.component('v-form', VForm) 51 | Vue.component('v-list-tile', VListTile) 52 | Vue.component('v-list-tile-content', VListTileContent) 53 | Vue.component('v-toolbar', VToolbar) 54 | Vue.component('v-content', VContent) 55 | Vue.component('v-container', VContainer) 56 | Vue.component('v-icon', VIcon) 57 | Vue.component('v-list-tile-actio', VListTileAction) 58 | Vue.component('v-list-tile-title', VListTileTitle) 59 | Vue.component('v-text-field', VTextField) 60 | Vue.component('v-data-table', VDataTable) 61 | Vue.component('v-spacer', VSpacer) 62 | Vue.component('v-toolbar-side-icon', VToolbarSideIcon) 63 | Vue.component('v-chip', VChip) 64 | 65 | // Vue.component('v-app', VApp) 66 | 67 | storiesOf('Dashboard', module) 68 | .addDecorator(() => ({ 69 | template: '' 70 | })) 71 | .add('default', () => ({ 72 | components: { Dashboard }, 73 | template: ` 74 | `, 75 | i18n, 76 | store 77 | })) 78 | -------------------------------------------------------------------------------- /src/stories/Application.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/vue'; 2 | import { action } from '@storybook/addon-actions'; 3 | 4 | import Vue from 'vue'; 5 | import { 6 | VNavigationDrawer, 7 | VBtn, 8 | VList, 9 | VAlert, 10 | VLayout, 11 | VFlex, 12 | VSubheader, 13 | VDivider, 14 | VListTile, 15 | VListTileContent, 16 | VListTileAction, 17 | // VApp, 18 | VListTileTitle, 19 | VTextField, 20 | VSpacer, 21 | VToolbar, 22 | VContent, 23 | VIcon, 24 | VToolbarSideIcon, 25 | VContainer, 26 | VDataTable, 27 | VChip, 28 | VForm, 29 | VImg, 30 | VCheckbox 31 | } from 'vuetify/lib'; 32 | 33 | import 'vuetify/src/stylus/app.styl'; 34 | 35 | import i18n from '../i18n'; 36 | import store from '../store'; 37 | 38 | import Application from '../components/Application.vue'; 39 | 40 | Vue.component('v-navigation-drawer', VNavigationDrawer) 41 | Vue.component('v-btn', VBtn) 42 | Vue.component('v-list', VList) 43 | Vue.component('v-checkbox', VCheckbox) 44 | Vue.component('v-alert', VAlert) 45 | Vue.component('v-layout', VLayout) 46 | Vue.component('v-img', VImg) 47 | Vue.component('v-flex', VFlex) 48 | Vue.component('v-subheader', VSubheader) 49 | Vue.component('v-divider', VDivider) 50 | Vue.component('v-form', VForm) 51 | Vue.component('v-list-tile', VListTile) 52 | Vue.component('v-list-tile-content', VListTileContent) 53 | Vue.component('v-toolbar', VToolbar) 54 | Vue.component('v-content', VContent) 55 | Vue.component('v-container', VContainer) 56 | Vue.component('v-icon', VIcon) 57 | Vue.component('v-list-tile-actio', VListTileAction) 58 | Vue.component('v-list-tile-title', VListTileTitle) 59 | Vue.component('v-text-field', VTextField) 60 | Vue.component('v-data-table', VDataTable) 61 | Vue.component('v-spacer', VSpacer) 62 | Vue.component('v-toolbar-side-icon', VToolbarSideIcon) 63 | Vue.component('v-chip', VChip) 64 | 65 | // Vue.component('v-app', VApp) 66 | 67 | storiesOf('Application', module) 68 | .addDecorator(() => ({ 69 | template: '' 70 | })) 71 | .add('default', () => ({ 72 | components: { Application }, 73 | template: ` 74 | `, 75 | i18n, 76 | store 77 | })) 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-vuetify-storybook 2 | 3 | Experimenting the integration between Vue.js, Vuetify and Storybook. 4 | 5 | Some tools like Vue I18n and Vuex are also used in order to make the project similar 6 | to what a real application would be. 7 | 8 | ## Dockerize for development 9 | 10 | ```bash 11 | docker-compose up 12 | 13 | http://localhost:8080/ # App 14 | http://localhost:8081/ # Storybook 15 | http://localhost:8082/ # Documentation 16 | http://localhost:8090/ # Mock Server 17 | ``` 18 | 19 | ## Local Installation 20 | 21 | ### Project setup 22 | 23 | ``` 24 | yarn install 25 | ``` 26 | 27 | ### Available Commands 28 | 29 | ```bash 30 | # Compiles and hot-reloads for development 31 | yarn serve 32 | 33 | # Compiles and minifies for production 34 | yarn build 35 | 36 | # Compiles and hot-reloads storybook for development 37 | yarn serve:storybook 38 | 39 | # Compiles and minifies storybook for production 40 | yarn build:storybook 41 | 42 | # Compiles and hot-reloads for development 43 | yarn docs:dev 44 | 45 | # Compiles and minifies for production 46 | yarn docs:build 47 | 48 | # Run unit tests 49 | yarn test:unit 50 | ``` 51 | 52 | ## Built With 53 | 54 | ### Base Tools 55 | 56 | - [Vue.js](https://vuejs.org/) 57 | - [Vue CLI 3](https://cli.vuejs.org/guide/) 58 | - [Vue Router](https://router.vuejs.org/) 59 | - [Vuex](https://vuex.vuejs.org/) 60 | - [Axios](https://github.com/axios/axios) 61 | - [Storybook](https://storybook.js.org/) 62 | - [Docker](https://www.docker.com/) 63 | 64 | ### Internationalization 65 | 66 | - [Vue I18n](https://kazupon.github.io/vue-i18n/) 67 | 68 | ### Material Design 69 | 70 | - [Vuetify](https://vuetifyjs.com/en/) 71 | 72 | ### mock Server 73 | 74 | - [Mock Json Server](https://github.com/typicode/json-server) 75 | 76 | ### Analytics 77 | 78 | - Google Tag Manager 79 | - Google Analytics 80 | 81 | ### Testing 82 | 83 | - [Vue Test Utils](https://vue-test-utils.vuejs.org/) 84 | - [Jest](https://jestjs.io/) 85 | - [Cypress](https://www.cypress.io/) 86 | 87 | ### Documentation 88 | 89 | - [VuePress](https://vuepress.vuejs.org/) 90 | 91 | ## Versioning 92 | 93 | We use [SemVer](http://semver.org/) for versioning and [Keep a Changelog](http://keepachangelog.com/) for the format of the ChangeLog. For the versions available, see the [tags on this repository](https://github.com/jsilva-pt/vue-vuetify-storybook/tags). 94 | -------------------------------------------------------------------------------- /src/components/Layout.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 79 | 80 | 87 | -------------------------------------------------------------------------------- /.storybook-static/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Storybook 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 68 | 69 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
85 |
86 |

No Preview

87 |

Sorry, but you either have no stories or none are selected somehow.

88 |
    89 |
  • Please check the storybook config.
    • 90 |
  • Try reloading the page.
    • 91 |
92 |
93 |
94 | 95 |
96 |
97 | 
 98 |     
 99 |
100 |
101 | 102 | 103 | 104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | 91 | 92 | 99 | -------------------------------------------------------------------------------- /src/components/Applications.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 138 | 139 | 141 | -------------------------------------------------------------------------------- /src/components/Packages.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 163 | 164 | 166 | -------------------------------------------------------------------------------- /.storybook-static/static/runtime~iframe.e2823ec8946605a7f8a5.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/runtime~iframe.e2823ec8946605a7f8a5.bundle.js","sources":["webpack:///webpack/bootstrap"],"sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"mappings":"AACA","sourceRoot":""} -------------------------------------------------------------------------------- /.storybook-static/static/runtime~manager.09a0e75072b1975ba6ca.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/runtime~manager.09a0e75072b1975ba6ca.bundle.js","sources":["webpack:///webpack/bootstrap"],"sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t3: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"mappings":"AACA","sourceRoot":""} -------------------------------------------------------------------------------- /src/components/ServiceRequests.vue: -------------------------------------------------------------------------------- 1 | // Service Requests 2 | // Consolidate Packages 3 | // Split Package 4 | // Take photos 5 | 6 | 41 | 42 | 165 | 166 | 168 | -------------------------------------------------------------------------------- /src/components/Dashboard.vue: -------------------------------------------------------------------------------- 1 | 77 | 78 | 205 | 206 | 208 | -------------------------------------------------------------------------------- /src/components/Customers.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 234 | -------------------------------------------------------------------------------- /src/components/Application.vue: -------------------------------------------------------------------------------- 1 | 149 | 150 | 260 | 261 | 263 | -------------------------------------------------------------------------------- /public/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /src/components/Customer.vue: -------------------------------------------------------------------------------- 1 | 186 | 187 | 343 | -------------------------------------------------------------------------------- /.storybook-static/static/iframe.34c71e5b36f6a1f85e3d.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{0:function(t,e,a){a("d754"),a("fbfb"),t.exports=a("5d29")},"02a6":function(t,e,a){"use strict";a.r(e),function(t){var e=a("7d14"),s=(a("cc29"),a("a026")),i=a("f774"),n=a("8336"),o=a("8860"),l=a("a722"),c=a("0e8f"),r=a("e0c7"),d=a("ce7e"),u=a("ba95"),v=a("5d23"),p=a("71d9"),f=a("549c"),m=a("a523"),g=a("132d"),h=a("40fe"),b=a("2677"),x=a("8fea"),_=a("9910"),y=a("706c"),C=a("cc20"),w=(a("da64"),a("9225")),k=a("c0d6"),A=a("cda3");s.default.component("v-navigation-drawer",i.a),s.default.component("v-btn",n.a),s.default.component("v-list",o.a),s.default.component("v-layout",l.a),s.default.component("v-flex",c.a),s.default.component("v-subheader",r.a),s.default.component("v-divider",d.a),s.default.component("v-list-tile",u.a),s.default.component("v-list-tile-content",v.a),s.default.component("v-toolbar",p.a),s.default.component("v-content",f.a),s.default.component("v-container",m.a),s.default.component("v-icon",g.a),s.default.component("v-list-tile-actio",h.a),s.default.component("v-list-tile-title",v.c),s.default.component("v-text-field",b.a),s.default.component("v-data-table",x.a),s.default.component("v-spacer",_.a),s.default.component("v-toolbar-side-icon",y.a),s.default.component("v-chip",C.a),Object(e.storiesOf)("ServiceRequests",t).addDecorator(function(){return{template:''}}).add("default",function(){return{components:{ServiceRequests:A.a},template:"\n ",i18n:w.a,store:k.a}})}.call(this,a("dd40")(t))},"06b6":function(t,e,a){"use strict";a.r(e);a("cadf"),a("551c"),a("f751"),a("097d")},"0b8a":function(t,e){},"0de0":function(t,e,a){"use strict";a.r(e),function(t){a("cadf"),a("551c"),a("f751"),a("097d");var e=a("7d14"),s=(a("cc29"),a("a026")),i=a("f774"),n=a("8336"),o=a("8860"),l=a("0798"),c=a("a722"),r=a("0e8f"),d=a("e0c7"),u=a("ce7e"),v=a("ba95"),p=a("5d23"),f=a("71d9"),m=a("549c"),g=a("a523"),h=a("132d"),b=a("40fe"),x=a("2677"),_=a("8fea"),y=a("9910"),C=a("706c"),w=(a("da64"),a("9225")),k=a("c0d6"),A=a("7d5b");s.default.component("v-navigation-drawer",i.a),s.default.component("v-btn",n.a),s.default.component("v-list",o.a),s.default.component("v-alert",l.a),s.default.component("v-layout",c.a),s.default.component("v-flex",r.a),s.default.component("v-subheader",d.a),s.default.component("v-divider",u.a),s.default.component("v-list-tile",v.a),s.default.component("v-list-tile-content",p.a),s.default.component("v-toolbar",f.a),s.default.component("v-content",m.a),s.default.component("v-container",g.a),s.default.component("v-icon",h.a),s.default.component("v-list-tile-action",b.a),s.default.component("v-list-tile-title",p.c),s.default.component("v-list-tile-sub-title",p.b),s.default.component("v-text-field",x.a),s.default.component("v-data-table",_.a),s.default.component("v-spacer",y.a),s.default.component("v-toolbar-side-icon",C.a),Object(e.storiesOf)("Customers",t).addDecorator(function(){return{template:''}}).add("default",function(){return{components:{Customers:A.a},template:"\n ",i18n:w.a,store:k.a}})}.call(this,a("dd40")(t))},"231a":function(t,e,a){var s={"./en.json":"edd4","./fr.json":"f693"};function i(t){var e=n(t);return a(e)}function n(t){var e=s[t];if(!(e+1)){var a=new Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}return e}i.keys=function(){return Object.keys(s)},i.resolve=n,t.exports=i,i.id="231a"},"2b03":function(t,e,a){"use strict";var s=a("d691");a.n(s).a},"5d29":function(t,e,a){"use strict";a.r(e),function(t){a("ac6a"),a("cadf"),a("551c"),a("f751"),a("097d");var e=a("a026"),s=a("7d14"),i=a("bb71"),n=a("7496");a("da64"),a("d1e7"),a("bf40");e.default.use(i.a,{iconfont:"md"}),e.default.component("v-app",n.a);var o=a("f330");Object(s.configure)(function(){o.keys().forEach(function(t){return o(t)})},t)}.call(this,a("dd40")(t))},7546:function(t,e){},"7c1c":function(t,e,a){"use strict";a("55dd");var s=a("795b"),i=a.n(s),n={data:function(){return{totalDesserts:0,desserts:[],loading:!0,pagination:{sortBy:"Date"},headers:[{text:"Package",value:"package"},{text:"Date",value:"receivedAt"},{text:"Size",value:"size"},{text:"Weight",value:"weightGrams"},{text:"Location",value:"location"},{text:"Status",value:"status"},{text:"Total",value:"total"}]}},watch:{pagination:{handler:function(){var t=this;this.getDataFromApi().then(function(e){t.desserts=e.items,t.totalDesserts=e.total})},deep:!0}},mounted:function(){var t=this;this.getDataFromApi().then(function(e){t.desserts=e.items,t.totalDesserts=e.total})},methods:{IsFulfilled:function(t){return"Fulfilled"===t},getDataFromApi:function(){var t=this;return this.loading=!0,new i.a(function(e,a){var s=t.pagination,i=s.sortBy,n=s.descending,o=s.page,l=s.rowsPerPage,c=t.getDesserts(),r=c.length;t.pagination.sortBy&&(c=c.sort(function(t,e){var a=t[i],s=e[i];return n?as?-1:0:as?1:0})),l>0&&(c=c.slice((o-1)*l,o*l)),setTimeout(function(){t.loading=!1,e({items:c,total:r})},1e3)})},getDesserts:function(){return[{package:"B648751",receivedAt:"Sept 3, 11:20",sizeLength:20,sizeWidth:20,sizeHeight:25,weightGrams:"291 grams",status:"Mailbox",total:"",location:"BC3A"},{package:"B648763",receivedAt:"Sept 3, 11:43",sizeLength:20,sizeWidth:30,sizeHeight:35,weightGrams:"430 grams",status:"Mailbox",total:"",location:"BD2B"},{package:"B558467",receivedAt:"Dec 22, 2018",sizeLength:20,sizeWidth:20,sizeHeight:35,weightGrams:"1,430 grams",status:"Fulfilled",total:"$123.45",location:""}]}}},o=a("2877"),l=Object(o.a)(n,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"package-list v-content"},[a("div",{staticClass:"v-container fluid fill-height",staticStyle:{padding:"24px"}},[a("h1",{staticClass:"headline mb-4"},[t._v("Applications")]),a("div",{staticClass:"v-card v-card--flat"},[a("v-data-table",{staticClass:"elevation-1",attrs:{headers:t.headers,items:t.desserts,pagination:t.pagination,"total-items":t.totalDesserts,"rows-per-page-items":[10,25,50,100],loading:t.loading},on:{"update:pagination":function(e){t.pagination=e}},scopedSlots:t._u([{key:"items",fn:function(e){return[a("td",[t._v(t._s(e.item.package))]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.receivedAt))]),a("td",{staticClass:"text-xs-left"},[t._v("\n "+t._s(e.item.sizeLength)+"\n "),a("span",{staticClass:"caption"},[t._v("x")]),t._v("\n "+t._s(e.item.sizeWidth)+"\n "),a("span",{staticClass:"caption"},[t._v("x")]),t._v("\n "+t._s(e.item.sizeHeight)+" cm\n ")]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.weightGrams))]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.location))]),a("td",{staticClass:"text-xs-left"},[a("v-chip",{attrs:{color:t.IsFulfilled(e.item.status)?"":"yellow lighten-3"}},[t._v(t._s(e.item.status))])],1),a("td",{staticClass:"text-xs-right"},[t._v(t._s(e.item.total))])]}}])})],1)])])},[],!1,null,null,null);e.a=l.exports},"7d5b":function(t,e,a){"use strict";a("55dd");var s=a("795b"),i=a.n(s),n={data:function(){return{totalDesserts:0,desserts:[],loading:!0,pagination:{},headers:[{text:"Name",value:"name"},{text:"Mailbox",value:"mailbox"},{text:"Packages",value:"packages"},{text:"Last seen",value:"lastActiveAt"},{text:"First seen",value:"createdAt"},{text:"Spent",value:"spent"}]}},watch:{pagination:{handler:function(){var t=this;this.getDataFromApi().then(function(e){t.desserts=e.items,t.totalDesserts=e.total})},deep:!0}},mounted:function(){var t=this;this.getDataFromApi().then(function(e){t.desserts=e.items,t.totalDesserts=e.total})},methods:{getDataFromApi:function(){var t=this;return this.loading=!0,new i.a(function(e,a){var s=t.pagination,i=s.sortBy,n=s.descending,o=s.page,l=s.rowsPerPage,c=t.getDesserts(),r=c.length;t.pagination.sortBy&&(c=c.sort(function(t,e){var a=t[i],s=e[i];return n?as?-1:0:as?1:0})),l>0&&(c=c.slice((o-1)*l,o*l)),setTimeout(function(){t.loading=!1,e({items:c,total:r})},1e3)})},getDesserts:function(){return[{name:"Matthew Perry",city:"Tokyo",country:"JP",mailbox:"R001853",packages:"7 Packages",createdAt:"4 months ago",lastActiveAt:"2 hours ago",spent:"$55.01 spent"},{name:"Tilda Swinton",city:"London",country:"GB",mailbox:"",packages:"0 Packages",createdAt:"3 days ago",lastActiveAt:"32 minutes ago",spent:"$0.00 spent"},{name:"Marvin Gay",city:"Kowloon",country:"HK",mailbox:"R313481",packages:"1 Packages",createdAt:"7 days ago",lastActiveAt:"a day ago",spent:"$33.87 spent"},{name:"Micky Mouse",city:"Orlando",country:"US",mailbox:"R957846",packages:"40 Packages",createdAt:"2 years ago",lastActiveAt:"2 weeks ago",spent:"$124.12 spent"},{name:"Giles Murray",city:"London",country:"GB",mailbox:"R987541",packages:"1 Packages",createdAt:"2 weeks ago",lastActiveAt:"1 hour ago",spent:"$28.42 spent"},{name:"Mika Tajima",city:"Osaka",country:"JP",mailbox:"",packages:"0 Packages",createdAt:"a day ago",lastActiveAt:"1 hour ago",spent:"$0.00 spent"},{name:"Pawel Pawlikowski",city:"Krakow",country:"PL",mailbox:"R212645",packages:"1 Packages",createdAt:"12 days ago",lastActiveAt:"12 days ago",spent:"$48.00 spent"}]}}},o=a("2877"),l=Object(o.a)(n,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"customer-list v-content"},[a("div",{staticClass:"v-container fluid fill-height",staticStyle:{padding:"24px"}},[a("h1",{staticClass:"headline mb-4"},[t._v("Customers")]),a("div",{staticClass:"v-card v-card--flat"},[a("v-data-table",{staticClass:"elevation-1",attrs:{headers:t.headers,items:t.desserts,pagination:t.pagination,"total-items":t.totalDesserts,"rows-per-page-items":[10,25,50,100],loading:t.loading},on:{"update:pagination":function(e){t.pagination=e}},scopedSlots:t._u([{key:"items",fn:function(e){return[a("td",[a("span",{staticClass:"subheading grey--text text--darken-3"},[a("strong",[t._v(t._s(e.item.name))])]),t._v("\n  \n "+t._s(e.item.city)+", "+t._s(e.item.country)+"\n ")]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.mailbox))]),a("td",{staticClass:"text-xs-right"},[t._v(t._s(e.item.packages))]),a("td",{staticClass:"text-xs-right"},[t._v(t._s(e.item.lastActiveAt))]),a("td",{staticClass:"text-xs-right"},[t._v(t._s(e.item.createdAt))]),a("td",{staticClass:"text-xs-right"},[t._v(t._s(e.item.spent))])]}}])})],1)])])},[],!1,null,null,null);e.a=l.exports},8072:function(t,e,a){"use strict";a.r(e),function(t){var e=a("7d14"),s=(a("cc29"),a("a026")),i=a("f774"),n=a("8336"),o=a("8860"),l=a("2b5d"),c=a("a722"),r=a("0e8f"),d=a("a844"),u=a("e0c7"),v=a("b0af"),p=a("ce7e"),f=a("ba95"),m=a("5d23"),g=a("71d9"),h=a("549c"),b=a("a523"),x=a("132d"),_=a("40fe"),y=a("2677"),C=a("8fea"),w=a("9910"),k=a("b73d"),A=a("706c"),D=(a("da64"),a("9225")),S=a("c0d6"),z=a("af6b");s.default.component("v-navigation-drawer",i.a),s.default.component("v-btn",n.a),s.default.component("v-list",o.a),s.default.component("v-combobox",l.a),s.default.component("v-layout",c.a),s.default.component("v-flex",r.a),s.default.component("v-textarea",d.a),s.default.component("v-subheader",u.a),s.default.component("v-card",v.a),s.default.component("v-divider",p.a),s.default.component("v-list-tile",f.a),s.default.component("v-list-tile-content",m.a),s.default.component("v-toolbar",g.a),s.default.component("v-content",h.a),s.default.component("v-container",b.a),s.default.component("v-icon",x.a),s.default.component("v-list-tile-actio",_.a),s.default.component("v-list-tile-title",m.c),s.default.component("v-text-field",y.a),s.default.component("v-data-table",C.a),s.default.component("v-spacer",w.a),s.default.component("v-switch",k.a),s.default.component("v-toolbar-side-icon",A.a),Object(e.storiesOf)("Customer",t).addDecorator(function(){return{template:''}}).add("default",function(){return{components:{Customer:z.a},template:"\n ",i18n:D.a,store:S.a}})}.call(this,a("dd40")(t))},"8a38":function(t,e,a){"use strict";a.r(e),function(t){var e=a("7d14"),s=(a("cc29"),a("a026")),i=a("f774"),n=a("8336"),o=a("8860"),l=a("a722"),c=a("0e8f"),r=a("e0c7"),d=a("ce7e"),u=a("ba95"),v=a("5d23"),p=a("71d9"),f=a("549c"),m=a("a523"),g=a("132d"),h=a("40fe"),b=a("2677"),x=a("8fea"),_=a("9910"),y=a("706c"),C=a("cc20"),w=(a("da64"),a("9225")),k=a("c0d6"),A=a("7c1c");s.default.component("v-navigation-drawer",i.a),s.default.component("v-btn",n.a),s.default.component("v-list",o.a),s.default.component("v-layout",l.a),s.default.component("v-flex",c.a),s.default.component("v-subheader",r.a),s.default.component("v-divider",d.a),s.default.component("v-list-tile",u.a),s.default.component("v-list-tile-content",v.a),s.default.component("v-toolbar",p.a),s.default.component("v-content",f.a),s.default.component("v-container",m.a),s.default.component("v-icon",g.a),s.default.component("v-list-tile-actio",h.a),s.default.component("v-list-tile-title",v.c),s.default.component("v-text-field",b.a),s.default.component("v-data-table",x.a),s.default.component("v-spacer",_.a),s.default.component("v-toolbar-side-icon",y.a),s.default.component("v-chip",C.a),Object(e.storiesOf)("Applications",t).addDecorator(function(){return{template:''}}).add("default",function(){return{components:{Applications:A.a},template:"\n ",i18n:w.a,store:k.a}})}.call(this,a("dd40")(t))},9225:function(t,e,a){"use strict";var s=a("bd86"),i=a("a026"),n=a("a925");i.default.use(n.a);e.a=new n.a({locale:"en",fallbackLocale:"en",messages:Object(s.a)({},"en",a("231a")("./".concat("en",".json")))})},"9a1d":function(t,e,a){"use strict";a.r(e),function(t){a("cadf"),a("551c"),a("f751"),a("097d");var e=a("7d14"),s=(a("cc29"),a("a026")),i=a("f774"),n=a("8336"),o=a("8860"),l=a("a722"),c=a("0e8f"),r=a("e0c7"),d=a("ce7e"),u=a("ba95"),v=a("5d23"),p=a("71d9"),f=a("549c"),m=a("a523"),g=a("132d"),h=a("40fe"),b=a("2677"),x=a("8fea"),_=a("9910"),y=a("706c"),C=a("cc20"),w=(a("da64"),a("9225")),k=a("c0d6"),A=a("c2e9");s.default.component("v-navigation-drawer",i.a),s.default.component("v-btn",n.a),s.default.component("v-list",o.a),s.default.component("v-layout",l.a),s.default.component("v-flex",c.a),s.default.component("v-subheader",r.a),s.default.component("v-divider",d.a),s.default.component("v-list-tile",u.a),s.default.component("v-list-tile-content",v.a),s.default.component("v-toolbar",p.a),s.default.component("v-content",f.a),s.default.component("v-container",m.a),s.default.component("v-icon",g.a),s.default.component("v-list-tile-actio",h.a),s.default.component("v-list-tile-title",v.c),s.default.component("v-text-field",b.a),s.default.component("v-data-table",x.a),s.default.component("v-spacer",_.a),s.default.component("v-toolbar-side-icon",y.a),s.default.component("v-chip",C.a),Object(e.storiesOf)("Packages",t).addDecorator(function(){return{template:''}}).add("default",function(){return{components:{Packages:A.a},template:"\n ",i18n:w.a,store:k.a}})}.call(this,a("dd40")(t))},ac5a:function(t,e,a){"use strict";a.r(e);a("cadf"),a("551c"),a("f751"),a("097d")},af6b:function(t,e,a){"use strict";a("55dd");var s=a("795b"),i=a.n(s),n=a("75fc"),o={data:function(){return{disabled:!1,applications:[{chipText:"New",chipColor:"warning",createdAt:"Feb 6, 13:53",reviewedAt:"Feb 7, 13:53"},{chipText:"Approved",chipColor:"success",createdAt:"Jan 3, 13:53",reviewedAt:"Jan 12, 13:53"},{chipText:"Soft rejected",chipColor:"grey lighten-1",createdAt:"Dec 25, 2018",reviewedAt:"Dec 25, 2018"},{chipText:"Hard rejected",chipColor:"grey",createdAt:"Dec 20, 2018",reviewedAt:"Dec 21, 2018"}],totalDesserts:0,desserts:[],chips:["influencer"],items:["bad review","PITA","whale"],loading:!0,pagination:{sortBy:"Date"},headers:[{text:"Package",value:"package"},{text:"Date",value:"receivedAt"},{text:"Size",value:"size"},{text:"Weight",value:"weightGrams"},{text:"Location",value:"location"},{text:"Status",value:"status"},{text:"Total",value:"total"}]}},watch:{pagination:{handler:function(){var t=this;this.getDataFromApi().then(function(e){t.desserts=e.items,t.totalDesserts=e.total})},deep:!0}},mounted:function(){var t=this;this.getDataFromApi().then(function(e){t.desserts=e.items,t.totalDesserts=e.total})},methods:{IsFulfilled:function(t){return"Fulfilled"===t},remove:function(t){this.chips.splice(this.chips.indexOf(t),1),this.chips=Object(n.a)(this.chips)},getDataFromApi:function(){var t=this;return this.loading=!0,new i.a(function(e,a){var s=t.pagination,i=s.sortBy,n=s.descending,o=s.page,l=s.rowsPerPage,c=t.getDesserts(),r=c.length;t.pagination.sortBy&&(c=c.sort(function(t,e){var a=t[i],s=e[i];return n?as?-1:0:as?1:0})),l>0&&(c=c.slice((o-1)*l,o*l)),setTimeout(function(){t.loading=!1,e({items:c,total:r})},1e3)})},getDesserts:function(){return[{package:"B648751",receivedAt:"Sept 3, 11:20",sizeLength:20,sizeWidth:20,sizeHeight:25,weightGrams:"291 grams",status:"Mailbox",total:"",location:"BC3A"},{package:"B648763",receivedAt:"Sept 3, 11:43",sizeLength:20,sizeWidth:30,sizeHeight:35,weightGrams:"430 grams",status:"Mailbox",total:"",location:"BD2B"},{package:"B558467",receivedAt:"Dec 22, 2018",sizeLength:20,sizeWidth:20,sizeHeight:35,weightGrams:"1,430 grams",status:"Fulfilled",total:"$123.45",location:""}]}}},l=a("2877"),c=Object(l.a)(o,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"customer"},[a("div",{staticClass:"v-container grid-list-md fluid fill-height",staticStyle:{padding:"24px"}},[a("h1",{staticClass:"headline mb-4"},[t._v("Matthew Perry")]),a("v-layout",{attrs:{"justify-center":"",wrap:""}},[a("v-flex",{attrs:{xs8:""}},[a("v-alert",{directives:[{name:"show",rawName:"v-show",value:t.disabled,expression:"disabled"}],attrs:{value:!0,type:"error"}},[t._v("Account disabled")]),a("v-alert",{attrs:{value:!0,type:"warning"}},[t._v("Application awaiting review")]),a("v-card",{staticClass:"pa-3 mb-3"},[a("v-layout",{attrs:{row:"","justify-space-between":""}},[a("v-flex",[a("v-card-title",{attrs:{"primary-title":""}},[a("div",[a("h2",{staticClass:"title font-weight-medium"},[t._v("Matthew Perry")]),a("div",{staticClass:"subheading"},[t._v("M185300")]),a("div",{staticClass:"body-2 grey--text text--darken-2"},[t._v("San Diego, US")]),a("div",{staticClass:"body-2 grey--text text--darken-2"},[t._v("Customer for 9 months")])])])],1),a("div"),a("v-flex",{attrs:{"text-xs-right":""}},[a("div",{staticClass:"mr-2 pr-1"},[a("v-chip",{attrs:{color:"success","text-color":"white"}},[t._v("Verified\n "),a("v-icon",{attrs:{right:""}},[t._v("check_circle")])],1)],1)])],1),a("v-textarea",{staticClass:"py-3",attrs:{name:"customerNote",rows:"1",box:"","background-color":"grey lighten-5","grey-lighten-1":"",label:"Customer note",hint:"Add a note","auto-grow":"",value:"Her skin glistening in the neon light coming from the paved court through the slits in the blind, her soot-black lashes matted, her grave gray eyes more vacant than ever."}}),a("v-card-actions",[a("v-layout",{staticClass:"subheading text-xs-center",attrs:{row:"",wrap:""}},[a("v-flex",{attrs:{xs4:""}},[a("div",{staticClass:"grey--text text--darken-1"},[t._v("Last package")]),a("div",{staticClass:"py-1 font-weight-bold"},[t._v("3 days ago")])]),a("v-flex",{attrs:{xs4:""}},[a("div",{staticClass:"grey--text text--darken-1"},[t._v("Packages received")]),a("div",{staticClass:"py-1 font-weight-bold"},[t._v("3")])]),a("v-flex",{attrs:{xs4:""}},[a("div",{staticClass:"grey--text text--darken-1"},[t._v("Lifetime spent")]),a("div",{staticClass:"py-1 font-weight-bold"},[t._v("$143.33")]),a("div",{staticClass:"grey--text text--darken-1"},[t._v("2 shipments")])])],1)],1)],1),a("v-data-table",{staticClass:"elevation-1",attrs:{headers:t.headers,items:t.desserts,pagination:t.pagination,"total-items":t.totalDesserts,"rows-per-page-items":[10,25,50,100],loading:t.loading},on:{"update:pagination":function(e){t.pagination=e}},scopedSlots:t._u([{key:"items",fn:function(e){return[a("td",[t._v(t._s(e.item.package))]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.receivedAt))]),a("td",{staticClass:"text-xs-left"},[t._v("\n "+t._s(e.item.sizeLength)+"\n "),a("span",{staticClass:"caption"},[t._v("x")]),t._v("\n "+t._s(e.item.sizeWidth)+"\n "),a("span",{staticClass:"caption"},[t._v("x")]),t._v("\n "+t._s(e.item.sizeHeight)+" cm\n ")]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.weightGrams))]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.location))]),a("td",{staticClass:"text-xs-left"},[a("v-chip",{attrs:{color:t.IsFulfilled(e.item.status)?"":"yellow lighten-3"}},[t._v(t._s(e.item.status))])],1),a("td",{staticClass:"text-xs-right"},[t._v(t._s(e.item.total))])]}}])})],1),a("v-flex",{attrs:{"pl-4":"",xs4:""}},[a("v-card",{staticClass:"pa-3 mb-4"},[a("v-card-title",{attrs:{"primary-title":""}},[a("div",{staticClass:"subheading mb-2 font-weight-bold"},[t._v("Contact")]),a("a",{staticStyle:{"text-decoration":"none"},attrs:{href:"mailto:matthew.perry@gmai.com"}},[t._v("matthew.perry@gmail.com")]),a("div",[t._v("+1-512-555-1853")])]),a("v-card-text",[a("v-divider",{staticClass:"my-3"}),a("div",{staticClass:"address"},[a("div",{staticClass:"mb-3 grey--text text--darken-2 font-weight-bold"},[t._v("PRIMARY ADDRESS")]),a("div",[t._v("MATTHEW PERRY")]),a("div",[t._v("1853 GUN POINT #357")]),a("div",[t._v("SAN DIEGO, CA 91789")]),a("div",[t._v("UNITED STATES")]),a("div",{staticClass:"mt-3"},[a("a",{staticClass:"text-xs-right",staticStyle:{"text-decoration":"none"},attrs:{href:"#"}},[t._v("View all addresses")])])]),a("v-divider",{staticClass:"my-3"}),a("v-icon",[t._v("face")]),a("v-icon",[t._v("favorite_border")]),a("div",[t._v("(facebook, twitter icons missing)")])],1)],1),a("v-card",{staticClass:"pa-3 mb-4",attrs:{color:"grey lighten-4"}},[a("v-card-title",{attrs:{"primary-title":""}},[a("h3",{staticClass:"subheading mb-3 font-weight-bold"},[t._v("Tags")])]),a("v-combobox",{attrs:{items:t.items,label:"Add tags",chips:"",solo:"",multiple:""},scopedSlots:t._u([{key:"selection",fn:function(e){return[a("v-chip",{attrs:{selected:e.selected,close:""},on:{input:function(a){return t.remove(e.item)}}},[t._v("\n "+t._s(e.item)+"\n  \n ")])]}}]),model:{value:t.chips,callback:function(e){t.chips=e},expression:"chips"}})],1),a("v-card",{staticClass:"mb-4"},[a("v-card-title",{attrs:{"primary-title":""}},[a("h3",{staticClass:"pt-3 pl-3 subheading font-weight-bold"},[t._v("Applications")])]),a("v-list",[t._l(t.applications,function(e,s){return[a("v-list-tile",{key:e.createdAt,staticClass:"py-1",attrs:{ripple:""},on:{click:function(t){}}},[a("v-list-tile-content",[a("v-list-tile-title",[t._v(t._s(e.createdAt))]),a("v-list-tile-sub-title",[t._v("Reviewed: "+t._s(e.reviewedAt))])],1),a("v-list-tile-action",[a("v-chip",{attrs:{color:e.chipColor,"text-color":"white"}},[t._v(t._s(e.chipText))])],1)],1),s+1s?-1:0:as?1:0})),l>0&&(c=c.slice((o-1)*l,o*l)),setTimeout(function(){t.loading=!1,e({items:c,total:r})},1e3)})},getDesserts:function(){return[{package:"B648751",receivedAt:"Sept 3, 11:20",sizeLength:20,sizeWidth:20,sizeHeight:25,weightGrams:"291 grams",status:"Mailbox",total:"",location:"BC3A"},{package:"B648763",receivedAt:"Sept 3, 11:43",sizeLength:20,sizeWidth:30,sizeHeight:35,weightGrams:"430 grams",status:"Mailbox",total:"",location:"BD2B"},{package:"B558467",receivedAt:"Dec 22, 2018",sizeLength:20,sizeWidth:20,sizeHeight:35,weightGrams:"1,430 grams",status:"Fulfilled",total:"$123.45",location:""}]}}}),o=a("2877"),l=Object(o.a)(n,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"package-list v-content"},[a("div",{staticClass:"v-container fluid fill-height",staticStyle:{padding:"24px"}},[a("h1",{staticClass:"headline mb-4"},[t._v("Packages")]),a("div",{staticClass:"v-card v-card--flat"},[a("v-data-table",{staticClass:"elevation-1",attrs:{headers:t.headers,items:t.desserts,pagination:t.pagination,"total-items":t.totalDesserts,"rows-per-page-items":[10,25,50,100],loading:t.loading},on:{"update:pagination":function(e){t.pagination=e}},scopedSlots:t._u([{key:"items",fn:function(e){return[a("td",[t._v(t._s(e.item.package))]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.receivedAt))]),a("td",{staticClass:"text-xs-left"},[t._v("\n "+t._s(e.item.sizeLength)+"\n "),a("span",{staticClass:"caption"},[t._v("x")]),t._v("\n "+t._s(e.item.sizeWidth)+"\n "),a("span",{staticClass:"caption"},[t._v("x")]),t._v("\n "+t._s(e.item.sizeHeight)+" cm\n ")]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.weightGrams))]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.location))]),a("td",{staticClass:"text-xs-left"},[a("v-chip",{attrs:{color:t.IsFulfilled(e.item.status)?"":"yellow lighten-3"}},[t._v(t._s(e.item.status))])],1),a("td",{staticClass:"text-xs-right"},[t._v(t._s(e.item.total))])]}}])})],1)])])},[],!1,null,null,null);e.a=l.exports},ca65:function(t,e,a){"use strict";a.r(e),function(t){a("cadf"),a("551c"),a("f751"),a("097d");var e=a("7d14"),s=(a("cc29"),a("a026")),i=a("f774"),n=a("8336"),o=a("8860"),l=a("a722"),c=a("0e8f"),r=a("e0c7"),d=a("ce7e"),u=a("ba95"),v=a("5d23"),p=a("71d9"),f=a("549c"),m=a("a523"),g=a("132d"),h=a("40fe"),b=a("2677"),x=a("9910"),_=a("706c"),y=(a("da64"),a("9225")),C=a("c0d6"),w=a("ebad");s.default.component("v-navigation-drawer",i.a),s.default.component("v-btn",n.a),s.default.component("v-list",o.a),s.default.component("v-layout",l.a),s.default.component("v-flex",c.a),s.default.component("v-subheader",r.a),s.default.component("v-divider",d.a),s.default.component("v-list-tile",u.a),s.default.component("v-list-tile-content",v.a),s.default.component("v-toolbar",p.a),s.default.component("v-content",f.a),s.default.component("v-container",m.a),s.default.component("v-icon",g.a),s.default.component("v-list-tile-actio",h.a),s.default.component("v-list-tile-title",v.c),s.default.component("v-text-field",b.a),s.default.component("v-spacer",x.a),s.default.component("v-toolbar-side-icon",_.a),Object(e.storiesOf)("Layout",t).addDecorator(function(){return{template:''}}).add("default",function(){return{components:{Layout:w.a},template:"\n ",i18n:y.a,store:C.a}})}.call(this,a("dd40")(t))},cda3:function(t,e,a){"use strict";a("55dd");var s=a("795b"),i=a.n(s),n={data:function(){return{totalDesserts:0,desserts:[],loading:!0,pagination:{sortBy:"Date"},headers:[{text:"Request",value:"request"},{text:"Date",value:"createdAt"},{text:"Customer",value:"customerName"},{text:"Status",value:"status"}]}},watch:{pagination:{handler:function(){var t=this;this.getDataFromApi().then(function(e){t.desserts=e.items,t.totalDesserts=e.total})},deep:!0}},mounted:function(){var t=this;this.getDataFromApi().then(function(e){t.desserts=e.items,t.totalDesserts=e.total})},methods:{getDataFromApi:function(){var t=this;return this.loading=!0,new i.a(function(e,a){var s=t.pagination,i=s.sortBy,n=s.descending,o=s.page,l=s.rowsPerPage,c=t.getDesserts(),r=c.length;t.pagination.sortBy&&(c=c.sort(function(t,e){var a=t[i],s=e[i];return n?as?-1:0:as?1:0})),l>0&&(c=c.slice((o-1)*l,o*l)),setTimeout(function(){t.loading=!1,e({items:c,total:r})},1e3)})},getDesserts:function(){return[{request:"Consolidate 3 packages",createdAt:"Feb 3, 11:20",customerName:"Golshifteh Farahani",status:"New",chipColor:"yellow lighten-3"},{request:"Split package B648751",createdAt:"Feb 5, 8:13",customerName:"Hirohi Sugimoto",status:"New",chipColor:"yellow lighten-3"},{request:"Take photos of package B461514",createdAt:"Feb 7, 23:56",customerName:"Thavisa Watanasirisuk",status:"In progress",chipColor:"orange lighten-3"},{request:"Consolidate 3 packages",createdAt:"Feb 7, 13:05",customerName:"Ryo",status:"New",chipColor:"yellow lighten-3"},{request:"Split package B345144",createdAt:"Feb 1, 8:13",customerName:"Shinya Tsukamoto",status:"In progress",chipColor:"orange lighten-3"},{request:"Take photos of package B331478",createdAt:"Feb 3, 17:24",customerName:"David Cronenberg",status:"New",chipColor:"yellow lighten-3"}]}}},o=a("2877"),l=Object(o.a)(n,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"package-list v-content"},[a("div",{staticClass:"v-container fluid fill-height",staticStyle:{padding:"24px"}},[a("v-layout",{attrs:{row:"",wrap:""}},[a("v-flex",{attrs:{xs12:""}},[a("h1",{staticClass:"headline mb-4"},[t._v("Service Requests")]),a("div",{staticClass:"v-card v-card--flat"},[a("v-data-table",{staticClass:"elevation-1",attrs:{headers:t.headers,items:t.desserts,pagination:t.pagination,"total-items":t.totalDesserts,"rows-per-page-items":[10,25,50,100],loading:t.loading},on:{"update:pagination":function(e){t.pagination=e}},scopedSlots:t._u([{key:"items",fn:function(e){return[a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.request))]),a("td",{staticClass:"text-xs-left"},[t._v("\n "+t._s(e.item.createdAt)+"\n "),a("div",{staticClass:"grey--text text--darken-2"},[t._v("2 days ago")])]),a("td",{staticClass:"text-xs-left"},[t._v(t._s(e.item.customerName))]),a("td",{staticClass:"text-xs-left"},[a("v-chip",{attrs:{color:e.item.chipColor}},[t._v(t._s(e.item.status))])],1)]}}])})],1)])],1)],1)])},[],!1,null,null,null);e.a=l.exports},d691:function(t,e,a){},ebad:function(t,e,a){"use strict";var s={data:function(){return{drawer:null,items:[{icon:"dashboard",text:"Dashboard"},{icon:"view_comfy",text:"Packages"},{icon:"person",text:"Customers"},{icon:"check_circle",text:"Applications"},{icon:"move_to_inbox",text:"Requests"},{icon:"insert_chart",text:"Analytics"},{divider:!0},{icon:"person_add",text:"Staff"}]}},props:{source:String}},i=(a("2b03"),a("2877")),n=Object(i.a)(s,function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"layout"},[a("v-navigation-drawer",{attrs:{fixed:"",clipped:"",app:""},model:{value:t.drawer,callback:function(e){t.drawer=e},expression:"drawer"}},[a("v-list",{attrs:{dense:""}},[t._l(t.items,function(e,s){return[e.heading?a("v-layout",{key:s,attrs:{row:"","align-center":""}},[a("v-flex",{attrs:{xs6:""}},[e.heading?a("v-subheader",[t._v(t._s(e.heading))]):t._e()],1),a("v-flex",{staticClass:"text-xs-right",attrs:{xs6:""}},[a("v-btn",{attrs:{small:"",flat:""}},[t._v("edit")])],1)],1):e.divider?a("v-divider",{key:s,staticClass:"my-3",attrs:{dark:""}}):a("v-list-tile",{key:s,on:{click:function(t){}}},[a("v-list-tile-action",[a("v-icon",[t._v(t._s(e.icon))])],1),a("v-list-tile-content",[a("v-list-tile-title",{staticClass:"grey--text"},[t._v(t._s(e.text))])],1)],1)]})],2)],1),a("v-toolbar",{attrs:{color:"blue-grey",app:"",absolute:"","clipped-left":""}},[a("v-toolbar-side-icon",{on:{click:function(e){t.drawer=!t.drawer}}}),a("span",{staticClass:"title ml-3 mr-5"},[t._v("\n Blackship \n "),a("span",{staticClass:"font-weight-light"},[t._v("Admin")])]),a("v-text-field",{attrs:{"solo-inverted":"",flat:"","hide-details":"",label:"Search","prepend-inner-icon":"search"}}),a("v-spacer")],1),a("v-content",[a("v-container",{staticClass:"grey lighten-4",attrs:{fluid:"","fill-height":""}},[a("v-layout",{attrs:{"justify-center":"","align-center":""}},[a("v-flex",{attrs:{shrink:""}},[a("v-tooltip",{attrs:{right:""}},[a("v-btn",{attrs:{slot:"activator",href:t.source,icon:"",large:"",target:"_blank"},slot:"activator"},[a("v-icon",{attrs:{large:""}},[t._v("code")])],1),a("span",[t._v("Source")])],1)],1)],1)],1)],1)],1)},[],!1,null,null,null);e.a=n.exports},edd4:function(t){t.exports={name:"Name",pet:"Pet",pets:{dog:"Dog",cat:"Cat"},gender:"Gender",genders:{female:"Female",male:"Male"},size:"Size",sizes:{small:"Small",medium:"Medium",large:"Large"},age:"Age",ages:{kitten:"Kitten",puppy:"Puppy",young:"Young",adult:"Adult",senior:"Senior"},breed:"Breed",breeds:{},hair:"Hair",hairs:{short:"Short",medium:"Medium",long:"Long"}}},f330:function(t,e,a){var s={"./Applications.stories.js":"8a38","./Customer.stories.js":"8072","./Customers.stories.js":"0de0","./Grid.stories.js":"06b6","./GridItem.stories.js":"ac5a","./Layout.stories.js":"ca65","./Packages.stories.js":"9a1d","./PetForm.stories.js":"0b8a","./PetInfo.stories.js":"7546","./ServiceRequests.stories.js":"02a6","./index.stories.js":"f648"};function i(t){var e=n(t);return a(e)}function n(t){var e=s[t];if(!(e+1)){var a=new Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}return e}i.keys=function(){return Object.keys(s)},i.resolve=n,t.exports=i,i.id="f330"},f648:function(t,e){},f693:function(t){t.exports={name:"Name Fr",pet:"Pet",pets:{dog:"Dog",cat:"Cat"},gender:"Gender FR",genders:{female:"Female",male:"Male"},size:"Size",sizes:{small:"Small",medium:"Medium",large:"Large"},age:"Age",ages:{kitten:"Kitten",puppy:"Puppy",young:"Young",adult:"Adult",senior:"Senior"},breed:"Breed",breeds:{},hair:"Hair",hairs:{short:"Short",medium:"Medium",long:"Long"}}}},[[0,2,4]]]); 2 | //# sourceMappingURL=iframe.34c71e5b36f6a1f85e3d.bundle.js.map --------------------------------------------------------------------------------