diff --git a/docs/editors/text-input--configuration-editor.png b/docs/editors/text-input--configuration-editor.png index fda64e14..8c3ace38 100644 Binary files a/docs/editors/text-input--configuration-editor.png and b/docs/editors/text-input--configuration-editor.png differ diff --git a/docs/editors/text-input.md b/docs/editors/text-input.md index 8d7c9157..d88ffcdd 100644 --- a/docs/editors/text-input.md +++ b/docs/editors/text-input.md @@ -13,7 +13,15 @@ In your new Data Type, selected the "[Contentment] Text Input" option. You will ![Configuration Editor for Text Input](text-input--configuration-editor.png) -The first field is **Placeholder text**, which is used to add initial instructional information for the text input, this is not a default value. +The first field is **Input type**, which is used to configure the type of input expected. You can select from: +* **Text** (for normal text) - *this is the default* +* **Email** (for an email address) +* **Telephone** (for a telephone number) +* **URL** (for a web address) + +> From an HTML5 perspective, this is the [``'s `type` attribute](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types). + +The second field is **Placeholder text**, which is used to add initial instructional information for the text input, this is not a default value. > For technical users, from a HTML5 perspective, this is the [``'s `placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#placeholder). @@ -35,6 +43,9 @@ The **Enable spellcheck?** option can enable your web-browser's spellcheck funct > For technical users, this is the [``'s `spellcheck` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#spellcheck). +The **Prepend icon** - allows you to optionally select an icon that is shown before your input control. + +The **Append icon** - this allows you to optionally select an icon that is shown after your input control. ### How to use the editor? diff --git a/src/Umbraco.Cms.10.x/uSync/v10/DataTypes/ContentmentTextInputEmail.config b/src/Umbraco.Cms.10.x/uSync/v10/DataTypes/ContentmentTextInputEmail.config new file mode 100644 index 00000000..d4b7ddd9 --- /dev/null +++ b/src/Umbraco.Cms.10.x/uSync/v10/DataTypes/ContentmentTextInputEmail.config @@ -0,0 +1,16 @@ + + + + [Contentment] Text Input - Email + Umbraco.Community.Contentment.TextInput + Nvarchar + + + \ No newline at end of file diff --git a/src/Umbraco.Community.Contentment/DataEditors/TextInput/TextInputConfigurationEditor.cs b/src/Umbraco.Community.Contentment/DataEditors/TextInput/TextInputConfigurationEditor.cs index c4780460..947a7287 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/TextInput/TextInputConfigurationEditor.cs +++ b/src/Umbraco.Community.Contentment/DataEditors/TextInput/TextInputConfigurationEditor.cs @@ -32,6 +32,38 @@ public TextInputConfigurationEditor(ConfigurationEditorUtility utility, IIOHelpe var dataSources = new List(_utility.GetConfigurationEditorModels(shortStringHelper)); + Fields.Add(new ConfigurationField + { + Key = "inputType", + Name = "Input type", + Description = "Select the HTML input type.", + View = ioHelper.ResolveRelativeOrVirtualUrl(DropdownListDataListEditor.DataEditorViewPath), + Config = new Dictionary + { + { DropdownListDataListEditor.AllowEmpty, Constants.Values.False }, + { Constants.Conventions.ConfigurationFieldAliases.Items, new DataListItem[] + { + new DataListItem() + { + Name = "Text", Value = "text" + }, + new DataListItem() + { + Name = "Email", Value = "email" + }, + new DataListItem() + { + Name = "Telephone", Value = "tel" + }, + new DataListItem() + { + Name = "URL", Value = "url" + } + } + } + } + }); + Fields.Add(new ConfigurationField { Key = "placeholderText", diff --git a/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.html b/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.html index db262037..62f69cd1 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.html +++ b/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.html @@ -17,7 +17,7 @@ ng-trim="false" id="{{model.alias}}" class="umb-property-editor umb-textstring" - type="text" + type="{{vm.inputType}}" list="{{vm.dataListId}}" autocomplete="{{vm.autoComplete}}" spellcheck="{{vm.spellCheck}}" diff --git a/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.js b/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.js index c07dcc44..644c4708 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.js +++ b/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.js @@ -11,6 +11,7 @@ angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors. var defaultConfig = { items: [], + inputType: 'text', autocomplete: 0, placeholderText: null, defaultValue: null, @@ -18,6 +19,7 @@ angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors. append: null, maxChars: 500 }; + var config = Object.assign({}, defaultConfig, $scope.model.config); var vm = this; @@ -30,6 +32,7 @@ angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors. $scope.model.value = $scope.model.value.join(", "); } + vm.inputType = config.inputType; vm.autoComplete = Object.toBoolean(config.autocomplete) ? "on" : "off"; vm.spellCheck = Object.toBoolean(config.spellcheck) ? "true" : "false"; vm.placeholderText = config.placeholderText;