diff --git a/docs/.vuepress/components/TwemojiTextarea.vue b/docs/.vuepress/components/TwemojiTextarea.vue index 1c61dfa7..6ba5bd44 100644 --- a/docs/.vuepress/components/TwemojiTextarea.vue +++ b/docs/.vuepress/components/TwemojiTextarea.vue @@ -11,6 +11,9 @@ idTextarea="idTextarea" pickerWidth="#idTextarea" :pickerArrowEnabled="false" + :pickerPaddingOffset="0" + componentColor="#F7F7F7" + placeholder="Type here..." > diff --git a/docs/docs/changelog/index.md b/docs/docs/changelog/index.md index afd87ee3..65d9c0b6 100644 --- a/docs/docs/changelog/index.md +++ b/docs/docs/changelog/index.md @@ -4,6 +4,9 @@ title: 'Changelog' # Changelog +## 5.7.4 +- Minor style bugfix for components + ## 5.7.3 - Style update for TwemojiPicker diff --git a/docs/docs/twemoji-textarea-api/index.md b/docs/docs/twemoji-textarea-api/index.md index c0054055..d9a37e7c 100644 --- a/docs/docs/twemoji-textarea-api/index.md +++ b/docs/docs/twemoji-textarea-api/index.md @@ -35,7 +35,7 @@ The value of this prop represents whether the textarea is enabled. ### componentColor - Type: ``string`` -- Default: ``'#f0f0f0'`` +- Default: ``'#F7F7F7'`` - Valid Props: ``Any CSS valid color.`` Define the component color style. diff --git a/package.json b/package.json index 6e261475..0468d778 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kevinfaguiar/vue-twemoji-picker", - "version": "5.7.3", + "version": "5.7.4", "main": "dist/vue-twemoji-picker.umd.min.js", "module": "dist/vue-twemoji-picker.esm.min.js", "unpkg": "dist/vue-twemoji-picker.min.js", @@ -49,7 +49,7 @@ "vue": "^2.6.11" }, "devDependencies": { - "@kevinfaguiar/vue-twemoji-picker": "^5.7.1", + "@kevinfaguiar/vue-twemoji-picker": "^5.7.3", "@rollup/plugin-commonjs": "^11.1.0", "@rollup/plugin-image": "^2.0.4", "@rollup/plugin-node-resolve": "^7.1.3", diff --git a/src/components/Sandbox.vue b/src/components/Sandbox.vue index 59188092..eac08223 100644 --- a/src/components/Sandbox.vue +++ b/src/components/Sandbox.vue @@ -36,6 +36,7 @@ pickerWidth="#idTextarea" :randomEmojiArray="randomEmojiArray" :emojiPickerDisabled="emojiPickerDisabled" + :textareaDisabled="textareaDisabled" > @@ -64,7 +65,7 @@ @import '../assets/simple-grid.css'; body { - background-color: #fafafa; + background-color: #ffffff; } a { @@ -121,6 +122,7 @@ export default Vue.extend({ content: '', randomEmojiArray: ['😀'], emojiPickerDisabled: false, + textareaDisabled: false, }; }, mounted() { @@ -186,6 +188,7 @@ export default Vue.extend({ }, onClickTest() { this.emojiPickerDisabled = !this.emojiPickerDisabled; + this.textareaDisabled = !this.textareaDisabled; }, testChangeIsPickerOpen1() { this.$refs.picker.isPickerOpen = !this.$refs.picker.isPickerOpen; diff --git a/src/components/TwemojiPicker/TwemojiPicker.vue b/src/components/TwemojiPicker/TwemojiPicker.vue index dc03eac4..be763029 100644 --- a/src/components/TwemojiPicker/TwemojiPicker.vue +++ b/src/components/TwemojiPicker/TwemojiPicker.vue @@ -37,7 +37,7 @@
#emoji-popover-header { - padding: 15px; + padding: 15px 5px; overflow-y: hidden; overflow-x: auto; white-space: nowrap; @@ -264,6 +264,10 @@ } > span { + > img { + width: 24px; + height: 24px; + } flex-grow: 1; padding: 5px 10px; width: 32px !important; diff --git a/src/components/TwemojiTextarea.vue b/src/components/TwemojiTextarea.vue index 98507f7b..18bda15c 100644 --- a/src/components/TwemojiTextarea.vue +++ b/src/components/TwemojiTextarea.vue @@ -59,7 +59,7 @@ > #twemoji-textarea { flex-grow: 95; flex-basis: 0; - background-color: #fafafa; + background-color: #ffffff; font-size: 14px; overflow-y: auto; overflow-x: hidden; @@ -159,7 +159,7 @@ export default Vue.extend({ }, componentColor: { type: String as () => string, - default: '#f0f0f0', + default: '#F7F7F7', validator: function (value: string) { const s = new Option().style; s.color = value; diff --git a/yarn.lock b/yarn.lock index a42380a9..94ee7a2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1358,10 +1358,10 @@ "@types/yargs" "^15.0.0" chalk "^3.0.0" -"@kevinfaguiar/vue-twemoji-picker@^5.7.1": - version "5.7.1" - resolved "https://registry.yarnpkg.com/@kevinfaguiar/vue-twemoji-picker/-/vue-twemoji-picker-5.7.1.tgz#6f7e3bf333c7df34a306fd3aa719b492f4bedf1f" - integrity sha512-kRQsHpeHDxjJ7OA+QdQNowVKukERfwFYtuqTxlLTA8aPEtEgfeBAzweetzUElguWkf5iog8x13OWkqQmO1YLRg== +"@kevinfaguiar/vue-twemoji-picker@^5.7.3": + version "5.7.3" + resolved "https://registry.yarnpkg.com/@kevinfaguiar/vue-twemoji-picker/-/vue-twemoji-picker-5.7.3.tgz#e33648363d6415385919930aa9da663cffae48b8" + integrity sha512-OOu05k7oYKyAWHsy/5IrN+xYsDKG5Gb967yySLGdWefM51wHtel0gl6vPvHmaBP6A5+4eD24gpLGE9QuslFGsA== dependencies: "@popperjs/core" "^2.4.0" lodash.pick "^4.4.0"