set multiple-files in components (#460)

Author: fabioselau077

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="{

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)
 		},

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 },

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 },

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
 }

types/index.d.ts

@@ -170,6 +170,7 @@ export interface Props {
 	theme?: 'light' | 'dark'
 	'accepted-files'?: string
 	'capture-files'?: string
+	'multiple-files'?: boolean
 	styles?: Record<string, Record<string, string>>
 }