@usssa/component-library 1.0.0-alpha.243 → 1.0.0-alpha.245

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.243
+# Component Library v1.0.0-alpha.244
 
 **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.243",
+  "version": "1.0.0-alpha.245",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UBracket.vue

@@ -73,6 +73,7 @@ const bracketSides = [
 ]
 const nodeHeight = 40
 const nodeWidth = 240
+
 const self = 'bottom middle'
 const svgWidth = 1400
 
@@ -80,6 +81,12 @@ const activeRound = ref({ roundNo: 1, columnNo: 3 })
 const bracketSheet = ref([])
 const currentTransform = ref(d3.zoomIdentity)
 const gRef = ref(null)
+const layoutCache = ref({
+  contentWidth: 0,
+  contentHeight: 0,
+  maxRow: 0,
+  numColumns: 0,
+})
 const nodeGridPositions = ref({})
 const openMenu = ref(false)
 const openRoundMenu = ref(false)
@@ -225,13 +232,12 @@ const cancelTeamSheetSelection = () => {
   tempSelectedTeamId.value = selectedTeamId.value
 }
 
-// Compute all node positions using a row/column approach
+// Compute all node positions and cache layout values
 const computeBracketLayout = () => {
   const newPositions = {}
 
   // Scan through all games to find every node with an explicit position
   games.value.forEach((game) => {
-    // 1. Position the source teams for the game
     game.team.forEach((team) => {
       if (typeof team === 'object' && team.teamName && team.position) {
         const compositeId = `${team.teamName}_${team.position.columnNo}_${team.position.rowNo}`
@@ -241,8 +247,6 @@ const computeBracketLayout = () => {
         }
       }
     })
-
-    // 2. Position the destination (winner) node for the game
     if (
       game.winnerDestination &&
       typeof game.winnerDestination === 'object' &&
@@ -261,8 +265,6 @@ const computeBracketLayout = () => {
         }
       }
     }
-
-    // 3. Position the loser destination node for the game
     if (
       game.loserDestination &&
       typeof game.loserDestination === 'object' &&
@@ -282,8 +284,6 @@ const computeBracketLayout = () => {
       }
     }
   })
-
-  // Add winnerPlace and loserPlace nodes from each round
   props.bracketData.round.forEach((round) => {
     if (Array.isArray(round.winnerPlace)) {
       round.winnerPlace.forEach((place) => {
@@ -308,8 +308,23 @@ const computeBracketLayout = () => {
       })
     }
   })
-
   nodeGridPositions.value = newPositions
+
+  // Cache layout values
+  const uniqueColumns = [
+    ...new Set(props.bracketData.round.map((r) => r.columnNo)),
+  ]
+  const numColumns = uniqueColumns.length
+  let maxRow = 0
+  Object.values(newPositions).forEach(({ row }) => {
+    if (row > maxRow) maxRow = row
+  })
+  layoutCache.value.numColumns = numColumns
+  layoutCache.value.maxRow = maxRow
+  layoutCache.value.contentWidth =
+    50 + (numColumns - 1) * props.hGap + nodeWidth + 50
+  layoutCache.value.contentHeight =
+    50 + (maxRow - 1) * props.vGap + nodeHeight + 50
 }
 
 const descriptiveRoundName = (round) => {
@@ -656,7 +671,7 @@ const renderBracket = () => {
   nodeGroups
     .append('text')
     .attr('class', 'node-label')
-    .attr('x', (d) => d.x + 54) // Move label right only for seed teams
+    .attr('x', (d) => d.x + (seedTeamIds.includes(d.id) ? 50 : 40)) // Move label right only for seed teams
     .attr('y', (d) => d.y + nodeHeight / 2 + 5)
     .attr('text-anchor', (d) =>
       seedTeamIds.includes(d.id) ? 'start' : 'middle'
@@ -877,6 +892,38 @@ const renderBracket = () => {
   })
 }
 
+function resetZoom() {
+  const svg = d3.select(svgRef.value)
+  if (zoomRef.value && svgRef.value) {
+    const svgElement = svgRef.value
+    const { width, height } = svgElement.getBoundingClientRect()
+    const centerX = width / 2
+    const centerY = height / 2
+
+    const k = 1
+    const contentWidth = layoutCache.value.contentWidth
+    const contentHeight = layoutCache.value.contentHeight
+    const viewportWidth = svgElement.clientWidth
+    const viewportHeight = svgElement.clientHeight
+    const minTx = viewportWidth - contentWidth * k
+    const maxTx = 0
+    const minTy = viewportHeight - contentHeight * k
+    const maxTy = 0
+    let tx = centerX
+    let ty = centerY
+    tx = minTx > 0 ? minTx / 2 : Math.max(minTx, Math.min(maxTx, tx))
+    ty = minTy > 0 ? minTy / 2 : Math.max(minTy, Math.min(maxTy, ty))
+    const clampedTransform = d3.zoomIdentity.translate(tx, ty).scale(k)
+    svg
+      .transition()
+      .duration(400)
+      .ease(d3.easeCubic)
+      .call(zoomRef.value.transform, clampedTransform)
+    d3.select(gRef.value).attr('transform', clampedTransform)
+    currentTransform.value = clampedTransform
+  }
+}
+
 const scrollToBracketSide = (side) => {
   if (!props.bracketData || !props.bracketData.round) return
 
@@ -953,6 +1000,8 @@ const setSelectedTeamId = (teamId) => {
   const team = toolbarTeams.value.find((t) => t.id === teamId)
   if (team) {
     selectedTeamId.value = team.id
+    // Reset zoom to initial scale and center
+    resetZoom()
   }
   openMenu.value = false
 }
@@ -975,31 +1024,57 @@ const toggleRoundInSheet = (round) => {
 
 const zoomIn = () => {
   const svg = d3.select(svgRef.value)
-  if (zoomRef.value) {
+  if (zoomRef.value && svgRef.value) {
+    const svgElement = svgRef.value
+    const { width, height } = svgElement.getBoundingClientRect()
+    const centerX = width / 2
+    const centerY = height / 2
+
     // Increase scale by 20%
-    const newScale = Math.min((currentTransform.value.k || 1) * 1.2, 2.5)
-    const newTransform = d3.zoomIdentity
-      .scale(newScale)
-      .translate(
-        currentTransform.value.x / newScale,
-        currentTransform.value.y / newScale
-      )
-    svg.transition().duration(200).call(zoomRef.value.transform, newTransform)
+    const prevScale = currentTransform.value.k || 1
+    const newScale = Math.min(prevScale * 1.2, 2.5)
+
+    // Calculate new translation to keep center in view
+    const newX =
+      centerX - (centerX - currentTransform.value.x) * (newScale / prevScale)
+    const newY =
+      centerY - (centerY - currentTransform.value.y) * (newScale / prevScale)
+
+    const newTransform = d3.zoomIdentity.translate(newX, newY).scale(newScale)
+
+    svg
+      .transition()
+      .duration(200)
+      .ease(d3.easeCubic)
+      .call(zoomRef.value.transform, newTransform)
   }
 }
 
 const zoomOut = () => {
   const svg = d3.select(svgRef.value)
-  if (zoomRef.value) {
+  if (zoomRef.value && svgRef.value) {
+    const svgElement = svgRef.value
+    const { width, height } = svgElement.getBoundingClientRect()
+    const centerX = width / 2
+    const centerY = height / 2
+
     // Decrease scale by 20%
-    const newScale = Math.max((currentTransform.value.k || 1) / 1.2, 0.5)
-    const newTransform = d3.zoomIdentity
-      .scale(newScale)
-      .translate(
-        currentTransform.value.x / newScale,
-        currentTransform.value.y / newScale
-      )
-    svg.transition().duration(200).call(zoomRef.value.transform, newTransform)
+    const prevScale = currentTransform.value.k || 1
+    const newScale = Math.max(prevScale / 1.2, 0.5)
+
+    // Calculate new translation to keep center in view
+    const newX =
+      centerX - (centerX - currentTransform.value.x) * (newScale / prevScale)
+    const newY =
+      centerY - (centerY - currentTransform.value.y) * (newScale / prevScale)
+
+    const newTransform = d3.zoomIdentity.translate(newX, newY).scale(newScale)
+
+    svg
+      .transition()
+      .duration(200)
+      .ease(d3.easeCubic)
+      .call(zoomRef.value.transform, newTransform)
   }
 }
 
@@ -1075,11 +1150,39 @@ onMounted(() => {
   const zoomBehavior = d3
     .zoom()
     .scaleExtent([0.5, 2.5])
-    // Filter events to prevent page scroll on wheel events (pan/zoom)
-    // while allowing other events like mouse clicks to pass through.
+    // Custom filter to intercept wheel events and always zoom centered
     .filter((event) => {
       if (event.type === 'wheel') {
         event.preventDefault()
+        // Manually handle wheel zoom centered on SVG
+        const svgElement = svgRef.value
+        const { width, height } = svgElement.getBoundingClientRect()
+        const centerX = width / 2
+        const centerY = height / 2
+        const prevScale = currentTransform.value.k || 1
+        let newScale = prevScale
+        // D3 uses event.deltaY for wheel direction
+        if (event.deltaY < 0) {
+          newScale = Math.min(prevScale * 1.2, 2.5)
+        } else {
+          newScale = Math.max(prevScale / 1.2, 0.5)
+        }
+        // Calculate new translation to keep center in view
+        const newX =
+          centerX -
+          (centerX - currentTransform.value.x) * (newScale / prevScale)
+        const newY =
+          centerY -
+          (centerY - currentTransform.value.y) * (newScale / prevScale)
+        const newTransform = d3.zoomIdentity
+          .translate(newX, newY)
+          .scale(newScale)
+        d3.select(svgRef.value)
+          .transition()
+          .duration(200)
+          .ease(d3.easeCubic)
+          .call(zoomBehavior.transform, newTransform)
+        return false // Prevent default D3 wheel zoom
       }
       // Allow click-and-drag panning
       return !event.ctrlKey || event.type === 'wheel'

package/src/components/core/UExpansionStd.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import URadioStd from './URadioStd.vue'
+import UTooltip from './UTooltip.vue'
 
 const emit = defineEmits(['handleSelectChange'])
 const isSelected = defineModel('isSelected', {
@@ -71,6 +72,17 @@ const props = defineProps({
 })
 
 const isExpanded = ref(false)
+const isOverflowing = ref(false)
+const labelRef = ref(null)
+
+const checkOverflow = () => {
+  nextTick(() => {
+    if (labelRef.value) {
+      const el = labelRef.value
+      isOverflowing.value = el.scrollWidth > el.clientWidth
+    }
+  })
+}
 
 const handleChange = (value) => {
   emit('handleSelectChange', value)
@@ -89,6 +101,16 @@ const toggleExpansion = () => {
     isExpanded.value = !isExpanded.value
   }
 }
+
+watch(
+  () => props.label,
+  () => {
+    checkOverflow()
+  },
+  {
+    immediate: true,
+  }
+)
 </script>
 
 <template>
@@ -139,7 +161,20 @@ const toggleExpansion = () => {
         </q-icon>
         <slot name="avatar" />
         <div class="column u-expansion-label">
-          <span class="text-caption-lg">{{ label }}</span>
+          <span
+            :class="`text-caption-lg text-truncate ${
+              isOverflowing ? `cursor-pointer` : ``
+            }`"
+            ref="labelRef"
+            @mouseenter="checkOverflow"
+            >{{ label }}</span
+          >
+          <UTooltip
+            v-if="isOverflowing"
+            anchor="bottom middle"
+            :description="label"
+            :offset="[14, 14]"
+          />
           <span class="text-body-xs">{{ caption }}</span>
         </div>
         <q-icon
@@ -209,7 +244,20 @@ const toggleExpansion = () => {
         </q-icon>
         <slot name="avatar" />
         <div class="column u-expansion-label">
-          <span class="text-caption-lg">{{ label }}</span>
+          <span
+            :class="`text-caption-lg text-truncate ${
+              isOverflowing ? `cursor-pointer` : ``
+            }`"
+            ref="labelRef"
+            @mouseenter="checkOverflow"
+            >{{ label }}</span
+          >
+          <UTooltip
+            v-if="isOverflowing"
+            anchor="bottom middle"
+            :description="label"
+            :offset="[14, 14]"
+          />
           <span class="text-body-xs text-description">{{ caption }}</span>
         </div>
         <q-icon
@@ -254,6 +302,13 @@ const toggleExpansion = () => {
     word-break: break-word
     overflow-wrap: break-word
 
+    .text-truncate
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+      display: block
+      max-width: 100%
+
   .q-expansion-item__content > :first-child
     padding: $xs $ba $ba $ba
 

package/src/components/core/UTable/UTable.vue

@@ -1671,6 +1671,11 @@ window.addEventListener('resize', handleCellOverflowResize)
                         :color="props?.row?.iconColor ?? 'primary'"
                         size="1.5rem"
                       />
+                      <div v-if="typeof col?.colorMap === 'function'" class="flex items-baseline" :style="{ gap: '0.25rem',}">
+                      <span  :class="`table-text-colormap-${col?.colorMap(props.row)?.color} text-caption-md`"> {{ col?.colorMap(props.row)?.value }}</span>
+                       <span class="text-body-sm">{{ props.row[col.field] }}</span>
+                      </div>
+
                       <!-- Text -->
                       <span v-else class="text-body-sm">{{ props.row[col.field] }}</span>
                     </div>

package/src/components/core/UTableStd.vue

@@ -738,8 +738,11 @@ watch(
                   col.combineColoumn(props.row)
                     ? ' combine-col-wrapper'
                     : ''
-                }`"
+                } ${typeof col?.colorMap === 'function' ? `combine-col-wrapper`: ``}`"
               >
+                <span v-if="typeof col?.colorMap === 'function'" :class="`table-text-colormap-${col?.colorMap(props.row)?.color} text-caption-md`">
+                 {{ col?.colorMap(props.row)?.value }}
+                </span>
                 <div v-if="col.type !== 'icon'">
                   {{ props.row[col.field] }}
                 </div>
@@ -1691,4 +1694,7 @@ watch(
   white-space: nowrap
   display: block
 
+.table-text-colormap-positive
+  color: $green-6 !important
+
 </style>