feat: add label slot (#270)

* feat: add label slot * Update docs/api-reference.md * Update docs/api-reference.md * return emptyModelValue if nothing is selected * lint * only expose selected Co-authored-by: Ernest <iendeavor.github.io@gmail.com>
soc221b · Aug 5, 2021 · c9d57c3 · c9d57c3
1 parent d4793be
commit c9d57c3
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 10 deletions.
diff --git a/cypress/integration/slots/label/index.html b/cypress/integration/slots/label/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref()
+          const options = ref(['i'])
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+        >
+          <template #label="{ selected }">
+            <span v-if="selected">{{ selected.toUpperCase() }}</span>
+            <span v-else>Select option</span>
+          </template>
+        </vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/slots/label/index.spec.js b/cypress/integration/slots/label/index.spec.js
@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+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
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref([])
+          const options = ref(['i', 'j', 'k'])
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          multiple
+        >
+          <template #label="{ selected }">
+            <span v-if="selected.length">{{ selected.length }}</span>
+            <span v-else>Select option</span>
+          </template>
+        </vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git 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
@@ -2,6 +2,12 @@
   <pre>modelValue: {{ JSON.stringify(country) }}</pre>
 
   <vue-select v-model="country" :options="countryOptions" label-by="label">
+    <template #label="{ selected }">
+      <template v-if="selected">
+        <div>{{ selected.flag }} {{ selected.label }}</div>
+      </template>
+      <template v-else>Select option</template>
+    </template>
     <template #dropdown-item="{ option }">
       <div>{{ option.flag }} {{ option.label }}</div>
     </template>

diff --git 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
@@ -31,7 +31,9 @@
         v-if="(multiple && taggable && modelValue.length === 0) || (searchable === false && taggable === false)"
       >
         <div class="vue-input">
-          <input :placeholder="innerPlaceholder" :autocomplete="autocomplete" readonly @click="focus" />
+          <slot name="label" :selected="selected">
+            <input :placeholder="innerPlaceholder" :autocomplete="autocomplete" readonly @click="focus" />
+          </slot>
         </div>
       </template>
 
@@ -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,