Skip to content

Commit e2d2c44

Browse files
antoine92190antoine92190
committed
(docs) use kebab-case for events & props
1 parent 2686153 commit e2d2c44

File tree

1 file changed

+84
-84
lines changed

1 file changed

+84
-84
lines changed

‎README.md

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ You can import it as a custom component:
8181

8282
```javascript
8383
<template>
84-
<chat-window :currentUserId="currentUserId" :rooms="rooms" :messages="messages" />
84+
<chat-window :current-user-id="currentUserId" :rooms="rooms" :messages="messages" />
8585
</template>
8686

8787
<script>
@@ -164,51 +164,51 @@ fetchMessages({ room, options }) {
164164

165165
## Props API
166166

167-
| Prop | Type | Required | Default |
168-
|----------------------------|------------------|----------|---------|
169-
| height | String | - | 600px |
170-
| currentUserId (1) | [String, Number] | true | - |
171-
| rooms | Array | - | [ ] |
172-
| loadingRooms (2) | Boolean | - | false |
173-
| roomId (3) | [String, Number] | - | null |
174-
| loadFirstRoom (4) | Boolean | - | true |
175-
| messages | Array | - | [ ] |
176-
| roomMessage (5) | String | - | null |
177-
| messagesLoaded (6) | Boolean | - | false |
178-
| menuActions (7) | Array | - | [ ] |
179-
| messageActions (8) | Array | - | (4) |
180-
| showAddRoom | Boolean | - | true |
181-
| showSendIcon | Boolean | - | true |
182-
| showFiles | Boolean | - | true |
183-
| showAudio | Boolean | - | true |
184-
| showEmojis | Boolean | - | true |
185-
| showReactionEmojis | Boolean | - | true |
186-
| showNewMessagesDivider (9) | Boolean | - | true |
187-
| textMessages (10) | Object | - | null |
188-
| textFormatting (11) | Boolean | - | true |
189-
| responsiveBreakpoint (12) | Number | - | 900 |
190-
| singleRoom (13) | Boolean | - | false |
191-
| theme (14) | Sring | - | light |
192-
| acceptedFiles (15) | String | - | "*" |
193-
| styles (16) | Object | - | (10) |
194-
195-
(1) `currentUserId` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
196-
197-
(2) `loadingRooms` can be used to show/hide a spinner icon while rooms are loading
198-
199-
(3) `roomId` can be used to load a specific room at any time
200-
201-
(4) `loadFirstRoom` can be used to remove the default behaviour of opening the first room at initialization
202-
203-
(5) `roomMessage` can be used to add a default textarea value
204-
205-
(6) `messagesLoaded` must be manually set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top anymore
206-
207-
(7) `menuActions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
208-
You can then use the [menuActionHandler](#events-api) event to call your own action after clicking a button. Ex:
167+
| Prop | Type | Required | Default |
168+
| ----------------------------- | ---------------- | -------- | ------- |
169+
| height | String | - | 600px |
170+
| current-user-id (1) | [String, Number] | true | - |
171+
| rooms | Array | - | [ ] |
172+
| loading-rooms (2) | Boolean | - | false |
173+
| room-id (3) | [String, Number] | - | null |
174+
| load-first-room (4) | Boolean | - | true |
175+
| messages | Array | - | [ ] |
176+
| room-message (5) | String | - | null |
177+
| messages-loaded (6) | Boolean | - | false |
178+
| menu-actions (7) | Array | - | [ ] |
179+
| message-actions (8) | Array | - | (4) |
180+
| show-add-room | Boolean | - | true |
181+
| show-send-icon | Boolean | - | true |
182+
| show-files | Boolean | - | true |
183+
| show-audio | Boolean | - | true |
184+
| show-emojis | Boolean | - | true |
185+
| show-reaction-emojis | Boolean | - | true |
186+
| show-new-messages-divider (9) | Boolean | - | true |
187+
| text-messages (10) | Object | - | null |
188+
| text-formatting (11) | Boolean | - | true |
189+
| responsive-breakpoint (12) | Number | - | 900 |
190+
| single-room (13) | Boolean | - | false |
191+
| theme (14) | Sring | - | light |
192+
| accepted-files (15) | String | - | "\*" |
193+
| styles (16) | Object | - | (10) |
194+
195+
(1) `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
196+
197+
(2) `loading-rooms` can be used to show/hide a spinner icon while rooms are loading
198+
199+
(3) `room-id` can be used to load a specific room at any time
200+
201+
(4) `load-first-room` can be used to remove the default behaviour of opening the first room at initialization
202+
203+
(5) `room-message` can be used to add a default textarea value
204+
205+
(6) `messages-loaded` must be manually set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top anymore
206+
207+
(7) `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
208+
You can then use the [menu-action-handler](#events-api) event to call your own action after clicking a button. Ex:
209209

210210
```javascript
211-
menuActions="[
211+
menu-actions="[
212212
{
213213
name: 'inviteUser',
214214
title: 'Invite User'
@@ -224,11 +224,11 @@ menuActions="[
224224
]"
225225
```
226226

227-
(8) `messageActions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
228-
You can then use the [messageActionHandler](#events-api) event to call your own action after clicking a button. Ex:
227+
(8) `message-actions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
228+
You can then use the [message-action-handler](#events-api) event to call your own action after clicking a button. Ex:
229229

230230
```javascript
231-
messageActions="[
231+
message-actions="[
232232
{
233233
name: 'addMessageToFavorite',
234234
title: 'Add To Favorite'
@@ -240,7 +240,7 @@ messageActions="[
240240
]"
241241
```
242242

243-
You can use built-in `messageActions` names to trigger specific UI modifications when clicked.<br>
243+
You can use built-in `message-actions` names to trigger specific UI modifications when clicked.<br>
244244
Currently, `replyMessage`, `editMessage` and `deleteMessage` action names are available.<br>
245245
If `messageActions` is not set, it will use the default values below.<br>
246246
If you don't want to display this `messageActions` menu, you can pass it an empty array.
@@ -264,12 +264,12 @@ messageActions="[
264264
]"
265265
```
266266

267-
(9) `showNewMessagesDivider` can be used to show/hide the blue line divider between seen and unseen messages.
267+
(9) `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
268268

269-
(10) `textMessages` can be used to replace default i18n texts. Ex:
269+
(10) `text-messages` can be used to replace default i18n texts. Ex:
270270

271271
```javascript
272-
textMessages="{
272+
text-messages="{
273273
ROOMS_EMPTY: 'Aucune conversation',
274274
ROOM_EMPTY: 'Aucune conversation sélectionnée',
275275
NEW_MESSAGES: 'Nouveaux messages',
@@ -284,10 +284,10 @@ textMessages="{
284284
}"
285285
```
286286

287-
(11) `textFormatting` can be used to add text formatting. Currently, bold, italic, strikethrough, underline, inline code and multiline code formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:textFormatting="false"`.
287+
(11) `text-formatting` can be used to add text formatting. Currently, bold, italic, strikethrough, underline, inline code and multiline code formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:textFormatting="false"`.
288288

289289
| Style | Syntax | Example | Output |
290-
|-------------------|-----------------|----------------------------------------|----------------------------------------|
290+
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
291291
| Bold | `* *` | `*This is bold text*` | **This is bold text** |
292292
| Italic | `_ _` | `_This text is italicized_` | _This text is italicized_ |
293293
| Strikethrough | `~ ~` | `~This was mistaken text~` | ~~This was mistaken text~~ |
@@ -311,13 +311,13 @@ This is
311311
multiline code
312312
```
313313

314-
(12) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
314+
(12) `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
315315

316-
(13) `singleRoom` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
316+
(13) `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
317317

318318
(14) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
319319

320-
(15) `acceptedFiles` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
320+
(15) `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
321321

322322
Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files
323323

@@ -560,25 +560,25 @@ messages="[
560560

561561
## Events API
562562

563-
| Event | Params | Fires when |
564-
|---------------------------|-----------------------------------------------------------------|-------------------------------------------------------|
565-
| fetchMessages (1) | `{ room, options }` | A user has scrolled on top to load more messages |
566-
| sendMessage | `{ roomId, content, file (5), replyMessage (6) }` | A user has sent a message |
567-
| editMessage | `{ roomId, messageId, newContent, file (5), replyMessage (6) }` | A user has edited a message |
568-
| deleteMessage | `{ roomId, messageId }` | A user has deleted a message |
569-
| openFile | `{ message, action }` | A user has clicked to view or download a file |
570-
| addRoom | - | A user clicks on the plus icon next to searchbar |
571-
| menuActionHandler (2) | `{ roomId, action }` | A user clicks on the vertical dots icon inside a room |
572-
| messageActionHandler (3) | `{ roomId, action, message }` | A user clicks on the dropdown icon inside a message |
573-
| sendMessageReaction | `{ roomId, messageId, reaction, remove }` | A user clicks on the emoji icon inside a message |
574-
| roomInfo | `room` | A user clicks the room header bar |
575-
| textareaActionHandler (4) | `{ roomId, message }` | A user clicks on custom icon inside the footer |
576-
| typingMessage | `{ message, roomId }` | A user is typing a message |
577-
578-
(1) `fetchMessages` is triggered every time a room is opened. If the room is opened for the first time, the `options` param will hold `reset: true`
579-
(1) `fetchMessages` should be a method implementing a pagination system. Its purpose is to load older messages of a conversation when the user scroll on top
580-
581-
(2) `menuActionHandler` is the result of the `menuActions` prop.<br>
563+
| Event | Params | Fires when |
564+
| --------------------------- | --------------------------------------------------------------- | ----------------------------------------------------- |
565+
| fetch-messages (1) | `{ room, options }` | A user has scrolled on top to load more messages |
566+
| send-message | `{ roomId, content, file (5), replyMessage (6) }` | A user has sent a message |
567+
| edit-message | `{ roomId, messageId, newContent, file (5), replyMessage (6) }` | A user has edited a message |
568+
| delete-message | `{ roomId, messageId }` | A user has deleted a message |
569+
| open-file | `{ message, action }` | A user has clicked to view or download a file |
570+
| add-room | - | A user clicks on the plus icon next to searchbar |
571+
| menu-action-handler (2) | `{ roomId, action }` | A user clicks on the vertical dots icon inside a room |
572+
| message-action-handler (3) | `{ roomId, action, message }` | A user clicks on the dropdown icon inside a message |
573+
| send-message-reaction | `{ roomId, messageId, reaction, remove }` | A user clicks on the emoji icon inside a message |
574+
| room-info | `room` | A user clicks the room header bar |
575+
| textarea-action-handler (4) | `{ roomId, message }` | A user clicks on custom icon inside the footer |
576+
| typing-message | `{ message, roomId }` | A user is typing a message |
577+
578+
(1) `fetch-messages` is triggered every time a room is opened. If the room is opened for the first time, the `options` param will hold `reset: true`.<br>
579+
(1) `fetch-messages` should be a method implementing a pagination system. Its purpose is to load older messages of a conversation when the user scroll on top.
580+
581+
(2) `menu-action-handler` is the result of the `menuActions` prop.<br>
582582
When clicking a button from your `menuActions` array, `menuActionHandler` will give you the name of the button that was click.
583583
Then you can do whatever you want with it. Ex:
584584

@@ -595,8 +595,8 @@ menuActionHandler({ roomId, action }) {
595595
}
596596
```
597597

598-
(3) `messageActionHandler` is the result of the `messageActions` prop.<br>
599-
When clicking a message menu button from your `messageActions` array, `messageActionHandler` will give you the name of the button that was click and the corresponding message data.
598+
(3) `message-action-handler` is the result of the `message-actions` prop.<br>
599+
When clicking a message menu button from your `message-actions` array, `message-action-handler` will give you the name of the button that was click and the corresponding message data.
600600
Then you can do whatever you want with it. Ex:
601601

602602
```javascript
@@ -610,11 +610,11 @@ messageActionHandler({ roomId, action, message }) {
610610
}
611611
```
612612

613-
(4) `textareaActionHandler` can be used to add an extra icon on the right of the textarea, and recieve an event when clicking it.
613+
(4) `textarea-action-handler` can be used to add an extra icon on the right of the textarea, and recieve an event when clicking it.
614614

615615
(5) All file params contain: `{ blob, localURL, name, size, type }`
616616

617-
(6) `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked
617+
(6) `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked.
618618

619619
## Named Slots
620620

@@ -626,11 +626,11 @@ Example:
626626
</template>
627627
```
628628

629-
| Slot | Action | Data | Overridden slots |
630-
|----------------|------------------------------------------------------------|-------------------------------|--------------------------------------|
631-
| rooms-header | Add a template on top of rooms list (above the search bar) | - | - |
632-
| room-list-item | Replace the template of the room list items | rooms | - |
633-
| room-header | Replace the template of the room header | room, typingUsers, userStatus | room-options, menu-icon, toggle-icon |
629+
| Slot | Action | Data | Overridden slots |
630+
| -------------------------- | ----------------------------------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------- |
631+
| rooms-header | Add a template on top of rooms list (above the search bar) | - | - |
632+
| room-list-item | Replace the template of the room list items | rooms | - |
633+
| room-header | Replace the template of the room header | room, typingUsers, userStatus | room-options, menu-icon, toggle-icon |
634634
| room-header-info | Replace the template of the room header text | room, typingUsers, userStatus |
635635
| room-options | Replace the template of the room options | - | menu-icon |
636636
| message | Replace the template of the message box | message | deleted-icon, eye-icon, document-icon, pencil-icon, checkmark-icon, dropdown-icon, emoji-picker-icon |

0 commit comments

Comments
 (0)