diff --git a/README.md b/README.md index d2fefca..ba112d0 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ wasting time on details. Just forget about id's, external scripts and jQuery dep # Demos Basic [demo](https://jsfiddle.net/CristiJ/bt5dhqtf/80/) -Other demos: +Other demos: * [Squared steps](https://jsfiddle.net/CristiJ/bt5dhqtf/62/) * [Tabbed steps](https://jsfiddle.net/CristiJ/bt5dhqtf/63/) * [Step index](https://jsfiddle.net/CristiJ/bt5dhqtf/79/) Start at any step. Note: start-index is zero-based and the count starts at 0 @@ -16,7 +16,21 @@ Other demos: * [Customized buttons with slots](https://jsfiddle.net/CristiJ/bt5dhqtf/76/) Replace stuff you don't like # Usage -```html +```vue +//global registration +import 'vue-tab-wizard' +import 'vue-tab-wizard/dist/vue-tab-wizard.min.css' +Vue.use(VueTabWizard) + +//local registration +import {TabWizard, TabContent} from 'vue-tab-wizard' +import 'vue-tab-wizard/dist/vue-tab-wizard.min.css' +//component code +components: { + TabWizard, + TabContent +} + My first tab content @@ -66,14 +80,14 @@ props: { */ shape: { type: String, - default: 'circle' + default: 'circle' }, /** * name of the transition when transition between steps */ transition: { type: String, - default: '' //name of the transition when transition between steps + default: '' //name of the transition when transition between steps }, /*** * Index of the initial tab to display diff --git a/package.json b/package.json index a3913ce..a5d1a06 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "vue-tab-wizard", - "version": "1.0.0", - "description": "A vue based tab wizard", - "main": "dev/index.js", + "version": "0.1.0", + "description": "A vue based tab/form wizard", + "main": "dist/vue-tab-wizard.js", "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", diff --git a/webpack.build.config.js b/webpack.build.config.js deleted file mode 100644 index 1b4e4fa..0000000 --- a/webpack.build.config.js +++ /dev/null @@ -1,90 +0,0 @@ -var webpack = require("webpack"); -var path = require("path"); -// var version = require("./package.json").version; -// var banner = "/**\n" + " * vue-form-generator v" + version + "\n" + " * https://github.com/icebob/vue-form-generator\n" + " * Released under the MIT License.\n" + " */\n"; -var ExtractTextPlugin = require("extract-text-webpack-plugin"); -var StatsPlugin = require("stats-webpack-plugin"); -var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); - -var cssLoader = { - loader: "css-loader", - options: { - minimize: true - } -}; -var sassLoader = { - loader: "sass-loader", - options: { - minimize: true - } -}; - -var loaders = [ - { - test: /\.js?$/, - exclude: /node_modules/, - loader: "babel-loader" - }, - { - test: /\.css$/, - loader: 'css-loader' - }, - { - test: /\.scss$/, - loaders: ['css-loader', 'sass-loader'] - }, - { - test: /\.vue?$/, - loader: "vue-loader", - /* options:{ - loaders:{ - scss: 'css-loader!sass-loader' - } - }*/ - options:{ - loaders: { - css: ExtractTextPlugin.extract({use:[cssLoader]}), - postcss: ExtractTextPlugin.extract({use:[cssLoader]}), - scss: ExtractTextPlugin.extract({use:[cssLoader,sassLoader]}), - } - } - } -]; - -module.exports = [ - { - entry: "./src/index.js", - output: { - path: path.resolve(__dirname, './dist'), - filename: "vue-tab-wizard.js", - library: "VueTabWizard", - libraryTarget: "umd" - }, - - plugins: [ - new webpack.DefinePlugin({ - "process.env" : { - NODE_ENV : JSON.stringify("production") - } - }), - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - } - }), - /* new webpack.BannerPlugin(banner, { - raw: true - }),*/ - new ExtractTextPlugin({filename:"vue-tab-wizard.min.css", allChunks: true, fallback:"style-loader" }), - new StatsPlugin( {filename:"./stats.json", - chunkModules: true - //exclude: [/node_modules[\\\/]react/] - }), - ], - - module: { - rules:loaders - }, - - } -];