mirror of
https://github.com/tenrok/vue-form-wizard.git
synced 2026-06-23 22:20:32 +03:00
Readme update
Npm publish preps
This commit is contained in:
@@ -7,7 +7,7 @@ wasting time on details. Just forget about id's, external scripts and jQuery dep
|
|||||||
# Demos
|
# Demos
|
||||||
Basic [demo](https://jsfiddle.net/CristiJ/bt5dhqtf/80/)
|
Basic [demo](https://jsfiddle.net/CristiJ/bt5dhqtf/80/)
|
||||||
|
|
||||||
Other demos:
|
Other demos:
|
||||||
* [Squared steps](https://jsfiddle.net/CristiJ/bt5dhqtf/62/)
|
* [Squared steps](https://jsfiddle.net/CristiJ/bt5dhqtf/62/)
|
||||||
* [Tabbed steps](https://jsfiddle.net/CristiJ/bt5dhqtf/63/)
|
* [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
|
* [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
|
* [Customized buttons with slots](https://jsfiddle.net/CristiJ/bt5dhqtf/76/) Replace stuff you don't like
|
||||||
|
|
||||||
# Usage
|
# 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
|
||||||
|
}
|
||||||
|
|
||||||
<tab-wizard>
|
<tab-wizard>
|
||||||
<tab-content title="Personal details">
|
<tab-content title="Personal details">
|
||||||
My first tab content
|
My first tab content
|
||||||
@@ -66,14 +80,14 @@ props: {
|
|||||||
*/
|
*/
|
||||||
shape: {
|
shape: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'circle'
|
default: 'circle'
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* name of the transition when transition between steps
|
* name of the transition when transition between steps
|
||||||
*/
|
*/
|
||||||
transition: {
|
transition: {
|
||||||
type: String,
|
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
|
* Index of the initial tab to display
|
||||||
|
|||||||
+3
-3
@@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-tab-wizard",
|
"name": "vue-tab-wizard",
|
||||||
"version": "1.0.0",
|
"version": "0.1.0",
|
||||||
"description": "A vue based tab wizard",
|
"description": "A vue based tab/form wizard",
|
||||||
"main": "dev/index.js",
|
"main": "dist/vue-tab-wizard.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "node build/dev-server.js",
|
"dev": "node build/dev-server.js",
|
||||||
"start": "node build/dev-server.js",
|
"start": "node build/dev-server.js",
|
||||||
|
|||||||
@@ -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
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
];
|
|
||||||
Reference in New Issue
Block a user