A beautiful chat rooms web component compatible with all Javascript frameworks
MIT License
Bot releases are visible (Hide)
Published by antoine92190 11 months ago
dist
files: https://github.com/advanced-chat/vue-advanced-chat/issues/489
Published by antoine92190 11 months ago
multiple-files
prop https://github.com/advanced-chat/vue-advanced-chat/issues/458
Published by antoine92190 over 1 year ago
attr
on the file input https://github.com/antoine92190/vue-advanced-chat/pull/415
Published by antoine92190 almost 2 years ago
emoji-data-source
prop to replace emojis data tablePublished by antoine92190 almost 2 years ago
show-files
is disabled https://github.com/antoine92190/vue-advanced-chat/issues/385
Published by antoine92190 almost 2 years ago
message-avatar_{{MESSAGE_ID}}
slot https://github.com/antoine92190/vue-advanced-chat/issues/372
custom-search-room-enabled
prop and search-room
event to use custom room search event https://github.com/antoine92190/vue-advanced-chat/commit/8976dc44e5217e5ffae835d5652bf42fd57b6e10
Published by antoine92190 about 2 years ago
Published by antoine92190 about 2 years ago
Published by antoine92190 about 2 years ago
toggle-rooms-list
event not overriding default behaviour https://github.com/antoine92190/vue-advanced-chat/issues/346
Published by antoine92190 about 2 years ago
Fully migrate the library to web component, so it can be used the same way on Vue 2, Vue 3, React, Angular and any other framework, or with not framework at all.
For more information, please read the official documentation Vue and Web Components.
import { register } from 'vue-advanced-chat'
register()
vue-advanced-chat
as a web component in your config file:compilerOptions: {
isCustomElement: tagName => tagName === 'vue-advanced-chat'
}
CSS classes cannot be simply overridden anymore. You can still use CSS variables, and if needed you can override CSS classes like this:
const style = document.createElement('style')
style.innerHTML = styles
this.$refs.chatWindow.shadowRoot.appendChild(style)
For array and object props, you need to pass it as strings, for example: [messages]="JSON.stringify(messages)
Some props typing have changed:
current-user-id
and room-id
props must be stringsroomId
, typingUsers
and user._id
in rooms
prop must be stringssenderId
in messages
prop must be a stringsenderId
is rooms.lastMessage
must be a stringYou can get events
params like this:
@fetch-messages="fetchMessages($event.detail[0])"
As this library is now using native web component slots, some slots were renamed and the usage changed in some cases.
For the full list of available slots, please refer to https://github.com/antoine92190/vue-advanced-chat#named-slots
Published by antoine92190 about 2 years ago
Published by antoine92190 over 2 years ago
Published by antoine92190 over 2 years ago
textarea-auto-focus
prop to disable autofocus when opening a room for the first time https://github.com/antoine92190/vue-advanced-chat/issues/323
system-message
slot https://github.com/antoine92190/vue-advanced-chat/issues/316
Published by antoine92190 over 2 years ago
Published by antoine92190 over 2 years ago
Published by antoine92190 over 2 years ago
*Credits to @rr-it