vue-quick-chat
Version:
This vue component is a simple chat that can be easily imported and used in your project.
1 lines • 4.1 kB
JSON
{"remainingRequest":"/home/matheus/vue-projects/vue-quick-chat/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/matheus/vue-projects/vue-quick-chat/src/components/Chat.vue?vue&type=style&index=0&id=4c2e6d9a&scoped=true&lang=css&","dependencies":[{"path":"/home/matheus/vue-projects/vue-quick-chat/src/components/Chat.vue","mtime":1567035987715},{"path":"/home/matheus/vue-projects/vue-quick-chat/node_modules/css-loader/index.js","mtime":499162500000},{"path":"/usr/local/share/.config/yarn/global/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1566664071830},{"path":"/home/matheus/vue-projects/vue-quick-chat/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/matheus/vue-projects/vue-quick-chat/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.container{\n display: flex;\n /* width: 350px;\n height: 500px; */\n width: 100%;\n height: 100%;\n background: #f0eeee;\n flex-direction: column;\n align-items: stretch;\n /*border: solid 1px #b6b2b2;*/\n overflow: hidden;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n border-top-right-radius: 10px;\n border-top-left-radius: 10px;\n}\n",{"version":3,"sources":["Chat.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Chat.vue","sourceRoot":"components","sourcesContent":["<template>\n <div class=\"container\">\n <Header :colors=\"colors\"/>\n <MessageDisplay :colors=\"colors\"/>\n <MessageManager :onType=\"onType\" :onMessageSubmit=\"onMessageSubmit\" :colors=\"colors\"/>\n </div>\n</template>\n<script>\nimport Header from './Header.vue'\nimport MessageDisplay from './MessageDisplay.vue'\nimport MessageManager from './MessageManager.vue'\nimport { mapMutations } from 'vuex';\nimport store from '../store'\nexport default {\n name: 'Chat',\n store,\n components:{\n Header,\n MessageDisplay,\n MessageManager\n },\n props: {\n participants: {\n type: Array,\n required: true\n },\n messages: {\n type: Array,\n required: true\n },\n myself: {\n type: Object,\n required: true\n },\n chatTitle:{\n type: String,\n required: false,\n default: ''\n },\n placeholder: {\n type: String,\n required: false,\n default: 'type your message here'\n },\n onType: {\n type: Function,\n required: false,\n default: () => false\n },\n onMessageSubmit: {\n type: Function,\n required: false,\n default: () => false\n },\n colors: {\n type: Object,\n required: true\n },\n },\n methods: {\n ...mapMutations([\n 'setParticipants',\n 'setMyself',\n 'setMessages',\n 'setPlaceholder',\n 'setChatTitle'\n ])\n },\n mounted(){\n this.setParticipants(this.participants);\n this.setMyself(this.myself);\n this.setMessages(this.messages);\n this.setPlaceholder(this.placeholder);\n this.setChatTitle(this.chatTitle);\n }\n}\n</script>\n\n<style scoped>\n.container{\n display: flex;\n /* width: 350px;\n height: 500px; */\n width: 100%;\n height: 100%;\n background: #f0eeee;\n flex-direction: column;\n align-items: stretch;\n /*border: solid 1px #b6b2b2;*/\n overflow: hidden;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n border-top-right-radius: 10px;\n border-top-left-radius: 10px;\n}\n</style>"]}]}