feat: expose remove function for tag slot

ref: #235
soc221b · Jun 26, 2021 · 77f8f72 · 77f8f72
1 parent a91b89c
commit 77f8f72
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 1 deletion.
diff --git a/cypress/integration/slots/tag/remove.html b/cypress/integration/slots/tag/remove.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(['i'])
+          const options = ref(['i'])
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          multiple
+          taggable
+        >
+          <template #tag="{ option, remove }">
+            <button @click.stop="remove">{{ option }}</button>
+          </template>
+        </vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/slots/tag/remove.spec.js b/cypress/integration/slots/tag/remove.spec.js
@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+import path from 'path'
+
+context('tag', () => {
+  it('should expose remove function', () => {
+    cy.visit(path.join(__dirname, 'remove.html'))
+    cy.get('.vue-tag.selected').should('have.length', 1)
+
+    cy.get('.vue-tag.selected').click()
+
+    cy.get('.vue-tag.selected').should('have.length', 0)
+  })
+})
diff --git a/docs/api-reference.md b/docs/api-reference.md
@@ -319,6 +319,7 @@ New in `2.6.0+`
 - **Attributes**:
 
   - `{OptionType}` option
+  - `{Function}` remove
 
 ### toggle
 

diff --git a/src/index.vue b/src/index.vue
@@ -38,7 +38,7 @@
       <template v-if="multiple && taggable">
         <v-tags :modelValue="optionsWithInfo" :collapse-tags="collapseTags" tabindex="-1" @click="focus">
           <template #default="{ option }">
-            <slot name="tag" :option="option.originalOption">
+            <slot name="tag" :option="option.originalOption" :remove="() => addOrRemoveOption($event, option)">
               <span>{{ option.label }}</span>
               <img
                 src="./images/delete.svg"