vue-quick-chat/src/node_modules/.cache/vue-loader/0904ddf22237a5f7af670b5d4c761611.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/MessageManager.vue?vue&type=style&index=0&id=41c948c1&scoped=true&lang=css&","dependencies":[{"path":"/home/matheus/vue-projects/vue-quick-chat/src/components/MessageManager.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\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-message-manager{\n    height: 65px;\n    background: #fff;\n    display: flex;\n    align-items: center;\n    padding: 0 20px 0 20px;\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n    -webkit-box-shadow: 0px -2px 40px 0px rgba(186,186,186,0.67);\n    box-shadow: 0px -2px 40px 0px rgba(186,186,186,0.67);\n}\n.message-text-box{\n    padding: 0 10px 0 10px;\n    flex: 1;\n    overflow: hidden;\n}\n.message-input{\n    /* border: solid 1px #b9b5b5; */\n    /* border: none;\n    border-radius: 5px;\n    overflow: hidden;\n    height: 40px;\n    resize: none;\n    width: 100%;\n    font-size: 15px;\n    line-height: 30px;\n    display: flex;\n    align-items: center;\n    text-align: left; */\n    width: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    border-bottom-left-radius: 10px;\n    box-sizing: border-box;\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.33;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    color: #565867;\n    -webkit-font-smoothing: antialiased;\n    max-height: 40px;\n    bottom: 0;\n    overflow: scroll;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: left;\n    cursor: text;\n}\n\n.message-input:empty:before {\n  content: attr(placeholder);\n  display: block; /* For Firefox */\n  /* color: rgba(86, 88, 103, 0.3); */\n  filter: contrast(15%);\n  outline: none;\n}\n\n.message-input:focus{\n    outline: none;\n}\n\n.container-send-message{\n    margin-left: 10px;\n}\n\n.icon-send-message{\n    /* color:#b91010; */\n    width: 20px;\n    cursor: pointer;\n    opacity: 0.7;\n    transition: 0.3s;\n    border-radius: 11px;\n    padding: 8px;\n}\n.icon-send-message:hover{\n    opacity: 1;\n    background: #eee;\n}\n",{"version":3,"sources":["MessageManager.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"MessageManager.vue","sourceRoot":"components","sourcesContent":["<template>\n    <div class=\"container-message-manager\">\n        <div class=\"message-text-box\">\n            <div class=\"message-input\" name=\"\" id=\"\" :placeholder=\"placeholder\" tabIndex=\"0\" contenteditable=\"true\" ref=\"userInput\" @input=\"onType\"></div>\n        </div>\n        <div class=\"container-send-message\" @click.prevent=\"sendMessage\">\n            <v-icon name=\"send\" base-class=\"icon-send-message\" :style=\"{color: colors.submitIcon}\"></v-icon>\n        </div>\n    </div>    \n</template>\n<script>\nimport { mapMutations } from 'vuex'\nimport moment from 'moment'\nexport default {\n    props:{\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    data(){\n        return {\n            textInput: ''\n        }\n    },\n    created(){\n        moment.locale('pt-br')\n    },\n    computed: {\n        myself: function (){\n            return this.$store.state.myself;\n        },\n        placeholder: function(){\n            return this.$store.state.placeholder;\n        }\n    },\n    methods: {\n        ...mapMutations([\n            'newMessage'\n        ]),\n        sendMessage: function(){\n            this.textInput = this.$refs.userInput.textContent;\n            this.$refs.userInput.textContent = '';\n\n            if(this.textInput){\n                this.onMessageSubmit()\n                this.newMessage({\n                    content: this.textInput, \n                    myself: true, \n                    participantId: this.myself.id,\n                    timestamp: moment()\n                })\n            }\n        }\n    }\n}\n</script>\n<style scoped>\n.container-message-manager{\n    height: 65px;\n    background: #fff;\n    display: flex;\n    align-items: center;\n    padding: 0 20px 0 20px;\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n    -webkit-box-shadow: 0px -2px 40px 0px rgba(186,186,186,0.67);\n    box-shadow: 0px -2px 40px 0px rgba(186,186,186,0.67);\n}\n.message-text-box{\n    padding: 0 10px 0 10px;\n    flex: 1;\n    overflow: hidden;\n}\n.message-input{\n    /* border: solid 1px #b9b5b5; */\n    /* border: none;\n    border-radius: 5px;\n    overflow: hidden;\n    height: 40px;\n    resize: none;\n    width: 100%;\n    font-size: 15px;\n    line-height: 30px;\n    display: flex;\n    align-items: center;\n    text-align: left; */\n    width: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    border-bottom-left-radius: 10px;\n    box-sizing: border-box;\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.33;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    color: #565867;\n    -webkit-font-smoothing: antialiased;\n    max-height: 40px;\n    bottom: 0;\n    overflow: scroll;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: left;\n    cursor: text;\n}\n\n.message-input:empty:before {\n  content: attr(placeholder);\n  display: block; /* For Firefox */\n  /* color: rgba(86, 88, 103, 0.3); */\n  filter: contrast(15%);\n  outline: none;\n}\n\n.message-input:focus{\n    outline: none;\n}\n\n.container-send-message{\n    margin-left: 10px;\n}\n\n.icon-send-message{\n    /* color:#b91010; */\n    width: 20px;\n    cursor: pointer;\n    opacity: 0.7;\n    transition: 0.3s;\n    border-radius: 11px;\n    padding: 8px;\n}\n.icon-send-message:hover{\n    opacity: 1;\n    background: #eee;\n}\n</style>"]}]}