├── .babelrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── vue-magic-line.js └── vue-magic-line.min.js ├── docs ├── css │ ├── app.95e7a278.css │ └── chunk-vendors.42851454.css ├── favicon.ico ├── index.html └── js │ ├── app.ea3cd5d3.js │ ├── app.ea3cd5d3.js.map │ ├── chunk-vendors.3ad5886f.js │ └── chunk-vendors.3ad5886f.js.map ├── docs_template ├── .browserslistrc ├── .gitignore ├── README.md ├── babel.config.js ├── docs_howto ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Btn_07.vue │ │ ├── CSS_04.vue │ │ ├── Default_01.vue │ │ ├── HideSec_02.vue │ │ ├── Parent_05.vue │ │ ├── PrimarySec_03.vue │ │ ├── Responsive_06.vue │ │ └── Sourcecode.vue │ └── main.js └── yarn.lock ├── package-lock.json ├── package.json ├── src ├── VueMagicLine.vue ├── components │ └── VueMagicLineTab.vue └── install.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["lodash"], 3 | "presets": [ 4 | ["env", { "modules": false }], 5 | "stage-3" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | docs_template/node_modules/ 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2017, Jon Schlinkert. 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-magic-line 2 | 3 | > A tabs-component for Vue. 4 | 5 | ## Demo 6 | 7 | You can find some examples [here](https://piccard21.github.io/vue-magic-line) 8 | 9 | 10 | ## Configuration 11 | 12 | 13 | ### Install component 14 | 15 | 16 | #### Globally 17 | 18 | ``` 19 | import VueMagicLine from 'vue-magic-line' 20 | 21 | Vue.use(VueMagicLine) 22 | ``` 23 | 24 | #### Locally 25 | 26 | ``` 27 | import {VueMagicLine, VueMagicLineTab} from 'vue-magic-line'; 28 | 29 | export default { 30 | components: { 31 | VueMagicLine, 32 | VueMagicLineTab 33 | }, 34 | ... 35 | ``` 36 | 37 | ### Template 38 | 39 | ``` 40 | 41 | 42 | This is the content of the first vue-magic-line-tab 43 | 44 | 45 | This is the content of the second vue-magic-line-tab 46 | 47 | 48 | This is the content of the third vue-magic-line-tab 49 | 50 | 51 | This is the content of the fourth vue-magic-line-tab 52 | 53 | 54 | This is the content of the fifth vue-magic-line-tab 55 | 56 | 57 |

This is the content of the sixth vue-magic-line-tab

58 | 59 | 60 | ``` 61 | 62 | 63 | ## Properties 64 | 65 | ### vue-magic-line 66 | 67 | Property | Description | Value | Default value 68 | --- | --- | --- | --- 69 | **secondary** | show secondary line | Boolean | true 70 | **parent** | apply to parent and not to link | Boolean | true 71 | **magic-line-wrapper-css** | CSS for class **magic-line-wrapper**| Object | {} 72 | **magic-line-item-wrapper-css** | CSS for class **magic-line-item-wrapper**| Object | {} 73 | **magic-line-item-css** | CSS for class **magic-line-item**| Object | {} 74 | **magic-line-item-link-css** | CSS for class **magic-line-item-link**| Object | {} 75 | **magic-line-content-wrapper-css** | CSS for class **magic-line-content-wrapper**| Object | {} 76 | **primary-color** | color for primary line| String | rgb(0, 188, 212) 77 | **primary-height** | height for primary line| Number | 3px 78 | **primary-top** | add some margin to primary line| Number | 3px 79 | **secondary-color** | color for secondary line| String | rgba(211, 211, 211, 0.4) 80 | **secondary-height** | height for secondary line| Number | 2px 81 | **secondary-top** | add some margin to secondary line| Number | 3px 82 | **duration** | duration for magic-line transition in seconds| Number | 0.3 83 | 84 | 85 | ### vue-magic-line-tab 86 | 87 | Property | Description | Value | Default value 88 | --- | --- | --- | --- 89 | **active** | set active tab | Boolean | true 90 | **disabled** | disable tab | Boolean | false 91 | 92 | 93 | ## Events 94 | 95 | Event | Description | Parameters 96 | --- | --- | --- 97 | **before-set-primary** | before positioning primary line | primary-line, tab 98 | **set-primary** | after positioning primary line | primary-line, tab 99 | **before-set-secondary** | before positioning secondary line | secondary-line, tab 100 | **set-secondary** | after positioning secondary line | secondary-line, tab 101 | 102 | 103 | 104 | 105 | ## License 106 | 107 | vue-magic-line is licensed under the MIT License - see the LICENSE file for details. 108 | 109 | 110 | ## Author 111 | [Andreas Stephan](https://cafe-serendipity.com) 112 | -------------------------------------------------------------------------------- /dist/vue-magic-line.min.js: -------------------------------------------------------------------------------- 1 | window.VueMagicLine=function(n){function e(I){if(t[I])return t[I].exports;var l=t[I]={i:I,l:!1,exports:{}};return n[I].call(l.exports,l,l.exports,e),l.l=!0,l.exports}var t={};return e.m=n,e.c=t,e.d=function(n,t,I){e.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:I})},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},e.p="",e(e.s=5)}([function(module,exports){eval('/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn "@media " + item[2] + "{" + content + "}";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join("");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === "string")\n\t\t\tmodules = [[null, modules, ""]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === "number")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = "(" + item[2] + ") and (" + mediaQuery + ")";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || \'\';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === \'function\') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn \'/*# sourceURL=\' + cssMapping.sourceRoot + source + \' */\'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join(\'\\n\');\n\t}\n\n\treturn [content].join(\'\\n\');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = \'sourceMappingURL=data:application/json;charset=utf-8;base64,\' + base64;\n\n\treturn \'/*# \' + data + \' */\';\n}\n\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9saWIvY3NzLWJhc2UuanM/MTU5ZiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsbUNBQW1DLGdCQUFnQjtBQUNuRCxJQUFJO0FBQ0o7QUFDQTtBQUNBLEdBQUc7QUFDSDs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsZ0JBQWdCLGlCQUFpQjtBQUNqQztBQUNBO0FBQ0E7QUFDQTtBQUNBLFlBQVksb0JBQW9CO0FBQ2hDO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxLQUFLO0FBQ0w7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQSxHQUFHOztBQUVIO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLG9EQUFvRCxjQUFjOztBQUVsRTtBQUNBIiwiZmlsZSI6IjAuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuXHRNSVQgTGljZW5zZSBodHRwOi8vd3d3Lm9wZW5zb3VyY2Uub3JnL2xpY2Vuc2VzL21pdC1saWNlbnNlLnBocFxuXHRBdXRob3IgVG9iaWFzIEtvcHBlcnMgQHNva3JhXG4qL1xuLy8gY3NzIGJhc2UgY29kZSwgaW5qZWN0ZWQgYnkgdGhlIGNzcy1sb2FkZXJcbm1vZHVsZS5leHBvcnRzID0gZnVuY3Rpb24odXNlU291cmNlTWFwKSB7XG5cdHZhciBsaXN0ID0gW107XG5cblx0Ly8gcmV0dXJuIHRoZSBsaXN0IG9mIG1vZHVsZXMgYXMgY3NzIHN0cmluZ1xuXHRsaXN0LnRvU3RyaW5nID0gZnVuY3Rpb24gdG9TdHJpbmcoKSB7XG5cdFx0cmV0dXJuIHRoaXMubWFwKGZ1bmN0aW9uIChpdGVtKSB7XG5cdFx0XHR2YXIgY29udGVudCA9IGNzc1dpdGhNYXBwaW5nVG9TdHJpbmcoaXRlbSwgdXNlU291cmNlTWFwKTtcblx0XHRcdGlmKGl0ZW1bMl0pIHtcblx0XHRcdFx0cmV0dXJuIFwiQG1lZGlhIFwiICsgaXRlbVsyXSArIFwie1wiICsgY29udGVudCArIFwifVwiO1xuXHRcdFx0fSBlbHNlIHtcblx0XHRcdFx0cmV0dXJuIGNvbnRlbnQ7XG5cdFx0XHR9XG5cdFx0fSkuam9pbihcIlwiKTtcblx0fTtcblxuXHQvLyBpbXBvcnQgYSBsaXN0IG9mIG1vZHVsZXMgaW50byB0aGUgbGlzdFxuXHRsaXN0LmkgPSBmdW5jdGlvbihtb2R1bGVzLCBtZWRpYVF1ZXJ5KSB7XG5cdFx0aWYodHlwZW9mIG1vZHVsZXMgPT09IFwic3RyaW5nXCIpXG5cdFx0XHRtb2R1bGVzID0gW1tudWxsLCBtb2R1bGVzLCBcIlwiXV07XG5cdFx0dmFyIGFscmVhZHlJbXBvcnRlZE1vZHVsZXMgPSB7fTtcblx0XHRmb3IodmFyIGkgPSAwOyBpIDwgdGhpcy5sZW5ndGg7IGkrKykge1xuXHRcdFx0dmFyIGlkID0gdGhpc1tpXVswXTtcblx0XHRcdGlmKHR5cGVvZiBpZCA9PT0gXCJudW1iZXJcIilcblx0XHRcdFx0YWxyZWFkeUltcG9ydGVkTW9kdWxlc1tpZF0gPSB0cnVlO1xuXHRcdH1cblx0XHRmb3IoaSA9IDA7IGkgPCBtb2R1bGVzLmxlbmd0aDsgaSsrKSB7XG5cdFx0XHR2YXIgaXRlbSA9IG1vZHVsZXNbaV07XG5cdFx0XHQvLyBza2lwIGFscmVhZHkgaW1wb3J0ZWQgbW9kdWxlXG5cdFx0XHQvLyB0aGlzIGltcGxlbWVudGF0aW9uIGlzIG5vdCAxMDAlIHBlcmZlY3QgZm9yIHdlaXJkIG1lZGlhIHF1ZXJ5IGNvbWJpbmF0aW9uc1xuXHRcdFx0Ly8gIHdoZW4gYSBtb2R1bGUgaXMgaW1wb3J0ZWQgbXVsdGlwbGUgdGltZXMgd2l0aCBkaWZmZXJlbnQgbWVkaWEgcXVlcmllcy5cblx0XHRcdC8vICBJIGhvcGUgdGhpcyB3aWxsIG5ldmVyIG9jY3VyIChIZXkgdGhpcyB3YXkgd2UgaGF2ZSBzbWFsbGVyIGJ1bmRsZXMpXG5cdFx0XHRpZih0eXBlb2YgaXRlbVswXSAhPT0gXCJudW1iZXJcIiB8fCAhYWxyZWFkeUltcG9ydGVkTW9kdWxlc1tpdGVtWzBdXSkge1xuXHRcdFx0XHRpZihtZWRpYVF1ZXJ5ICYmICFpdGVtWzJdKSB7XG5cdFx0XHRcdFx0aXRlbVsyXSA9IG1lZGlhUXVlcnk7XG5cdFx0XHRcdH0gZWxzZSBpZihtZWRpYVF1ZXJ5KSB7XG5cdFx0XHRcdFx0aXRlbVsyXSA9IFwiKFwiICsgaXRlbVsyXSArIFwiKSBhbmQgKFwiICsgbWVkaWFRdWVyeSArIFwiKVwiO1xuXHRcdFx0XHR9XG5cdFx0XHRcdGxpc3QucHVzaChpdGVtKTtcblx0XHRcdH1cblx0XHR9XG5cdH07XG5cdHJldHVybiBsaXN0O1xufTtcblxuZnVuY3Rpb24gY3NzV2l0aE1hcHBpbmdUb1N0cmluZyhpdGVtLCB1c2VTb3VyY2VNYXApIHtcblx0dmFyIGNvbnRlbnQgPSBpdGVtWzFdIHx8ICcnO1xuXHR2YXIgY3NzTWFwcGluZyA9IGl0ZW1bM107XG5cdGlmICghY3NzTWFwcGluZykge1xuXHRcdHJldHVybiBjb250ZW50O1xuXHR9XG5cblx0aWYgKHVzZVNvdXJjZU1hcCAmJiB0eXBlb2YgYnRvYSA9PT0gJ2Z1bmN0aW9uJykge1xuXHRcdHZhciBzb3VyY2VNYXBwaW5nID0gdG9Db21tZW50KGNzc01hcHBpbmcpO1xuXHRcdHZhciBzb3VyY2VVUkxzID0gY3NzTWFwcGluZy5zb3VyY2VzLm1hcChmdW5jdGlvbiAoc291cmNlKSB7XG5cdFx0XHRyZXR1cm4gJy8qIyBzb3VyY2VVUkw9JyArIGNzc01hcHBpbmcuc291cmNlUm9vdCArIHNvdXJjZSArICcgKi8nXG5cdFx0fSk7XG5cblx0XHRyZXR1cm4gW2NvbnRlbnRdLmNvbmNhdChzb3VyY2VVUkxzKS5jb25jYXQoW3NvdXJjZU1hcHBpbmddKS5qb2luKCdcXG4nKTtcblx0fVxuXG5cdHJldHVybiBbY29udGVudF0uam9pbignXFxuJyk7XG59XG5cbi8vIEFkYXB0ZWQgZnJvbSBjb252ZXJ0LXNvdXJjZS1tYXAgKE1JVClcbmZ1bmN0aW9uIHRvQ29tbWVudChzb3VyY2VNYXApIHtcblx0Ly8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXVuZGVmXG5cdHZhciBiYXNlNjQgPSBidG9hKHVuZXNjYXBlKGVuY29kZVVSSUNvbXBvbmVudChKU09OLnN0cmluZ2lmeShzb3VyY2VNYXApKSkpO1xuXHR2YXIgZGF0YSA9ICdzb3VyY2VNYXBwaW5nVVJMPWRhdGE6YXBwbGljYXRpb24vanNvbjtjaGFyc2V0PXV0Zi04O2Jhc2U2NCwnICsgYmFzZTY0O1xuXG5cdHJldHVybiAnLyojICcgKyBkYXRhICsgJyAqLyc7XG59XG5cblxuXG4vLy8vLy8vLy8vLy8vLy8vLy9cbi8vIFdFQlBBQ0sgRk9PVEVSXG4vLyAuL25vZGVfbW9kdWxlcy9jc3MtbG9hZGVyL2xpYi9jc3MtYmFzZS5qc1xuLy8gbW9kdWxlIGlkID0gMFxuLy8gbW9kdWxlIGNodW5rcyA9IDAiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///0\n')},function(module,exports,__webpack_require__){eval("/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n Modified by Evan You @yyx990803\n*/\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n if (!hasDocument) {\n throw new Error(\n 'vue-style-loader cannot be used in a non-browser environment. ' +\n \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n ) }\n}\n\nvar listToStyles = __webpack_require__(9)\n\n/*\ntype StyleObject = {\n id: number;\n parts: Array\n}\n\ntype StyleObjectPart = {\n css: string;\n media: string;\n sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n [id: number]: {\n id: number,\n refs: number,\n parts: Array<(obj?: StyleObjectPart) => void>\n }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\nvar options = null\nvar ssrIdKey = 'data-vue-ssr-id'\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of 103 | -------------------------------------------------------------------------------- /docs_template/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piccard21/vue-magic-line/4a48b3888614a7817382a47a2530ddf0de7948b8/docs_template/src/assets/logo.png -------------------------------------------------------------------------------- /docs_template/src/components/Btn_07.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 141 | 142 | 144 | -------------------------------------------------------------------------------- /docs_template/src/components/CSS_04.vue: -------------------------------------------------------------------------------- 1 | 131 | 132 | 224 | 225 | 227 | -------------------------------------------------------------------------------- /docs_template/src/components/Default_01.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 72 | 73 | 80 | -------------------------------------------------------------------------------- /docs_template/src/components/HideSec_02.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 73 | 74 | 81 | -------------------------------------------------------------------------------- /docs_template/src/components/Parent_05.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 120 | 121 | 123 | -------------------------------------------------------------------------------- /docs_template/src/components/PrimarySec_03.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 83 | 84 | 91 | -------------------------------------------------------------------------------- /docs_template/src/components/Responsive_06.vue: -------------------------------------------------------------------------------- 1 | 231 | 232 | 255 | 256 | 258 | -------------------------------------------------------------------------------- /docs_template/src/components/Sourcecode.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 58 | 59 | 84 | -------------------------------------------------------------------------------- /docs_template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import VueMagicLine from 'vue-magic-line'; 4 | 5 | Vue.use(VueMagicLine) 6 | 7 | Vue.config.productionTip = false 8 | 9 | new Vue({ 10 | render: h => h(App), 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-magic-line", 3 | "description": "A tabs-component for Vue.", 4 | "keywords": [ 5 | "vue", 6 | "vuejs", 7 | "vue-tabs", 8 | "tabpanel", 9 | "tabs", 10 | "tab", 11 | "component", 12 | "tabs-component" 13 | ], 14 | "version": "0.2.2", 15 | "author": "cafe-serendipity ", 16 | "license": "MIT", 17 | "main": "dist/vue-magic-line.js", 18 | "scripts": { 19 | "watch": "webpack --watch --progress --hide-modules", 20 | "build": "webpack --progress --hide-modules" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/piccard21/vue-magic-line" 25 | }, 26 | "homepage": "https://piccard21.github.io/vue-magic-line", 27 | "dependencies": { 28 | "vue": "^2.6.6" 29 | }, 30 | "browserslist": [ 31 | "> 1%", 32 | "last 2 versions", 33 | "not ie <= 8" 34 | ], 35 | "devDependencies": { 36 | "babel-core": "^6.26.0", 37 | "babel-loader": "^7.1.5", 38 | "babel-plugin-lodash": "^3.3.4", 39 | "babel-preset-env": "^1.6.0", 40 | "babel-preset-stage-3": "^6.24.1", 41 | "css-loader": "^0.28.7", 42 | "lodash": "^4.17.11", 43 | "lodash-webpack-plugin": "^0.11.5", 44 | "node-sass": "^4.11.0", 45 | "sass-loader": "^6.0.6", 46 | "vue-loader": "^13.7.3", 47 | "vue-template-compiler": "^2.6.6", 48 | "webpack": "^3.6.0", 49 | "webpack-merge": "^4.2.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/VueMagicLine.vue: -------------------------------------------------------------------------------- 1 | 2 | 26 | 27 | 306 | 307 | -------------------------------------------------------------------------------- /src/components/VueMagicLineTab.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 31 | 32 | -------------------------------------------------------------------------------- /src/install.js: -------------------------------------------------------------------------------- 1 | import VueMagicLine from './VueMagicLine'; 2 | import VueMagicLineTab from './components/VueMagicLineTab' 3 | 4 | export default { 5 | install(Vue) { 6 | Vue.component('vue-magic-line', VueMagicLine); 7 | Vue.component('vue-magic-line-tab', VueMagicLineTab); 8 | }, 9 | }; 10 | 11 | export { VueMagicLine, VueMagicLineTab }; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge'); 4 | var LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); 5 | 6 | var config = { 7 | output: { 8 | path: path.resolve(__dirname, './dist') 9 | }, 10 | module: { 11 | rules: [{ 12 | test: /\.css$/, 13 | use: ['vue-style-loader', 'css-loader'], 14 | }, { 15 | test: /\.scss$/, 16 | use: ['vue-style-loader', 'css-loader', 'sass-loader'], 17 | }, { 18 | test: /\.sass$/, 19 | use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'], 20 | }, { 21 | test: /\.vue$/, 22 | loader: 'vue-loader', 23 | options: { 24 | loaders: { 25 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 26 | // the "scss" and "sass" values for the lang attribute to the right configs here. 27 | // other preprocessors should work out of the box, no loader config like this necessary. 28 | 'scss': ['vue-style-loader', 'css-loader', 'sass-loader'], 29 | 'sass': ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] 30 | } 31 | // other vue-loader options go here 32 | } 33 | }, { 34 | test: /\.js$/, 35 | loader: 'babel-loader', 36 | exclude: /node_modules/, 37 | 'options': { 38 | 'plugins': ['lodash'], 39 | 'presets': [['env', { 'modules': false, 'targets': { 'node': 4 } }]] 40 | } 41 | }] 42 | }, 43 | resolve: { 44 | alias: { 45 | 'vue$': 'vue/dist/vue.esm.js' 46 | }, 47 | extensions: ['*', '.js', '.vue', '.json'] 48 | }, 49 | performance: { 50 | hints: false 51 | }, 52 | devtool: '#eval-source-map', 53 | externals: { 54 | 'vue': 'vue' 55 | } 56 | } 57 | module.exports = [ 58 | merge(config, { 59 | entry: path.resolve(__dirname + '/src/install.js'), 60 | output: { 61 | filename: 'vue-magic-line.min.js', 62 | libraryTarget: 'window', 63 | library: 'VueMagicLine', 64 | }, 65 | plugins: [ 66 | new LodashModuleReplacementPlugin, 67 | new webpack.optimize.UglifyJsPlugin({ 68 | sourceMap: true, 69 | compress: { 70 | warnings: false 71 | } 72 | }), 73 | new webpack.LoaderOptionsPlugin({ 74 | minimize: true 75 | }) 76 | ] 77 | }), 78 | merge(config, { 79 | // entry: path.resolve(__dirname + '/src/VueMagicLine.vue'), 80 | entry: path.resolve(__dirname + '/src/install.js'), 81 | output: { 82 | filename: 'vue-magic-line.js', 83 | libraryTarget: 'umd', 84 | library: 'vue-magic-line', 85 | umdNamedDefine: true 86 | } 87 | }) 88 | ]; --------------------------------------------------------------------------------