From 891de5adb16efcdaff4dfc7191c4e892fc16eff9 Mon Sep 17 00:00:00 2001 From: Cristi Jora Date: Sun, 16 Apr 2017 18:30:13 +0300 Subject: [PATCH 1/6] Update README.md --- README.md | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/README.md b/README.md index b8c7fdf..b834b1c 100644 --- a/README.md +++ b/README.md @@ -26,3 +26,67 @@ Note: For now vue-tab-wizard requires bootstrap to look as it should. Also vue-t ``` + +# Props +## Tab Wizard props +```js +props: { + title: { + type: String, + default: 'Awesome Wizard' + }, + subtitle: { + type: String, + default: 'Split a complicated flow in multiple steps' + }, + nextButtonText: { + type: String, + default: 'Next' + }, + backButtonText: { + type: String, + default: 'Back' + }, + finishButtonText: { + type: String, + default: 'Finish' + }, + color: { + type: String, + default: '#e74c3c' //circle, border and text color + }, + transition: { + type: String, + default: '' //name of the transition when transition between steps + }, + startIndex: { + type: Number, + default: 0 //the index of the initial tab that you want to be active + } +} +``` + +## Tab content props +```js +props: { + title: { + type: String, + default: '' + }, + icon: { + type: String, + default: '' //name of the icon. Supports themify icons only for now + }, + beforeChange: { + type: Function //function to execute before changing tabs. Has to return true or false. If returns false, tab change is restricted + } +} +``` + +# Slots +* **Default** - Used for tab-contents +* **title** - Upper title section including sub-title +* **prev** - Previous button content (no need to worry about handling the button functionality) +* **next** - Next button content +* **finish** - Finish button content + From 45e8a2dd8dc4ebceb59280c1e271738b5c5ae97b Mon Sep 17 00:00:00 2001 From: Cristi Jora Date: Sun, 16 Apr 2017 18:35:07 +0300 Subject: [PATCH 2/6] Update README.md --- README.md | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b834b1c..c217695 100644 --- a/README.md +++ b/README.md @@ -51,17 +51,26 @@ props: { type: String, default: 'Finish' }, + /*** + * Applies to text, border and circle + */ color: { type: String, default: '#e74c3c' //circle, border and text color }, + /** + * name of the transition when transition between steps + */ transition: { type: String, default: '' //name of the transition when transition between steps }, + /*** + * Index of the initial tab to display + */ startIndex: { type: Number, - default: 0 //the index of the initial tab that you want to be active + default: 0 } } ``` @@ -73,12 +82,20 @@ props: { type: String, default: '' }, + /*** + * Icon name for the upper circle corresponding to the tab + * Supports themify icons only for now. + */ icon: { type: String, - default: '' //name of the icon. Supports themify icons only for now + default: '' }, + /*** + * Function to execute before tab switch. Return value must be boolean + * If the return result is false, tab switch is restricted + */ beforeChange: { - type: Function //function to execute before changing tabs. Has to return true or false. If returns false, tab change is restricted + type: Function } } ``` From 5af473d70a42253a18eb2b0cfeb319f05cd4606a Mon Sep 17 00:00:00 2001 From: Cristi Jora Date: Sun, 16 Apr 2017 18:38:08 +0300 Subject: [PATCH 3/6] Update README.md --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index c217695..2262851 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,7 @@ # WIP vue-tab-wizard A dynamic tab wizard to split your forms easier -Forms are hard to handle especially if you have a lot of fields. A page often looks very ugly when it has a ton of form fields. -There are many tab wizards out there in the wild, but most of them are jQuery based and once you have a lot of tabs, they are hard to manage/modify -or customize in an easy declarative way. -Vue-tab-wizard is a simple component which simplifies your tab wizard and lets you focus on the functional part of your app rather than +Vue-tab-wizard is a vue based component 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 # Demo From 803ab6f48cf6dfc3b11a20367af3108a85a39fab Mon Sep 17 00:00:00 2001 From: Cristi Jora Date: Sun, 16 Apr 2017 18:40:32 +0300 Subject: [PATCH 4/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2262851..2ebaefc 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Vue-tab-wizard is a vue based component which simplifies tab wizard management a wasting time on details. Just forget about id's, external scripts and jQuery dependencies # Demo -Refer to this [fiddle](https://jsfiddle.net/CristiJ/bt5dhqtf/8/) +Refer to this [fiddle](https://jsfiddle.net/CristiJ/bt5dhqtf/40/) Note: For now vue-tab-wizard requires bootstrap to look as it should. Also vue-tab-wizard works with themify-icons (WIP) From edf06b9433648bca1acfa274b0941922926a1efc Mon Sep 17 00:00:00 2001 From: Cristi Jora Date: Sun, 16 Apr 2017 18:48:03 +0300 Subject: [PATCH 5/6] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2ebaefc..1060920 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ A dynamic tab wizard to split your forms easier Vue-tab-wizard is a vue based component 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 +Vue-tab-wizard is **bootstrap dependent** for now and won't work without the css from bootstrap (working on making it bootstrap free) + # Demo Refer to this [fiddle](https://jsfiddle.net/CristiJ/bt5dhqtf/40/) From c9e7ba0ac6118c2b865dc337808e5204adeccf30 Mon Sep 17 00:00:00 2001 From: Cristi Jora Date: Sun, 16 Apr 2017 18:49:09 +0300 Subject: [PATCH 6/6] Update README.md --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index 1060920..daaa880 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,9 @@ A dynamic tab wizard to split your forms easier Vue-tab-wizard is a vue based component 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 -Vue-tab-wizard is **bootstrap dependent** for now and won't work without the css from bootstrap (working on making it bootstrap free) - # Demo Refer to this [fiddle](https://jsfiddle.net/CristiJ/bt5dhqtf/40/) - -Note: For now vue-tab-wizard requires bootstrap to look as it should. Also vue-tab-wizard works with themify-icons (WIP) +Vue-tab-wizard is **bootstrap dependent** for now and won't work without the css from bootstrap (working on making it bootstrap free). Also vue-tab-wizard works with themify-icons only (WIP) # Usage ```html