vue-quick-chat/src/node_modules/.cache/vue-loader/0d6dfcfc309fdbb9e3c4e6c8fdb7f18e.json

This vue component is a simple chat that can be easily imported and used in your project.

{"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/MessageDisplay.vue?vue&type=style&index=0&id=b4be8154&scoped=true&lang=css&","dependencies":[{"path":"/home/matheus/vue-projects/vue-quick-chat/src/components/MessageDisplay.vue","mtime":1567027869041},{"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.contaier-message-display{\n    /* display: flex;\n    flex-direction: column;\n    justify-content: flex-end; */\n    /* align-items: center; */\n    flex: 1;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    display: flex;\n    flex-direction: column-reverse;\n    padding-bottom: 10px;\n}\n.message-text{\n    background: #fff;\n    padding: 2px 7px;\n    border-radius: 15px;\n    margin: 5px 0 5px 0;\n    max-width: 70%;\n    overflow-wrap: break-word;\n    text-align: left;\n}\n\n.message-timestamp{\n    padding: 2px 7px;\n    border-radius: 15px;\n    margin: 0;\n    max-width: 50%;\n    overflow-wrap: break-word;\n    text-align: left;\n    font-size: 10px;\n    color: #bdb8b8;\n    width: 100%;\n}\n\n.my-message >.message-timestamp{\n    text-align: right;\n}\n\n.my-message{\n    justify-content: flex-end;\n    padding-right: 15px;\n    align-items: flex-end;\n}\n\n.other-message{\n    justify-content: flex-start;\n    padding-left: 15px;\n    align-items: flex-start;\n}\n\n.other-message >.message-text{\n    /* background: #fb4141;  */\n    color: #fff;\n    border-bottom-left-radius: 0px;\n}\n\n.my-message >.message-text{\n    border-bottom-right-radius: 0px;\n}\n.message-container{\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: column;\n}\n\n.message-username{\n    font-size: 10px;\n    font-weight: bold;\n}\n",{"version":3,"sources":["MessageDisplay.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"MessageDisplay.vue","sourceRoot":"components","sourcesContent":["<template>\n    <div class=\"contaier-message-display\">\n        <div v-for=\"(message, index) in messages\" :key=\"index\" class=\"message-container\" :class=\"{'my-message': message.myself, 'other-message': !message.myself}\">\n            <div class=\"message-text\" :style=\"{background: !message.myself?colors.message.others.bg: colors.message.myself.bg}\">\n                <p v-if=\"!message.myself\" class=\"message-username\">{{getParticipantById(message.participantId).name}}</p>\n                <p v-else class=\"message-username\">{{myself.name}}</p>\n                <p>{{message.content}}</p>\n            </div>\n            <div class=\"message-timestamp\">\n                {{ message.timestamp.format('LT') }}\n            </div>\n        </div>\n    </div>    \n</template>\n\n<script>\nimport { mapGetters } from 'vuex';\nexport default {\n    props:{\n        colors: {\n            type: Object,\n            required: true\n        },\n    },\n    computed: {\n        ...mapGetters([\n            'getParticipantById'\n        ]),\n        messages: function(){\n            return this.$store.state.messages;\n        },\n        myself: function(){\n            return this.$store.state.myself;\n        }\n    },\n}\n</script>\n\n<style scoped>\n.contaier-message-display{\n    /* display: flex;\n    flex-direction: column;\n    justify-content: flex-end; */\n    /* align-items: center; */\n    flex: 1;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    display: flex;\n    flex-direction: column-reverse;\n    padding-bottom: 10px;\n}\n.message-text{\n    background: #fff;\n    padding: 2px 7px;\n    border-radius: 15px;\n    margin: 5px 0 5px 0;\n    max-width: 70%;\n    overflow-wrap: break-word;\n    text-align: left;\n}\n\n.message-timestamp{\n    padding: 2px 7px;\n    border-radius: 15px;\n    margin: 0;\n    max-width: 50%;\n    overflow-wrap: break-word;\n    text-align: left;\n    font-size: 10px;\n    color: #bdb8b8;\n    width: 100%;\n}\n\n.my-message >.message-timestamp{\n    text-align: right;\n}\n\n.my-message{\n    justify-content: flex-end;\n    padding-right: 15px;\n    align-items: flex-end;\n}\n\n.other-message{\n    justify-content: flex-start;\n    padding-left: 15px;\n    align-items: flex-start;\n}\n\n.other-message >.message-text{\n    /* background: #fb4141;  */\n    color: #fff;\n    border-bottom-left-radius: 0px;\n}\n\n.my-message >.message-text{\n    border-bottom-right-radius: 0px;\n}\n.message-container{\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: column;\n}\n\n.message-username{\n    font-size: 10px;\n    font-weight: bold;\n}\n</style>"]}]}