Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue #123: Add support for input types: number, tel, email, date, time #124

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Issue #123: Add support for input types: number, tel, email, date, time #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
150 changes: 149 additions & 1 deletion libs/builder/components-bootstrap4.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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",
Expand Down
48 changes: 48 additions & 0 deletions libs/builder/inputs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down