├── .editorconfig ├── .gitignore ├── .storybook ├── addons.js └── config.js ├── README.md ├── example ├── favicon.ico ├── iframe.html ├── index.html └── static │ ├── 0.86d1d97820c3446ec20c.bundle.js │ ├── 1.d8540f6b0588ad763d2c.bundle.js │ ├── manager.700efcb74783121b4775.bundle.js │ ├── media │ ├── MaterialIcons-Regular.012cf6a1.woff │ ├── Roboto-Bold.ad140ff0.woff │ ├── Roboto-Light.37fbbbad.woff │ ├── Roboto-Medium.303ded64.woff │ ├── Roboto-Regular.081b11eb.woff │ └── Roboto-Thin.90d3804f.woff │ └── preview.fa55ca86fde5affa0001.bundle.js ├── package.json ├── src ├── App.vue ├── assets │ ├── quasar-logo-full.svg │ └── style.css ├── stories │ ├── Error404.vue │ ├── Welcome.vue │ └── index.js └── themes │ ├── app.ios.styl │ ├── app.mat.styl │ ├── app.variables.styl │ └── quasar.variables.styl └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = false 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules/ 4 | dist/ 5 | npm-debug.log* 6 | cordova/platforms 7 | cordova/plugins 8 | .out 9 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/vue'; 2 | 3 | import Vue from 'vue'; 4 | import Vuex from 'vuex'; 5 | import Quasar from 'quasar-framework'; 6 | 7 | 8 | import '../src/assets/style.css'; 9 | import 'quasar-extras/material-icons'; 10 | import 'quasar-framework/dist/quasar.mat.css'; 11 | import 'quasar-extras/roboto-font'; 12 | 13 | // helper for quasar start 14 | const qAppEl = document.createElement('div'); 15 | 16 | qAppEl.setAttribute('id', 'q-app'); 17 | document.getElementsByTagName('body')[0].appendChild(qAppEl); 18 | 19 | Vue.use(Vuex); 20 | Vue.use(Quasar); 21 | 22 | Quasar.start(() => { 23 | new Vue({ 24 | el: '#q-app', 25 | render: h => h(require('../src/App.vue').default) 26 | }); 27 | }); 28 | 29 | function loadStories() { 30 | require('../src/stories'); 31 | } 32 | 33 | configure(loadStories, module); 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Quasar Storybook 2 | 3 | Storybook template to use with [Quasar Framework](https://github.com/quasarframework/quasar)! 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # Clone the project 9 | $ git clone https://github.com/imdanielpiva/vue-quasar-storybook.git 10 | 11 | # Enter the project folder 12 | $ cd vue-quasar-storybook 13 | 14 | # Install dependencies 15 | $ npm install 16 | 17 | # Storybook will start from 9001 to up 18 | $ npm run storybook 19 | -------------------------------------------------------------------------------- /example/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/favicon.ico -------------------------------------------------------------------------------- /example/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | Storybook 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Storybook 9 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /example/static/0.86d1d97820c3446ec20c.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],{912:function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0});var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Welcome_vue__=__webpack_require__(914),__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_154cf6b5_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Welcome_vue__=__webpack_require__(920);var __vue_styles__=function injectStyle(ssrContext){__webpack_require__(918)},Component=__webpack_require__(205)(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Welcome_vue__.a,__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_154cf6b5_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Welcome_vue__.a,!1,__vue_styles__,null,null);__webpack_exports__.default=Component.exports},914:function(module,__webpack_exports__,__webpack_require__){"use strict";var __WEBPACK_IMPORTED_MODULE_0_quasar_framework__=__webpack_require__(408);__webpack_exports__.a={name:"index",components:{QItemMain:__WEBPACK_IMPORTED_MODULE_0_quasar_framework__.c},data:()=>({xuxa:"xuxa"}),computed:{computed:()=>"fifa 2017"},methods:{},mounted(){console.log("HI, THERE! I'M HELLO.VUE SINGLE FILE COMPONENT")}}},918:function(module,exports,__webpack_require__){var content=__webpack_require__(919);"string"==typeof content&&(content=[[module.i,content,""]]),content.locals&&(module.exports=content.locals);__webpack_require__(204)("c0e2c780",content,!0)},919:function(module,exports,__webpack_require__){(module.exports=__webpack_require__(85)(!1)).push([module.i,"a{color:unset}#demo{padding:24px;border:1px solid #333}",""])},920:function(module,__webpack_exports__,__webpack_require__){"use strict";var esExports={render:function(){this.$createElement;this._self._c;return this._m(0)},staticRenderFns:[function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{staticClass:"layout-padding"},[_c("div",[_c("h3",{staticClass:"light-paragraph"},[_vm._v("Welcome to Quasar Storybook!")]),_vm._v(" "),_c("p",[_vm._v("This a simple "),_c("a",{attrs:{target:"_blank",href:"http://quasar-framework.org/"}},[_vm._v("quasar-framework")]),_vm._v(" storybook template! You can use any quasar component to build your own components, then tell your story!")]),_vm._v(" "),_c("h6",[_vm._v("Get it now, just run the following code:")]),_vm._v(" "),_c("pre",[_vm._v(" $ git clone https://github.com/imdanielpiva/vue-quasar-storybook.git\n $ cd vue-quasar-storybook\n $ npm install\n $ npm run storybook\n ")]),_vm._v(" "),_c("p",{staticClass:"text-bold"},[_vm._v("It's easy to:")]),_vm._v(" "),_c("ul",[_c("li",[_vm._v("Create layouts with or without router")]),_vm._v(" "),_c("li",[_vm._v("Simply show your component use case")]),_vm._v(" "),_c("li",[_vm._v("Show your component docs")]),_vm._v(" "),_c("li",[_vm._v("Have hot-reload all set up")])])]),_vm._v(" "),_c("div",[_c("h4",{staticClass:"light-paragraph"},[_vm._v("Simple Demo with Router")]),_vm._v(" "),_c("div",{attrs:{id:"demo"}},[_c("h5",{staticClass:"text-primary"},[_vm._v("Hi, there! I'm Hello Single File Component.")])])]),_vm._v(" "),_c("div",[_c("h4",{staticClass:"light-paragraph"},[_vm._v("Introduction")]),_vm._v(" "),_c("p",[_vm._v("In order to use your components with this template, all you have to do is create your "),_c("span",{staticClass:"text-positive"},[_c("a",{attrs:{target:"_blank",href:"https://vuejs.org/v2/guide/single-file-components.html"}},[_vm._v("Vue Single File Component")])]),_vm._v("...")])])])}]};__webpack_exports__.a=esExports}}); -------------------------------------------------------------------------------- /example/static/1.d8540f6b0588ad763d2c.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{911:function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0});var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Error404_vue__=__webpack_require__(913),__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e9a8cd8a_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Error404_vue__=__webpack_require__(917);var __vue_styles__=function injectStyle(ssrContext){__webpack_require__(915)},Component=__webpack_require__(205)(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_Error404_vue__.a,__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e9a8cd8a_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_Error404_vue__.a,!1,__vue_styles__,null,null);__webpack_exports__.default=Component.exports},913:function(module,__webpack_exports__,__webpack_require__){"use strict";var __WEBPACK_IMPORTED_MODULE_0_quasar_framework__=__webpack_require__(408);__webpack_exports__.a={components:{QBtn:__WEBPACK_IMPORTED_MODULE_0_quasar_framework__.a,QIcon:__WEBPACK_IMPORTED_MODULE_0_quasar_framework__.b},data:()=>({canGoBack:window.history.length>1}),methods:{goBack(){window.history.go(-1)}}}},915:function(module,exports,__webpack_require__){var content=__webpack_require__(916);"string"==typeof content&&(content=[[module.i,content,""]]),content.locals&&(module.exports=content.locals);__webpack_require__(204)("df8372aa",content,!0)},916:function(module,exports,__webpack_require__){(module.exports=__webpack_require__(85)(!1)).push([module.i,".error-page .error-code{height:50vh;width:100%;padding-top:15vh;color:hsla(0,0%,100%,.2);overflow:hidden}@media (orientation:landscape){.error-page .error-code{font-size:30vw}}@media (orientation:portrait){.error-page .error-code{font-size:30vh}}.error-page .error-card{border-radius:2px;margin-top:-50px;width:80vw;max-width:600px;padding:25px}.error-page .error-card>i{font-size:5rem}",""])},917:function(module,__webpack_exports__,__webpack_require__){"use strict";var esExports={render:function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{staticClass:"error-page window-height window-width bg-light column items-center no-wrap"},[_c("div",{staticClass:"error-code bg-primary flex items-center content-center justify-center"},[_vm._v("\n 404\n ")]),_vm._v(" "),_c("div",[_c("div",{staticClass:"error-card shadow-4 bg-white column items-center justify-center no-wrap"},[_c("q-icon",{attrs:{name:"error_outline",color:"grey-5"}}),_vm._v(" "),_c("p",{staticClass:"caption text-center"},[_vm._v("Oops. Nothing here...")]),_vm._v(" "),_c("p",{staticClass:"text-center group"},[_vm.canGoBack?_c("q-btn",{attrs:{color:"primary",push:"",icon:"keyboard_arrow_left"},on:{click:_vm.goBack}},[_vm._v("\n Go back\n ")]):_vm._e(),_vm._v(" "),_c("q-btn",{attrs:{color:"primary",push:"","icon-right":"home"},on:{click:function($event){_vm.$router.replace("/")}}},[_vm._v("\n Go home\n ")])],1)],1)])])},staticRenderFns:[]};__webpack_exports__.a=esExports}}); -------------------------------------------------------------------------------- /example/static/media/MaterialIcons-Regular.012cf6a1.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/MaterialIcons-Regular.012cf6a1.woff -------------------------------------------------------------------------------- /example/static/media/Roboto-Bold.ad140ff0.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Bold.ad140ff0.woff -------------------------------------------------------------------------------- /example/static/media/Roboto-Light.37fbbbad.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Light.37fbbbad.woff -------------------------------------------------------------------------------- /example/static/media/Roboto-Medium.303ded64.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Medium.303ded64.woff -------------------------------------------------------------------------------- /example/static/media/Roboto-Regular.081b11eb.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Regular.081b11eb.woff -------------------------------------------------------------------------------- /example/static/media/Roboto-Thin.90d3804f.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imdanielpiva/vue-quasar-storybook/59b8bf14a27469a9a5ab9bd60b710a13e2bd2bf0/example/static/media/Roboto-Thin.90d3804f.woff -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-quasar-storybook", 3 | "productName": "Quasar Storybook Template", 4 | "version": "0.0.1", 5 | "private": false, 6 | "description": "Quasar Storybook Template", 7 | "author": "daniel piva ", 8 | "scripts": { 9 | "storybook": "start-storybook -p 9001 -c .storybook", 10 | "build": "build-storybook -c .storybook -o example" 11 | }, 12 | "dependencies": { 13 | "@storybook/vue": "^3.3.9", 14 | "babel-runtime": "^6.25.0", 15 | "quasar-extras": "0.x", 16 | "quasar-framework": "^0.14.4", 17 | "storybook-router": "^0.3.2", 18 | "vue": "^2.5.0", 19 | "vue-router": "^3.0.1", 20 | "vuex": "^3.0.1" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^6.4.0", 24 | "babel-core": "^6.0.0", 25 | "babel-eslint": "^7.0.0", 26 | "babel-loader": "^7.1.2", 27 | "babel-plugin-transform-runtime": "^6.0.0", 28 | "babel-preset-es2015": "^6.0.0", 29 | "babel-preset-stage-2": "^6.0.0", 30 | "colors": "^1.1.2", 31 | "connect-history-api-fallback": "^1.1.0", 32 | "css-loader": "^0.28.7", 33 | "es6-promise": "^4.1.1", 34 | "eslint": "^4.8.0", 35 | "eslint-config-standard": "^10.2.1", 36 | "eslint-friendly-formatter": "^3.0.0", 37 | "eslint-loader": "^1.9.0", 38 | "eslint-plugin-html": "^3.2.2", 39 | "eslint-plugin-import": "^2.7.0", 40 | "eslint-plugin-node": "^5.2.0", 41 | "eslint-plugin-promise": "^3.5.0", 42 | "eslint-plugin-standard": "^3.0.1", 43 | "eventsource-polyfill": "^0.9.6", 44 | "express": "^4.16.1", 45 | "extract-text-webpack-plugin": "^3.0.0", 46 | "file-loader": "^0.11.1", 47 | "friendly-errors-webpack-plugin": "^1.1.3", 48 | "glob": "^7.1.2", 49 | "html-webpack-plugin": "^2.30.1", 50 | "http-proxy-middleware": "^0.17.0", 51 | "json-loader": "^0.5.7", 52 | "opn": "^5.0.0", 53 | "optimize-css-assets-webpack-plugin": "^3.2.0", 54 | "postcss-loader": "^1.0.0", 55 | "progress-bar-webpack-plugin": "^1.10.0", 56 | "purify-css": "^1.2.6", 57 | "shelljs": "^0.7.0", 58 | "stylus": "^0.54.5", 59 | "stylus-loader": "^3.0.1", 60 | "url-loader": "^0.5.7", 61 | "vue-loader": "^13.0.5", 62 | "vue-style-loader": "^3.0.3", 63 | "vue-template-compiler": "^2.5.0", 64 | "webpack": "^3.6.0", 65 | "webpack-dev-middleware": "^1.12.0", 66 | "webpack-hot-middleware": "^2.19.1", 67 | "webpack-merge": "^4.1.0" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/quasar-logo-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 63 | 66 | 69 | 75 | 79 | 83 | 87 | 91 | 95 | 99 | 103 | 104 | 105 | 106 | 107 | 113 | 118 | 126 | 133 | 142 | 151 | 160 | 169 | 178 | 187 | 188 | 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /src/assets/style.css: -------------------------------------------------------------------------------- 1 | .margin-12 { 2 | margin: 12px !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/stories/Error404.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 54 | 55 | 78 | -------------------------------------------------------------------------------- /src/stories/Welcome.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 61 | 62 | 72 | 73 | -------------------------------------------------------------------------------- /src/stories/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | import { storiesOf } from '@storybook/vue'; 4 | import StoryRouter from 'storybook-router'; 5 | 6 | import { QBtn } from 'quasar-framework'; 7 | 8 | storiesOf('Welcome', module) 9 | .addDecorator(StoryRouter({}, 10 | { 11 | initialEntry: '/', 12 | routes: [ 13 | { 14 | path: '/', 15 | name: 'Welcome', 16 | component: load('Welcome') 17 | } 18 | ] 19 | })) 20 | .add('Introduction', () => ({ 21 | template: '' 22 | })); 23 | 24 | function load (component) { 25 | return () => import(`./${component}.vue`) 26 | } 27 | -------------------------------------------------------------------------------- /src/themes/app.ios.styl: -------------------------------------------------------------------------------- 1 | // This file is included in the build if src/main.js imports it. 2 | // Otherwise the default iOS CSS file is bundled. 3 | // Check "DEFAULT / CUSTOM STYLE" in src/main.js 4 | 5 | // App Shared Variables 6 | // -------------------------------------------------- 7 | // Shared Stylus variables go in the app.variables.styl file 8 | @import 'app.variables' 9 | 10 | // Quasar iOS Design Stylus 11 | // -------------------------------------------------- 12 | // Custom App variables must be declared before importing Quasar. 13 | // Quasar will use its default values when a custom variable isn't provided. 14 | @import '~quasar-framework/dist/quasar.ios.styl' 15 | -------------------------------------------------------------------------------- /src/themes/app.mat.styl: -------------------------------------------------------------------------------- 1 | // This file is included in the build if src/main.js imports it. 2 | // Otherwise the default Material CSS file is bundled. 3 | // Check "DEFAULT / CUSTOM STYLE" in src/main.js 4 | 5 | // App Shared Variables 6 | // -------------------------------------------------- 7 | // Shared Stylus variables go in the app.variables.styl file 8 | @import 'app.variables' 9 | 10 | // Quasar Material Design Stylus 11 | // -------------------------------------------------- 12 | // Custom App variables must be declared before importing Quasar. 13 | // Quasar will use its default values when a custom variable isn't provided. 14 | @import '~quasar-framework/dist/quasar.mat.styl' 15 | -------------------------------------------------------------------------------- /src/themes/app.variables.styl: -------------------------------------------------------------------------------- 1 | // This file is included in the build if src/main.js imports 2 | // either app.mat.styl or app.ios.styl. 3 | // Check "DEFAULT / CUSTOM STYLE" in src/main.js 4 | 5 | // App Shared Variables 6 | // -------------------------------------------------- 7 | // To customize the look and feel of this app, you can override 8 | // the Stylus variables found in Quasar's source Stylus files. Setting 9 | // variables before Quasar's Stylus will use these variables rather than 10 | // Quasar's default Stylus variable values. Stylus variables specific 11 | // to the themes belong in either the app.ios.styl or app.mat.styl files. 12 | 13 | 14 | // App Shared Color Variables 15 | // -------------------------------------------------- 16 | // It's highly recommended to change the default colors 17 | // to match your app's branding. 18 | 19 | $primary = #027be3 20 | $secondary = #26A69A 21 | $tertiary = #555 22 | 23 | $neutral = #E0E1E2 24 | $positive = #21BA45 25 | $negative = #DB2828 26 | $info = #31CCEC 27 | $warning = #F2C037 28 | -------------------------------------------------------------------------------- /src/themes/quasar.variables.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Webpack alias "variables" points to this file. 3 | // So you can import it in your app's *.vue files 4 | // inside the 12 | 13 | 14 | // First we load app's Stylus variables 15 | @import 'app.variables' 16 | 17 | // Then we load Quasar Stylus variables. 18 | // Any variables defined in "app.variables.styl" 19 | // will override Quasar's ones. 20 | // 21 | // NOTICE that we only import Core Quasar Variables 22 | // like colors, media breakpoints, and so. 23 | // No component variable will be included. 24 | @import '~quasar/dist/core.variables' 25 | --------------------------------------------------------------------------------