diff --git a/README.md b/README.md index e620c662..0c491d51 100644 --- a/README.md +++ b/README.md @@ -265,7 +265,8 @@ Otherwise, you need to pass those props as strings. For example: `[messages]="JS | `theme`(26) | `light` / `dark` | - | `light` | | `accepted-files`(27) | String | - | `*` | | `capture-files`(28) | String | - | `''` | -| `styles`(29) | [String, Object] | - | (26) | +| `multiple-files`(29) | Boolean | - | `true` | +| `styles`(30) | [String, Object] | - | (26) | | `emoji-data-source` | String | - | `https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json` | **(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.) @@ -487,7 +488,9 @@ Example: set `accepted-files="image/png, image/jpeg, application/pdf"` to allow **(28)** `capture-files` can be used to enable direct capturing of photos and videos on mobile browsers, as opposed to just uploading existing photos and videos which are already on the device. See [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture) for more information and recognized values. By default, the attribute is omitted and mobile browsers will only offer the gallery to choose photos and videos. Note: this only affects file attachments. Audio messages are always recorded using the device's microphone. -**(29)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js) +**(29)** `multiple-files` can be used to define whether multiple file selections will be accepted. By default this is true. + +**(30)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js) ```javascript styles="{ diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue index d57286c0..25bee869 100644 --- a/src/lib/ChatWindow.vue +++ b/src/lib/ChatWindow.vue @@ -66,6 +66,7 @@ :scroll-distance="scrollDistance" :accepted-files="acceptedFiles" :capture-files="captureFiles" + :multiple-files="multipleFilesCasted" :templates-text="templatesTextCasted" :username-options="usernameOptionsCasted" :emoji-data-source="emojiDataSource" @@ -199,6 +200,7 @@ export default { scrollDistance: { type: Number, default: 60 }, acceptedFiles: { type: String, default: '*' }, captureFiles: { type: String, default: '' }, + multipleFiles: { type: [Boolean, String], default: true }, templatesText: { type: [Array, String], default: () => [] }, mediaPreviewEnabled: { type: [Boolean, String], default: true }, usernameOptions: { @@ -292,6 +294,9 @@ export default { messagesLoadedCasted() { return this.castBoolean(this.messagesLoaded) }, + multipleFilesCasted() { + return this.castBoolean(this.multipleFiles) + }, showSearchCasted() { return this.castBoolean(this.showSearch) }, diff --git a/src/lib/Room/Room.vue b/src/lib/Room/Room.vue index 875ef060..0c57fde1 100644 --- a/src/lib/Room/Room.vue +++ b/src/lib/Room/Room.vue @@ -141,6 +141,7 @@ :show-footer="showFooter" :accepted-files="acceptedFiles" :capture-files="captureFiles" + :multiple-files="multipleFiles" :textarea-action-enabled="textareaActionEnabled" :textarea-auto-focus="textareaAutoFocus" :user-tags-enabled="userTagsEnabled" @@ -212,6 +213,7 @@ export default { showFooter: { type: Boolean, required: true }, acceptedFiles: { type: String, required: true }, captureFiles: { type: String, required: true }, + multipleFiles: { type: Boolean, default: true }, textFormatting: { type: Object, required: true }, linkOptions: { type: Object, required: true }, loadingRooms: { type: Boolean, required: true }, diff --git a/src/lib/Room/RoomFooter/RoomFooter.vue b/src/lib/Room/RoomFooter/RoomFooter.vue index 6289ee1e..75ebbfed 100644 --- a/src/lib/Room/RoomFooter/RoomFooter.vue +++ b/src/lib/Room/RoomFooter/RoomFooter.vue @@ -161,7 +161,7 @@ v-if="showFiles" ref="file" type="file" - multiple + :multiple="multipleFiles ? true : null" :accept="acceptedFiles" :capture="captureFiles" style="display: none" @@ -235,6 +235,7 @@ export default { showEmojis: { type: Boolean, required: true }, showFooter: { type: Boolean, required: true }, acceptedFiles: { type: String, required: true }, + multipleFiles: { type: Boolean, default: true }, captureFiles: { type: String, required: true }, textareaActionEnabled: { type: Boolean, required: true }, textareaAutoFocus: { type: Boolean, required: true }, diff --git a/tests/unit/mock-data.js b/tests/unit/mock-data.js index 1637ab74..2e81e32b 100644 --- a/tests/unit/mock-data.js +++ b/tests/unit/mock-data.js @@ -35,6 +35,7 @@ const singleRoom = false const theme = 'dark' const acceptedFiles = '*' const captureFiles = undefined +const multipleFiles = true const linkOptions = { disabled: false, target: '_blank' } const styles = { general: { color: '#0a0a0a' } } @@ -68,6 +69,7 @@ export default { theme, acceptedFiles, captureFiles, + multipleFiles, linkOptions, styles } diff --git a/types/index.d.ts b/types/index.d.ts index 6324ee3a..76d4c3c8 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -169,6 +169,7 @@ export interface Props { theme?: 'light' | 'dark' 'accepted-files'?: string 'capture-files'?: string + 'multiple-files'?: boolean styles?: Record> }