mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-24 12:40:32 +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 # vue-form-wizard
A dynamic tab wizard to split your forms easier 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 wasting time on details. Just forget about id's, external scripts and jQuery dependencies
# Demos # Demos
@@ -19,34 +19,34 @@ Other demos:
# Usage # Usage
## NPM ## NPM
`npm install vue-tab-wizard` `npm install vue-form-wizard`
## Or alternatively directly include the javascript ## Or alternatively directly include the javascript
Download the css and js files from `dist` folder or reference them directly from github (check jsfiddle links) Download the css and js files from `dist` folder or reference them directly from github (check jsfiddle links)
```html ```html
<link rel="stylesheet" href="vue-tab-wizard.min.css"> <link rel="stylesheet" href="vue-form-wizard.min.css">
<script src="vue-tab-wizard.js"></script> <script src="vue-form-wizard.js"></script>
``` ```
## Component registration ## Component registration
```js ```js
//global registration //global registration
import 'vue-tab-wizard' import 'vue-form-wizard'
import 'vue-tab-wizard/dist/vue-tab-wizard.min.css' import 'vue-form-wizard/dist/vue-form-wizard.min.css'
Vue.use(VueTabWizard) Vue.use(VueTabWizard)
//local registration //local registration
import {TabWizard, TabContent} from 'vue-tab-wizard' import {FormWizard, TabContent} from 'vue-form-wizard'
import 'vue-tab-wizard/dist/vue-tab-wizard.min.css' import 'vue-formwizard/dist/vue-form-wizard.min.css'
//component code //component code
components: { components: {
TabWizard, FormWizard,
TabContent TabContent
} }
``` ```
## Template usage ## Template usage
```html ```html
<tab-wizard> <form-wizard>
<tab-content title="Personal details"> <tab-content title="Personal details">
My first tab content My first tab content
</tab-content> </tab-content>
@@ -56,11 +56,11 @@ components: {
<tab-content title="Last step"> <tab-content title="Last step">
Yuhuuu! This seems pretty damn simple Yuhuuu! This seems pretty damn simple
</tab-content> </tab-content>
</tab-wizard> </form-wizard>
``` ```
# Props # Props
## Tab Wizard props ## Form Wizard props
```js ```js
props: { props: {
title: { title: {
dist/example/index.html
Vendored
+2 -2
View File
@@ -10,7 +10,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="col-xs-8 col-xs-offset-2"> <div class="col-xs-8 col-xs-offset-2">
<tab-wizard @on-complete="onComplete"> <form-wizard @on-complete="onComplete">
<tab-content title="Personal details" <tab-content title="Personal details"
icon="ti-user"> icon="ti-user">
My first tab content My first tab content
@@ -23,7 +23,7 @@
icon="ti-check"> icon="ti-check">
Yuhuuu! This seems pretty damn simple Yuhuuu! This seems pretty damn simple
</tab-content> </tab-content>
</tab-wizard> </form-wizard>
</div> </div>
</div> </div>
<!-- built files will be auto injected --> <!-- 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", "name": "vue-form-wizard",
"version": "0.1.3", "version": "1.0.0",
"description": "A vue based tab/form wizard", "description": "A vue based tab/form wizard",
"main": "dist/vue-tab-wizard.js", "main": "dist/vue-tab-wizard.js",
"scripts": { "scripts": {
src/App.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<tab-wizard @on-complete="onComplete" <form-wizard @on-complete="onComplete"
shape="circle" shape="circle"
color="#e74c3c" color="#e74c3c"
class="card"> class="card">
@@ -17,7 +17,7 @@
Yuhuuu! This seems pretty damn simple Yuhuuu! This seems pretty damn simple
</tab-content> </tab-content>
</tab-wizard> </form-wizard>
</div> </div>
</template> </template>
src/components/TabWizard.vue → src/components/FormWizard.vue
View File
src/index.js
+2 -2
View File
@@ -1,10 +1,10 @@
module.exports = { module.exports = {
TabWizard: require('./components/TabWizard.vue'), FormWizard: require('./components/FormWizard.vue'),
TabContent: require('./components/TabContent.vue'), TabContent: require('./components/TabContent.vue'),
install (Vue) { install (Vue) {
Vue.component('tab-wizard', module.exports.TabWizard) Vue.component('form-wizard', module.exports.FormWizard)
Vue.component('tab-content', module.exports.TabContent) 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. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import TabWizard from './index' import FormWizard from './index'
Vue.use(TabWizard) Vue.use(FormWizard)
Vue.config.productionTip = false Vue.config.productionTip = false
webpack.build.config.js
+3 -3
View File
@@ -56,8 +56,8 @@ module.exports = [
entry: "./src/index.js", entry: "./src/index.js",
output: { output: {
path: path.resolve(__dirname, './dist'), path: path.resolve(__dirname, './dist'),
filename: "vue-tab-wizard.js", filename: "vue-form-wizard.js",
library: "VueTabWizard", library: "VueFormWizard",
libraryTarget: "umd" libraryTarget: "umd"
}, },
@@ -75,7 +75,7 @@ module.exports = [
/* new webpack.BannerPlugin(banner, { /* new webpack.BannerPlugin(banner, {
raw: true 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", new StatsPlugin( {filename:"./stats.json",
chunkModules: true chunkModules: true
//exclude: [/node_modules[\\\/]react/] //exclude: [/node_modules[\\\/]react/]