├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ ├── build.yml │ └── npmpublish.yml ├── .gitignore ├── .storybook └── main.js ├── LICENSE ├── README.md ├── README └── vtb_demo.gif ├── docs ├── dist │ ├── bundle.56da037df6c5ef00329e.js │ ├── index.html │ ├── vendor.56da037df6c5ef00329e.js │ └── vendors.56da037df6c5ef00329e.js └── src │ ├── App.vue │ ├── components │ ├── Footer.vue │ ├── GithubLink.vue │ └── SideBar.vue │ ├── index.html │ ├── index.js │ ├── pages │ ├── AvailableButtons.md │ ├── Index.md │ ├── InstallForDev.md │ ├── QuickStart.md │ └── TastyBurgerButton.md │ └── routes.js ├── jest.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── rollup.config.js ├── src ├── components │ ├── BurgerButton.vue │ ├── PlainHamburger.vue │ ├── arrow-alt │ │ ├── ArrowAltHamburger.stories.js │ │ └── ArrowAltHamburger.vue │ ├── arrow-turn │ │ ├── ArrowTurnHamburger.stories.js │ │ └── ArrowTurnHamburger.vue │ ├── arrow │ │ ├── ArrowHamburger.stories.js │ │ └── ArrowHamburger.vue │ ├── boring │ │ ├── BoringHamburger.stories.js │ │ └── BoringHamburger.vue │ ├── collapse │ │ ├── CollapseHamburger.stories.js │ │ └── CollapseHamburger.vue │ ├── elastic │ │ ├── ElasticHamburger.stories.js │ │ └── ElasticHamburger.vue │ ├── emphatic │ │ ├── EmphaticHamburger.stories.js │ │ └── EmphaticHamburger.vue │ ├── minus │ │ ├── MinusHamburger.stories.js │ │ └── MinusHamburger.vue │ ├── slider │ │ ├── SliderHamburger.stories.js │ │ └── SliderHamburger.vue │ ├── spin │ │ ├── SpinHamburger.stories.js │ │ └── SpinHamburger.vue │ ├── spring │ │ ├── SpringHamburger.stories.js │ │ └── SpringHamburger.vue │ ├── squeeze │ │ ├── SqueezeHamburger.stories.js │ │ └── SqueezeHamburger.vue │ ├── stand │ │ ├── StandHamburger.stories.js │ │ └── StandHamburger.vue │ ├── vortex │ │ ├── VortexHamburger.stories.js │ │ └── VortexHamburger.vue │ ├── x3d │ │ ├── X3DHamburger.stories.js │ │ └── X3DHamburger.vue │ ├── xy3d │ │ ├── XY3DHamburger.stories.js │ │ └── XY3DHamburger.vue │ └── y3d │ │ ├── Y3DHamburger.stories.js │ │ └── Y3DHamburger.vue ├── index.js ├── install.js └── mixins │ └── props-mixin.js ├── test └── unit │ ├── .eslintrc │ ├── index.js │ └── specs │ ├── BurgerButton.spec.js │ ├── PlainHamburger.spec.js │ └── __snapshots__ │ └── PlainHamburger.spec.js.snap └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }] 9 | ], 10 | "plugins": ["transform-vue-jsx", "@babel/plugin-transform-runtime"], 11 | "env": { 12 | "test": { 13 | "presets": [ 14 | ["@babel/preset-env", { 15 | "targets": { "node": 8 } 16 | }] 17 | ], 18 | "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs"] 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.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 = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint', 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | extends: [ 13 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 14 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 15 | 'plugin:vue/essential', 16 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 17 | 'standard' 18 | ], 19 | // required to lint *.vue files 20 | plugins: [ 21 | 'vue' 22 | ], 23 | // add your custom rules here 24 | rules: { 25 | // allow async-await 26 | 'generator-star-spacing': 'off', 27 | // allow debugger during development 28 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [12.x] 13 | 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - run: npm ci 21 | - run: npm test 22 | - run: npm run lint 23 | - run: npm run lint-docs 24 | - run: npm run build 25 | env: 26 | CI: true 27 | -------------------------------------------------------------------------------- /.github/workflows/npmpublish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | test: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v1 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | - run: npm ci 16 | - run: npm test 17 | 18 | publish-npm: 19 | needs: test 20 | runs-on: ubuntu-latest 21 | steps: 22 | - uses: actions/checkout@v1 23 | - uses: actions/setup-node@v1 24 | with: 25 | node-version: 12 26 | registry-url: https://registry.npmjs.org/ 27 | - run: npm ci 28 | - run: npm run build 29 | - run: npm publish 30 | env: 31 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /dist/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | /test/unit/coverage/ 7 | /test/e2e/reports/ 8 | selenium-debug.log 9 | 10 | # Editor directories and files 11 | .idea 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | 17 | # Logs 18 | logs 19 | *.log 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | 24 | # Runtime data 25 | pids 26 | *.pid 27 | *.seed 28 | *.pid.lock 29 | 30 | # Directory for instrumented libs generated by jscoverage/JSCover 31 | lib-cov 32 | 33 | # Coverage directory used by tools like istanbul 34 | coverage 35 | 36 | # nyc test coverage 37 | .nyc_output 38 | 39 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 40 | .grunt 41 | 42 | # Bower dependency directory (https://bower.io/) 43 | bower_components 44 | 45 | # node-waf configuration 46 | .lock-wscript 47 | 48 | # Compiled binary addons (https://nodejs.org/api/addons.html) 49 | build/Release 50 | 51 | # Dependency directories 52 | node_modules/ 53 | jspm_packages/ 54 | 55 | # TypeScript v1 declaration files 56 | typings/ 57 | 58 | # Optional npm cache directory 59 | .npm 60 | 61 | # Optional eslint cache 62 | .eslintcache 63 | 64 | # Optional REPL history 65 | .node_repl_history 66 | 67 | # Output of 'npm pack' 68 | *.tgz 69 | 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | 73 | # dotenv environment variables file 74 | .env 75 | 76 | # next.js build output 77 | .next 78 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../src/**/*.stories.[tj]s'], 3 | 4 | webpackFinal: async (config) => { 5 | config.resolve.extensions.push(".vue"); 6 | 7 | // Style 8 | config.module.rules.push({ 9 | test: /\.s[ac]ss$/i, 10 | use: [ 11 | 'style-loader', 12 | { 13 | loader: 'css-loader', 14 | options: { 15 | sourceMap: true, 16 | }, 17 | }, 18 | { 19 | loader: 'sass-loader', 20 | options: { 21 | sourceMap: true, 22 | }, 23 | }, 24 | ] 25 | }); 26 | 27 | return config; 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-present Fabrizio Meinero 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Tasty Burgers 2 | 3 |

4 | build 5 | 6 | npm 7 | 8 |

9 | 10 | > An easy to use hamburger buttons library for VueJS. Inspired by [AMBURGERS](https://jonsuh.com/hamburgers/) 11 | 12 | ![Basic Screenshot](https://raw.githubusercontent.com/imfaber/vue-tasty-burgers/master/README/vtb_demo.gif) 13 | 14 | ## Documentation and Live demo 15 | 16 | - [Library Documentation](https://imfaber.github.io/vue-tasty-burgers/dist/) 17 | 18 | ## Build Setup 19 | 20 | ``` bash 21 | # install dependencies 22 | npm install 23 | 24 | # serve doc app with hot reload at localhost:8080 25 | npm run start 26 | 27 | # build for production with minification 28 | npm run build 29 | ``` 30 | 31 | ## How this project works 32 | 33 | The project makes use of both [Rollup](https://rollupjs.org/) and [WebPack 2](https://webpack.github.io/). Although they are two different bundlers and producting separate ouputs, they can coexist in the same project, sharing the following: 34 | 35 | - Package definition [package.json](package.json) 36 | - Babel configuration [.babelrc](.babelrc) 37 | - PostCSS configuration [postcss.config.js](postcss.config.js) 38 | - Source codes for library components [src](src) 39 | 40 | In addition, Rollup uses the following: 41 | 42 | - Rollup configuration [rollup.config.js](rollup.config.js) 43 | 44 | And Webpack uses the following: 45 | 46 | - Webpack configuration [webpack.config.js](webpack.config.js) 47 | - Source codes for documentation apps [docs/src](docs/src) 48 | 49 | As [package.json](package.json) is shared by both library and document app, their dependencies are shared. To make the dependencies clean for the library, if an external library is only used by the documentation app, add them as `devDependencies` instead of `dependencies` or `peerDependencies`. 50 | 51 | ## License 52 | 53 | This project is licensed under the [MIT](LICENSE) License. 54 | -------------------------------------------------------------------------------- /README/vtb_demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imfaber/vue-tasty-burgers/44ef0926015735eba7d5532d1248b869775c06be/README/vtb_demo.gif -------------------------------------------------------------------------------- /docs/dist/bundle.56da037df6c5ef00329e.js: -------------------------------------------------------------------------------- 1 | !function(t){function r(r){for(var a,n,o=r[0],b=r[1],c=r[2],l=0,m=[];lh1[data-v-a0f8813c]{text-align:left;font-weight:700;color:#42b983;margin:15px 0 20px 30px}",""])},function(t,r,e){"use strict";var a=e(23);e.n(a).a},function(t,r,e){(t.exports=e(1)(!1)).push([t.i,"body{overflow-y:auto!important}.content{padding-top:20px}.markdown-section table{display:table}h4{margin:1rem 0}.hamburger{padding:15px!important}.demo{border:0;display:flex;flex-direction:column}.demo div{text-align:center;padding:20px;margin:0}@media only screen and (min-width:600px){.demo{flex-direction:row;flex-wrap:wrap}.demo div{flex:0 0 50%}}@media only screen and (min-width:900px){.demo div{flex:0 0 33.3%}}@media only screen and (min-width:1160px){.demo div{flex:0 0 25%}}",""])},,,,,function(t,r,e){"use strict";e.r(r);var a={};e.r(a),e.d(a,"install",(function(){return G})),e.d(a,"TastyBurgerButton",(function(){return U}));var s=e(3),i=e(25),n={props:{type:{type:String,default:"boring"},active:{type:Boolean,default:!1},color:{type:String,default:"#000000"},activeColor:{type:String,default:null},size:{type:String,validator:function(t){return-1!==["xs","s","m","l","xl"].indexOf(t)},default:"m"},reversed:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0}}},o={inheritAttrs:!1,mixins:[n],data:function(){return{isActive:!1,buttonStyle:null}},methods:{toggle:function(){this.isActive=!this.isActive,this.$emit("toggle",this.isActive)}},watch:{active:function(t,r){t!==r&&this.toggle()}},computed:{layerStyle:function(){return{"background-color":this.isActive?this.activeColor:this.color}},hamburgerModifierClass:function(){return"hamburger--".concat(this.type).concat(this.reversed?"-r":"").replace(/-r-r$/,"-r")}},created:function(){switch(this.isActive=this.active,this.size){case"xs":this.buttonStyle={transform:"scale(0.5)",width:"20px",height:"13px"};break;case"s":this.buttonStyle={transform:"scale(0.7)",width:"29px",height:"18px"};break;case"m":this.buttonStyle={transform:"scale(0.9)",width:"36px",height:"23px"};break;case"l":this.buttonStyle={transform:"scale(1.1)",width:"44px",height:"27px"};break;case"xl":this.buttonStyle={transform:"scale(1.3)",width:"52px",height:"32px"}}}},b=(e(27),e(0)),c=Object(b.a)(o,(function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("button",{staticClass:"hamburger",class:[t.hamburgerModifierClass,{"hamburger--active":t.isActive,"hamburger--rounded":t.rounded}],attrs:{type:"button"},on:{click:function(r){return r.preventDefault(),t.toggle(r)}}},[e("span",{staticClass:"hamburger-box",style:t.buttonStyle},[e("span",{staticClass:"hamburger-inner",style:t.layerStyle},[e("span",{staticClass:"hamburger-inner__before",style:t.layerStyle}),t._v(" "),e("span",{staticClass:"hamburger-inner__after",style:t.layerStyle})])])])}),[],!1,null,"470b845e",null).exports,u={name:"ArrowAltHamburger",components:{PlainHamburger:c},inheritAttrs:!1},l=(e(29),Object(b.a)(u,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),m={components:{PlainHamburger:c},inheritAttrs:!1},g=(e(32),Object(b.a)(m,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),p={components:{PlainHamburger:c},inheritAttrs:!1},h=(e(34),Object(b.a)(p,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),f={components:{PlainHamburger:c},inheritAttrs:!1},_=(e(36),Object(b.a)(f,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),v={components:{PlainHamburger:c},inheritAttrs:!1},d=(e(38),Object(b.a)(v,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),y={components:{PlainHamburger:c},inheritAttrs:!1},x=(e(40),Object(b.a)(y,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),z={components:{PlainHamburger:c},inheritAttrs:!1},w=(e(42),Object(b.a)(z,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),k={components:{PlainHamburger:c},inheritAttrs:!1},S=(e(44),Object(b.a)(k,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),j={components:{PlainHamburger:c},inheritAttrs:!1},$=(e(46),Object(b.a)(j,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),E={components:{PlainHamburger:c},inheritAttrs:!1},P=(e(48),Object(b.a)(E,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),O={components:{PlainHamburger:c},inheritAttrs:!1},H=(e(50),Object(b.a)(O,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),C={components:{PlainHamburger:c},inheritAttrs:!1},A=(e(52),Object(b.a)(C,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),X={components:{PlainHamburger:c},inheritAttrs:!1},B=(e(54),Object(b.a)(X,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),T={components:{PlainHamburger:c},inheritAttrs:!1},I=(e(56),Object(b.a)(T,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),q={components:{PlainHamburger:c},inheritAttrs:!1},M=(e(58),Object(b.a)(q,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),D={name:"Y3DHamburger",components:{PlainHamburger:c},inheritAttrs:!1},V=(e(60),Object(b.a)(D,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports),Y={name:"ArrowAltHamburger",components:{PlainHamburger:c},inheritAttrs:!1},L=(e(62),{arrowalt:l,arrow:g,arrowturn:h,boring:_,collapse:d,elastic:x,emphatic:w,minus:S,slider:$,spin:P,spring:H,squeeze:A,stand:B,vortex:I,x3d:M,y3d:V,xy3d:Object(b.a)(Y,(function(){var t=this.$createElement;return(this._self._c||t)("PlainHamburger",this._g(this._b({},"PlainHamburger",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports}),R={components:L,mixins:[n],data:function(){return{components:L,typeMap:{"3dx":"x3d","3dy":"y3d","3dxy":"xy3d"}}},computed:{computedType:function(){var t="-r"===this.type.slice(-2)?this.type.substring(0,this.type.length-2):this.type;return t in this.typeMap?this.typeMap[t]:t}}},U=Object(b.a)(R,(function(){var t=this.$createElement;return(this._self._c||t)(this.components[this.computedType],this._g(this._b({tag:"component"},"component",Object.assign({},this.$props,this.$attrs),!1),this.$listeners))}),[],!1,null,null,null).exports;function G(t,r){t.component("TastyBurgerButton",U);var e="";r&&"prefix"in r&&(e=(e=(e=r.prefix).charAt(0).toUpperCase()+e.slice(1)).replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()})).replace(/-/g,""));var a="".concat(e,"TastyBurgerButton");t.component(a,U)}"undefined"!=typeof window&&window.Vue&&window.Vue.use({install:G});var F={data:function(){return{sections:[{pages:[{to:"quick-start",title:"Quick start"},{to:"install-for-dev",title:"Install for development"},{to:"tasty-burger-button",title:"How to use it"},{to:"available-burgers",title:"Available burger buttons"}]}]}}},J=(e(64),{data:function(){return{year:(new Date).getFullYear()}}}),N={data:function(){return{link:"https://github.com/imfaber/vue-tasty-burgers",label:"View source on Github"}}},Q={components:{"app-sidebar":Object(b.a)(F,(function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("aside",{staticClass:"sidebar"},[e("h1",[e("a",{attrs:{href:""}}),t._v(" "),e("router-link",{attrs:{to:"index"}},[e("a",{staticClass:"app-name-link",attrs:{"data-nosearch":""}},[t._v("Vue Tasty Burgers")])])],1),t._v(" "),e("div",{staticClass:"sidebar-nav"},[e("ul",t._l(t.sections,(function(r){return e("li",{key:r.title},[e("p",[t._v(t._s(r.title))]),t._v(" "),e("ul",t._l(r.pages,(function(r){return e("router-link",{key:r.title,attrs:{tag:"li","active-class":"active",to:r.to}},[e("a",[t._v(t._s(r.title))])])})),1)])})),0)])])}),[],!1,null,"a0f8813c",null).exports,"app-footer":Object(b.a)(J,(function(){var t=this.$createElement,r=this._self._c||t;return r("footer",[r("hr"),this._v(" "),r("span",[this._v("©2018-"+this._s(this.year)+" "),r("a",{attrs:{href:"https://imfaber.me",target:"_blank"}},[this._v("Imfaber")])])])}),[],!1,null,null,null).exports,"app-github-link":Object(b.a)(N,(function(){var t=this.$createElement,r=this._self._c||t;return r("a",{staticClass:"github-corner",attrs:{href:this.link,"aria-label":this.label,target:"_blank"}},[r("svg",{staticStyle:{fill:"#42b983, color: rgb(255, 255, 255)",position:"absolute",top:"0px",border:"0px",right:"0px"},attrs:{width:"80",height:"80",viewBox:"0 0 250 250","aria-hidden":"true"}},[r("path",{attrs:{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}}),r("path",{staticClass:"octo-arm",staticStyle:{"transform-origin":"130px 106px 0px"},attrs:{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"#fff"}}),r("path",{staticClass:"octo-body",attrs:{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"#fff"}})])])}),[],!1,null,null,null).exports}},Z=(e(66),Object(b.a)(Q,(function(){var t=this.$createElement,r=this._self._c||t;return r("main",[r("app-sidebar"),this._v(" "),r("section",{staticClass:"content"},[r("article",{staticClass:"markdown-section"},[r("router-view"),this._v(" "),r("app-footer")],1)]),this._v(" "),r("app-github-link")],1)}),[],!1,null,null,null).exports),W={components:{}},K=Object(b.a)(W,(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("section",[e("h1",[t._v("Quick Start")]),t._v(" "),e("h2",[t._v("Install")]),t._v(" "),e("p",[t._v("Install with npm:")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[t._v("npm install vue-tasty-burgers\n")])]),t._v(" "),e("h2",[t._v("Use the library (Global Registration)")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// main.js")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("import")]),t._v(" Vue "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'vue'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("import")]),t._v(" * "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("as")]),t._v(" TastyBurgerButton "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'vue-tasty-burgers'")]),t._v(";\n\nVue.use(TastyBurgerButton);\n")])]),t._v(" "),e("h3",[t._v("No Conflict")]),t._v(" "),e("p",[t._v("The component will be installed with no prefix by default, you can add any prefix\nto them to avoid conflicts with other libs if needed.")]),t._v(" "),e("p",[t._v("For example:")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-javascript"}},[t._v("Vue.use(TastyBurgerButton, { "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("prefix")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'abc'")]),t._v(" });\n")])]),t._v(" "),e("p",[t._v("Results in:")]),t._v(" "),e("ul",[e("li",[t._v("Components such as "),e("code",{pre:!0},[t._v("")]),t._v(" becomes "),e("code",{pre:!0},[t._v("")])])]),t._v(" "),e("h2",[t._v("Use the library (Local Registration)")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[t._v("// your-component.js\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("tasty-burger-button")]),t._v(" />")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),e("span",{pre:!0,attrs:{class:"javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("import")]),t._v(" { TastyBurgerButton } "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'vue-tasty-burgers'")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("components")]),t._v(": {\n "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'tasty-burger-button'")]),t._v(": TastyBurgerButton\n }\n}\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n")])])])}],!1,null,null,null).exports,tt={components:{}},rt=Object(b.a)(tt,(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("section",[e("h1",[t._v("Install for local development")]),t._v(" "),e("p",[t._v("Clone the Git repository of this library and link it.")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[t._v("git "),e("span",{pre:!0,attrs:{class:"hljs-built_in"}},[t._v("clone")]),t._v(" git@github.com:imfaber/vue-tasty-burgers.git\n"),e("span",{pre:!0,attrs:{class:"hljs-built_in"}},[t._v("cd")]),t._v(" vue-tasty-burgers\nnpm install\nnpm run build\nnpm link\n")])]),t._v(" "),e("p",[t._v("In your client project root folder:")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[t._v("npm link vue-tasty-burgers\n")])])])}],!1,null,null,null).exports,et={components:{}},at=Object(b.a)(et,(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("section",[e("h1",[t._v("How to use the component")]),t._v(" "),e("h3",[t._v("Example")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("tasty-burger-button")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":type")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"buttonType"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":active")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"isActive"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":size")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"size"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":color")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"color"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":active-color")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"activeColor"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("v-on:toggle")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"onToggle"')]),t._v(" />")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),e("span",{pre:!0,attrs:{class:"javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data () {\n "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("buttonType")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'elastic'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("isActive")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("size")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'xl'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("color")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'green'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("activeColor")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'orange'")]),t._v("\n }\n },\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n onToggle (active) {\n "),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// Toggle menu")]),t._v("\n }\n }\n}\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n")])]),t._v(" "),e("h3",[t._v("Props")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("Name")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("Type")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("Default")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("Required")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("Description")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[e("code",{pre:!0},[t._v("type")])]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("boring")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("The type of burger button")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[e("code",{pre:!0},[t._v("active")])]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Boolean")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Determines if the button is in the active state")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[e("code",{pre:!0},[t._v("size")])]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("m")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("The size of the button (xs, s, m, l, xl)")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[e("code",{pre:!0},[t._v("color")])]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("#00000")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("The color of the button in its default state")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[e("code",{pre:!0},[t._v("activeColor")])]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("#00000")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("The color of the button in its active state")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[e("code",{pre:!0},[t._v("reversed")])]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Boolean")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Reverse the animation of the button")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[e("code",{pre:!0},[t._v("rounded")])]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Boolean")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("true")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("false")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Whether to use rounded borders")])])])]),t._v(" "),e("h3",[t._v("Events")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("Name")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("Params")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("Description")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[e("code",{pre:!0},[t._v("toggle")])]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("active")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Fired after the button is clicked and its active state changed")])])])])])}],!1,null,null,null).exports,st={components:{}},it=Object(b.a)(st,(function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("section",[e("h1",[t._v("The available burgers")]),t._v(" "),e("p",[t._v("Here the full list of available buttons.")]),t._v(" "),e("table",[t._m(0),t._v(" "),e("tbody",[e("tr",[t._m(1),t._v(" "),t._m(2),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"3dx"}})],1)]),t._v(" "),e("tr",[t._m(3),t._v(" "),t._m(4),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"3dy"}})],1)]),t._v(" "),e("tr",[t._m(5),t._v(" "),t._m(6),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"3dxy"}})],1)]),t._v(" "),e("tr",[t._m(7),t._v(" "),t._m(8),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"arrow"}})],1)]),t._v(" "),e("tr",[t._m(9),t._v(" "),t._m(10),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"arrowalt"}})],1)]),t._v(" "),e("tr",[t._m(11),t._v(" "),t._m(12),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"arrowturn"}})],1)]),t._v(" "),e("tr",[t._m(13),t._v(" "),t._m(14),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"boring"}})],1)]),t._v(" "),e("tr",[t._m(15),t._v(" "),t._m(16),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"collapse"}})],1)]),t._v(" "),e("tr",[t._m(17),t._v(" "),t._m(18),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"elastic"}})],1)]),t._v(" "),e("tr",[t._m(19),t._v(" "),t._m(20),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"emphatic"}})],1)]),t._v(" "),e("tr",[t._m(21),t._v(" "),t._m(22),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"minus"}})],1)]),t._v(" "),e("tr",[t._m(23),t._v(" "),t._m(24),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"slider"}})],1)]),t._v(" "),e("tr",[t._m(25),t._v(" "),t._m(26),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"spin"}})],1)]),t._v(" "),e("tr",[t._m(27),t._v(" "),t._m(28),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"spring"}})],1)]),t._v(" "),e("tr",[t._m(29),t._v(" "),t._m(30),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"stand"}})],1)]),t._v(" "),e("tr",[t._m(31),t._v(" "),t._m(32),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"squeeze"}})],1)]),t._v(" "),e("tr",[t._m(33),t._v(" "),t._m(34),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("tasty-burger-button",{attrs:{type:"vortex"}})],1)])])])])}),[function(){var t=this.$createElement,r=this._self._c||t;return r("thead",[r("tr",[r("th",{staticStyle:{"text-align":"left"}},[this._v("Type")]),this._v(" "),r("th",{staticStyle:{"text-align":"left"}},[this._v("Usage example")]),this._v(" "),r("th",{staticStyle:{"text-align":"center"}},[this._v("Demo")])])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("3dx")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("3dy")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("3dxy")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("arrow")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("arrowalt")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("arrowturn")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("boring")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("collapse")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("elastic")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("emphatic")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("minus")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("slider")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("spin")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("spring")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("stand")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("squeeze")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v("vortex")])])},function(){var t=this.$createElement,r=this._self._c||t;return r("td",{staticStyle:{"text-align":"left"}},[r("code",{pre:!0},[this._v('')])])}],!1,null,null,null).exports,nt={components:{}},ot=[{path:"/index",component:Object(b.a)(nt,(function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("section",[e("h1",[t._v("Vue Tasty Burgers")]),t._v(" "),t._m(0),t._v(" "),e("h2",[t._v("Demo")]),t._v(" "),e("section",{staticClass:"demo"},[e("div",[e("h4",[t._v("Boring")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"boring"}})],1),t._v(" "),e("div",[e("h4",[t._v("Collapse")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"collapse"}})],1),t._v(" "),e("div",[e("h4",[t._v("Elastic")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"elastic"}})],1),t._v(" "),e("div",[e("h4",[t._v("Arrow")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"arrowalt"}})],1),t._v(" "),e("div",[e("h4",[t._v("Arrow 2")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"arrowturn"}})],1),t._v(" "),e("div",[e("h4",[t._v("Emphatic")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"emphatic"}})],1),t._v(" "),e("div",[e("h4",[t._v("Minus")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"minus"}})],1),t._v(" "),e("div",[e("h4",[t._v("Slider")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"slider"}})],1),t._v(" "),e("div",[e("h4",[t._v("Spin")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"spin"}})],1),t._v(" "),e("div",[e("h4",[t._v("3D horizontal")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"3dx"}})],1),t._v(" "),e("div",[e("h4",[t._v("3D vertical")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"3dy"}})],1),t._v(" "),e("div",[e("h4",[t._v("3D bidirectional")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"3dxy"}})],1),t._v(" "),e("div",[e("h4",[t._v("Spring")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"spring"}})],1),t._v(" "),e("div",[e("h4",[t._v("Stand")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"stand"}})],1),t._v(" "),e("div",[e("h4",[t._v("Squize")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"squeeze"}})],1),t._v(" "),e("div",[e("h4",[t._v("Vortex")]),t._v(" "),e("tasty-burger-button",{attrs:{color:"#42b983",type:"vortex"}})],1)]),t._v(" "),e("hr")])}),[function(){var t=this.$createElement,r=this._self._c||t;return r("p",[this._v("An easy to use hamburger buttons library for VueJS inspired by the "),r("a",{attrs:{href:"https://jonsuh.com/hamburgers/",target:"_blank"}},[this._v("AMBURGERS")]),this._v(" project")])}],!1,null,null,null).exports},{path:"/quick-start",component:K},{path:"/install-for-dev",component:rt},{path:"/tasty-burger-button",component:at},{path:"/available-burgers",component:it},{path:"*",redirect:"/index"}];s.default.use(i.a),s.default.use(a);var bt=new i.a({routes:ot,scrollBehavior:function(t,r,e){return{x:0,y:0}}});new s.default({el:"#app",router:bt,render:function(t){return t(Z)}})}]); -------------------------------------------------------------------------------- /docs/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Components 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/dist/vendor.56da037df6c5ef00329e.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,l,f=r[0],i=r[1],p=r[2],c=0,s=[];c 2 |
3 | 4 |
5 |
6 | 7 | 8 |
9 |
10 | 11 |
12 | 13 | 14 | 27 | 28 | 84 | -------------------------------------------------------------------------------- /docs/src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | -------------------------------------------------------------------------------- /docs/src/components/GithubLink.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | -------------------------------------------------------------------------------- /docs/src/components/SideBar.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 44 | 45 | 53 | -------------------------------------------------------------------------------- /docs/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Components 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import * as mylib from 'my-lib' 4 | import App from './App.vue' 5 | import routes from './routes' 6 | 7 | Vue.use(VueRouter) 8 | Vue.use(mylib) 9 | 10 | const router = new VueRouter({ 11 | routes, // short for `routes: routes` 12 | scrollBehavior (to, from, savedPosition) { 13 | return { x: 0, y: 0 } 14 | } 15 | }) 16 | 17 | /* eslint-disable no-new */ 18 | new Vue({ 19 | el: '#app', 20 | router, 21 | render: h => h(App) 22 | }) 23 | -------------------------------------------------------------------------------- /docs/src/pages/AvailableButtons.md: -------------------------------------------------------------------------------- 1 | # The available burgers 2 | 3 | 4 | Here the full list of available buttons. 5 | 6 | 7 | Type | Usage example | Demo 8 | :----------------|:--------------------------------------------|:--------------------------------------------------: 9 | `3dx` | `` | 10 | `3dy` | `` | 11 | `3dxy` | `` | 12 | `arrow` | `` | 13 | `arrowalt` | `` | 14 | `arrowturn` | `` | 15 | `boring` | `` | 16 | `collapse` | `` | 17 | `elastic` | `` | 18 | `emphatic` | `` | 19 | `minus` | `` | 20 | `slider` | `` | 21 | `spin` | `` | 22 | `spring` | `` | 23 | `stand` | `` | 24 | `squeeze` | `` | 25 | `vortex` | `` | 26 | -------------------------------------------------------------------------------- /docs/src/pages/Index.md: -------------------------------------------------------------------------------- 1 | # Vue Tasty Burgers 2 | 3 | An easy to use hamburger buttons library for VueJS inspired by the AMBURGERS project 4 | 5 | ## Demo 6 | 7 |
8 |
9 |

Boring

10 | 11 |
12 |
13 |

Collapse

14 | 15 |
16 |
17 |

Elastic

18 | 19 |
20 |
21 |

Arrow

22 | 23 |
24 |
25 |

Arrow 2

26 | 27 |
28 |
29 |

Emphatic

30 | 31 |
32 |
33 |

Minus

34 | 35 |
36 |
37 |

Slider

38 | 39 |
40 |
41 |

Spin

42 | 43 |
44 |
45 |

3D horizontal

46 | 47 |
48 |
49 |

3D vertical

50 | 51 |
52 |
53 |

3D bidirectional

54 | 55 |
56 |
57 |

Spring

58 | 59 |
60 |
61 |

Stand

62 | 63 |
64 |
65 |

Squize

66 | 67 |
68 |
69 |

Vortex

70 | 71 |
72 |
73 | 74 | --------------------------------------- 75 | -------------------------------------------------------------------------------- /docs/src/pages/InstallForDev.md: -------------------------------------------------------------------------------- 1 | # Install for local development 2 | 3 | Clone the Git repository of this library and link it. 4 | 5 | ```bash 6 | git clone git@github.com:imfaber/vue-tasty-burgers.git 7 | cd vue-tasty-burgers 8 | npm install 9 | npm run build 10 | npm link 11 | ``` 12 | 13 | In your client project root folder: 14 | ```bash 15 | npm link vue-tasty-burgers 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/src/pages/QuickStart.md: -------------------------------------------------------------------------------- 1 | # Quick Start 2 | 3 | ## Install 4 | 5 | Install with npm: 6 | 7 | ```bash 8 | npm install vue-tasty-burgers 9 | ``` 10 | 11 | ## Use the library (Global Registration) 12 | 13 | ```javascript 14 | // main.js 15 | import Vue from 'vue' 16 | import * as TastyBurgerButton from 'vue-tasty-burgers'; 17 | 18 | Vue.use(TastyBurgerButton); 19 | ``` 20 | 21 | ### No Conflict 22 | 23 | The component will be installed with no prefix by default, you can add any prefix 24 | to them to avoid conflicts with other libs if needed. 25 | 26 | For example: 27 | 28 | ```javascript 29 | Vue.use(TastyBurgerButton, { prefix: 'abc' }); 30 | ``` 31 | 32 | Results in: 33 | 34 | * Components such as `` becomes `` 35 | 36 | ## Use the library (Local Registration) 37 | 38 | ```html 39 | // your-component.js 40 | 43 | 44 | 53 | ``` -------------------------------------------------------------------------------- /docs/src/pages/TastyBurgerButton.md: -------------------------------------------------------------------------------- 1 | # How to use the component 2 | 3 | ### Example 4 | 5 | ```html 6 | 15 | 16 | 34 | ```` 35 | 36 | ### Props 37 | 38 | Name | Type | Default | Required | Description 39 | :---------------------|:------------|:--------------|:----------|:------------------------------------------------- 40 | `type` | String | boring | false | The type of burger button 41 | `active` | Boolean | false | false | Determines if the button is in the active state 42 | `size` | String | m | false | The size of the button (xs, s, m, l, xl) 43 | `color` | String | #00000 | false | The color of the button in its default state 44 | `activeColor` | String | #00000 | false | The color of the button in its active state 45 | `reversed` | Boolean | false | false | Reverse the animation of the button 46 | `rounded` | Boolean | true | false | Whether to use rounded borders 47 | 48 | ### Events 49 | 50 | Name | Params | Description 51 | :---------------------|:-------------|:------------------------------------------------ 52 | `toggle` | active | Fired after the button is clicked and its active state changed 53 | -------------------------------------------------------------------------------- /docs/src/routes.js: -------------------------------------------------------------------------------- 1 | import QuickStart from './pages/QuickStart.md' 2 | import InstallForDev from './pages/InstallForDev.md' 3 | import TastyBurgerButton from './pages/TastyBurgerButton.md' 4 | import AvailableButtons from './pages/AvailableButtons.md' 5 | import Index from './pages/Index.md' 6 | 7 | export default [ 8 | { path: '/index', component: Index }, 9 | { path: '/quick-start', component: QuickStart }, 10 | { path: '/install-for-dev', component: InstallForDev }, 11 | { path: '/tasty-burger-button', component: TastyBurgerButton }, 12 | { path: '/available-burgers', component: AvailableButtons }, 13 | { path: '*', redirect: '/index' } 14 | ] 15 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleNameMapper: { 3 | '^@/(.*)$': '/$1', 4 | '^vue$': 'vue/dist/vue.common.js', 5 | }, 6 | moduleFileExtensions: ['js', 'vue', 'json'], 7 | transform: { 8 | '^.+\\.js$': 'babel-jest', 9 | '.*\\.(vue)$': 'vue-jest' 10 | }, 11 | collectCoverage: false, 12 | collectCoverageFrom: [ 13 | '/components/**/*.vue', 14 | '/pages/**/*.vue' 15 | ], 16 | roots: [ 17 | '/src/', 18 | '/test/' 19 | ] 20 | }; 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tasty-burgers", 3 | "version": "1.2.3", 4 | "description": "An easy to use hamburger buttons library for VueJS", 5 | "author": "Fabrizio Meinero ", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:imfaber/vue-tasty-burgers.git" 9 | }, 10 | "license": "MIT", 11 | "keywords": [ 12 | "vue", 13 | "vuejs", 14 | "hamburger", 15 | "button" 16 | ], 17 | "dependencies": {}, 18 | "peerDependencies": { 19 | "vue": "^2.5.11" 20 | }, 21 | "scripts": { 22 | "lint": "eslint --ext .js,.vue src test/unit/specs", 23 | "lint:fix": "npm run lint -- --fix", 24 | "lint-docs-vue": "eslint --plugin vue --ext .js,.vue docs/src", 25 | "lint-docs-md-tag": "eslint --plugin script-tags --ext .js,.vue,.md docs/src --rule 'eol-last':0", 26 | "lint-docs": "npm run lint-docs-vue && npm run lint-docs-md-tag", 27 | "lint-docs:fix": "npm run lint-docs-vue -- fix && npm run lint-docs-md-tag -- fix", 28 | "lint:all": "npm run lint && npm run lint-docs", 29 | "lint:all:fix": "npm run lint:fix && npm run lint-docs:fix", 30 | "build": "cross-env NODE_ENV=production rollup -c", 31 | "dev": "rollup -c -w", 32 | "unit": "cross-env NODE_ENV=test jest", 33 | "test": "npm run unit", 34 | "start": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 35 | "build-docs": "npm run clean-docs && cross-env NODE_ENV=production webpack --progress --hide-modules", 36 | "clean-docs": "rimraf docs/dist", 37 | "storybook": "start-storybook --port 6006" 38 | }, 39 | "devDependencies": { 40 | "@babel/core": "^7.9.0", 41 | "@babel/plugin-syntax-jsx": "^7.8.3", 42 | "@babel/plugin-transform-runtime": "^7.9.0", 43 | "@babel/preset-env": "^7.9.5", 44 | "@babel/preset-stage-2": "^7.8.3", 45 | "@babel/runtime": "^7.9.2", 46 | "@rollup/plugin-commonjs": "^11.1.0", 47 | "@rollup/plugin-node-resolve": "^7.1.3", 48 | "@rollup/plugin-replace": "^2.3.1", 49 | "@storybook/vue": "^5.3.18", 50 | "@vue/test-utils": "^1.0.0-beta.33", 51 | "autoprefixer": "^8.5.0", 52 | "babel-core": "^7.0.0-bridge.0", 53 | "babel-eslint": "^8.2.3", 54 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 55 | "babel-jest": "^25.3.0", 56 | "babel-loader": "^8.1.0", 57 | "babel-plugin-transform-vue-jsx": "^3.5.0", 58 | "babel-preset-vue": "^2.0.2", 59 | "cross-env": "^5.1.1", 60 | "css-loader": "^0.28.7", 61 | "eslint": "^4.19.1", 62 | "eslint-config-standard": "^11.0.0", 63 | "eslint-friendly-formatter": "^4.0.1", 64 | "eslint-loader": "^2.0.0", 65 | "eslint-plugin-import": "^2.7.0", 66 | "eslint-plugin-node": "^6.0.1", 67 | "eslint-plugin-promise": "^3.4.0", 68 | "eslint-plugin-script-tags": "^0.5.0", 69 | "eslint-plugin-standard": "^3.0.1", 70 | "eslint-plugin-vue": "^4.0.0", 71 | "file-loader": "^1.1.6", 72 | "html-webpack-plugin": "^3.2.0", 73 | "inject-loader": "^4.0.1", 74 | "jest": "^25.3.0", 75 | "node-sass": "^4.13.1", 76 | "postcss-loader": "^2.0.8", 77 | "rimraf": "^2.6.2", 78 | "rollup": "^1.20.0", 79 | "rollup-plugin-babel": "^4.4.0", 80 | "rollup-plugin-terser": "^5.3.0", 81 | "rollup-plugin-vue": "^5.1.6", 82 | "sass-loader": "^7.3.1", 83 | "style-loader": "^0.21.0", 84 | "uglify-es": "^3.3.9", 85 | "vue": "^2.5.11", 86 | "vue-jest": "^3.0.5", 87 | "vue-loader": "^15.9.1", 88 | "vue-md-loader": "^1.0.0", 89 | "vue-router": "^3.0.1", 90 | "vue-style-loader": "^4.1.0", 91 | "vue-template-compiler": "^2.6.11", 92 | "webpack": "^4.42.1", 93 | "webpack-cli": "^3.3.11", 94 | "webpack-dev-server": "^3.10.3" 95 | }, 96 | "main": "dist/vue-tasty-burgers.js", 97 | "module": "dist/vue-tasty-burgers.js", 98 | "jsnext:main": "dist/vue-tasty-burgers.js", 99 | "files": [ 100 | "dist" 101 | ] 102 | } 103 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'autoprefixer': {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import vue from 'rollup-plugin-vue'; 2 | import babel from 'rollup-plugin-babel'; 3 | import resolve from '@rollup/plugin-node-resolve'; 4 | import commonjs from '@rollup/plugin-commonjs'; 5 | import replace from '@rollup/plugin-replace'; 6 | import { terser } from "rollup-plugin-terser"; 7 | import { minify } from 'uglify-es'; 8 | import pkg from './package.json'; 9 | 10 | const LIB_NAME = pkg.name; 11 | 12 | export default [ 13 | { 14 | input: 'src/index.js', 15 | output: { 16 | file: `dist/${LIB_NAME}.js`, 17 | format: 'es' 18 | }, 19 | plugins: [ 20 | resolve({ 21 | jsnext: true, 22 | main: true, 23 | browser: true, 24 | }), 25 | commonjs(), 26 | vue(), 27 | babel({ 28 | exclude: 'node_modules/**', 29 | runtimeHelpers: true 30 | }), 31 | replace({ 32 | ENV: JSON.stringify(process.env.NODE_ENV || 'development'), 33 | }), 34 | (process.env.NODE_ENV === 'production' && terser({}, minify)) 35 | ], 36 | }, 37 | ]; -------------------------------------------------------------------------------- /src/components/BurgerButton.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 73 | -------------------------------------------------------------------------------- /src/components/PlainHamburger.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 99 | 100 | 175 | -------------------------------------------------------------------------------- /src/components/arrow-alt/ArrowAltHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'ArrowAltHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/arrow-alt/ArrowAltHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 60 | -------------------------------------------------------------------------------- /src/components/arrow-turn/ArrowTurnHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'ArrowTurnHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/arrow-turn/ArrowTurnHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 37 | -------------------------------------------------------------------------------- /src/components/arrow/ArrowHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'ArrowHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | 15 | export const ReversedLegacy = () => ({ 16 | components: { BurgerButton }, 17 | template: '' 18 | }) 19 | -------------------------------------------------------------------------------- /src/components/arrow/ArrowHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 30 | -------------------------------------------------------------------------------- /src/components/boring/BoringHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'BoringHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Flat = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/boring/BoringHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 35 | -------------------------------------------------------------------------------- /src/components/collapse/CollapseHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'CollapseHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/collapse/CollapseHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 85 | -------------------------------------------------------------------------------- /src/components/elastic/ElasticHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'ElasticHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/elastic/ElasticHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 69 | -------------------------------------------------------------------------------- /src/components/emphatic/EmphaticHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'EmphaticHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/emphatic/EmphaticHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 93 | -------------------------------------------------------------------------------- /src/components/minus/MinusHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'MinusHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | -------------------------------------------------------------------------------- /src/components/minus/MinusHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 34 | -------------------------------------------------------------------------------- /src/components/slider/SliderHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'SliderHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/slider/SliderHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 68 | -------------------------------------------------------------------------------- /src/components/spin/SpinHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'SpinHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/spin/SpinHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 73 | -------------------------------------------------------------------------------- /src/components/spring/SpringHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'SpringHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/spring/SpringHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 82 | -------------------------------------------------------------------------------- /src/components/squeeze/SqueezeHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'SqueezeHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | -------------------------------------------------------------------------------- /src/components/squeeze/SqueezeHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 43 | -------------------------------------------------------------------------------- /src/components/stand/StandHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'StandHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/stand/StandHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 78 | -------------------------------------------------------------------------------- /src/components/vortex/VortexHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'VortexHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/vortex/VortexHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 83 | -------------------------------------------------------------------------------- /src/components/x3d/X3DHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'X3DHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/x3d/X3DHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 61 | -------------------------------------------------------------------------------- /src/components/xy3d/XY3DHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'XY3DHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/xy3d/XY3DHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 62 | -------------------------------------------------------------------------------- /src/components/y3d/Y3DHamburger.stories.js: -------------------------------------------------------------------------------- 1 | import BurgerButton from '../BurgerButton.vue' 2 | 3 | export default { title: 'Y3DHamburger' } 4 | 5 | export const Default = () => ({ 6 | components: { BurgerButton }, 7 | template: '' 8 | }) 9 | 10 | export const Reversed = () => ({ 11 | components: { BurgerButton }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/y3d/Y3DHamburger.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 62 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export * from './install' 2 | -------------------------------------------------------------------------------- /src/install.js: -------------------------------------------------------------------------------- 1 | import TastyBurgerButton from './components/BurgerButton.vue' 2 | 3 | function install (Vue, options) { 4 | Vue.component('TastyBurgerButton', TastyBurgerButton) 5 | let prefix = '' 6 | 7 | if (options && 'prefix' in options) { 8 | prefix = options.prefix 9 | prefix = prefix.charAt(0).toUpperCase() + prefix.slice(1) 10 | prefix = prefix 11 | .replace(/-([a-z])/g, (g) => g[1].toUpperCase()) 12 | .replace(/-/g, '') 13 | } 14 | 15 | const key = `${prefix}TastyBurgerButton` 16 | Vue.component(key, TastyBurgerButton) 17 | } 18 | 19 | // Automatic installation if Vue has been added to the global scope. 20 | if (typeof window !== 'undefined' && window.Vue) { 21 | window.Vue.use({ install }) 22 | } 23 | 24 | export { install, TastyBurgerButton } 25 | -------------------------------------------------------------------------------- /src/mixins/props-mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | type: { 4 | type: String, 5 | default: 'boring' 6 | }, 7 | active: { 8 | type: Boolean, 9 | default: false 10 | }, 11 | color: { 12 | type: String, 13 | default: '#000000' 14 | }, 15 | activeColor: { 16 | type: String, 17 | default: null 18 | }, 19 | size: { 20 | type: String, 21 | validator: function (value) { 22 | return ['xs', 's', 'm', 'l', 'xl'].indexOf(value) !== -1 23 | }, 24 | default: 'm' 25 | }, 26 | reversed: { 27 | type: Boolean, 28 | default: false 29 | }, 30 | rounded: { 31 | type: Boolean, 32 | default: true 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "globals": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except install.js and index.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!(install|index)(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /test/unit/specs/BurgerButton.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import BurgerButton from '@/src/components/BurgerButton.vue' 3 | 4 | const createCmp = propsData => mount(BurgerButton, { propsData }) 5 | 6 | describe('TastyBurgerButton', () => { 7 | let wrapper 8 | 9 | beforeEach(() => { 10 | wrapper = createCmp() 11 | }) 12 | 13 | it('is called', () => { 14 | expect(wrapper.isVueInstance()).toBeTruthy() 15 | }) 16 | 17 | it('is boring by default', () => { 18 | expect(wrapper.props('type', 'boring')).toBeTruthy() 19 | }) 20 | 21 | it('selects the right component', () => { 22 | expect(wrapper.vm.computedType).toBe('boring') 23 | 24 | wrapper.setProps({ type: 'arrow' }) 25 | expect(wrapper.vm.computedType).toBe('arrow') 26 | 27 | wrapper.setProps({ type: 'arrow-r' }) 28 | expect(wrapper.vm.computedType).toBe('arrow') 29 | 30 | wrapper.setProps({ type: '3dx' }) 31 | expect(wrapper.vm.computedType).toBe('x3d') 32 | 33 | wrapper.setProps({ type: '3dy' }) 34 | expect(wrapper.vm.computedType).toBe('y3d') 35 | 36 | wrapper.setProps({ type: '3dxy' }) 37 | expect(wrapper.vm.computedType).toBe('xy3d') 38 | }) 39 | }) 40 | -------------------------------------------------------------------------------- /test/unit/specs/PlainHamburger.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import PlainHamburger from '@/src/components/PlainHamburger.vue' 3 | 4 | const createCmp = propsData => mount(PlainHamburger, { propsData }) 5 | 6 | describe('PlainHamburger', () => { 7 | let wrapper 8 | 9 | beforeEach(() => { 10 | wrapper = createCmp() 11 | }) 12 | 13 | it('is called', () => { 14 | expect(wrapper.isVueInstance()).toBeTruthy() 15 | }) 16 | 17 | it('renders correctly', () => { 18 | expect(wrapper.html()).toMatchSnapshot() 19 | }) 20 | 21 | it('toggles the active status', () => { 22 | expect(wrapper.vm.isActive).toBe(false) 23 | 24 | wrapper.vm.toggle() 25 | expect(wrapper.vm.isActive).toBe(true) 26 | 27 | wrapper.vm.toggle() 28 | expect(wrapper.vm.isActive).toBe(false) 29 | 30 | wrapper.trigger('click') 31 | expect(wrapper.vm.isActive).toBe(true) 32 | 33 | wrapper.trigger('click') 34 | expect(wrapper.vm.isActive).toBe(false) 35 | }) 36 | 37 | it('emits toggle event when prop changes', async () => { 38 | wrapper.setProps({ active: true }) 39 | await wrapper.vm.$nextTick() 40 | expect(wrapper.emitted().toggle).toBeTruthy() 41 | }) 42 | 43 | it('emits toggle event on click', async () => { 44 | wrapper.trigger('click') 45 | await wrapper.vm.$nextTick() 46 | expect(wrapper.emitted().toggle).toBeTruthy() 47 | }) 48 | 49 | it('uses the right modifier class', () => { 50 | wrapper.setProps({ type: 'arrow' }) 51 | expect(wrapper.vm.hamburgerModifierClass).toBe('hamburger--arrow') 52 | 53 | wrapper.setProps({ reversed: true }) 54 | expect(wrapper.vm.hamburgerModifierClass).toBe('hamburger--arrow-r') 55 | 56 | wrapper.setProps({ type: 'arrow-r', reversed: false }) 57 | expect(wrapper.vm.hamburgerModifierClass).toBe('hamburger--arrow-r') 58 | }) 59 | }) 60 | -------------------------------------------------------------------------------- /test/unit/specs/__snapshots__/PlainHamburger.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`PlainHamburger renders correctly 1`] = `""`; 4 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | // Update this for additional vendor libraries 7 | const VENDOR_LIBS = ['vue']; 8 | 9 | module.exports = { 10 | entry: { 11 | bundle: './docs/src/index.js', 12 | vendor: VENDOR_LIBS 13 | }, 14 | output: { 15 | path: path.resolve(__dirname, './docs/dist'), 16 | filename: '[name].[hash].js' 17 | }, 18 | plugins: [ 19 | new HtmlWebpackPlugin({ 20 | template: 'docs/src/index.html' 21 | }), 22 | new VueLoaderPlugin() 23 | ], 24 | optimization: { 25 | splitChunks: { 26 | cacheGroups: { 27 | commons: { 28 | test: /[\\/]node_modules[\\/]/, 29 | name: "vendors", 30 | chunks: "all" 31 | } 32 | } 33 | } 34 | }, 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.vue$/, 39 | use: 'vue-loader' 40 | }, 41 | { 42 | test: /\.js$/, 43 | use: 'babel-loader', 44 | exclude: /node_modules/ 45 | }, 46 | { 47 | test: /\.css$/, 48 | use: [ 49 | 'style-loader', 50 | 'css-loader', 51 | 'postcss-loader' 52 | ] 53 | }, 54 | { 55 | test: /\.scss$/, 56 | use: [ 57 | 'vue-style-loader', 58 | 'css-loader', 59 | 'sass-loader', 60 | 'postcss-loader' 61 | ] 62 | }, 63 | { 64 | test: /\.md$/, 65 | loader: 'vue-loader!vue-md-loader' 66 | }, 67 | { 68 | test: /\.(png|jpg|gif|svg)$/, 69 | loader: 'file-loader', 70 | options: { 71 | name: '[name].[ext]?[hash]' 72 | } 73 | } 74 | ] 75 | }, 76 | resolve: { 77 | extensions: ['*', '.js', '.vue', '.json'], 78 | alias: { 79 | 'vue$': 'vue/dist/vue.esm.js', 80 | 'my-lib': path.resolve('src') 81 | } 82 | }, 83 | devServer: { 84 | historyApiFallback: true, 85 | noInfo: true 86 | }, 87 | performance: { 88 | hints: false 89 | }, 90 | devtool: '#eval-source-map' 91 | } 92 | 93 | if (process.env.NODE_ENV === 'production') { 94 | module.exports.devtool = false 95 | module.exports.optimization.minimize = true 96 | 97 | // http://vue-loader.vuejs.org/en/workflow/production.html 98 | module.exports.plugins = (module.exports.plugins || []).concat([ 99 | new webpack.DefinePlugin({ 100 | 'process.env': { 101 | NODE_ENV: '"production"' 102 | } 103 | }), 104 | new webpack.LoaderOptionsPlugin({ 105 | minimize: true 106 | }) 107 | ]) 108 | } 109 | --------------------------------------------------------------------------------