P
CUI v1.20.1177
Documentation and examples in using Text Fields with PCUI
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="~/PCUIAssets/Bundles/css/TextFields.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/Bundles/js/Vuelidate.min.js"></script>
<script src="~/PCUIAssets/Bundles/js/TextFields.min.js"></script>
<div class="pcui">
<div id="autocomplete-dropdown-fields">
<pcui_text_field :autocomplete-dropdown-complex-table-props="autocompleteDropdown.complexTable.props"
:autocomplete-dropdown-on-select="autocompleteDropdownOnSelect"
v-model="autocompleteDropdownModel"
id="autocomplete-dropdown"
type="autocomplete-dropdown"
label="Autocomplete dropdown"
ref="autocomplete-dropdown-field">
</pcui_text_field>
</div>
</div>
new Vue({
el: '#autocomplete-dropdown-fields',
name: 'Autocomplete Dropdown Fields',
data: {
autocompleteDropdownModel: '',
autocompleteDropdown: {
complexTable: {
data: {
ajaxRequest: null,
isAllDataLoaded: false,
isLazyLoading: false,
lazyLoadingOffset: 15
},
props: {
fixedHeader: false,
headers: [
{
text: 'Job',
value: 'job',
width: '200px'
},
{
text: 'Status',
value: 'status'
},
{
text: 'Job location',
value: 'jobLocation'
},
{
text: 'Job start',
value: 'jobStart'
},
{
text: 'Action',
value: 'action',
width: '120px'
}
],
onScroll: function () { }
}
}
}
},
components: {
pcui_text_field: PCUIFixedLabelTextFieldComponent
},
watch: {
autocompleteDropdownModel: function (newValue) {
var self = this;
var ctVm = self.$refs['autocomplete-dropdown-field'].$refs['autocomplete-dropdown-complex-table'];
if (ctVm !== undefined) {
setTimeout(function () {
if (isStringNullOrWhiteSpace(newValue)) {
self.autocompleteDropdownComplexTableAbortAjaxRequest();
self.autocompleteDropdownComplexTableReset();
self.autocompleteDropdownComplexTableResetLazyLoad();
} else {
self.autocompleteDropdownComplexTableSearch();
}
}, 100);
}
}
},
mounted: function () {
var self = this;
self.autocompleteDropdown.complexTable.props.onLazyLoad = self.autocompleteDropdownComplexTableOnLazyLoad;
},
methods: {
autocompleteDropdownComplexTableAbortAjaxRequest: function () {
var self = this;
var ctData = self.autocompleteDropdown.complexTable.data;
if (ctData.ajaxRequest !== null) {
ctData.ajaxRequest.abort();
}
},
autocompleteDropdownComplexTableLazyLoad: function (vm) {
var self = this;
var ctData = self.autocompleteDropdown.complexTable.data;
vm.showFooterRow('lazy-loading-spinner');
ctData.isLazyLoading = true;
$.ajax({
url: getJobsURL,
type: 'GET',
dataType: 'json',
data: {
searchParam: self.autocompleteDropdownModel,
startIndex: ctData.lazyLoadingOffset
},
success: function (data) {
setTimeout(function () {
vm.addRows(data);
ctData.isAllDataLoaded = data.length === 0;
}, 1000);
},
error: function (data) {
/* Error handling goes here... */
},
complete: function () {
setTimeout(function () {
ctData.isLazyLoading = false;
ctData.lazyLoadingOffset += 15;
if (ctData.isAllDataLoaded) {
vm.showFooterRow('all-results');
}
}, 1000);
}
});
},
autocompleteDropdownComplexTableOnLazyLoad: function (vm) {
var self = this;
var ctData = self.autocompleteDropdown.complexTable.data;
if (ctData.isAllDataLoaded === false &&
ctData.isLazyLoading === false) {
self.autocompleteDropdownComplexTableLazyLoad(vm);
}
},
autocompleteDropdownComplexTableReset: function () {
var self = this;
var ctVm = self.$refs['autocomplete-dropdown-field'].$refs['autocomplete-dropdown-complex-table'];
ctVm.resetTableScroll();
ctVm.tableRows = [];
},
autocompleteDropdownComplexTableResetLazyLoad: function () {
var self = this;
var ctData = self.autocompleteDropdown.complexTable.data;
var ctVm = self.$refs['autocomplete-dropdown-field'].$refs['autocomplete-dropdown-complex-table'];
ctData.isAllDataLoaded = false;
ctData.isLazyLoading = false;
ctData.lazyLoadingOffset = 15;
ctVm.hideFooterRow();
},
autocompleteDropdownComplexTableSearch: function () {
var self = this;
var ctData = self.autocompleteDropdown.complexTable.data;
var ctVm = self.$refs['autocomplete-dropdown-field'].$refs['autocomplete-dropdown-complex-table'];
self.autocompleteDropdownComplexTableAbortAjaxRequest();
self.autocompleteDropdownComplexTableResetLazyLoad();
ctVm.resetTableScroll();
ctData.ajaxRequest = $.ajax({
url: getJobsURL,
type: 'GET',
dataType: 'json',
data: {
searchParam: self.autocompleteDropdownModel
},
success: function (data) {
ctVm.tableRows = data;
setTimeout(function () {
ctVm.resetTableHeight();
}, 100);
},
error: function (data) {
/* Error handling goes here... */
}
});
},
autocompleteDropdownOnSelect: function (event, elem, props, vm) {
var self = this;
self.autocompleteDropdownModel = props.item.job.text;
self.autocompleteDropdownComplexTableSearch();
}
}
});
Element.scrollIntoView()
which is being utilized in the current mechanism.
stickyheader is set torelativefor the rows to be able to be visible when browsing from bottom to top.
<div class="pcui">
<div id="floating-text-fields">
<pcui_text_field id="floating-label-plain"
v-model="floatingPlain"
layout="floating-label"
label="Plain text field">
</pcui_text_field>
<pcui_text_field id="floating-label-with-hint"
v-model="floatingWithHintText"
layout="floating-label"
label="With hint text"
placeholder="Hint text">
</pcui_text_field>
<pcui_text_field id="floating-label-with-helper"
v-model="floatingWithHelperText"
layout="floating-label"
label="With helper text"
helper-text="Helper text">
</pcui_text_field>
<pcui_text_field id="floating-label-with-error"
v-model="floatingWithErrorMsg"
layout="floating-label"
label="With error message"
error-text="Error message, explaining error">
</pcui_text_field>
<pcui_text_field id="floating-label-with-warning"
v-model="floatingWithWarningMsg"
layout="floating-label"
label="With warning message"
warning-text="Warning message, explaining warning">
</pcui_text_field>
<pcui_text_field id="floating-label-with-counter"
v-model="floatingWithCounter"
layout="floating-label"
label="With counter"
has-counter="true"
max-length="40">
</pcui_text_field>
<pcui_text_field id="floating-label-disabled"
v-model="floatingDisabled"
layout="floating-label"
label="Disabled"
disabled="true">
</pcui_text_field>
<pcui_text_field id="floating-label-with-value"
v-model="floatingDisabledWithValue"
layout="floating-label"
label="Disabled with value"
disabled="true">
</pcui_text_field>
<pcui_text_field id="floating-label-with-tooltip"
v-model="floatingWithTooltipIcon"
layout="floating-label"
label="With tooltip icon"
tooltip-icon-text="Tooltip">
</pcui_text_field>
<pcui_text_field id="floating-label-with-prefix"
v-model="floatingWithPrefix"
layout="floating-label"
label="With prefix"
prefix="$">
</pcui_text_field>
<pcui_text_field id="floating-label-with-suffix"
v-model="floatingWithSuffix"
layout="floating-label"
label="With suffix"
suffix="km">
</pcui_text_field>
<pcui_text_field id="floating-label-with-clear"
v-model="floatingWithClearButton"
layout="floating-label"
label="With clear button"
has-clear="true">
</pcui_text_field>
<pcui_text_field id="floating-label-with-formatted-value"
v-model="floatingWithFormattedValue"
layout="floating-label"
label="With formatted value"
placeholder="(+61) 1234 - 567 - 890"
format="(+61) #### - ### - ###">
</pcui_text_field>
<pcui_text_field id="floating-label-dropdown"
v-model="floatingDropdown"
layout="floating-label"
label="Dropdown"
type="dropdown"
v-bind:options="floatingDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="-- Select one --">
</pcui_text_field>
<pcui_text_field id="floating-label-tagging"
v-model="floatingTagging"
layout="floating-label"
label="Tagging"
type="tagging"
v-bind:options="taggingOptions"
track-by="id"
dropdown-label="text"
tagging-placeholder="Select all that apply">
</pcui_text_field>
<pcui_text_field id="floating-label-with-search"
v-model="floatingWithSearch"
layout="floating-label"
label="With search"
type="search"
v-bind:options="floatingDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search">
</pcui_text_field>
<pcui_text_field id="floating-label-with-search-free-text-allowed"
v-model="floatingWithSearchFreeTextAllowed"
layout="floating-label"
label="With search (free text allowed)"
type="search"
v-bind:options="floatingDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search"
allow-free-text="true">
</pcui_text_field>
<pcui_text_field id="floating-label-password"
v-model="floatingUsingPassword"
layout="floating-label"
label="Password"
type="password">
</pcui_text_field>
<pcui_text_field id="floating-label-multiline"
v-model="floatingUsingMultiline"
layout="floating-label"
label="Multiline"
type="multiline">
</pcui_text_field>
<pcui_text_field id="floating-label-pasting-disabled"
v-model="floatingPastingDisabled"
disable-pasting="true"
layout="floating-label"
label="Pasting disabled">
</pcui_text_field>
<pcui_text_field id="floating-label-mandatory-indicator"
v-model="floatingMandatoryField"
layout="floating-label"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger">
</pcui_text_field>
<pcui_text_field id="floating-label-mandatory-indicator-left"
v-model="floatingMandatoryFieldLeft"
layout="floating-label"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger"
mandatory-indicator-position="left">
</pcui_text_field>
<pcui_text_field id="floating-label-mandatory-indicator-right"
v-model="floatingMandatoryFieldRight"
layout="floating-label"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger"
mandatory-indicator-position="right">
</pcui_text_field>
</div>
</div>
new Vue({
el: '#floating-text-fields',
name: 'Floating Text Fields',
data: {
floatingPlain: '',
floatingWithHintText: '',
floatingWithHelperText: '',
floatingWithErrorMsg: 'Value with error',
floatingWithWarningMsg: 'Value with warning',
floatingWithCounter: '',
floatingDisabled: '',
floatingDisabledWithValue: 'Value',
floatingWithTooltipIcon: '',
floatingWithPrefix: '',
floatingWithSuffix: '',
floatingWithClearButton: '',
floatingWithFormattedValue: '',
floatingWithSearch: '',
floatingUsingPassword: '',
floatingUsingMultiline: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
floatingDropdownOptions: [
{ text: 'Streets', id: 1 },
{ text: 'Satellite', id: 2 },
{ text: 'Terrain', id: 3 }
]
},
components: {
pcui_text_field: PCUIFixedLabelTextFieldComponent
}
});
<div class="pcui">
<div id="fixed-label-text-fields">
<pcui_text_field id="fixed-label-plain"
v-model="plain"
label="Plain text field">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-hint"
v-model="withHintText"
label="With hint text"
placeholder="Hint text">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-helper"
v-model="withHelperText"
label="With helper text"
helper-text="Helper text">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-error"
v-model="withErrorMsg"
label="With error message"
error-text="Error message, explaining error">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-warning"
v-model="withWarningMsg"
label="With warning message"
warning-text="Warning message, explaining warning">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-counter"
v-model="withCounter"
label="With counter"
has-counter="true"
max-length="40">
</pcui_text_field>
<pcui_text_field id="fixed-label-disabled"
v-model="disabled"
label="Disabled"
disabled="true">
</pcui_text_field>
<pcui_text_field id="fixed-label-disabled-with-value"
v-model="disabledWithValue"
label="Disabled with value"
disabled="true">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-tooltip"
v-model="withTooltipIcon"
label="With tooltip icon"
tooltip-icon-text="Tooltip">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-prefix"
v-model="withPrefix"
label="With prefix"
prefix="$">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-suffix"
v-model="withSuffix"
label="With suffix"
suffix="km">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-clear"
v-model="withClearButton"
label="With clear button"
has-clear="true">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-formatted-value"
v-model="withFormattedValue"
label="With formatted value"
placeholder="(+61) 1234 - 567 - 890"
format="(+61) #### - ### - ###">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-search"
v-model="withSearch"
label="With search"
type="search"
v-bind:options="dropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-search-free-text-allowed"
v-model="withSearchFreeTextAllowed"
label="With search (free text allowed)"
type="search"
v-bind:options="dropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search"
allow-free-text="true">
</pcui_text_field>
<pcui_text_field id="fixed-label-password"
v-model="usingPassword"
label="Password"
type="password">
</pcui_text_field>
<pcui_text_field id="fixed-label-multiline"
v-model="usingMultiline"
label="Multiline"
type="multiline">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-dropdown"
v-model="usingDropdown"
label="Dropdown"
type="dropdown"
v-bind:options="dropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="-- Select one --">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-tagging"
v-model="usingTagging"
label="Tagging"
type="tagging"
v-bind:options="taggingOptions"
track-by="id"
dropdown-label="text"
tagging-placeholder="Select all that apply"
v-bind:searchable="true">
</pcui_text_field>
<pcui_text_field id="fixed-label-tagging-with-error"
v-model="usingTaggingWithError"
label="Tagging with error"
type="tagging"
v-bind:options="taggingOptions"
track-by="id"
dropdown-label="text"
tagging-placeholder="Select all that apply"
v-bind:searchable="true"
error-text="Error: Invalid is not a valid tag">
</pcui_text_field>
<pcui_text_field id="fixed-label-with-tagging-with-error"
v-model="usingTaggingDisabled"
label="Tagging (disabled)"
type="tagging"
v-bind:options="taggingOptions"
track-by="id"
dropdown-label="text"
v-bind:searchable="true"
disabled="true">
</pcui_text_field>
<pcui_text_field id="fixed-label-mandatory-indicator"
v-model="mandatoryField"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger">
</pcui_text_field>
<pcui_text_field id="fixed-label-mandatory-indicator-left"
v-model="mandatoryFieldLeft"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger"
mandatory-indicator-position="left">
</pcui_text_field>
<pcui_text_field id="fixed-label-mandatory-indicator-right"
v-model="mandatoryFieldRight"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger"
mandatory-indicator-position="right">
</pcui_text_field>
</div>
</div>
new Vue({
el: '#fixed-label-text-fields',
name: 'Fixed Label Text Fields',
data: {
plain: 'Value',
withHintText: '',
withHelperText: '',
withErrorMsg: 'Value with error',
withWarningMsg: 'Value with warning',
withCounter: '',
disabled: '',
disabledWithValue: 'Value',
withTooltipIcon: '',
withPrefix: '',
withSuffix: '',
withClearButton: '',
withFormattedValue: '',
withSearch: '',
usingPassword: '',
usingMultiline: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
usingDropdown: null,
dropdownOptions: [
{ text: 'Streets', id: 1 },
{ text: 'Satellite', id: 2 },
{ text: 'Terrain', id: 3 }
],
},
components: {
pcui_text_field: PCUIFixedLabelTextFieldComponent
}
});
<div class="pcui">
<div id="no-label-text-fields">
<pcui_text_field id="no-label-plain"
v-model="noLabelPlain"
layout="No-label"
placeholder="Plain text field">
</pcui_text_field>
<pcui_text_field id="no-label-with-helper"
v-model="noLabelWithHelperText"
layout="No-label"
placeholder="With helper text"
helper-text="Helper text">
</pcui_text_field>
<pcui_text_field id="no-label-with-error"
v-model="noLabelWithErrorMsg"
layout="No-label"
placeholder="With error message"
error-text="Error message, explaining error">
</pcui_text_field>
<pcui_text_field id="no-label-with-warning"
v-model="noLabelWithWarningMsg"
layout="No-label"
placeholder="With warning message"
warning-text="Warning message, explaining warning">
</pcui_text_field>
<pcui_text_field id="no-label-with-counter"
v-model="noLabelWithCounter"
layout="No-label"
placeholder="With counter"
has-counter="true"
max-length="40">
</pcui_text_field>
<pcui_text_field id="no-label-disabled"
v-model="noLabelDisabled"
layout="No-label"
placeholder="Disabled"
disabled="true">
</pcui_text_field>
<pcui_text_field id="no-label-disabled-with-value"
v-model="noLabelDisabledWithValue"
layout="No-label"
placeholder="Disabled with value"
disabled="true">
</pcui_text_field>
<pcui_text_field id="no-label-with-tooltip"
v-model="noLabelWithTooltipIcon"
layout="No-label"
placeholder="With tooltip icon"
tooltip-icon-text="Tooltip">
</pcui_text_field>
<pcui_text_field id="no-label-with-prefix"
v-model="noLabelWithPrefix"
layout="No-label"
placeholder="With prefix"
prefix="$">
</pcui_text_field>
<pcui_text_field id="no-label-with-suffix"
v-model="noLabelWithSuffix"
layout="No-label"
placeholder="With suffix"
suffix="km">
</pcui_text_field>
<pcui_text_field id="no-label-with-clear"
v-model="noLabelWithClearButton"
layout="No-label"
placeholder="With clear button"
has-clear="true">
</pcui_text_field>
<pcui_text_field id="no-label-with-formatted-value"
v-model="noLabelWithFormattedValue"
layout="No-label"
placeholder="(+61) 1234 - 567 - 890"
format="(+61) #### - ### - ###">
</pcui_text_field>
<pcui_text_field id="no-label-password"
v-model="noLabelUsingPassword"
layout="No-label"
placeholder="Password"
type="password">
</pcui_text_field>
<pcui_text_field id="no-label-with-search"
v-model="noLabelWithSearch"
layout="No-label"
label="With search"
type="search"
v-bind:options="noLabelDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search">
</pcui_text_field>
<pcui_text_field id="no-label-with-search-free-text-allowed"
v-model="noLabelWithSearchFreeTextAllowed"
layout="No-label"
type="search"
v-bind:options="noLabelDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search (free text allowed)"
allow-free-text="true">
</pcui_text_field>
<pcui_text_field id="no-label-multiline"
v-model="noLabelUsingMultiline"
layout="No-label"
placeholder="Multiline"
type="multiline">
</pcui_text_field>
<pcui_text_field id="no-label-with-dropdown"
v-model="noLabelUsingDropdown"
layout="no-label"
placeholder=""
type="dropdown"
v-bind:options="noLabelDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="-- Select one --">
</pcui_text_field>
<pcui_text_field id="no-label-mandatory-indicator"
v-model="noLabelMandatoryField"
layout="no-label"
placeholder="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger">
</pcui_text_field>
<pcui_text_field id="no-label-mandatory-indicator-left"
v-model="noLabelMandatoryFieldLeft"
layout="no-label"
placeholder="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger"
mandatory-indicator-position="left">
</pcui_text_field>
<pcui_text_field id="no-label-mandatory-indicator-right"
v-model="noLabelMandatoryFieldRight"
layout="no-label"
placeholder="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger"
mandatory-indicator-position="right">
</pcui_text_field>
</div>
</div>
new Vue({
el: '#no-label-text-fields',
name: 'No Label Text Fields',
data: {
noLabelPlain: '',
noLabelWithHelperText: '',
noLabelWithErrorMsg: 'Value with error',
noLabelWithWarningMsg: 'Value with warning',
noLabelWithCounter: '',
noLabelDisabled: '',
noLabelDisabledWithValue: 'Disabled with value',
noLabelWithTooltipIcon: '',
noLabelWithPrefix: '',
noLabelWithSuffix: '',
noLabelWithClearButton: '',
noLabelWithFormattedValue: '',
noLabelWithSearch: '',
noLabelUsingPassword: '',
noLabelUsingMultiline: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
noLabelUsingDropdown: null,
noLabelDropdownOptions: [
{ text: 'Streets', id: 1 },
{ text: 'Satellite', id: 2 },
{ text: 'Terrain', id: 3 }
]
},
components: {
pcui_text_field: PCUIFixedLabelTextFieldComponent
}
});
<div class="pcui">
<div id="full-width-text-fields">
<pcui_text_field id="full-width-plain"
v-model="fullWidthPlain"
layout="full-width"
label="Plain text field">
</pcui_text_field>
<pcui_text_field id="full-width-with-hint"
v-model="fullWidthWithHintText"
layout="full-width"
label="With hint text"
placeholder="Hint text">
</pcui_text_field>
<pcui_text_field id="full-width-with-helper"
v-model="fullWidthWithHelperText"
layout="full-width"
label="With helper text"
helper-text="Helper text">
</pcui_text_field>
<pcui_text_field id="full-width-with-error"
v-model="fullWidthWithErrorMsg"
layout="full-width"
label="With error message"
error-text="Error message, explaining error">
</pcui_text_field>
<pcui_text_field id="full-width-with-warning"
v-model="fullWidthWithWarningMsg"
layout="full-width"
label="With warning message"
warning-text="Warning message, explaining warning">
</pcui_text_field>
<pcui_text_field id="full-width-with-counter"
v-model="fullWidthWithCounter"
layout="full-width"
label="With counter"
has-counter="true"
max-length="40">
</pcui_text_field>
<pcui_text_field id="full-width-disabled"
v-model="fullWidthDisabled"
layout="full-width"
label="Disabled"
disabled="true">
</pcui_text_field>
<pcui_text_field id="full-width-disabled-with-value"
v-model="fullWidthDisabledWithValue"
layout="full-width"
label="Disabled with value"
disabled="true">
</pcui_text_field>
<pcui_text_field id="full-width-with-tooltip"
v-model="fullWidthWithTooltipIcon"
layout="full-width"
label="With tooltip icon"
tooltip-icon-text="Tooltip">
</pcui_text_field>
<pcui_text_field id="full-width-with-prefix"
v-model="fullWidthWithPrefix"
layout="full-width"
label="With prefix"
prefix="$">
</pcui_text_field>
<pcui_text_field id="full-width-with-suffix"
v-model="fullWidthWithSuffix"
layout="full-width"
label="With suffix"
suffix="km">
</pcui_text_field>
<pcui_text_field id="full-width-with-tooltip-icon-and-clear"
v-model="fullWidthWithTooltipIconAndClear"
layout="full-width"
label="With tooltip icon and clear button"
tooltip-icon-text="Tooltip"
has-clear="true">
</pcui_text_field>
<pcui_text_field id="full-width-with-clear"
v-model="fullWidthWithClearButton"
layout="full-width"
label="With clear button"
has-clear="true">
</pcui_text_field>
<pcui_text_field id="full-width-with-formatted-value"
v-model="fullWidthWithFormattedValue"
layout="full-width"
label="With formatted value"
placeholder="(+61) 1234 - 567 - 890"
format="(+61) #### - ### - ###">
</pcui_text_field>
<pcui_text_field id="full-width-with-search"
v-model="fullWidthWithSearch"
layout="full-width"
label="With search"
type="search"
v-bind:options="fullWidthDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search">
</pcui_text_field>
<pcui_text_field id="full-width-with-search-free-text-allowed"
v-model="fullWidthWithSearchFreeTextAllowed"
layout="full-width"
label="With search (free text allowed)"
type="search"
v-bind:options="fullWidthDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search"
allow-free-text="true">
</pcui_text_field>
<pcui_text_field id="full-width-password"
v-model="fullWidthUsingPassword"
layout="full-width"
label="Password"
type="password">
</pcui_text_field>
<pcui_text_field id="full-width-multiline"
v-model="fullWidthUsingMultiline"
layout="full-width"
label="Multiline"
type="multiline">
</pcui_text_field>
<pcui_text_field id="full-width-with-dropdown"
v-model="fullWidthUsingDropdown"
layout="full-width"
label="Dropdown"
type="dropdown"
v-bind:options="fullWidthDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="-- Select one --">
</pcui_text_field>
<pcui_text_field id="full-width-with-tagging"
v-model="fullWidthUsingTagging"
layout="full-width"
label="Tagging"
type="tagging"
v-bind:options="taggingOptions"
track-by="id"
dropdown-label="text"
tagging-placeholder="Select all that apply"
v-bind:searchable="true">
</pcui_text_field>
<pcui_text_field id="full-width-tagging-with-error"
v-model="usingTaggingWithError"
layout="full-width"
label="Tagging with error"
type="tagging"
v-bind:options="taggingOptions"
track-by="id"
dropdown-label="text"
v-bind:searchable="true"
tagging-placeholder="Select all that apply"
error-text="Error: Invalid is not a valid tag">
</pcui_text_field>
<pcui_text_field id="full-width-tagging-disabled"
v-model="usingTaggingDisabled"
layout="full-width"
label="Tagging (disabled)"
type="tagging"
v-bind:options="taggingOptions"
track-by="id"
dropdown-label="text"
v-bind:searchable="true"
disabled="true">
</pcui_text_field>
<pcui_text_field id="full-width-mandatory-indicator"
v-model="fullWidthMandatoryField"
layout="full-width"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger">
</pcui_text_field>
<pcui_text_field id="full-width-mandatory-indicator-left"
v-model="fullWidthMandatoryFieldLeft"
layout="full-width"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger"
mandatory-indicator-position="left">
</pcui_text_field>
<pcui_text_field id="full-width-mandatory-indicator-right"
v-model="fullWidthMandatoryFieldRight"
layout="full-width"
label="Mandatory field"
mandatory-indicator="*"
mandatory-indicator-theme="danger"
mandatory-indicator-position="right">
</pcui_text_field>
</div>
</div>
new Vue({
el: '#full-width-text-fields',
name: 'Full Width Text Fields',
data: {
fullWidthPlain: 'Value',
fullWidthWithHintText: '',
fullWidthWithHelperText: '',
fullWidthWithErrorMsg: 'Value with error',
fullWidthWithWarningMsg: 'Value with potential issues',
fullWidthWithCounter: '',
fullWidthDisabled: '',
fullWidthDisabledWithValue: 'Value',
fullWidthWithTooltipIcon: '',
fullWidthWithPrefix: '',
fullWidthWithSuffix: '',
fullWidthWithTooltipIconAndClear: '',
fullWidthWithClearButton: '',
fullWidthWithFormattedValue: '',
fullWidthWithSearch: '',
fullWidthUsingPassword: '',
fullWidthUsingMultiline: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
fullWidthUsingDropdown: null,
fullWidthDropdownOptions: [
{ text: 'Streets', id: 1 },
{ text: 'Satellite', id: 2 },
{ text: 'Terrain', id: 3 }
]
},
components: {
pcui_text_field: PCUIFixedLabelTextFieldComponent
}
});