@usssa/component-library 1.0.0-alpha.227 → 1.0.0-alpha.228

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.227",
+  "version": "1.0.0-alpha.228",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",
@@ -39,6 +39,7 @@
     "@usssa/core-client": "^0.0.19",
     "algoliasearch": "4",
     "flag-icons": "^7.2.3",
+    "heic2any": "^0.0.4",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
     "vue-router": "^4.0.12",

package/src/components/core/UUploader.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useQuasar } from 'quasar'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import heic2any from 'heic2any'
 import { fixStringLength, formatDate, getFileCategory } from '../../utils/data'
 import UBtnIcon from './UBtnIcon.vue'
 import UBtnStd from './UBtnStd.vue'
@@ -8,6 +9,7 @@ import UInputTextStd from './UInputTextStd.vue'
 import UTooltip from './UTooltip.vue'
 
 const emit = defineEmits([
+  'conversionStatus',
   'onUploadFactory',
   'onViewFile',
   'getFilesOnAdded',
@@ -29,6 +31,10 @@ const props = defineProps({
     type: String,
     default: 'Cancel',
   },
+  conversionText: {
+    type: String,
+    default: 'Converting into jpeg image',
+  },
   dataTestId: {
     type: String,
     default: 'uploader',
@@ -116,9 +122,18 @@ const props = defineProps({
 
 const $q = useQuasar()
 
+const filesConverting = ref([]) // track converting state per file
 const fileDisplayName = ref([])
 const isEditing = ref([])
 const uploaderRef = ref(null)
+const autoUploadRef = computed({
+  get() {
+    return props.autoUpload
+  },
+  set(val) {
+    return val
+  },
+})
 const isSmallWidthDevices = computed(() => $q.screen.width < 350)
 const uploadedFiles = computed({
   get() {
@@ -143,13 +158,69 @@ const handleViewClick = (file) => {
   return emit('onViewFile', file)
 }
 
-const onFileAdded = (files) => {
-  files.forEach((file, index) => {
-    files[index]['displayName'] = files[index]['name']
-    fileDisplayName.value[file['__key']] = files[index]['displayName']
-  })
+const onFileAdded = async (files) => {
+  try {
+    const uploader = uploaderRef.value
+    if (!uploader) return // uploader destroyed
+
+    const convertedFiles = []
+
+    const heicConversions = files.map(async (file) => {
+      const key = file.__key
+      const isHeic =
+        /\.(heic|heif)$/i.test(file.name) ||
+        file.type === 'image/heic' ||
+        file.type === 'image/heif'
+
+      if (!isHeic) return
+
+      // Add to converting array
+      filesConverting.value.push({ key, name: file.name, converting: true })
+
+      // Safely remove HEIC file
+      if (uploaderRef.value) {
+        const idx = uploader.files.findIndex((f) => f.__key === key)
+        if (idx !== -1) uploader.removeFile(uploader.files[idx])
+      }
+
+      try {
+        const convertedBlob = await heic2any({
+          blob: file,
+          toType: 'image/jpeg',
+          quality: 0.8,
+        })
+
+        // Skip if uploader closed while converting
+        if (!uploaderRef.value) return
+
+        const newFile = new File(
+          [convertedBlob],
+          file.name.replace(/\.(heic|heif)$/i, '.jpeg'),
+          { type: 'image/jpeg' }
+        )
+
+        newFile.__key = key
+        newFile.displayName = newFile.name
+        convertedFiles.push(newFile)
+      } catch (err) {
+        console.error('HEIC conversion failed:', err)
+      } finally {
+        const index = filesConverting.value.findIndex((f) => f.key === key)
+        if (index !== -1) filesConverting.value.splice(index, 1)
+      }
+    })
+
+    await Promise.allSettled(heicConversions)
+
+    // Safely add converted files
+    if (convertedFiles.length > 0 && uploaderRef.value) {
+      uploaderRef.value.addFiles(convertedFiles)
+    }
 
-  return emit('getFilesOnAdded', uploaderRef.value.files)
+    emit('getFilesOnAdded', uploaderRef.value?.files || [])
+  } catch (err) {
+    console.warn('error during conversion:', err.message || err)
+  }
 }
 
 const onFileUploaded = ({ files, xhr }) => {
@@ -176,7 +247,6 @@ const removeFile = (payload) => {
   if (uploadedIndex !== -1) {
     const updated = [...uploadedFiles.value]
     updated.splice(uploadedIndex, 1)
-
     emit('update:uploadedFiles', updated)
   }
 
@@ -195,6 +265,8 @@ const scopedFiles = (files) => {
         __status: 'uploaded',
         uploaded: true,
         __key: uploadedFile.__key || uploadedFile.name,
+        displayName: uploadedFile.displayName || uploadedFile.name,
+        name: uploadedFile.displayName || uploadedFile.name,
       })
     }
   })
@@ -217,6 +289,11 @@ const upload = () => {
   uploaderRef.value.upload()
 }
 
+watch(
+  () => filesConverting.value.length,
+  (newVal) => emit('conversionStatus', newVal > 0)
+)
+
 defineExpose({ upload })
 </script>
 <template>
@@ -224,7 +301,7 @@ defineExpose({ upload })
     <q-uploader
       v-bind="$attrs"
       class="u-uploader"
-      :auto-upload="autoUpload"
+      :auto-upload="autoUploadRef"
       :batch="batch"
       :dataTestId="dataTestId"
       label="Drag and drop your file or select choose file."
@@ -239,55 +316,69 @@ defineExpose({ upload })
     >
       <template v-slot:header="scope">
         <div
-          v-if="scope.canAddFiles && !uploadedFiles.length"
-          class="q-py-md q-px-xl bg-neutral-2 uploader-content"
+          v-if="filesConverting.some((f) => f.converting)"
+          class="row items-center justify-between uploaded-container"
         >
-          <div class="text-center">
-            <img
-              alt="Upload Files"
-              src="../../assets/upload-illustration.svg"
-            />
-            <div class="text-body-md q-mt-ba" dataTestId="description">
-              {{ description }}
-            </div>
+          <div class="row items-center">
+            <q-spinner class="q-mr-sm" color="black" size="20px" />
+            <span class="text-black">
+              {{ conversionText }}
+            </span>
           </div>
-          <div class="list-items row">
-            <UBtnStd
-              class="q-mt-md selectFileBtn"
-              :aria-label="selectFileBtnLabel"
-              color="primary"
-              dataTestId="select-file-btn"
-              :disable="selectFileBtnDisable"
-              :full-width="true"
-              :label="selectFileBtnLabel"
-              size="lg"
-              @click="scope.pickFiles"
-            >
-              {{ selectFileBtnLabel }}
-              <q-uploader-add-trigger
-                v-if="!selectFileBtnDisable"
-                :aria-label="selectFileBtnLabel"
-              />
-              <UTooltip
-                v-if="selectFileBtnTooltip?.length"
-                anchor="bottom middle"
-                :description="selectFileBtnTooltip"
-                :offset="[4, 4]"
-                self="top middle"
+        </div>
+
+        <div v-else>
+          <div
+            v-if="scope.canAddFiles && !uploadedFiles.length"
+            class="q-py-md q-px-xl bg-neutral-2 uploader-content"
+          >
+            <div class="text-center">
+              <img
+                alt="Upload Files"
+                src="../../assets/upload-illustration.svg"
               />
-            </UBtnStd>
-            <UBtnStd
-              v-if="scope.canUpload && showUploadBtn"
-              class="q-mt-md q-mb-md"
-              color="primary"
-              dataTestId="upload-btn"
-              flat
-              icon="cloud_upload"
-              size="sm"
-              @click="scope.upload"
-            >
-              <UTooltip description="Upload Files" />
-            </UBtnStd>
+              <div class="text-body-md q-mt-ba" dataTestId="description">
+                {{ description }}
+              </div>
+            </div>
+            <div class="list-items row">
+              <UBtnStd
+                class="q-mt-md selectFileBtn"
+                :aria-label="selectFileBtnLabel"
+                color="primary"
+                dataTestId="select-file-btn"
+                :disable="selectFileBtnDisable"
+                :full-width="true"
+                :label="selectFileBtnLabel"
+                size="lg"
+                @click="scope.pickFiles"
+              >
+                {{ selectFileBtnLabel }}
+                <q-uploader-add-trigger
+                  v-if="!selectFileBtnDisable"
+                  :aria-label="selectFileBtnLabel"
+                />
+                <UTooltip
+                  v-if="selectFileBtnTooltip?.length"
+                  anchor="bottom middle"
+                  :description="selectFileBtnTooltip"
+                  :offset="[4, 4]"
+                  self="top middle"
+                />
+              </UBtnStd>
+              <UBtnStd
+                v-if="scope.canUpload && showUploadBtn"
+                class="q-mt-md q-mb-md"
+                color="primary"
+                dataTestId="upload-btn"
+                flat
+                icon="cloud_upload"
+                size="sm"
+                @click="scope.upload"
+              >
+                <UTooltip description="Upload Files" />
+              </UBtnStd>
+            </div>
           </div>
         </div>
       </template>

package/src/utils/data.ts

@@ -24,7 +24,7 @@ export const fixStringLength = (str: string, length: number) => {
   if (str?.length > length) {
     return str.substring(0, length) + '....'
   } else {
-    return str.padEnd(length, ' ')
+    return str?.padEnd(length, ' ')
   }
 }
 
@@ -55,6 +55,8 @@ export const getFileCategory = (mimeType) => {
     'image/bmp': 'image',
     'image/svg+xml': 'image',
     'image/webp': 'image',
+    'image/heic': 'image',
+    'image/heif': 'image',
 
     // Video MIME types
     'video/mp4': 'video',