ADD: TwemojiTextarea now extends on TwemojiPicker slots

kevinfaveri · May 10, 2020 · 6b6f39e · 6b6f39e
1 parent d8dd9de
commit 6b6f39e
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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.
diff --git 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
@@ -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
@@ -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"