From b168e85e59735cb2347e061170a505fadce72ef4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Thu, 18 Mar 2021 13:41:31 +0300 Subject: [PATCH] csb added to form components --- src/views/autocomplete/AutoCompleteDoc.vue | 830 +++++----- src/views/button/ButtonDoc.vue | 800 +++++----- src/views/calendar/CalendarDoc.vue | 1354 ++++++++--------- src/views/cascadeselect/CascadeSelectDoc.vue | 718 ++++----- src/views/checkbox/CheckboxDoc.vue | 333 ++-- src/views/chips/ChipsDoc.vue | 394 +++-- src/views/colorpicker/ColorPickerDoc.vue | 349 +++-- src/views/dropdown/DropdownDoc.vue | 1017 +++++++------ src/views/editor/EditorDoc.vue | 373 +++-- src/views/floatlabel/FloatLabelDemo.vue | 672 ++++---- src/views/inputgroup/InputGroupDoc.vue | 454 +++--- src/views/inputmask/InputMaskDoc.vue | 371 +++-- src/views/inputnumber/InputNumberDoc.vue | 1012 ++++++------ src/views/inputswitch/InputSwitchDoc.vue | 201 ++- src/views/inputtext/InputTextDoc.vue | 410 ++--- src/views/invalid/InvalidDemo.vue | 443 +++--- src/views/knob/KnobDoc.vue | 549 ++++--- src/views/listbox/ListboxDoc.vue | 754 +++++---- src/views/multiselect/MultiSelectDoc.vue | 1027 +++++++------ src/views/password/PasswordDoc.vue | 579 +++---- src/views/radiobutton/RadioButtonDoc.vue | 309 ++-- src/views/rating/RatingDoc.vue | 322 ++-- src/views/selectbutton/SelectButtonDoc.vue | 385 +++-- src/views/slider/SliderDoc.vue | 405 +++-- src/views/textarea/TextareaDoc.vue | 214 ++- src/views/togglebutton/ToggleButtonDoc.vue | 302 ++-- .../tristatecheckbox/TriStateCheckboxDoc.vue | 200 ++- 27 files changed, 7328 insertions(+), 7449 deletions(-) diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue index c0398976d..b6ad9df6e 100755 --- a/src/views/autocomplete/AutoCompleteDoc.vue +++ b/src/views/autocomplete/AutoCompleteDoc.vue @@ -1,16 +1,14 @@ -
Force Selection
-

ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared - to make sure the value passed to the model is always one of the suggestions. Simply enable forceSelection to enforce that input is always from the suggestion list.

+
Force Selection
+

ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared + to make sure the value passed to the model is always one of the suggestions. Simply enable forceSelection to enforce that input is always from the suggestion list.


 <AutoComplete forceSelection v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" />
-
Templating
-

Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. - In addition optiongroup, header and footer slots are provided for further customization

+
Templating
+

Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. + In addition optiongroup, header and footer slots are provided for further customization
-
Properties
-

Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
modelValueanynullValue of the component.
suggestionsarraynullAn array of suggestions to display.
fieldanynullProperty name or getter function of a suggested object to resolve and display.
optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
scrollHeightstring200pxMaximum height of the suggestions panel.
dropdownbooleanfalseDisplays a button next to the input field when enabled.
dropdownModestringblankSpecifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.
multiplebooleanfalseSpecifies if multiple values can be selected.
minLengthnumber1Minimum number of characters to initiate a search.
delaynumber300Delay between keystrokes to wait before sending a query.
appendTostringbodyA valid query selector or an HTMLElement to specify where the overlay gets attached.
inputStyleanynullInline style of the input field.
inputClassstringnullStyle class of the input field.
forceSelectionbooleanfalseWhen present, autocomplete clears the manual input if it does not match of the suggestions to force only - accepting values from the suggestions.
-
+
Properties
+

Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
modelValueanynullValue of the component.
suggestionsarraynullAn array of suggestions to display.
fieldanynullProperty name or getter function of a suggested object to resolve and display.
optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
scrollHeightstring200pxMaximum height of the suggestions panel.
dropdownbooleanfalseDisplays a button next to the input field when enabled.
dropdownModestringblankSpecifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.
multiplebooleanfalseSpecifies if multiple values can be selected.
minLengthnumber1Minimum number of characters to initiate a search.
delaynumber300Delay between keystrokes to wait before sending a query.
appendTostringbodyA valid query selector or an HTMLElement to specify where the overlay gets attached.
inputStyleanynullInline style of the input field.
inputClassstringnullStyle class of the input field.
forceSelectionbooleanfalseWhen present, autocomplete clears the manual input if it does not match of the suggestions to force only + accepting values from the suggestions.
+
-
Events
-

Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
complete - event.originalEvent: Browser event
- event.query: Value to search with - 		Callback to invoke to search for suggestions.
item-selectevent.originalEvent: Browser event
- event.value: Selected item		Callback to invoke when a suggestion is selected.
item-unselectevent.originalEvent: Browser event
- event.value: Unselected item		Callback to invoke when a selected value is removed.
dropdown-click - event.originalEvent: browser event
- event.query: Current value of the input field - 		Callback to invoke to when dropdown button is clicked.
clearevent: Browser eventCallback to invoke when input is cleared by the user.
-
+
Events
+

Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
complete + event.originalEvent: Browser event
+ event.query: Value to search with + 		Callback to invoke to search for suggestions.
item-selectevent.originalEvent: Browser event
+ event.value: Selected item		Callback to invoke when a suggestion is selected.
item-unselectevent.originalEvent: Browser event
+ event.value: Unselected item		Callback to invoke when a selected value is removed.
dropdown-click + event.originalEvent: browser event
+ event.query: Current value of the input field + 		Callback to invoke to when dropdown button is clicked.
clearevent: Browser eventCallback to invoke when input is cleared by the user.
+
-
Slots
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
NameParameters
itemitem: Option instance
- index: Index of the option
optiongroupitem: OptionGroup instance
- index: Index of the option group
headervalue: Value of the component
- suggestions: Displayed options
footervalue: Value of the component
- suggestions: Displayed options
-
+
Slots
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameParameters
itemitem: Option instance
+ index: Index of the option
optiongroupitem: OptionGroup instance
+ index: Index of the option group
headervalue: Value of the component
+ suggestions: Displayed options
footervalue: Value of the component
+ suggestions: Displayed options
+
-
Styling
-

Following is the list of structural style classes

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-autocompleteContainer element
p-autocomplete-panelOverlay panel of suggestions.
p-autocomplete-itemsList container of suggestions.
p-autocomplete-itemList item of a suggestion.
p-autocomplete-tokenElement of a selected item in multiple mode.
p-autocomplete-token-iconClose icon element of a selected item in multiple mode.
p-autocomplete-token-labelLabel of a selected item in multiple mode.
-
+
Styling
+

Following is the list of structural style classes

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-autocompleteContainer element
p-autocomplete-panelOverlay panel of suggestions.
p-autocomplete-itemsList container of suggestions.
p-autocomplete-itemList item of a suggestion.
p-autocomplete-tokenElement of a selected item in multiple mode.
p-autocomplete-token-iconClose icon element of a selected item in multiple mode.
p-autocomplete-token-labelLabel of a selected item in multiple mode.
+
-
Dependencies
-

None.

- - - -
- - View on GitHub - - -
-

-
- -

-import CountryService from '../../service/CountryService';
-import {FilterService,FilterMatchMode} from 'primevue/api';
-
-export default {
-    data() {
-        return {
-            countries: null,
-            selectedCountry1: null,
-            selectedCountry2: null,
-            selectedCity: null,
-            filteredCities: null,
-            filteredCountries: null,
-            selectedCountries: [],
-            groupedCities: [{
-                label: 'Germany', code: 'DE', 
-                items: [
-                    {label: 'Berlin', value: 'Berlin'},
-                    {label: 'Frankfurt', value: 'Frankfurt'},
-                    {label: 'Hamburg', value: 'Hamburg'},
-                    {label: 'Munich', value: 'Munich'}
-                ]
-            },
-            {
-                label: 'USA', code: 'US', 
-                items: [
-                    {label: 'Chicago', value: 'Chicago'},
-                    {label: 'Los Angeles', value: 'Los Angeles'},
-                    {label: 'New York', value: 'New York'},
-                    {label: 'San Francisco', value: 'San Francisco'}
-                ]
-            },
-            {
-                label: 'Japan', code: 'JP', 
-                items: [
-                    {label: 'Kyoto', value: 'Kyoto'},
-                    {label: 'Osaka', value: 'Osaka'},
-                    {label: 'Tokyo', value: 'Tokyo'},
-                    {label: 'Yokohama', value: 'Yokohama'}
-                ]
-            }]
-        }
-    },
-    countryService: null,
-    created() {
-        this.countryService = new CountryService();
-    },
-    mounted() {
-        this.countryService.getCountries().then(data => this.countries = data);
-    },
-    methods: {
-        searchCountry(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                }
-                else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        },
-        searchCity(event) {
-            let query = event.query;
-            let filteredCities = [];
-
-            for (let country of this.groupedCities) {
-                let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
-                if (filteredItems && filteredItems.length) {
-                    filteredCities.push({...country, ...{items: filteredItems}});
-                }
-            }
-
-            this.filteredCities = filteredCities;
-        }
-    }
-}
-
-
- - - +
Dependencies
+

None.

+ \ No newline at end of file diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue index 89cfcdef4..e54f53892 100755 --- a/src/views/button/ButtonDoc.vue +++ b/src/views/button/ButtonDoc.vue @@ -1,52 +1,50 @@ \ No newline at end of file diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue index 0e693ee28..7e458122d 100755 --- a/src/views/calendar/CalendarDoc.vue +++ b/src/views/calendar/CalendarDoc.vue @@ -1,15 +1,13 @@ diff --git a/src/views/inputgroup/InputGroupDoc.vue b/src/views/inputgroup/InputGroupDoc.vue index ee0283dfd..f3d063cb7 100755 --- a/src/views/inputgroup/InputGroupDoc.vue +++ b/src/views/inputgroup/InputGroupDoc.vue @@ -1,247 +1,115 @@ \ No newline at end of file diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue index 7121c27ae..fad3f6c2a 100755 --- a/src/views/inputmask/InputMaskDoc.vue +++ b/src/views/inputmask/InputMaskDoc.vue @@ -1,232 +1,166 @@ \ No newline at end of file diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue index 59440a7c8..64bcc904e 100755 --- a/src/views/inputnumber/InputNumberDoc.vue +++ b/src/views/inputnumber/InputNumberDoc.vue @@ -1,36 +1,34 @@ diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue index 4c72684e5..27b244b5a 100755 --- a/src/views/inputswitch/InputSwitchDoc.vue +++ b/src/views/inputswitch/InputSwitchDoc.vue @@ -1,15 +1,13 @@ \ No newline at end of file diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue index 8397dea9f..42587e39e 100755 --- a/src/views/inputtext/InputTextDoc.vue +++ b/src/views/inputtext/InputTextDoc.vue @@ -1,22 +1,20 @@ \ No newline at end of file diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue index 3db2e55e6..47d7494aa 100644 --- a/src/views/invalid/InvalidDemo.vue +++ b/src/views/invalid/InvalidDemo.vue @@ -49,189 +49,12 @@ -
- - -
- -
-

-
- -

-import CountryService from '../../service/CountryService';
-
-export default {
-    data() {
-        return {
-            countries: null,
-            filteredCountries: null,
-            cities: [
-                {name: 'New York', code: 'NY'},
-                {name: 'Rome', code: 'RM'},
-                {name: 'London', code: 'LDN'},
-                {name: 'Istanbul', code: 'IST'},
-                {name: 'Paris', code: 'PRS'}
-            ],
-            value1: null,
-            value2: null,
-            value3: null,
-            value4: null,
-            value5: null,
-            value6: null,
-            value7: null,
-            value8: null,
-            value9: null,
-            value10: null,
-            selectedCity: null,
-            cascadeCountries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                {cname: 'Sydney', code: 'A-SY'},
-                                {cname: 'Newcastle', code: 'A-NE'},
-                                {cname: 'Wollongong', code: 'A-WO'}
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                {cname: 'Brisbane', code: 'A-BR'},
-                                {cname: 'Townsville', code: 'A-TO'}
-                            ]
-                        },
-                        
-                    ]
-                },
-                {
-                    name: 'Canada', 
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                {cname: 'Montreal', code: 'C-MO'},
-                                {cname: 'Quebec City', code: 'C-QU'}
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                {cname: 'Ottawa', code: 'C-OT'},
-                                {cname: 'Toronto', code: 'C-TO'}
-                            ]
-                        },
-                        
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                {cname: 'Los Angeles', code: 'US-LA'},
-                                {cname: 'San Diego', code: 'US-SD'},
-                                {cname: 'San Francisco', code: 'US-SF'}
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                {cname: 'Jacksonville', code: 'US-JA'},
-                                {cname: 'Miami', code: 'US-MI'},
-                                {cname: 'Tampa', code: 'US-TA'},
-                                {cname: 'Orlando', code: 'US-OR'}
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                {cname: 'Austin', code: 'US-AU'},
-                                {cname: 'Dallas', code: 'US-DA'},
-                                {cname: 'Houston', code: 'US-HO'}
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-    },
-    countryService: null,
-    created() {
-        this.countryService = new CountryService();
-    },
-    mounted() {
-        this.countryService.getCountries().then(data => this.countries = data);
-    },
-    methods: {
-        searchCountry(event) {
-            setTimeout(() => {
-                if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
-                }
-                else {
-                    this.filteredCountries = this.countries.filter((country) => {
-                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-                    });
-                }
-            }, 250);
-        }
-    }
-}
-
-
- - -
+ diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue index ab89fb311..f280442cf 100644 --- a/src/views/knob/KnobDoc.vue +++ b/src/views/knob/KnobDoc.vue @@ -1,15 +1,13 @@ \ No newline at end of file diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue index 168bcf7ef..2dc09ba88 100755 --- a/src/views/listbox/ListboxDoc.vue +++ b/src/views/listbox/ListboxDoc.vue @@ -1,15 +1,13 @@ -
Filter
-

Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property. By default, - optionLabel is used when searching and filterFields can be used to customize the fields being utilized. Furthermore, filterMatchMode is available - to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".

+
Filter
+

Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property. By default, + optionLabel is used when searching and filterFields can be used to customize the fields being utilized. Furthermore, filterMatchMode is available + to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".


 <Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/>
-
Templating
-

Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter. - In addition optiongroup, header, footer, emptyfilter and empty slots are provided for further customization.

+
Templating
+

Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter. + In addition optiongroup, header, footer, emptyfilter and empty slots are provided for further customization.
-
Properties
-

Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
modelValueanynullValue of the component.
optionsarraynullAn array of selectitems to display as the available options.
optionLabelstringnullProperty name or getter function to use as the label of an option.
optionValuestringnullProperty name or getter function to use as the value of an option, defaults to the option itself when not defined.
optionDisabledbooleannullProperty name or getter function to use as the disabled flag of an option, defaults to false when not defined.
optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
listStylestringnullInline style of inner list element.
disabledbooleanfalseWhen specified, disables the component.
dataKeystringfalseA property to uniquely identify an option.
multiplebooleanfalseWhen specified, allows selecting multiple values.
metaKeySelectionbooleantrueDefines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item - can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
filterbooleanfalseWhen specified, displays a filter input at header.
filterPlaceholderstringnullPlaceholder text to show when filter input is empty.
filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
filterMatchModestringcontainsDefines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"
filterFieldsarraynullFields used when filtering the options, defaults to optionLabel.
emptyFilterMessagestringNo results foundText to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
emptyMessagestringNo results foundText to display when there are no options available. Defaults to value from PrimeVue locale configuration.
-
+
Properties
+

Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
modelValueanynullValue of the component.
optionsarraynullAn array of selectitems to display as the available options.
optionLabelstringnullProperty name or getter function to use as the label of an option.
optionValuestringnullProperty name or getter function to use as the value of an option, defaults to the option itself when not defined.
optionDisabledbooleannullProperty name or getter function to use as the disabled flag of an option, defaults to false when not defined.
optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
listStylestringnullInline style of inner list element.
disabledbooleanfalseWhen specified, disables the component.
dataKeystringfalseA property to uniquely identify an option.
multiplebooleanfalseWhen specified, allows selecting multiple values.
metaKeySelectionbooleantrueDefines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item + can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
filterbooleanfalseWhen specified, displays a filter input at header.
filterPlaceholderstringnullPlaceholder text to show when filter input is empty.
filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
filterMatchModestringcontainsDefines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"
filterFieldsarraynullFields used when filtering the options, defaults to optionLabel.
emptyFilterMessagestringNo results foundText to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
emptyMessagestringNo results foundText to display when there are no options available. Defaults to value from PrimeVue locale configuration.
+
-
Events
-
- - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
changeevent.originalEvent: Original event
- event.value: Selected option value 		Callback to invoke on value change.
filterevent.originalEvent: Original event
- event.value: Filter value 		Callback to invoke on filter input.
-
+
Events
+
+ + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
changeevent.originalEvent: Original event
+ event.value: Selected option value 		Callback to invoke on value change.
filterevent.originalEvent: Original event
+ event.value: Filter value 		Callback to invoke on filter input.
+
-
Slots
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameParameters
optionoption: Option instance
- index: Index of the option
optiongroupoption: OptionGroup instance
- index: Index of the option group
headervalue: Value of the component
- options: Displayed options
footervalue: Value of the component
- options: Displayed options
emptyfilter-
empty-
-
+
Slots
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameParameters
optionoption: Option instance
+ index: Index of the option
optiongroupoption: OptionGroup instance
+ index: Index of the option group
headervalue: Value of the component
+ options: Displayed options
footervalue: Value of the component
+ options: Displayed options
emptyfilter-
empty-
+
-
Styling
-

Following is the list of structural style classes, for theming classes visit theming page.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-listboxMain container element.
p-listbox-headerHeader element.
p-listbox-list-wrapperContainer of list element.
p-listbox-listList element.
p-listbox-itemAn item in the list element.
-
+
Styling
+

Following is the list of structural style classes, for theming classes visit theming page.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-listboxMain container element.
p-listbox-headerHeader element.
p-listbox-list-wrapperContainer of list element.
p-listbox-listList element.
p-listbox-itemAn item in the list element.
+
-
Dependencies
-

None.

- - - -
- - View on GitHub - - -
-

-
- -

-export default {
-    data() {
-        return {
-            selectedCity: null,
-            selectedCountries: null,
-            selectedGroupedCity: null,
-            cities: [
-                {name: 'New York', code: 'NY'},
-                {name: 'Rome', code: 'RM'},
-                {name: 'London', code: 'LDN'},
-                {name: 'Istanbul', code: 'IST'},
-                {name: 'Paris', code: 'PRS'}
-            ],
-            countries: [
-                {name: 'Australia', code: 'AU'},
-                {name: 'Brazil', code: 'BR'},
-                {name: 'China', code: 'CN'},
-                {name: 'Egypt', code: 'EG'},
-                {name: 'France', code: 'FR'},
-                {name: 'Germany', code: 'DE'},
-                {name: 'India', code: 'IN'},
-                {name: 'Japan', code: 'JP'},
-                {name: 'Spain', code: 'ES'},
-                {name: 'United States', code: 'US'}
-            ],
-            groupedCities: [{
-                label: 'Germany', code: 'DE', 
-                items: [
-                    {label: 'Berlin', value: 'Berlin'},
-                    {label: 'Frankfurt', value: 'Frankfurt'},
-                    {label: 'Hamburg', value: 'Hamburg'},
-                    {label: 'Munich', value: 'Munich'}
-                ]
-            },
-            {
-                label: 'USA', code: 'US', 
-                items: [
-                    {label: 'Chicago', value: 'Chicago'},
-                    {label: 'Los Angeles', value: 'Los Angeles'},
-                    {label: 'New York', value: 'New York'},
-                    {label: 'San Francisco', value: 'San Francisco'}
-                ]
-            },
-            {
-                label: 'Japan', code: 'JP', 
-                items: [
-                    {label: 'Kyoto', value: 'Kyoto'},
-                    {label: 'Osaka', value: 'Osaka'},
-                    {label: 'Tokyo', value: 'Tokyo'},
-                    {label: 'Yokohama', value: 'Yokohama'}
-                ]
-            }]
-        }
-    }
-}
-
-
- - - +
Dependencies
+

None.

+ \ No newline at end of file diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue index 815cfc28d..3c0c8f7d4 100755 --- a/src/views/multiselect/MultiSelectDoc.vue +++ b/src/views/multiselect/MultiSelectDoc.vue @@ -1,15 +1,13 @@ -
Filtering
-

Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property. By default, - optionLabel is used when searching and filterFields can be used to customize the fields being utilized. Furthermore, filterMatchMode is available - to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".

+
Filtering
+

Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property. By default, + optionLabel is used when searching and filterFields can be used to customize the fields being utilized. Furthermore, filterMatchMode is available + to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".


 <MultiSelect v-model="selectedCars" :options="cars" :filter="true" optionLabel="brand" placeholder="Select Brands"/>
-
Templating
-

Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter. - In addition value, optiongroup, header, footer, emptyfilter and empty slots are provided for further customization.

+
Templating
+

Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter. + In addition value, optiongroup, header, footer, emptyfilter and empty slots are provided for further customization.
-
Properties
-

Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
modelValueanynullValue of the component.
optionsarraynullAn array of selectitems to display as the available options.
optionLabelstringnullProperty name or getter function to use as the label of an option.
optionValuestringnullProperty name or getter function to use as the value of an option, defaults to the option itself when not defined.
optionDisabledbooleannullProperty name or getter function to use as the disabled flag of an option, defaults to false when not defined.
optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
scrollHeightstring200pxHeight of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
filterbooleanfalseWhen specified, displays a filter input at header.
filterPlaceholderstringnullPlaceholder text to show when filter input is empty.
filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
filterMatchModestringcontainsDefines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"
filterFieldsarraynullFields used when filtering the options, defaults to optionLabel.
placeholderstringnullLabel to display when there are no selections.
disabledbooleanfalseWhen present, it specifies that the component should be disabled.
tabindexstringnullIndex of the element in tabbing order.
inputIdstringnullIdentifier of the underlying input element.
dataKeystringnullA property to uniquely identify an option.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
appendTostringbodyA valid query selector or an HTMLElement to specify where the overlay gets attached.
emptyFilterMessagestringNo results foundText to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
emptyMessagestringNo results foundText to display when there are no options available. Defaults to value from PrimeVue locale configuration.
displaystringcommaDefines how the selected items are displayed, valid values are "comma" and "chip".
-
+
Properties
+

Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
modelValueanynullValue of the component.
optionsarraynullAn array of selectitems to display as the available options.
optionLabelstringnullProperty name or getter function to use as the label of an option.
optionValuestringnullProperty name or getter function to use as the value of an option, defaults to the option itself when not defined.
optionDisabledbooleannullProperty name or getter function to use as the disabled flag of an option, defaults to false when not defined.
optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
scrollHeightstring200pxHeight of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
filterbooleanfalseWhen specified, displays a filter input at header.
filterPlaceholderstringnullPlaceholder text to show when filter input is empty.
filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
filterMatchModestringcontainsDefines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"
filterFieldsarraynullFields used when filtering the options, defaults to optionLabel.
placeholderstringnullLabel to display when there are no selections.
disabledbooleanfalseWhen present, it specifies that the component should be disabled.
tabindexstringnullIndex of the element in tabbing order.
inputIdstringnullIdentifier of the underlying input element.
dataKeystringnullA property to uniquely identify an option.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
appendTostringbodyA valid query selector or an HTMLElement to specify where the overlay gets attached.
emptyFilterMessagestringNo results foundText to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
emptyMessagestringNo results foundText to display when there are no options available. Defaults to value from PrimeVue locale configuration.
displaystringcommaDefines how the selected items are displayed, valid values are "comma" and "chip".
+
-
Events
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
changeevent.originalEvent: Original event
- event.value: Selected option value 		Callback to invoke on value change.
before-show-Callback to invoke before the overlay is shown.
before-hide-Callback to invoke before the overlay is hidden.
show-Callback to invoke when the overlay is shown.
hide-Callback to invoke when the overlay is hidden.
filterevent.originalEvent: Original event
- event.value: Filter value 		Callback to invoke on filter input.
-
+
Events
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
changeevent.originalEvent: Original event
+ event.value: Selected option value 		Callback to invoke on value change.
before-show-Callback to invoke before the overlay is shown.
before-hide-Callback to invoke before the overlay is hidden.
show-Callback to invoke when the overlay is shown.
hide-Callback to invoke when the overlay is hidden.
filterevent.originalEvent: Original event
+ event.value: Filter value 		Callback to invoke on filter input.
+
-
Methods
-
- - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
show-Shows the overlay.
Hide-Hides the overlay.
-
+
Methods
+
+ + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
show-Shows the overlay.
Hide-Hides the overlay.
+
-
Slots
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameParameters
optionoption: Option instance
- index: Index of the option
optiongroupoption: OptionGroup instance
- index: Index of the option group
valuevalue: Value of the component
- placeholder: Placeholder prop value
headervalue: Value of the component
- options: Displayed options
footervalue: Value of the component
- options: Displayed options
emptyfilter-
empty-
-
+
Slots
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameParameters
optionoption: Option instance
+ index: Index of the option
optiongroupoption: OptionGroup instance
+ index: Index of the option group
valuevalue: Value of the component
+ placeholder: Placeholder prop value
headervalue: Value of the component
+ options: Displayed options
footervalue: Value of the component
+ options: Displayed options
emptyfilter-
empty-
+
-
Styling
-

Following is the list of structural style classes, for theming classes visit theming page.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-multiselectContainer element.
p-multiselect-label-containerContainer of the label to display selected items.
p-multiselect-label-containerLabel to display selected items.
p-multiselect-triggerDropdown button.
p-multiselect-filter-containerContainer of filter input.
p-multiselect-panelOverlay panel for items.
p-multiselect-itemsList container of items.
p-multiselect-itemAn item in the list.
-
+
Styling
+

Following is the list of structural style classes, for theming classes visit theming page.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-multiselectContainer element.
p-multiselect-label-containerContainer of the label to display selected items.
p-multiselect-label-containerLabel to display selected items.
p-multiselect-triggerDropdown button.
p-multiselect-filter-containerContainer of filter input.
p-multiselect-panelOverlay panel for items.
p-multiselect-itemsList container of items.
p-multiselect-itemAn item in the list.
+
-
Dependencies
-

None.

- - - -
- - View on GitHub - - -
- -

-
- -

-export default {
-    data() {
-        return {
-            selectedCities1: null,
-            selectedCities2: null,
-            selectedCountries: null,
-            selectedGroupedCities: null,
-            cities: [
-                {name: 'New York', code: 'NY'},
-                {name: 'Rome', code: 'RM'},
-                {name: 'London', code: 'LDN'},
-                {name: 'Istanbul', code: 'IST'},
-                {name: 'Paris', code: 'PRS'}
-            ],
-            countries: [
-                {name: 'Australia', code: 'AU'},
-                {name: 'Brazil', code: 'BR'},
-                {name: 'China', code: 'CN'},
-                {name: 'Egypt', code: 'EG'},
-                {name: 'France', code: 'FR'},
-                {name: 'Germany', code: 'DE'},
-                {name: 'India', code: 'IN'},
-                {name: 'Japan', code: 'JP'},
-                {name: 'Spain', code: 'ES'},
-                {name: 'United States', code: 'US'}
-            ],
-            groupedCities: [{
-                label: 'Germany', code: 'DE', 
-                items: [
-                    {label: 'Berlin', value: 'Berlin'},
-                    {label: 'Frankfurt', value: 'Frankfurt'},
-                    {label: 'Hamburg', value: 'Hamburg'},
-                    {label: 'Munich', value: 'Munich'}
-                ]
-            },
-            {
-                label: 'USA', code: 'US', 
-                items: [
-                    {label: 'Chicago', value: 'Chicago'},
-                    {label: 'Los Angeles', value: 'Los Angeles'},
-                    {label: 'New York', value: 'New York'},
-                    {label: 'San Francisco', value: 'San Francisco'}
-                ]
-            },
-            {
-                label: 'Japan', code: 'JP', 
-                items: [
-                    {label: 'Kyoto', value: 'Kyoto'},
-                    {label: 'Osaka', value: 'Osaka'},
-                    {label: 'Tokyo', value: 'Tokyo'},
-                    {label: 'Yokohama', value: 'Yokohama'}
-                ]
-            }]
-        }
-    }
-}
-
-
- -

-.p-multiselect {
-    min-width: 15rem;
-}
-
-::v-deep(.multiselect-custom) {
-    .p-multiselect-label:not(.p-placeholder) {
-        padding-top: .25rem;
-        padding-bottom: .25rem;
-    }
-
-    .country-item-value {
-        padding: .25rem .5rem;
-        border-radius: 3px;
-        display: inline-flex;
-        margin-right: .5rem;
-        background-color: var(--primary-color);
-        color: var(--primary-color-text);
-
-        img.flag {
-            width: 17px;
-        }
-    }
-}
-
-
- - - +
Dependencies
+

None.

+ diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue index 62281d5c7..31646baf4 100755 --- a/src/views/password/PasswordDoc.vue +++ b/src/views/password/PasswordDoc.vue @@ -1,305 +1,247 @@ + + \ No newline at end of file diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue index 626941aaa..b4f356315 100755 --- a/src/views/radiobutton/RadioButtonDoc.vue +++ b/src/views/radiobutton/RadioButtonDoc.vue @@ -1,15 +1,13 @@ \ No newline at end of file diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue index f5ea8af8d..76859792e 100755 --- a/src/views/rating/RatingDoc.vue +++ b/src/views/rating/RatingDoc.vue @@ -1,199 +1,157 @@ \ No newline at end of file diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue index e9bdf3583..e6e1eb1d0 100755 --- a/src/views/selectbutton/SelectButtonDoc.vue +++ b/src/views/selectbutton/SelectButtonDoc.vue @@ -1,15 +1,13 @@ \ No newline at end of file diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue index d6fa55917..b04171827 100755 --- a/src/views/slider/SliderDoc.vue +++ b/src/views/slider/SliderDoc.vue @@ -1,22 +1,20 @@ \ No newline at end of file diff --git a/src/views/textarea/TextareaDoc.vue b/src/views/textarea/TextareaDoc.vue index 745514026..1d3dab1ed 100755 --- a/src/views/textarea/TextareaDoc.vue +++ b/src/views/textarea/TextareaDoc.vue @@ -1,139 +1,99 @@ \ No newline at end of file diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue index 2b56ec339..c9781872e 100755 --- a/src/views/togglebutton/ToggleButtonDoc.vue +++ b/src/views/togglebutton/ToggleButtonDoc.vue @@ -1,21 +1,19 @@ \ No newline at end of file diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue index 804b4d6ba..05ce0463f 100755 --- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue +++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue @@ -1,127 +1,92 @@ \ No newline at end of file