@usssa/component-library 1.0.0-alpha.232 → 1.0.0-alpha.234

package/README.md

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

package/src/components/core/UBracket.vue

@@ -742,7 +742,7 @@ const renderBracket = () => {
   })
 
   // 3. Render edges correctly
-  const edgeMargin = 8 // Space between edge and node
+  const edgeMargin = 4 // Space between edge and node
   games.value.forEach((game) => {
     // --- Render WINNER edges ---
     const winnerDest = game.winnerDestination
@@ -787,28 +787,18 @@ const renderBracket = () => {
 
           if (mx > sx) {
             // Winner is to the right (standard winner's bracket)
-            const curve = (mx - (sx + nodeWidth)) * 0.9
+            const midX = (sx + nodeWidth + mx - edgeMargin) / 2
             path.moveTo(sx + nodeWidth + edgeMargin, sy + nodeHeight / 2)
-            path.bezierCurveTo(
-              sx + nodeWidth + curve,
-              sy + nodeHeight / 2,
-              mx - curve,
-              my + nodeHeight / 2,
-              mx - edgeMargin,
-              my + nodeHeight / 2
-            )
+            path.lineTo(midX, sy + nodeHeight / 2)
+            path.lineTo(midX, my + nodeHeight / 2)
+            path.lineTo(mx - edgeMargin, my + nodeHeight / 2)
           } else {
             // Winner is to the left (advancing in loser's bracket)
-            const curve = (sx - (mx + nodeWidth)) * 0.9
-            path.moveTo(sx - edgeMargin, sy + nodeHeight / 2) // Start just outside source node
-            path.bezierCurveTo(
-              sx - curve,
-              sy + nodeHeight / 2,
-              mx + nodeWidth + curve,
-              my + nodeHeight / 2,
-              mx + nodeWidth + edgeMargin,
-              my + nodeHeight / 2 // End just outside destination node
-            ) // End on right of destination
+            const midX = (sx - edgeMargin + mx + nodeWidth) / 2
+            path.moveTo(sx - edgeMargin, sy + nodeHeight / 2)
+            path.lineTo(midX, sy + nodeHeight / 2)
+            path.lineTo(midX, my + nodeHeight / 2)
+            path.lineTo(mx + nodeWidth + edgeMargin, my + nodeHeight / 2)
           }
 
           g.append('path')
@@ -858,23 +848,18 @@ const renderBracket = () => {
           const isEdgeHighlighted = highlight.edges.some(
             (e) => e.from === sourceNodeId && e.to === loserNodeId
           )
-          const curve = (sx - (lx + nodeWidth)) * 0.9
           const path = d3.path()
-          path.moveTo(sx - edgeMargin, sy + nodeHeight / 2) // Start just outside source node
-          path.bezierCurveTo(
-            sx - curve,
-            sy + nodeHeight / 2,
-            lx + nodeWidth + curve,
-            ly + nodeHeight / 2,
-            lx + nodeWidth + edgeMargin,
-            ly + nodeHeight / 2 // End just outside destination node
-          )
+          const midX = (sx - edgeMargin + lx + nodeWidth) / 2 // Midpoint for horizontal line
+          path.moveTo(sx - edgeMargin, sy + nodeHeight / 2)
+          path.lineTo(midX, sy + nodeHeight / 2) // Stop halfway horizontally
+          path.lineTo(midX, ly + nodeHeight / 2) // Go downward to destination
+          path.lineTo(lx + nodeWidth + edgeMargin, ly + nodeHeight / 2) // Final horizontal line to destination with margin
 
           g.append('path')
             .attr('class', 'edge-path')
             .classed('highlighted', isEdgeHighlighted)
             .attr('d', path.toString())
-            .attr('stroke-linecap', 'round')
+            .attr('stroke-linecap', 'round') // Changed to rounded end
         })
       }
     }
@@ -1605,7 +1590,7 @@ svg
 :deep(.edge-path)
   fill: none !important
   stroke: $neutral-4
-  stroke-width: 6
+  stroke-width: 4
   opacity: 1
   &.highlighted
     stroke: $blue-8

package/src/components/core/UMultiSelectStd.vue

@@ -660,6 +660,13 @@ watch(selectedTab, () => {
   width: 18rem
   overflow-y: auto
   scrollbar-width: none
+  max-width: min-content
+
+  .u-custom-options
+    gap: $xxs
+
+    .q-item__section--main
+      word-break: break-word
 
 .u-custom-options
   margin: $xxs

package/src/components/core/USelectStd.vue

@@ -557,8 +557,15 @@ watch(
   max-height: 11.25rem !important
   overflow-y: auto
   scrollbar-width: none
+  max-width: min-content
 
 .u-options-menu
   .q-item:last-child
     margin-bottom: $xxs
+
+  .u-menu-link
+    gap: $xxs
+
+    .q-item__section--main
+      word-break: break-word
 </style>