{"version":3,"file":"ChatUploadsPreview-d9c7d966.js","sources":["../../../app/javascript/components/chat/ChatUploadsPreview.vue"],"sourcesContent":["<template>\n  <div class=\"flex w-full items-center overflow-x-auto overflow-y-hidden\" :class=\"external ? 'h-40' : 'h-60'\">\n    <div v-for=\"(file, idx) in files\" class=\"relative p-2\" :key=\"`file_${idx}`\" :class=\"imageFile(file) ? 'pb-8' : ''\">\n      <div v-if=\"imageFile(file)\" :class=\"external ? 'h-20 w-20' : 'h-40 w-40'\">\n        <div class=\"flex h-full items-center justify-center space-y-1 rounded-t bg-gray-900/50 px-1 py-1\">\n          <div class=\"flex h-full items-center\">\n            <img class=\"max-h-full\" :src=\"getUrl(file)\" :alt=\"file.name\" />\n          </div>\n        </div>\n        <div\n          class=\"line-clamp-1 whitespace-nowrap rounded-bl rounded-br bg-gray-900/50 px-1 py-1 text-xs text-gray-400\"\n        >\n          {{ truncate(file.name, truncateLength) }}\n        </div>\n      </div>\n      <div v-else-if=\"file.type.startsWith('video/')\">\n        <div\n          class=\"flex flex-col items-center justify-center space-y-1 rounded-t bg-gray-900/50 px-1 py-1\"\n          :class=\"external ? 'h-20' : 'h-40 w-40'\"\n        >\n          <MimeTypeIcons :mime-type=\"file.type\" size=\"h-16 w-16 text-gray-400\" />\n        </div>\n        <div\n          class=\"line-clamp-1 whitespace-nowrap rounded-bl rounded-br bg-gray-900/50 px-1 py-1 text-xs text-gray-400\"\n        >\n          {{ truncate(file.name, truncateLength) }}\n        </div>\n      </div>\n      <div v-else>\n        <div\n          class=\"flex flex-col items-center justify-center space-y-1 rounded-t bg-gray-900/50 px-1 py-1\"\n          :class=\"external ? 'h-20' : 'h-40 w-40'\"\n        >\n          <MimeTypeIcons :mime-type=\"file.type\" size=\"h-16 w-16 text-gray-400\" />\n        </div>\n        <div\n          class=\"line-clamp-1 whitespace-nowrap rounded-bl rounded-br bg-gray-900/50 px-1 py-1 text-xs text-gray-400\"\n        >\n          {{ truncate(file.name, truncateLength) }}\n        </div>\n      </div>\n      <div class=\"absolute right-0\" style=\"top: -3px\" @click=\"$emit('remove-file', file.name)\">\n        <TrashIcon class=\"h-5 w-5 cursor-pointer text-gray-400 hover:text-red-500\" />\n      </div>\n    </div>\n  </div>\n</template>\n<script setup>\nimport { computed } from 'vue';\nimport { TrashIcon } from '@heroicons/vue/20/solid';\nimport { truncate } from '@/composeables/filters';\nimport MimeTypeIcons from '@/components/MimeTypeIcons.vue';\nconst props = defineProps({\n  files: Array,\n  external: {\n    type: Boolean,\n    default: false\n  }\n});\nconst truncateLength = computed(() => {\n  return props.external ? 10 : 20;\n});\n\nfunction getUrl(file) {\n  return URL.createObjectURL(file);\n}\nfunction imageFile(file) {\n  return file.type.startsWith('image/') && !file.type.endsWith('.photoshop');\n}\n</script>\n"],"names":["truncateLength","computed","props","getUrl","file","imageFile"],"mappings":"y0BA2DMA,EAAiBC,EAAS,IACvBC,EAAM,SAAW,GAAK,EAC9B,EAED,SAASC,EAAOC,EAAM,CACpB,OAAO,IAAI,gBAAgBA,CAAI,CACjC,CACA,SAASC,EAAUD,EAAM,CACvB,OAAOA,EAAK,KAAK,WAAW,QAAQ,GAAK,CAACA,EAAK,KAAK,SAAS,YAAY,CAC3E"}