Merge pull request #42 from icebob/independent

⭐ Merge independent component #31
vue-generators · Aug 22, 2016 · 5991625 · 5991625
2 parents 31a578d + 1228b64
commit 5991625
Show file tree

Hide file tree

Showing 12 changed files with 405 additions and 44,312 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ docs/_book/
 npm-debug.log
 selenium-debug.log
 test/unit/coverage
-test/e2e/reports 
+test/e2e/reports
+stats.json
diff --git a/dev/index.html b/dev/index.html
@@ -10,18 +10,27 @@
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
-
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.min.css">
+
+
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
-
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
+	<!-- jQuery dependent -->
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
+	<!-- Vanilla libs -->
 	<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
+	<script type="text/javascript" src="https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js"></script>
+	<script type="text/javascript" src="https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js"></script>
+
   </head>
   <body>
     <div class="container-fluid"></div>

diff --git a/dev/schema.js b/dev/schema.js
@@ -191,6 +191,39 @@ module.exports = {
 			styleClasses: "half-width"
 				//validator: validators.regexp
 		}, {
+			type: "cleave",
+			label: "Mobile  (Cleave.js field)",
+			model: "mobile",
+			cleaveOptions: {
+				// Credit Card
+			    creditCard: false,
+			    onCreditCardTypeChanged(type){
+					console.log("onCreditCardTypeChanged", type);	
+				},
+			    // Phone
+			    phone: false,
+    			phoneRegionCode: 'AU',
+    			// Date
+    			date: false,
+    			datePattern: ['d', 'm', 'Y'],
+    			// Numerals
+    			numeral: false,
+    			numeralThousandsGroupStyle: 'thousand',
+    			numeralDecimalScale: 2,
+    			numeralDecimalMark: '.',
+    			// General
+    			blocks: [0, 2, 3, 4],
+    			delimiter: ' ',
+    			delimiters: ['(', ') ', '-', '-'],
+    			// prefix: '(',
+    			numericOnly: true,
+    			uppercase: false,
+    			lowercase: false
+			},
+
+			styleClasses: "half-width",
+			validator: validators.required
+		}, {			
 			type: "masked",
 			label: "Mobile  (masked field)",
 			model: "mobile",
@@ -255,9 +288,57 @@ module.exports = {
 				model.age = moment().year() - moment(newVal).year();
 			}
 
-		},
+		}, {
+			type: "pikaday",
+			label: "DOB (pikaday field)",
+			model: "dob",
+			required: true,
+			placeholder: "User's birth of date",
+			min: moment("1900-01-01").toDate(),
+			max: moment("2016-01-01").toDate(),
+			validator: [
+				validators.date
+			],
+			pikadayOptions: {
+				bound: true,
+				position: 'bottom left',
+				reposition: true,
+				// container: ,
+				format: 'YYYY-MM-DD HH:mm:ss',
+				// formatStrict: ,
+				// defaultDate: ,
+				// setDefaultDate: ,
+				firstDay: 1,
+				// minDate: ,
+				// maxDate: ,
+				disableWeekends: false,
+				// disableDayFn: ,
+				// yearRange: ,
+				showWeekNumber: false,
+				isRTL: false,
+				i18n: {
+				    previousMonth : 'Previous Month',
+				    nextMonth     : 'Next Month',
+				    months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
+				    weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
+				    weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
+				},
+				// yearSuffix: ,
+				showMonthAfterYear: false,
+				showDaysInNextAndPreviousMonths: false,
+				// numberOfMonths: ,
+				// mainCalendar: ,
+				theme: null,
+				// onSelect: ,
+				// onOpen: ,
+				// onClose: ,
+				// onDraw: ,
+			},
+			onChanged(model, newVal, oldVal, field) {
+				model.age = moment().year() - moment(newVal).year();
+			}
 
-		{
+		},{
 			type: "dateTime",
 			label: "DT",
 			model: "dt",
@@ -298,6 +379,27 @@ module.exports = {
 			valueOff: "male"
 		},
 
+		{
+			type: "noUiSlider",
+			label: "Rank (noUiSlider field)",
+			model: "rank",
+			multi: true,
+			min: 1,
+			max: 10,
+			required: true,
+			sliderOptions: {
+				// connect: "lower",	// "lower", "upper", true, false
+				// margin: 2 //number
+				// limit: 2 //number
+				step:1,
+				// orientation:"horizontal", //"vertical", "horizontal"
+				// direction: "ltr", //"ltr", "rtl"
+				// tooltips: false, // false, true, formatter, array[formatter or false]
+				// animate: true,
+			},
+			// validator: validators.integer
+		},
+
 		{
 			type: "slider",
 			label: "Rank (slider field)",
@@ -309,7 +411,7 @@ module.exports = {
 			sliderOptions: {
 				grid: true
 			},
-			validator: validators.integer
+			// validator: validators.integer
 		},
 
 		{