From 6b6f39e2b68d17b544730b8a81b686765f741a55 Mon Sep 17 00:00:00 2001
From: Kevin Aguiar <kevinfaveridev@gmail.com>
Date: Sun, 10 May 2020 00:14:50 -0300
Subject: [PATCH] ADD: TwemojiTextarea now extends on TwemojiPicker slots

---
 docs/docs/changelog/index.md            | 4 ++++
 docs/docs/twemoji-picker-api/index.md   | 3 +--
 docs/docs/twemoji-textarea-api/index.md | 4 ++++
 package.json                            | 2 +-
 src/components/Sandbox.vue              | 5 +++--
 src/components/TwemojiTextarea.vue      | 6 +++++-
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/docs/docs/changelog/index.md b/docs/docs/changelog/index.md
index cd7ed2ae..a3f87ff7 100644
--- a/docs/docs/changelog/index.md
+++ b/docs/docs/changelog/index.md
@@ -4,6 +4,10 @@ title: 'Changelog'
 
 # Changelog
 
+## 5.7.2
+
+- Added a Vue slot which enables the usage of TwemojiPicker as a headless component when using TwemojiTextarea component
+
 ## 5.7.1
 - Fixes ESM build
 
diff --git a/docs/docs/twemoji-picker-api/index.md b/docs/docs/twemoji-picker-api/index.md
index d7192d15..d0485b1d 100644
--- a/docs/docs/twemoji-picker-api/index.md
+++ b/docs/docs/twemoji-picker-api/index.md
@@ -186,8 +186,7 @@ The HTMLElement provided for the slot will be DOM element which will trigger the
   :emojiData="emojiDataAll"
   :emojiGroups="emojiGroups"
 >
-  <template v-slot:twemoji-picker-button
-    >
+  <template v-slot:twemoji-picker-button>
     <button>OMG A HEADLESS COMPONENT</button>
   </template>
 </twemoji-picker>
diff --git a/docs/docs/twemoji-textarea-api/index.md b/docs/docs/twemoji-textarea-api/index.md
index 50db6f62..f12a2279 100644
--- a/docs/docs/twemoji-textarea-api/index.md
+++ b/docs/docs/twemoji-textarea-api/index.md
@@ -119,6 +119,10 @@ This method adds a text to the textarea. The text parameter will then be sanitiz
 
 This method cleans the textarea.
 
+## Slots
+
+- This component inherits all Twemoji Picker slots. You can check them [here](/docs/twemoji-picker-api/#slots).
+
 ## Styling
 
 The component doesn't enforce CSS rules using `!important` so you can easily overwrite its default style.
\ No newline at end of file
diff --git a/package.json b/package.json
index d18fd8f0..fa30d21d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kevinfaguiar/vue-twemoji-picker",
-  "version": "5.7.1",
+  "version": "5.7.2",
   "main": "dist/vue-twemoji-picker.umd.min.js",
   "module": "dist/vue-twemoji-picker.esm.min.js",
   "unpkg": "dist/vue-twemoji-picker.min.js",
diff --git a/src/components/Sandbox.vue b/src/components/Sandbox.vue
index 078b1152..59188092 100644
--- a/src/components/Sandbox.vue
+++ b/src/components/Sandbox.vue
@@ -27,7 +27,7 @@
         :recentEmojisFeat="true"
         recentEmojisStorage="none"
         :searchEmojisFeat="true"
-        placeholder="Textarea Placeholder"
+        placeholder="Textarea Placeholders"
         :maxlength="100"
         @isContentOverflowed="isContentOverflowed"
         ref="twemojiTextareaRef"
@@ -36,7 +36,8 @@
         pickerWidth="#idTextarea"
         :randomEmojiArray="randomEmojiArray"
         :emojiPickerDisabled="emojiPickerDisabled"
-      ></twemoji-textarea>
+      >
+      </twemoji-textarea>
       <button @click="onClickTest">Working Test</button>
     </div>
     <div>
diff --git a/src/components/TwemojiTextarea.vue b/src/components/TwemojiTextarea.vue
index 102e5fe6..5163c782 100644
--- a/src/components/TwemojiTextarea.vue
+++ b/src/components/TwemojiTextarea.vue
@@ -14,7 +14,11 @@
       @emojiUnicodeAdded="emojiUnicodeAdded"
       @emojiImgAdded="emojiImgAdded"
       :pickerPaddingOffset="pickerPaddingOffset"
-    ></twemoji-picker>
+    >
+      <template v-for="(_, slotName) in $slots" v-slot:[slotName]>
+        <slot :name="slotName" />
+      </template>
+    </twemoji-picker>
 
     <div
       ref="twemojiTextarea"