vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #5744 - Deprecated: InputChips

pull/5756/head
tugcekucukoglu 2024-05-15 13:47:01 +03:00
parent d75d9f9f3f
commit 446f7380dd
6 changed files with 98 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/lib/autocomplete/AutoComplete.d.ts vendored
View File

@ -326,6 +326,11 @@ export interface AutoCompleteProps {
* Property name or getter function that refers to the children options of option group.
*/
optionGroupChildren?: string | ((data: any) => any[]) | undefined;
/**
* whether typeahead is active or not.
* @defaultValue true
*/
typeahead?: boolean | undefined;
/**
* Maximum height of the suggestions overlay.
* @defaultValue 14rem

59
components/lib/autocomplete/AutoComplete.vue
View File

@ -407,28 +407,30 @@ export default {
this.clicked = false;
},
onInput(event) {
if (this.searchTimeout) {
clearTimeout(this.searchTimeout);
}
if (this.typeahead) {
if (this.searchTimeout) {
clearTimeout(this.searchTimeout);
}
let query = event.target.value;
let query = event.target.value;
if (!this.multiple) {
this.updateModel(event, query);
}
if (!this.multiple) {
this.updateModel(event, query);
}
if (query.length === 0) {
this.hide();
this.$emit('clear');
} else {
if (query.length >= this.minLength) {
this.focusedOptionIndex = -1;
this.searchTimeout = setTimeout(() => {
this.search(event, query, 'input');
}, this.delay);
} else {
if (query.length === 0) {
this.hide();
this.$emit('clear');
} else {
if (query.length >= this.minLength) {
this.focusedOptionIndex = -1;
this.searchTimeout = setTimeout(() => {
this.search(event, query, 'input');
}, this.delay);
} else {
this.hide();
}
}
}
},
@ -633,15 +635,22 @@ export default {
event.preventDefault();
},
onEnterKey(event) {
if (!this.overlayVisible) {
this.focusedOptionIndex = -1; // reset
this.onArrowDownKey(event);
} else {
if (this.focusedOptionIndex !== -1) {
this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
if (!this.typeahead) {
if (this.multiple) {
this.updateModel(event, [...(this.modelValue || []), event.target.value]);
this.$refs.focusInput.value = '';
}
} else {
if (!this.overlayVisible) {
this.focusedOptionIndex = -1; // reset
this.onArrowDownKey(event);
} else {
if (this.focusedOptionIndex !== -1) {
this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
}
this.hide();
this.hide();
}
}
},
onEscapeKey(event) {

8
components/lib/autocomplete/BaseAutoComplete.vue
View File

@ -121,6 +121,10 @@ export default {
type: [String, Object],
default: null
},
loader: {
type: String,
default: null
},
loadingIcon: {
type: String,
default: null
@ -173,6 +177,10 @@ export default {
type: Number,
default: 0
},
typeahead: {
type: Boolean,
default: true
},
ariaLabel: {
type: String,
default: null

1
components/lib/inputchips/InputChips.vue
View File

@ -83,6 +83,7 @@ export default {
}
},
mounted() {
console.warn('Deprecated since v4. Use AutoComplete component instead with its typeahead property.');
this.id = this.id || UniqueComponentId();
},
methods: {

2
doc/autocomplete/MultipleDoc.vue
View File

@ -3,7 +3,9 @@
<p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
</DocSectionText>
<div class="card p-fluid">
{{ value }}
<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
<AutoComplete v-model="value" :typeahead="false" :suggestions="items" @complete="search" />
</div>
<DocSectionCode :code="code" />
</template>

48
doc/common/apidoc/index.json
View File

@ -4546,6 +4546,14 @@
"default": "",
"description": "Property name or getter function that refers to the children options of option group."
},
{
"name": "typeahead",
"optional": true,
"readonly": false,
"type": "boolean",
"default": "true",
"description": "whether typeahead is active or not."
},
{
"name": "scrollHeight",
"optional": true,
@ -8844,6 +8852,22 @@
"default": "",
"description": "Used to pass attributes to the dropdown icon's DOM element."
},
{
"name": "inputIconContainer",
"optional": true,
"readonly": false,
"type": "DatePickerPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the input icon container's DOM element."
},
{
"name": "inputIcon",
"optional": true,
"readonly": false,
"type": "DatePickerPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the input icon's DOM element."
},
{
"name": "panel",
"optional": true,
@ -24948,6 +24972,22 @@
"default": "",
"description": "Used to pass attributes to the dropdown icon's DOM element."
},
{
"name": "inputIconContainer",
"optional": true,
"readonly": false,
"type": "DatePickerPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the input icon container's DOM element."
},
{
"name": "inputIcon",
"optional": true,
"readonly": false,
"type": "DatePickerPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the input icon's DOM element."
},
{
"name": "panel",
"optional": true,
@ -68759,6 +68799,14 @@
"default": "",
"description": "Used to pass attributes to the root's DOM element."
},
{
"name": "content",
"optional": true,
"readonly": false,
"type": "ToggleButtonPassThroughOptionType<T>",
"default": "",
"description": "Used to pass attributes to the content's DOM element."
},
{
"name": "icon",
"optional": true,