mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-15 19:32:23 +03:00
Code Activity

Rename to form-wizard

Browse Source
This commit is contained in:
cristi
2017-04-18 01:57:33 +03:00
parent f9c2a7bfbe
commit ee55310579
11 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+14 -14
View File
@@ -1,7 +1,7 @@
# vue-tab-wizard
A dynamic tab wizard to split your forms easier
# vue-form-wizard
A dynamic form wizard to split your forms easier
Vue-tab-wizard is a vue based component with **no external depenendcies** which simplifies tab wizard management and allows you to focus on the functional part of your app rather than
Vue-form-wizard is a vue based component with **no external depenendcies** which simplifies tab wizard management and allows you to focus on the functional part of your app rather than
wasting time on details. Just forget about id's, external scripts and jQuery dependencies
# Demos
@@ -19,34 +19,34 @@ Other demos:
# Usage
## NPM
`npm install vue-tab-wizard`
`npm install vue-form-wizard`
## Or alternatively directly include the javascript
Download the css and js files from `dist` folder or reference them directly from github (check jsfiddle links)
```html
<link rel="stylesheet" href="vue-tab-wizard.min.css">
<script src="vue-tab-wizard.js"></script>
<link rel="stylesheet" href="vue-form-wizard.min.css">
<script src="vue-form-wizard.js"></script>
```
## Component registration
```js
//global registration
import 'vue-tab-wizard'
import 'vue-tab-wizard/dist/vue-tab-wizard.min.css'
import 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-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'
import {FormWizard, TabContent} from 'vue-form-wizard'
import 'vue-formwizard/dist/vue-form-wizard.min.css'
//component code
components: {
TabWizard,
FormWizard,
TabContent
}
```
## Template usage
```html
<tab-wizard>
<form-wizard>
<tab-content title="Personal details">
My first tab content
</tab-content>
@@ -56,11 +56,11 @@ components: {
<tab-content title="Last step">
Yuhuuu! This seems pretty damn simple
</tab-content>
</tab-wizard>
</form-wizard>
```
# Props
## Tab Wizard props
## Form Wizard props
```js
props: {
title: {
dist/example/index.html
Vendored
+2 -2
View File
@@ -10,7 +10,7 @@
<body>
<div id="app">
<div class="col-xs-8 col-xs-offset-2">
<tab-wizard @on-complete="onComplete">
<form-wizard @on-complete="onComplete">
<tab-content title="Personal details"
icon="ti-user">
My first tab content
@@ -23,7 +23,7 @@
icon="ti-check">
Yuhuuu! This seems pretty damn simple
</tab-content>
</tab-wizard>
</form-wizard>
</div>
</div>
<!-- built files will be auto injected -->
dist/vue-form-wizard.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
dist/vue-form-wizard.min.css
Vendored
+14
View File
File diff suppressed because one or more lines are too long
dist/vue-tab-wizard.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "vue-tab-wizard",
"version": "0.1.3",
"name": "vue-form-wizard",
"version": "1.0.0",
"description": "A vue based tab/form wizard",
"main": "dist/vue-tab-wizard.js",
"scripts": {
src/App.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div>
<tab-wizard @on-complete="onComplete"
<form-wizard @on-complete="onComplete"
shape="circle"
color="#e74c3c"
class="card">
@@ -17,7 +17,7 @@
Yuhuuu! This seems pretty damn simple
</tab-content>
</tab-wizard>
</form-wizard>
</div>
</template>
src/components/TabWizard.vue → src/components/FormWizard.vue
View File
src/index.js
+2 -2
View File
@@ -1,10 +1,10 @@
module.exports = {
TabWizard: require('./components/TabWizard.vue'),
FormWizard: require('./components/FormWizard.vue'),
TabContent: require('./components/TabContent.vue'),
install (Vue) {
Vue.component('tab-wizard', module.exports.TabWizard)
Vue.component('form-wizard', module.exports.FormWizard)
Vue.component('tab-content', module.exports.TabContent)
}
}
src/main.js
+2 -2
View File
@@ -2,8 +2,8 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import TabWizard from './index'
Vue.use(TabWizard)
import FormWizard from './index'
Vue.use(FormWizard)
Vue.config.productionTip = false
webpack.build.config.js
+3 -3
View File
@@ -56,8 +56,8 @@ module.exports = [
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, './dist'),
filename: "vue-tab-wizard.js",
library: "VueTabWizard",
filename: "vue-form-wizard.js",
library: "VueFormWizard",
libraryTarget: "umd"
},
@@ -75,7 +75,7 @@ module.exports = [
/* new webpack.BannerPlugin(banner, {
raw: true
}),*/
new ExtractTextPlugin({filename:"vue-tab-wizard.min.css", allChunks: true, fallback:"style-loader" }),
new ExtractTextPlugin({filename:"vue-form-wizard.min.css", allChunks: true, fallback:"style-loader" }),
new StatsPlugin( {filename:"./stats.json",
chunkModules: true
//exclude: [/node_modules[\\\/]react/]