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

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.226
+# Component Library v1.0.0-alpha.227
 
 **This library provides custom UI components for USSSA applications**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.226",
+  "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/UBracket.vue

@@ -1,7 +1,9 @@
 <script setup>
 import * as d3 from 'd3'
+import { useQuasar } from 'quasar'
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import UBtnIcon from './UBtnIcon.vue'
+import { UBtnIcon, USheet, UMenuItem, UBtnStd } from '../../components'
+import { useScreenType } from '../../composables/useScreenType'
 
 const emit = defineEmits(['open-expand'])
 
@@ -9,22 +11,58 @@ defineOptions({
   name: 'UBracket',
 })
 
+const $q = useQuasar()
+const $screen = useScreenType()
+
 const props = defineProps({
   bracketData: {
     type: Object,
     required: true,
   },
+  bracketSheetApplyLabel: { type: String, default: 'Select Bracket' },
+  bracketSheetCancelLabel: { type: String, default: 'Cancel' },
+  bracketSheetHeading: { type: String, default: 'Select Bracket Side' },
+  bracketTooltip: {
+    type: String,
+    default: 'Bracket',
+  },
+  expandTooltip: {
+    type: String,
+    default: 'Expand Bracket',
+  },
   hGap: {
     type: Number,
     default: 650,
   },
+  isExpandedView: {
+    type: Boolean,
+    default: false,
+  },
+  roundSheetApplyLabel: { type: String, default: 'Select Round' },
+  roundSheetCancelLabel: { type: String, default: 'Cancel' },
+  roundSheetHeading: { type: String, default: 'Select Round' },
+  roundTooltip: {
+    type: String,
+    default: 'Rounds',
+  },
+  teamSelectTooltip: {
+    type: String,
+    default: 'Select Team',
+  },
+  teamSheetApplyLabel: { type: String, default: 'Select Team' },
+  teamSheetCancelLabel: { type: String, default: 'Cancel' },
+  teamSheetHeading: { type: String, default: 'Select Team' },
   vGap: {
     type: Number,
     default: 50,
   },
-  isExpandedView: {
-    type: Boolean,
-    default: false,
+  zoomInTooltip: {
+    type: String,
+    default: 'Zoom In',
+  },
+  zoomOutTooltip: {
+    type: String,
+    default: 'Zoom Out',
   },
 })
 
@@ -45,14 +83,50 @@ const nodeGridPositions = ref({})
 const openBracketMenu = ref(false)
 const openMenu = ref(false)
 const openRoundMenu = ref(false)
+const roundSheet = ref([])
+const bracketSheet = ref([])
+const teamSheet = ref([])
+const tempSelectedRoundId = ref('')
+const tempSelectedBracketSide = ref('')
+
+const applyRoundSheetSelection = () => {
+  const selectedRound = props.bracketData.round.find(
+    (r) => `${r.roundNo}-${r.columnNo}` === tempSelectedRoundId.value
+  )
+  if (selectedRound) scrollToRound(selectedRound)
+  roundSheet.value = []
+}
+const cancelRoundSheetSelection = () => {
+  roundSheet.value = []
+}
+
+const toggleBracketSideInSheet = (side) => {
+  tempSelectedBracketSide.value = side
+}
+
+const toggleRoundInSheet = (round) => {
+  tempSelectedRoundId.value = `${round.roundNo}-${round.columnNo}`
+}
+
+const applyBracketSheetSelection = () => {
+  scrollToBracketSide(tempSelectedBracketSide.value)
+  bracketSheet.value = []
+}
+const cancelBracketSheetSelection = () => {
+  bracketSheet.value = []
+}
+const openRoundSheet = () => {
+  tempSelectedRoundId.value = ''
+  roundSheet.value = [{ open: true, height: $q.screen.height - 150 }]
+}
+const openBracketSheet = () => {
+  bracketSheet.value = [{ open: true, height: 200 }]
+}
 const selectedTeamId = ref('')
 const svgRef = ref(null)
+const tempSelectedTeamId = ref('')
 const zoomRef = ref(null)
 
-const openExpandView = () => {
-  emit('open-expand')
-}
-
 // Flatten for rendering logic
 const games = computed(() =>
   props.bracketData.round.flatMap((r, i) =>
@@ -138,6 +212,17 @@ const toolbarTeams = computed(() => {
   return seedTeams
 })
 
+const applyTeamSheetSelection = () => {
+  selectedTeamId.value = tempSelectedTeamId.value
+  teamSheet.value = []
+  renderBracket()
+}
+
+const cancelTeamSheetSelection = () => {
+  teamSheet.value = []
+  tempSelectedTeamId.value = selectedTeamId.value
+}
+
 // Compute all node positions using a row/column approach
 const computeBracketLayout = () => {
   const newPositions = {}
@@ -274,7 +359,6 @@ const descriptiveRoundName = (round) => {
   return `Winner ${round.roundName}`
 }
 
-// Convert row/col to x/y coordinates for rendering
 const getNodePosition = (id) => {
   const positions = nodeGridPositions.value
   if (id && positions[id]) {
@@ -356,6 +440,62 @@ const getTeamPath = (teamId) => {
   }
 }
 
+const openExpandView = () => {
+  emit('open-expand')
+}
+
+const openTeamOptions = () => {
+  if ($screen.value.isMobile) {
+    tempSelectedTeamId.value = selectedTeamId.value
+    teamSheet.value = [{ open: true, height: $q.screen.height - 150 }]
+    return
+  }
+}
+
+// Placed this before onMounted and any watcher/event listener usage
+const reinitZoomAndLayout = () => {
+  computeBracketLayout()
+  const viewportWidth = svgRef.value.clientWidth
+  const viewportHeight = svgRef.value.clientHeight
+  const uniqueColumns = [
+    ...new Set(props.bracketData.round.map((r) => r.columnNo)),
+  ]
+  const numColumns = uniqueColumns.length
+  const contentWidth = 50 + (numColumns - 1) * props.hGap + nodeWidth + 50
+  let maxRow = 0
+  Object.values(nodeGridPositions.value).forEach(({ row }) => {
+    if (row > maxRow) maxRow = row
+  })
+  const contentHeight = 50 + (maxRow - 1) * props.vGap + nodeHeight + 50
+
+  // Update zoom clamping
+  const zoomBehavior = zoomRef.value
+  if (zoomBehavior) {
+    zoomBehavior.on('zoom', (event) => {
+      let { transform } = event
+      const { k } = transform
+
+      const minTx = viewportWidth - contentWidth * k
+      const maxTx = 0
+      const minTy = viewportHeight - contentHeight * k
+      const maxTy = 0
+
+      const tx =
+        minTx > 0 ? minTx / 2 : Math.max(minTx, Math.min(maxTx, transform.x))
+      const ty =
+        minTy > 0 ? minTy / 2 : Math.max(minTy, Math.min(maxTy, transform.y))
+
+      const clampedTransform = d3.zoomIdentity.translate(tx, ty).scale(k)
+
+      gRef.value && d3.select(gRef.value).attr('transform', clampedTransform)
+      currentTransform.value = clampedTransform
+    })
+  }
+
+  // Re-render the bracket
+  renderBracket()
+}
+
 const renderBracket = () => {
   computeBracketLayout()
   const g = d3.select(gRef.value)
@@ -553,7 +693,7 @@ const renderBracket = () => {
         .attr('height', 24)
         .style('cursor', 'pointer')
         .append('title')
-        .text('Match Date')
+        .text('Dallas, TX')
     }
   })
 
@@ -696,14 +836,14 @@ const renderBracket = () => {
 
   // After all edges are drawn, move highlighted edges to top
   nextTick(() => {
-    const gEl = gRef.value;
+    const gEl = gRef.value
     if (gEl) {
-      const highlightedEdges = gEl.querySelectorAll('.edge-path.highlighted');
+      const highlightedEdges = gEl.querySelectorAll('.edge-path.highlighted')
       highlightedEdges.forEach((el) => {
-        gEl.appendChild(el);
-      });
+        gEl.appendChild(el)
+      })
     }
-  });
+  })
 }
 
 const scrollToBracketSide = (side) => {
@@ -786,6 +926,14 @@ const setSelectedTeamId = (teamId) => {
   openMenu.value = false
 }
 
+const toggleTeamInSheet = (teamId) => {
+  if (teamId === tempSelectedTeamId.value) {
+    tempSelectedTeamId.value = ''
+    return
+  }
+  tempSelectedTeamId.value = teamId
+}
+
 const zoomIn = () => {
   const svg = d3.select(svgRef.value)
   if (zoomRef.value) {
@@ -816,50 +964,6 @@ const zoomOut = () => {
   }
 }
 
-// Place this before onMounted and any watcher/event listener usage
-const reinitZoomAndLayout = () => {
-  computeBracketLayout()
-  const viewportWidth = svgRef.value.clientWidth
-  const viewportHeight = svgRef.value.clientHeight
-  const uniqueColumns = [
-    ...new Set(props.bracketData.round.map((r) => r.columnNo)),
-  ]
-  const numColumns = uniqueColumns.length
-  const contentWidth = 50 + (numColumns - 1) * props.hGap + nodeWidth + 50
-  let maxRow = 0
-  Object.values(nodeGridPositions.value).forEach(({ row }) => {
-    if (row > maxRow) maxRow = row
-  })
-  const contentHeight = 50 + (maxRow - 1) * props.vGap + nodeHeight + 50
-
-  // Update zoom clamping
-  const zoomBehavior = zoomRef.value
-  if (zoomBehavior) {
-    zoomBehavior.on('zoom', (event) => {
-      let { transform } = event
-      const { k } = transform
-
-      const minTx = viewportWidth - contentWidth * k
-      const maxTx = 0
-      const minTy = viewportHeight - contentHeight * k
-      const maxTy = 0
-
-      const tx =
-        minTx > 0 ? minTx / 2 : Math.max(minTx, Math.min(maxTx, transform.x))
-      const ty =
-        minTy > 0 ? minTy / 2 : Math.max(minTy, Math.min(maxTy, transform.y))
-
-      const clampedTransform = d3.zoomIdentity.translate(tx, ty).scale(k)
-
-      gRef.value && d3.select(gRef.value).attr('transform', clampedTransform)
-      currentTransform.value = clampedTransform
-    })
-  }
-
-  // Re-render the bracket
-  renderBracket()
-}
-
 onMounted(() => {
   // Initial layout computation to determine extents
   computeBracketLayout()
@@ -1021,7 +1125,7 @@ onUnmounted(() => {
           :anchor="anchor"
           :self="self"
           size="md"
-          tooltip="Zoom Out"
+          :tooltip="zoomOutTooltip"
           @click="zoomOut"
         ></UBtnIcon>
         <UBtnIcon
@@ -1030,16 +1134,17 @@ onUnmounted(() => {
           :anchor="anchor"
           :self="self"
           size="md"
-          tooltip="Zoom In"
+          :tooltip="zoomInTooltip"
           @click="zoomIn"
         ></UBtnIcon>
         <UBtnIcon
+          v-if="!$screen.isMobile"
           iconClass="fa-kit-duotone fa-bracket"
           ariaLabel="Rounds"
           :anchor="anchor"
           :self="self"
           size="md"
-          tooltip="Rounds"
+          :tooltip="roundTooltip"
         >
           <template v-slot:menu>
             <q-menu v-model="openRoundMenu">
@@ -1062,12 +1167,23 @@ onUnmounted(() => {
           </template>
         </UBtnIcon>
         <UBtnIcon
+          v-if="$screen.isMobile"
+          iconClass="fa-kit-duotone fa-bracket"
+          ariaLabel="Rounds"
+          :anchor="anchor"
+          :self="self"
+          size="md"
+          :tooltip="roundTooltip"
+          @click="openRoundSheet"
+        />
+        <UBtnIcon
+          v-if="!$screen.isMobile"
           iconClass="fa-kit-duotone fa-game-center"
           ariaLabel="Bracket"
           :anchor="anchor"
           :self="self"
           size="md"
-          tooltip="Bracket"
+          :tooltip="bracketTooltip"
         >
           <template v-slot:menu>
             <q-menu v-model="openBracketMenu">
@@ -1086,12 +1202,23 @@ onUnmounted(() => {
           </template>
         </UBtnIcon>
         <UBtnIcon
+          v-if="$screen.isMobile"
+          iconClass="fa-kit-duotone fa-game-center"
+          ariaLabel="Bracket"
+          :anchor="anchor"
+          :self="self"
+          size="md"
+          :tooltip="bracketTooltip"
+          @click="openBracketSheet"
+        />
+        <UBtnIcon
+          v-if="!$screen.isMobile"
           iconClass="fa-kit-duotone fa-jersey"
           ariaLabel="Select Team"
           :anchor="anchor"
           :self="self"
           size="md"
-          tooltip="Select Team"
+          :tooltip="selectTeamTooltip"
         >
           <template v-slot:menu>
             <q-menu v-model="openMenu">
@@ -1112,6 +1239,17 @@ onUnmounted(() => {
             </q-menu>
           </template>
         </UBtnIcon>
+        <UBtnIcon
+          v-if="$screen.isMobile"
+          iconClass="fa-kit-duotone fa-jersey"
+          ariaLabel="Select Team"
+          :anchor="anchor"
+          :self="self"
+          size="md"
+          :tooltip="selectTeamTooltip"
+          @click="openTeamOptions"
+        >
+        </UBtnIcon>
         <UBtnIcon
           v-if="!props.isExpandedView"
           iconClass="fa-kit-duotone fa-expand"
@@ -1119,12 +1257,154 @@ onUnmounted(() => {
           :anchor="anchor"
           :self="self"
           size="md"
-          tooltip="Expand Bracket"
+          :tooltip="expandTooltip"
           @click="openExpandView"
         ></UBtnIcon>
       </div>
     </div>
   </div>
+  <USheet
+    v-model:dialogs="teamSheet"
+    data-test-id="team-selection-sheet"
+    dialog-class="bracket-sheet"
+    :heading="props.teamSheetHeading"
+    show-action-buttons
+  >
+    <template #content>
+      <div>
+        <template v-for="team in toolbarTeams" :key="team.id">
+          <UMenuItem
+            class="season-menu-item"
+            :data-test-id="`season-sheet-item-${team.value}`"
+            in-sheet
+            :label="team.label"
+            :selected="tempSelectedTeamId === team.id"
+            @onClick="toggleTeamInSheet(team.id)"
+          >
+            <template #trailing_slot>
+              <q-icon
+                v-if="tempSelectedTeamId === team.id"
+                class="fa-kit-duotone fa-circle-check"
+                color="primary"
+              />
+            </template>
+          </UMenuItem>
+        </template>
+      </div>
+    </template>
+    <template #action_primary_one>
+      <UBtnStd
+        color="primary"
+        data-test-id="team-sheet-cancel-button"
+        :label="props.teamSheetCancelLabel"
+        outline
+        @onClick="cancelTeamSheetSelection"
+      />
+    </template>
+    <template #action_primary_two>
+      <UBtnStd
+        color="primary"
+        data-test-id="team-sheet-apply-button"
+        :label="props.teamSheetApplyLabel"
+        @onClick="applyTeamSheetSelection"
+      />
+    </template>
+  </USheet>
+  <USheet
+    v-model:dialogs="roundSheet"
+    dialog-class="bracket-sheet"
+    :heading="props.roundSheetHeading"
+    show-action-buttons
+  >
+    <template #content>
+      <div>
+        <template
+          v-for="round in bracketData.round.filter(
+            (r) => r.roundName && r.roundName.trim() !== ''
+          )"
+          :key="`${round.roundNo}-${round.columnNo}`"
+        >
+          <UMenuItem
+            class="season-menu-item"
+            :label="descriptiveRoundName(round)"
+            :selected="
+              tempSelectedRoundId === `${round.roundNo}-${round.columnNo}`
+            "
+            in-sheet
+            @onClick="toggleRoundInSheet(round)"
+          >
+            <template #trailing_slot>
+              <q-icon
+                v-if="
+                  tempSelectedRoundId === `${round.roundNo}-${round.columnNo}`
+                "
+                class="fa-kit-duotone fa-circle-check"
+                color="primary"
+              />
+            </template>
+          </UMenuItem>
+        </template>
+      </div>
+    </template>
+    <template #action_primary_one>
+      <UBtnStd
+        color="primary"
+        :label="props.roundSheetCancelLabel"
+        outline
+        @onClick="cancelRoundSheetSelection"
+      />
+    </template>
+    <template #action_primary_two>
+      <UBtnStd
+        color="primary"
+        :label="props.roundSheetApplyLabel"
+        @onClick="applyRoundSheetSelection"
+      />
+    </template>
+  </USheet>
+  <USheet
+    v-model:dialogs="bracketSheet"
+    dialog-class="bracket-sheet"
+    :heading="props.bracketSheetHeading"
+    show-action-buttons
+  >
+    <template #content>
+      <div>
+        <template v-for="side in bracketSides" :key="side.value">
+          <UMenuItem
+            class="season-menu-item"
+            in-sheet
+            :label="side.label"
+            :selected="tempSelectedBracketSide === side.value"
+            @onClick="toggleBracketSideInSheet(side.value)"
+          >
+            <template #trailing_slot>
+              <q-icon
+                v-if="tempSelectedBracketSide === side.value"
+                class="fa-kit-duotone fa-circle-check"
+                color="primary"
+              />
+            </template>
+          </UMenuItem>
+        </template>
+      </div>
+    </template>
+    <template #action_primary_one>
+      <UBtnStd
+        color="primary"
+        :label="props.bracketSheetCancelLabel"
+        outline
+        @onClick="cancelBracketSheetSelection"
+      />
+    </template>
+    <template #action_primary_two>
+      <UBtnStd
+        color="primary"
+        :label="props.bracketSheetApplyLabel"
+        @onClick="applyBracketSheetSelection"
+      />
+    </template>
+  </USheet>
 </template>
 
 <style scoped lang="sass">
@@ -1181,6 +1461,12 @@ svg
   height: 100% /* Make SVG fill the container */
   display: block
 
+.bracket-sheet
+  .main-content-dialog
+    padding-top: $ba !important
+  .q-item
+    margin-bottom: $xs
+
 .bracket-toolbar
   bottom: 1rem /* Position from the bottom */
   left: 50% /* Center horizontally */

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',