{"version":3,"file":"ChatImageSelector-b343ef17.js","sources":["../../../node_modules/@heroicons/vue/20/solid/esm/PlusCircleIcon.js","../../../app/javascript/components/chat/ChatImageSelector.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","<template>\n  <div\n    class=\"relative mb-1 flex items-center justify-center rounded-full\"\n    :class=\"[\n      !imageUrl && !onlyPreview ? 'border-2 border-dashed border-gray-600 bg-gray-800 opacity-80' : '',\n      settingsModal || onlyPreview ? (onlyPreview && !imageUrl ? 'h-36 w-36' : 'h-40 w-40') : 'h-32 w-32'\n    ]\"\n    @drop.prevent=\"onDrop\"\n  >\n    <div v-if=\"imageUrl && onlyPreview\" class=\"absolute bottom-0 right-0 mb-3 mr-3\">\n      <div\n        class=\"h-6 w-6 rounded-full border-2 border-gray-900\"\n        :class=\"user.online ? 'bg-green-600' : 'bg-gray-600'\"\n      ></div>\n    </div>\n    <img v-if=\"imageUrl\" class=\"img-container h-full w-full rounded-full bg-gray-700 object-cover\" :src=\"imageUrl\" />\n    <div v-else-if=\"onlyPreview && !imageUrl\">\n      <ChatImage size=\"xxl\" :item=\"user\" :show-online=\"true\"> </ChatImage>\n    </div>\n    <div v-else-if=\"!onlyPreview\" class=\"flex-col space-y-2 text-xs\">\n      <input type=\"file\" ref=\"file\" accept=\"image/png, image/jpeg\" style=\"display: none\" @change=\"onFileChange\" />\n      <div class=\"relative cursor-pointer p-1 pt-1.5 text-gray-600\" @click=\"triggerFileSelector()\">\n        <PhotoIcon class=\"h-10 w-10\" />\n        <PlusCircleIcon class=\"absolute right-0 top-0 h-5 w-5\" />\n      </div>\n    </div>\n  </div>\n  <span\n    v-if=\"imageError && imageError.length > 0\"\n    class=\"flex items-center justify-center text-center text-xs text-red-400\"\n  >\n    {{ imageError }}\n  </span>\n  <div class=\"mt-3.5 flex w-40 items-center justify-center text-xs\" v-if=\"!onlyPreview\">\n    <input type=\"file\" accept=\"image/png, image/jpeg\" ref=\"file\" style=\"display: none\" @change=\"onFileChange\" />\n    <BaseButton type=\"secondary\" size=\"sm\" @press=\"triggerFileSelector()\"> Select File </BaseButton>\n  </div>\n</template>\n<script setup>\nimport { ref, reactive, onMounted, onUnmounted, computed } from 'vue';\nimport { useStore } from 'vuex';\nimport { PhotoIcon, PlusCircleIcon } from '@heroicons/vue/20/solid';\nimport ChatImage from './ChatImage.vue';\nconst $store = useStore();\nconst props = defineProps({\n  user: { type: Object, default: () => {} },\n  settingsModal: { type: Boolean, default: false }\n});\nconst $emit = defineEmits(['selected-image']);\n\n// IMAGE\nconst imageError = ref('');\nconst imageUrl = ref('');\nconst acceptabelImageTypes = reactive(['image/png', 'image/jpeg']);\nonMounted(() => {\n  imageUrl.value = props.user.image;\n});\n\n// FILE\nconst file = ref(null);\n\nfunction setFile(file) {\n  if (file.size > 5242880) {\n    imageError.value = 'Image should be less than 5 MB.';\n  } else if (!acceptabelImageTypes.includes(file.type)) {\n    imageError.value = 'Invalid file format.';\n  } else {\n    imageError.value = '';\n    imageUrl.value = URL.createObjectURL(file);\n    $emit('selected-image', { imageUrl: imageUrl.value, file: file });\n  }\n}\n\nfunction onFileChange(e) {\n  const file = e.target.files[0];\n  setFile(file);\n}\n\nfunction onDrop(e) {\n  setFile([...e.dataTransfer.files][0]);\n}\n\nfunction triggerFileSelector() {\n  file.value.click();\n}\n\n//EVENTS\nconst events = reactive(['dragenter', 'dragover', 'dragleave', 'drop']);\nfunction preventDefaults(e) {\n  e.preventDefault();\n}\nonMounted(() => {\n  events.forEach(eventName => {\n    document.body.addEventListener(eventName, preventDefaults);\n  });\n});\n\nonUnmounted(() => {\n  events.forEach(eventName => {\n    document.body.removeEventListener(eventName, preventDefaults);\n  });\n});\n\n// OTHERS\nconst onlyPreview = computed(() => {\n  return $store.getters.client.user.id !== props.user.id;\n});\n</script>\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","$store","useStore","imageError","ref","imageUrl","acceptabelImageTypes","reactive","onMounted","props","file","setFile","$emit","onFileChange","onDrop","triggerFileSelector","events","preventDefaults","eventName","onUnmounted","onlyPreview","computed"],"mappings":"2ZAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAoB,MAAO,CAC/C,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,MACnB,EAAK,CACDC,EAAoB,OAAQ,CAC1B,YAAa,UACb,EAAG,wJACH,YAAa,SACnB,CAAK,CACL,CAAG,CACH,4cC4BMC,EAASC,EAAQ,EAQjBC,EAAaC,EAAI,EAAE,EACnBC,EAAWD,EAAI,EAAE,EACjBE,EAAuBC,EAAS,CAAC,YAAa,YAAY,CAAC,EACjEC,EAAU,IAAM,CACdH,EAAS,MAAQI,EAAM,KAAK,KAC9B,CAAC,EAGD,MAAMC,EAAON,EAAI,IAAI,EAErB,SAASO,EAAQD,EAAM,CACjBA,EAAK,KAAO,QACdP,EAAW,MAAQ,kCACTG,EAAqB,SAASI,EAAK,IAAI,GAGjDP,EAAW,MAAQ,GACnBE,EAAS,MAAQ,IAAI,gBAAgBK,CAAI,EACzCE,EAAM,iBAAkB,CAAE,SAAUP,EAAS,MAAO,KAAMK,CAAI,CAAE,GAJhEP,EAAW,MAAQ,sBAMvB,CAEA,SAASU,EAAa,EAAG,CACvB,MAAMH,EAAO,EAAE,OAAO,MAAM,CAAC,EAC7BC,EAAQD,CAAI,CACd,CAEA,SAASI,EAAO,EAAG,CACjBH,EAAQ,CAAC,GAAG,EAAE,aAAa,KAAK,EAAE,CAAC,CAAC,CACtC,CAEA,SAASI,GAAsB,CAC7BL,EAAK,MAAM,OACb,CAGA,MAAMM,EAAST,EAAS,CAAC,YAAa,WAAY,YAAa,MAAM,CAAC,EACtE,SAASU,EAAgB,EAAG,CAC1B,EAAE,eAAc,CAClB,CACAT,EAAU,IAAM,CACdQ,EAAO,QAAQE,GAAa,CAC1B,SAAS,KAAK,iBAAiBA,EAAWD,CAAe,CAC7D,CAAG,CACH,CAAC,EAEDE,EAAY,IAAM,CAChBH,EAAO,QAAQE,GAAa,CAC1B,SAAS,KAAK,oBAAoBA,EAAWD,CAAe,CAChE,CAAG,CACH,CAAC,EAGD,MAAMG,EAAcC,EAAS,IACpBpB,EAAO,QAAQ,OAAO,KAAK,KAAOQ,EAAM,KAAK,EACrD","x_google_ignoreList":[0]}