diff --git a/README.md b/README.md index 69410829..a10c63ba 100644 --- a/README.md +++ b/README.md @@ -209,7 +209,7 @@ If you are using Vue 3, you can pass Array and Object props normally: [Passing D Otherwise, you need to pass those props as strings. For example: `[messages]="JSON.stringify(messages)"` |
Prop
| Type | Required | Default | -| ----------------------------------- | ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------- | +|-------------------------------------| ---------------- | -------- |-------------------------------------------------------------------------------------------------------------------| | `height` | String | - | `600px` | | `current-user-id`(1) | String | `true` | - | | `rooms` | [String, Array] | - | `[]` | @@ -255,7 +255,8 @@ Otherwise, you need to pass those props as strings. For example: `[messages]="JS | `scroll-distance`(25) | Number | - | `60` | | `theme`(26) | `light` / `dark` | - | `light` | | `accepted-files`(27) | String | - | `*` | -| `styles`(28) | [String, Object] | - | (26) | +| `capture-files`(28) | String | - | `undefined` | +| `styles`(29) | [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.) @@ -473,9 +474,11 @@ You can then use the [textarea-action-handler](#events-api) event to call your o **(27)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`. -Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files only +Example: set `accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files only -**(28)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js) +**(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) ```javascript styles="{ diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue index 7e7d8a43..ba67223a 100644 --- a/src/lib/ChatWindow.vue +++ b/src/lib/ChatWindow.vue @@ -65,6 +65,7 @@ :emojis-suggestion-enabled="emojisSuggestionEnabledCasted" :scroll-distance="scrollDistance" :accepted-files="acceptedFiles" + :capture-files="captureFiles" :templates-text="templatesTextCasted" :username-options="usernameOptionsCasted" :emoji-data-source="emojiDataSource" @@ -203,6 +204,7 @@ export default { roomMessage: { type: String, default: '' }, scrollDistance: { type: Number, default: 60 }, acceptedFiles: { type: String, default: '*' }, + captureFiles: { type: String, default: undefined }, templatesText: { type: [Array, String], default: () => [] }, mediaPreviewEnabled: { type: [Boolean, String], default: true }, usernameOptions: { diff --git a/src/lib/Room/Room.vue b/src/lib/Room/Room.vue index 67297ca4..d950fc0b 100644 --- a/src/lib/Room/Room.vue +++ b/src/lib/Room/Room.vue @@ -140,6 +140,7 @@ :show-emojis="showEmojis" :show-footer="showFooter" :accepted-files="acceptedFiles" + :capture-files="captureFiles" :textarea-action-enabled="textareaActionEnabled" :textarea-auto-focus="textareaAutoFocus" :user-tags-enabled="userTagsEnabled" @@ -210,6 +211,7 @@ export default { showNewMessagesDivider: { type: Boolean, required: true }, showFooter: { type: Boolean, required: true }, acceptedFiles: { type: String, required: true }, + captureFiles: { type: String, required: 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 41e337fb..6289ee1e 100644 --- a/src/lib/Room/RoomFooter/RoomFooter.vue +++ b/src/lib/Room/RoomFooter/RoomFooter.vue @@ -163,6 +163,7 @@ type="file" multiple :accept="acceptedFiles" + :capture="captureFiles" style="display: none" @change="onFileChange($event.target.files)" /> @@ -234,6 +235,7 @@ export default { showEmojis: { type: Boolean, required: true }, showFooter: { type: Boolean, required: true }, acceptedFiles: { type: String, required: true }, + captureFiles: { type: String, required: true }, textareaActionEnabled: { type: Boolean, required: true }, textareaAutoFocus: { type: Boolean, required: true }, userTagsEnabled: { type: Boolean, required: true }, diff --git a/tests/unit/mock-data.js b/tests/unit/mock-data.js index cd315aef..1637ab74 100644 --- a/tests/unit/mock-data.js +++ b/tests/unit/mock-data.js @@ -34,6 +34,7 @@ const responsiveBreakpoint = 10 const singleRoom = false const theme = 'dark' const acceptedFiles = '*' +const captureFiles = undefined const linkOptions = { disabled: false, target: '_blank' } const styles = { general: { color: '#0a0a0a' } } @@ -66,6 +67,7 @@ export default { singleRoom, theme, acceptedFiles, + captureFiles, linkOptions, styles } diff --git a/types/index.d.ts b/types/index.d.ts index 5ddc8c8d..6324ee3a 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -168,6 +168,7 @@ export interface Props { 'scroll-distance'?: number theme?: 'light' | 'dark' 'accepted-files'?: string + 'capture-files'?: string styles?: Record> }