vue-quick-chat/src/node_modules/.cache/vue-loader/36f3cedd454e1b656b539e4a8cef366d.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/Header.vue?vue&type=style&index=0&id=1a9bb128&scoped=true&lang=css&","dependencies":[{"path":"/home/matheus/vue-projects/vue-quick-chat/src/components/Header.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.header-container{\n    /* background: #d30303; */\n    height: 70px;\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n    display: flex;\n    padding: 0 20px 0 10px;\n    align-items: center;\n    -webkit-box-shadow:  0px 2px 20px 2px rgba(90, 90, 90, 0.47);\n    box-shadow: 0px 2px 20px 2px rgba(90, 90, 90, 0.47);\n    z-index: 5;\n}\n.header-title{\n    padding: 10px;\n    flex:1;\n    text-align: left;\n}\n\n.header-title-text{\n    /* color: #fff; */\n    margin-bottom: 0px;\n}\n\n.header-exit{\n\n}\n\n.header-paticipants-text{\n    color: #e4e4e4;\n    font-size: 12px;\n    margin-top: 5px;\n    max-height: 30px;\n    overflow: hidden;\n}\n\n.header-exit-button{\n    text-decoration: none;\n    color: #fff;\n    width: 20px;\n}\n\n.icon-close-chat{\n    color:#fff;\n    width: 20px;\n}\n.icon-close-chat:hover{\n    color:rgb(238, 121, 121)\n}\n\n",{"version":3,"sources":["Header.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Header.vue","sourceRoot":"components","sourcesContent":["<template>\n    <div class=\"header-container\" :style=\"{background: colors.header.bg}\">\n        <div class=\"header-title\">\n            <p class=\"header-title-text\" :style=\"{color: colors.header.text}\">{{ chatTitle }}</p>\n            <p class=\"header-paticipants-text\">\n                <span>\n                    {{ `${myself.name}, ` }}\n                </span>\n                <span v-for=\"(participant, index) in participants\" :key=\"participant.id\" >\n                    {{ participants.length-1 != index?`${participant.name}, ` : participant.name }}\n                </span>\n            </p>\n        </div>\n\n        <div class=\"header-exit\">\n            <a class=\"header-exit-button\" href=\"#\"><v-icon name=\"x\" base-class=\"icon-close-chat\"></v-icon></a>\n        </div>\n    </div>    \n</template>\n<script>\n/*\n* TODO: improve support for more than 10 participants (the names list may break in some cases)\n*/\nexport default {\n    props:{\n        colors: {\n            type: Object,\n            required: true\n        },\n    },\n    computed: {\n        participants: function(){\n            return this.$store.state.participants;\n        },\n        myself: function(){\n            return this.$store.state.myself;\n        },\n        chatTitle: function(){\n            return this.$store.state.chatTitle;\n        }\n    }\n}\n</script>\n\n<style scoped>\n.header-container{\n    /* background: #d30303; */\n    height: 70px;\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n    display: flex;\n    padding: 0 20px 0 10px;\n    align-items: center;\n    -webkit-box-shadow:  0px 2px 20px 2px rgba(90, 90, 90, 0.47);\n    box-shadow: 0px 2px 20px 2px rgba(90, 90, 90, 0.47);\n    z-index: 5;\n}\n.header-title{\n    padding: 10px;\n    flex:1;\n    text-align: left;\n}\n\n.header-title-text{\n    /* color: #fff; */\n    margin-bottom: 0px;\n}\n\n.header-exit{\n\n}\n\n.header-paticipants-text{\n    color: #e4e4e4;\n    font-size: 12px;\n    margin-top: 5px;\n    max-height: 30px;\n    overflow: hidden;\n}\n\n.header-exit-button{\n    text-decoration: none;\n    color: #fff;\n    width: 20px;\n}\n\n.icon-close-chat{\n    color:#fff;\n    width: 20px;\n}\n.icon-close-chat:hover{\n    color:rgb(238, 121, 121)\n}\n\n</style>\n"]}]}