Issue #123: Add support for input types: [number, tel, email, date, t…

…ime]
givanz · Nov 21, 2019 · b36bf76 · b36bf76
1 parent 7acf373
commit b36bf76
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 2 deletions.
diff --git a/editor.html b/editor.html
@@ -412,10 +412,26 @@
 
 </script>
 
+<script id="vvveb-input-emailinput" type="text/html">
+
+	<div>
+		<input name="{%=key%}" type="email" class="form-control"/>
+	</div>
+
+</script>
+
+<script id="vvveb-input-telinput" type="text/html">
+
+	<div>
+		<input name="{%=key%}" type="tel" class="form-control"/>
+	</div>
+
+</script>
+
 <script id="vvveb-input-textareainput" type="text/html">
 
 	<div>
-		<textarea name="{%=key%}" rows="3" class="form-control"/>
+		<textarea name="{%=key%}" rows="3" class="form-control"></textarea>
 	</div>
 
 </script>
@@ -690,6 +706,24 @@ <h6 class="header">{%=header%}</h6>
 	</div>
 </script>
 
+<script id="vvveb-input-dateinput" type="text/html">
+	<div>
+		<input name="{%=key%}" type="date" value="{%=value%}"
+		{% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %}
+		{% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %}
+		class="form-control"/>
+	</div>
+</script>
+
+<script id="vvveb-input-timeinput" type="text/html">
+	<div>
+		<input name="{%=key%}" type="time" value="{%=value%}"
+		{% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %}
+		{% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %}
+		class="form-control"/>
+	</div>
+</script>
+
 <script id="vvveb-input-button" type="text/html">
 	<div>
 		<button class="btn btn-sm btn-primary">

diff --git a/libs/builder/components-bootstrap4.js b/libs/builder/components-bootstrap4.js
@@ -69,7 +69,41 @@ function changeNodeName(node, newNodeName)
 }
 
 Vvveb.ComponentsGroup['Bootstrap 4'] =
-["html/container", "html/gridrow", "html/button", "html/buttongroup", "html/buttontoolbar", "html/heading", "html/image", "html/jumbotron", "html/alert", "html/card", "html/listgroup", "html/hr", "html/taglabel", "html/badge", "html/progress", "html/navbar", "html/breadcrumbs", "html/pagination", "html/form", "html/textinput", "html/textareainput", "html/selectinput", "html/fileinput", "html/checkbox", "html/radiobutton", "html/table", "html/paragraph", "html/link", "html/video", "html/button"];
+["html/container",
+ "html/gridrow",
+ "html/button",
+ "html/buttongroup",
+ "html/buttontoolbar",
+ "html/heading",
+ "html/image",
+ "html/jumbotron",
+ "html/alert",
+ "html/card",
+ "html/listgroup",
+ "html/hr",
+ "html/taglabel",
+ "html/badge",
+ "html/progress",
+ "html/navbar",
+ "html/breadcrumbs",
+ "html/pagination",
+ "html/form",
+ "html/textinput",
+ "html/telinput",
+ "html/emailinput",
+ "html/numberinput",
+ "html/dateinput",
+ "html/timeinput",
+ "html/textareainput",
+ "html/selectinput",
+ "html/fileinput",
+ "html/checkbox",
+ "html/radiobutton",
+ "html/table",
+ "html/paragraph",
+ "html/link",
+ "html/video",
+ "html/button"];
 
 
 var base_sort = 100;//start sorting for base component from 100 to allow extended properties to be first
@@ -1676,6 +1710,120 @@ Vvveb.Components.extend("_base", "html/textinput", {
     }]
 });
 
+Vvveb.Components.extend("_base", "html/emailinput", {
+    name: "Email Input",
+	attributes: {"type":"email"},
+    image: "icons/text_input.svg",
+    html: '<div class="form-group"><label>Text</label><input type="text" class="form-control"></div></div>',
+    properties: [{
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: EmailInput
+    }, {
+        name: "Placeholder",
+        key: "placeholder",
+        htmlAttr: "placeholder",
+        inputtype: TextInput
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/telinput", {
+    name: "Phone Number Input",
+	attributes: {"type":"tel"},
+    image: "icons/text_input.svg",
+    html: '<div class="form-group"><label>Text</label><input type="text" class="form-control"></div></div>',
+    properties: [{
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: TelInput
+    }, {
+        name: "Placeholder",
+        key: "placeholder",
+        htmlAttr: "placeholder",
+        inputtype: TextInput
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/numberinput", {
+    name: "Number Input",
+	attributes: {"type":"number"},
+    image: "icons/text_input.svg",
+    html: '<div class="form-group"><label>Text</label><input type="text" class="form-control"></div></div>',
+    properties: [{
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: NumberInput
+    }, {
+        name: "Placeholder",
+        key: "placeholder",
+        htmlAttr: "placeholder",
+        inputtype: TextInput
+    }, {
+        name: "Min",
+        key: "min",
+        htmlAttr: "min",
+        inputtype: NumberInput
+    }, {
+        name: "Max",
+        key: "max",
+        htmlAttr: "max",
+        inputtype: NumberInput
+    }, {
+         name: "Step",
+         key: "step",
+         htmlAttr: "step",
+         inputtype: NumberInput
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/dateinput", {
+    name: "Date Input",
+	attributes: {"type":"date"},
+    image: "icons/text_input.svg",
+    html: '<div class="form-group"><label>Text</label><input type="text" class="form-control"></div></div>',
+    properties: [{
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: DateInput
+    }, {
+        name: "Min",
+        key: "min",
+        htmlAttr: "min",
+        inputtype: DateInput
+    }, {
+        name: "Max",
+        key: "max",
+        htmlAttr: "max",
+        inputtype: DateInput
+    }]
+});
+Vvveb.Components.extend("_base", "html/timeinput", {
+    name: "Time Input",
+	attributes: {"type":"time"},
+    image: "icons/text_input.svg",
+    html: '<div class="form-group"><label>Text</label><input type="text" class="form-control"></div></div>',
+    properties: [{
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: TimeInput
+    }, {
+        name: "Min",
+        key: "min",
+        htmlAttr: "min",
+        inputtype: TimeInput
+    }, {
+        name: "Max",
+        key: "max",
+        htmlAttr: "max",
+        inputtype: TimeInput
+    }]
+});
+
 Vvveb.Components.extend("_base", "html/selectinput", {
 	nodes: ["select"],
     name: "Select Input",

diff --git a/libs/builder/inputs.js b/libs/builder/inputs.js
@@ -68,6 +68,54 @@ var TextInput = $.extend({}, Input, {
   }
 );
 
+var TelInput = $.extend({}, Input, {
+
+    events: [
+        ["blur", "onChange", "input"],
+	 ],
+
+	init: function(data) {
+		return this.render("telinput", data);
+	},
+  }
+);
+
+var EmailInput = $.extend({}, Input, {
+
+    events: [
+        ["blur", "onChange", "input"],
+	 ],
+
+	init: function(data) {
+		return this.render("emailinput", data);
+	},
+  }
+);
+
+var DateInput = $.extend({}, Input, {
+
+    events: [
+        ["blur", "onChange", "input"],
+	 ],
+
+	init: function(data) {
+		return this.render("dateinput", data);
+	},
+  }
+);
+
+var TimeInput = $.extend({}, Input, {
+
+    events: [
+        ["blur", "onChange", "input"],
+	 ],
+
+	init: function(data) {
+		return this.render("timeinput", data);
+	},
+  }
+);
+
 var TextareaInput = $.extend({}, Input, {
 
     events: [