diff --git a/cypress/integration/slots/label/index.html b/cypress/integration/slots/label/index.html new file mode 100644 index 00000000..f83e72c3 --- /dev/null +++ b/cypress/integration/slots/label/index.html @@ -0,0 +1,46 @@ + + + + + + + + + + +
+ + + + diff --git a/cypress/integration/slots/label/index.spec.js b/cypress/integration/slots/label/index.spec.js new file mode 100644 index 00000000..d53bc8a0 --- /dev/null +++ b/cypress/integration/slots/label/index.spec.js @@ -0,0 +1,22 @@ +/// +import path from 'path' + +context('label', () => { + it('should show the placeholder then the selected', () => { + cy.visit(path.join(__dirname, 'index.html')) + cy.get('.vue-input').should('have.text', 'Select option') + cy.get('.vue-select').click() + cy.get('.vue-dropdown').children().first().click() + cy.get('.vue-input').should('have.text', 'I') + }) + + it('should show the selected options count', () => { + cy.visit(path.join(__dirname, 'multiple.html')) + cy.get('.vue-input').should('have.text', 'Select option') + cy.get('.vue-select').click() + cy.get('.vue-dropdown').children().first().click() + cy.get('.vue-input').should('have.text', '1') + cy.get('.vue-dropdown').children().first().next().click() + cy.get('.vue-input').should('have.text', '2') + }) +}) diff --git a/cypress/integration/slots/label/multiple.html b/cypress/integration/slots/label/multiple.html new file mode 100644 index 00000000..cd7bb10f --- /dev/null +++ b/cypress/integration/slots/label/multiple.html @@ -0,0 +1,47 @@ + + + + + + + + + + +
+ + + + diff --git a/docs/api-reference.md b/docs/api-reference.md index c69534df..d3768790 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -314,6 +314,14 @@ New in `2.6.0+` - `{OptionType}` option +### label + +New in `v2.9.0+` + +- **Attributes**: + + - `{(OptionType | EmptyModelValueType) | (OptionType | EmptyModelValueType)[]}` selected + ### tag - **Attributes**: diff --git a/examples/src/views/CustomDropdown.vue b/examples/src/views/CustomDropdown.vue index 513241df..564e7d1a 100644 --- a/examples/src/views/CustomDropdown.vue +++ b/examples/src/views/CustomDropdown.vue @@ -2,6 +2,12 @@ 
modelValue: {{ JSON.stringify(country) }}
+ diff --git a/src/components/input.vue b/src/components/input.vue index 5c34a477..df021328 100644 --- a/src/components/input.vue +++ b/src/components/input.vue @@ -31,7 +31,7 @@ export default { props: { autocomplete: { required: false, - type: String + type: String, }, modelValue: { required: true, diff --git a/src/index.vue b/src/index.vue index fdd86965..f47563b5 100644 --- a/src/index.vue +++ b/src/index.vue @@ -31,7 +31,9 @@ v-if="(multiple && taggable && modelValue.length === 0) || (searchable === false && taggable === false)" >
- + + +
@@ -234,7 +236,7 @@ const VueSelect = { // misc autocomplete: { - default: "off", + default: 'off', type: String, }, disabled: { @@ -689,26 +691,34 @@ const VueSelect = { })) provide('dataAttrs', dataAttrs) - const innerPlaceholder = computed(() => { - const selectedOptions = optionsWithInfo.value.filter(option => option.selected).filter(option => !option.group) + const selectedOptions = computed(() => { + return optionsWithInfo.value.filter(option => option.selected).filter(option => !option.group) + }) + const innerPlaceholder = computed(() => { if (props.multiple) { - if (selectedOptions.length === 0) { + if (selectedOptions.value.length === 0) { return props.placeholder - } else if (selectedOptions.length === 1) { + } else if (selectedOptions.value.length === 1) { return '1 option selected' } else { - return selectedOptions.length + ' options selected' + return selectedOptions.value.length + ' options selected' } } else { - if (selectedOptions.length === 0) { + if (selectedOptions.value.length === 0) { return props.placeholder } else { - return selectedOptions[0].label + '' + return selectedOptions.value[0].label + '' } } }) + const selected = computed(() => { + const selected = selectedOptions.value.map(option => option.originalOption) + if (props.multiple) return selected + return selected[0] || props.emptyModelValue + }) + const direction = ref() watch( () => [props.openDirection, isFocusing.value], @@ -749,6 +759,7 @@ const VueSelect = { dataAttrs, innerPlaceholder, + selected, highlightedOriginalIndex, pointerForward,