origam 2.5.0 → 2.6.2

package/dist/src/components/Bracket/OrigamBracket.vue

@@ -63,8 +63,105 @@
 			</div>
 		</template>
 
+		<template v-else-if="variant === BRACKET_VARIANT.DOUBLE_ELIMINATION">
+			<div
+					ref="doubleRef"
+					class="origam-bracket__double"
+					data-cy="origam-bracket-double"
+			>
+				<svg
+						v-if="showConnectors"
+						:viewBox="connectorViewBox"
+						aria-hidden="true"
+						class="origam-bracket__connectors"
+						preserveAspectRatio="none"
+				>
+					<template
+							v-for="path in connectorPaths"
+							:key="path.key"
+					>
+						<slot
+								name="connector"
+								:from="path.from"
+								:to="path.to"
+						>
+							<path
+									:class="['origam-bracket__connector', { 'origam-bracket__connector--winner': path.winner }]"
+									:d="path.d"
+									fill="none"
+							/>
+						</slot>
+					</template>
+				</svg>
+
+				<section
+						v-for="section in doubleSections"
+						:key="section.key"
+						:class="['origam-bracket__de-section', `origam-bracket__de-section--${section.key}`]"
+						:data-cy="`origam-bracket-de-${section.key}`"
+				>
+					<h2
+							v-if="section.label"
+							class="origam-bracket__de-label"
+							:style="typographyStyles"
+					>
+						{{ section.label }}
+					</h2>
+					<div class="origam-bracket__de-tree">
+						<origam-bracket-round
+								v-for="(round, index) in section.rounds"
+								:key="round.id"
+								:color="roundColor"
+								:data-cy="`origam-bracket-${section.key}-round-${index}`"
+								:direction="DIRECTION.HORIZONTAL"
+								:index="index"
+								:interactive="interactive"
+								:round="round"
+								:show-round-title="showRoundTitles"
+								:show-scores="showScores"
+								:show-seed="showSeed"
+								:total-rounds="section.rounds.length"
+								class="origam-bracket__round"
+								@competitor-click="onCompetitorClick"
+								@match-click="onMatchClick"
+								@winner-click="onWinnerClick"
+						>
+							<template
+									v-if="$slots['round-title']"
+									#round-title="scope"
+							>
+								<slot
+										name="round-title"
+										v-bind="scope"
+								/>
+							</template>
+							<template
+									v-if="$slots.match"
+									#match="scope"
+							>
+								<slot
+										name="match"
+										v-bind="scope"
+								/>
+							</template>
+							<template
+									v-if="$slots.competitor"
+									#competitor="scope"
+							>
+								<slot
+										name="competitor"
+										v-bind="scope"
+								/>
+							</template>
+						</origam-bracket-round>
+					</div>
+				</section>
+			</div>
+		</template>
+
 		<template v-else>
 			<div
+					ref="treeRef"
 					:class="treeClasses"
 					data-cy="origam-bracket-tree"
 			>
@@ -96,7 +193,7 @@
 				<origam-bracket-round
 						v-for="(round, index) in displayRounds"
 						:key="round.id"
-						:color="color"
+						:color="roundColor"
 						:data-cy="`origam-bracket-round-${index}`"
 						:direction="direction"
 						:index="index"
@@ -145,18 +242,15 @@
 	</component>
 </template>
 
-<script setup>
-import { computed, StyleValue } from "vue";
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, StyleValue, watch } from "vue";
 import OrigamBracketRound from "./OrigamBracketRound.vue";
 import {
-  useBackgroundColor,
   useDimension,
-  useElevation,
   useMargin,
   usePadding,
   useProps,
-  useRounded,
-  useTextColor
+  useTypography
 } from "../../composables";
 import {
   BRACKET_DEFAULT_MATCH_GAP,
@@ -165,6 +259,13 @@ import {
   BRACKET_DEFAULT_ROUND_GAP
 } from "../../consts";
 import { BRACKET_VARIANT, DIRECTION } from "../../enums";
+import {
+  bracketDashArray,
+  bracketSurfaceVars,
+  resolveBracketBorderColor,
+  resolveBracketBorderWidth,
+  resolveBracketForeground
+} from "../../utils/Bracket/bracket-surface.util";
 const props = defineProps({
   rounds: { type: Array, required: true },
   variant: { type: null, required: false, default: BRACKET_VARIANT.SINGLE_ELIMINATION },
@@ -173,6 +274,8 @@ const props = defineProps({
   showScores: { type: Boolean, required: false, default: true },
   showSeed: { type: Boolean, required: false, default: false },
   interactive: { type: Boolean, required: false, default: true },
+  winnersLabel: { type: String, required: false, default: "Winners bracket" },
+  losersLabel: { type: String, required: false, default: "Losers bracket" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -185,6 +288,15 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: "primary" },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -205,12 +317,18 @@ const props = defineProps({
   paddingBottom: { type: [Boolean, Number, String], required: false },
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false }
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const emit = defineEmits(["match-click", "winner-click", "competitor-click"]);
 const { filterProps } = useProps(props);
 const resolvedId = computed(() => props.id ?? "origam-bracket");
 const ariaLabel = "Tournament bracket";
+const roundColor = computed(() => props.color);
 const displayRounds = computed(() => {
   if (props.variant !== BRACKET_VARIANT.DOUBLE_ELIMINATION) return props.rounds;
   const winners = props.rounds.filter((r) => r.side === "winner" || r.side === void 0);
@@ -218,6 +336,17 @@ const displayRounds = computed(() => {
   const grandFinals = props.rounds.filter((r) => r.side === "grand-final");
   return [...winners, ...losers, ...grandFinals];
 });
+const winnerRounds = computed(() => props.rounds.filter((r) => r.side === "winner" || r.side === void 0));
+const loserRounds = computed(() => props.rounds.filter((r) => r.side === "loser"));
+const grandFinalRounds = computed(() => props.rounds.filter((r) => r.side === "grand-final"));
+const doubleSections = computed(() => {
+  const all = [
+    { key: "winners", label: props.winnersLabel ?? "", rounds: winnerRounds.value },
+    { key: "losers", label: props.losersLabel ?? "", rounds: loserRounds.value },
+    { key: "grand-final", label: "", rounds: grandFinalRounds.value }
+  ];
+  return all.filter((section) => section.rounds.length > 0);
+});
 const roundRobinCompetitors = computed(() => {
   const seen = /* @__PURE__ */ new Map();
   for (const round of props.rounds) {
@@ -290,7 +419,6 @@ const baseGap = BRACKET_DEFAULT_MATCH_GAP;
 const roundGap = BRACKET_DEFAULT_ROUND_GAP;
 const isHorizontal = computed(() => props.direction === DIRECTION.HORIZONTAL);
 const verticalRoundThickness = 120;
-const roundThickness = computed(() => isHorizontal.value ? matchWidth : verticalRoundThickness);
 const showConnectors = computed(() => {
   if (props.variant === BRACKET_VARIANT.ROUND_ROBIN) return false;
   return displayRounds.value.length > 1;
@@ -305,64 +433,162 @@ const maxMatchesInRound = computed(() => {
 const totalHeight = computed(() => {
   return maxMatchesInRound.value * (matchHeight + baseGap);
 });
-const totalWidth = computed(() => {
-  const n = displayRounds.value.length;
-  return n * roundThickness.value + (n - 1) * roundGap;
-});
-const connectorViewBox = computed(() => {
-  if (isHorizontal.value) {
-    return `0 0 ${totalWidth.value} ${totalHeight.value}`;
+const treeRef = ref(null);
+const doubleRef = ref(null);
+const connectorViewBox = ref("0 0 0 0");
+const connectorPaths = ref([]);
+const measureDoubleConnectors = () => {
+  const rootEl = doubleRef.value;
+  if (!rootEl || !showConnectors.value) {
+    connectorPaths.value = [];
+    return;
   }
-  return `0 0 ${totalHeight.value} ${totalWidth.value}`;
-});
-const matchYCenter = (_roundIndex, matchIndex, roundMatchCount) => {
-  const slot = totalHeight.value / roundMatchCount;
-  return slot * matchIndex + slot / 2;
-};
-const matchXCenter = (roundIndex) => {
-  const t = roundThickness.value;
-  return roundIndex * (t + roundGap) + t / 2;
+  const rootRect = rootEl.getBoundingClientRect();
+  connectorViewBox.value = `0 0 ${rootRect.width} ${rootRect.height}`;
+  const rectById = /* @__PURE__ */ new Map();
+  rootEl.querySelectorAll("[data-match-id]").forEach((card) => {
+    rectById.set(String(card.dataset.matchId), card.getBoundingClientRect());
+  });
+  const paths = [];
+  for (const round of props.rounds) {
+    for (const match of round.matches) {
+      if (match.nextMatchId == null) continue;
+      const fromRect = rectById.get(String(match.id));
+      const toRect = rectById.get(String(match.nextMatchId));
+      if (!fromRect || !toRect) continue;
+      const fromCenterY = fromRect.top - rootRect.top + fromRect.height / 2;
+      const toCenterY = toRect.top - rootRect.top + toRect.height / 2;
+      const startX = fromRect.right - rootRect.left;
+      const endX = toRect.left - rootRect.left;
+      const midX = (startX + endX) / 2;
+      paths.push({
+        key: `${match.id}-${match.nextMatchId}`,
+        d: `M ${startX},${fromCenterY} L ${midX},${fromCenterY} L ${midX},${toCenterY} L ${endX},${toCenterY}`,
+        from: { matchId: match.id, x: startX, y: fromCenterY },
+        to: { matchId: match.nextMatchId, x: endX, y: toCenterY },
+        winner: match.winnerId != null
+      });
+    }
+  }
+  connectorPaths.value = paths;
 };
-const connectorPaths = computed(() => {
-  if (!showConnectors.value) return [];
+const measureSingleConnectors = () => {
+  const treeEl = treeRef.value;
+  if (!treeEl || !showConnectors.value) {
+    connectorPaths.value = [];
+    return;
+  }
+  const treeRect = treeEl.getBoundingClientRect();
+  connectorViewBox.value = `0 0 ${treeRect.width} ${treeRect.height}`;
+  const roundEls = Array.from(treeEl.querySelectorAll(".origam-bracket__round"));
+  const cardsPerRound = roundEls.map((roundEl) => {
+    const matchesEl = roundEl.querySelector(".origam-bracket-round__matches");
+    return matchesEl ? Array.from(matchesEl.children).map((card) => card.getBoundingClientRect()) : [];
+  });
+  const horiz = isHorizontal.value;
   const paths = [];
   for (let r = 0; r < displayRounds.value.length - 1; r += 1) {
     const round = displayRounds.value[r];
     const nextRound = displayRounds.value[r + 1];
+    const fromCards = cardsPerRound[r] ?? [];
+    const toCards = cardsPerRound[r + 1] ?? [];
     for (let i = 0; i < round.matches.length; i += 1) {
       const match = round.matches[i];
       let nextIndex = -1;
-      let nextMatch;
       if (match.nextMatchId != null) {
         nextIndex = nextRound.matches.findIndex((m) => m.id === match.nextMatchId);
-        if (nextIndex !== -1) nextMatch = nextRound.matches[nextIndex];
       }
-      if (nextIndex === -1) {
-        nextIndex = Math.floor(i / 2);
-        nextMatch = nextRound.matches[nextIndex];
+      if (nextIndex === -1) nextIndex = Math.floor(i / 2);
+      const nextMatch = nextRound.matches[nextIndex];
+      const fromRect = fromCards[i];
+      const toRect = toCards[nextIndex];
+      if (!nextMatch || !fromRect || !toRect) continue;
+      const fromCenterX = fromRect.left - treeRect.left + fromRect.width / 2;
+      const fromCenterY = fromRect.top - treeRect.top + fromRect.height / 2;
+      const toCenterX = toRect.left - treeRect.left + toRect.width / 2;
+      const toCenterY = toRect.top - treeRect.top + toRect.height / 2;
+      let d;
+      let from;
+      let to;
+      if (horiz) {
+        const startX = fromRect.right - treeRect.left;
+        const endX = toRect.left - treeRect.left;
+        const midX = (startX + endX) / 2;
+        d = `M ${startX},${fromCenterY} L ${midX},${fromCenterY} L ${midX},${toCenterY} L ${endX},${toCenterY}`;
+        from = { matchId: match.id, x: startX, y: fromCenterY };
+        to = { matchId: nextMatch.id, x: endX, y: toCenterY };
+      } else {
+        const startY = fromRect.bottom - treeRect.top;
+        const endY = toRect.top - treeRect.top;
+        const midY = (startY + endY) / 2;
+        d = `M ${fromCenterX},${startY} L ${fromCenterX},${midY} L ${toCenterX},${midY} L ${toCenterX},${endY}`;
+        from = { matchId: match.id, x: fromCenterX, y: startY };
+        to = { matchId: nextMatch.id, x: toCenterX, y: endY };
       }
-      if (!nextMatch) continue;
-      const fromXCenter = matchXCenter(r);
-      const toXCenter = matchXCenter(r + 1);
-      const fromX = fromXCenter + roundThickness.value / 2;
-      const toX = toXCenter - roundThickness.value / 2;
-      const fromY = matchYCenter(r, i, round.matches.length);
-      const toY = matchYCenter(r + 1, nextIndex, nextRound.matches.length);
-      const midX = (fromX + toX) / 2;
-      const isWinnerPath = match.winnerId != null;
-      const horiz = isHorizontal.value;
-      const d = horiz ? `M ${fromX},${fromY} L ${midX},${fromY} L ${midX},${toY} L ${toX},${toY}` : `M ${fromY},${fromX} L ${fromY},${midX} L ${toY},${midX} L ${toY},${toX}`;
       paths.push({
         key: `${match.id}-${nextMatch.id}`,
         d,
-        from: { matchId: match.id, x: fromX, y: fromY },
-        to: { matchId: nextMatch.id, x: toX, y: toY },
-        winner: isWinnerPath
+        from,
+        to,
+        winner: match.winnerId != null
       });
     }
   }
-  return paths;
+  connectorPaths.value = paths;
+};
+const measureConnectors = () => {
+  if (props.variant === BRACKET_VARIANT.DOUBLE_ELIMINATION) {
+    measureDoubleConnectors();
+    return;
+  }
+  if (props.variant === BRACKET_VARIANT.ROUND_ROBIN) {
+    connectorPaths.value = [];
+    return;
+  }
+  measureSingleConnectors();
+};
+const connectorContainer = () => {
+  return props.variant === BRACKET_VARIANT.DOUBLE_ELIMINATION ? doubleRef.value : treeRef.value;
+};
+let connectorResizeObserver = null;
+const attachConnectorObserver = () => {
+  connectorResizeObserver?.disconnect();
+  const el = connectorContainer();
+  if (typeof ResizeObserver !== "undefined" && el) {
+    connectorResizeObserver = new ResizeObserver(() => measureConnectors());
+    connectorResizeObserver.observe(el);
+  }
+};
+onMounted(() => {
+  nextTick(() => {
+    attachConnectorObserver();
+    measureConnectors();
+  });
 });
+onBeforeUnmount(() => {
+  connectorResizeObserver?.disconnect();
+  connectorResizeObserver = null;
+});
+watch(
+  () => props.variant,
+  () => nextTick(() => {
+    attachConnectorObserver();
+    measureConnectors();
+  }),
+  { flush: "post" }
+);
+watch(
+  [
+    displayRounds,
+    isHorizontal,
+    () => props.showScores,
+    () => props.showSeed,
+    () => props.density,
+    () => props.showRoundTitles
+  ],
+  () => nextTick(measureConnectors),
+  { flush: "post" }
+);
 const roundStyleFor = (_index) => {
   const minHeight = `${totalHeight.value}px`;
   if (isHorizontal.value) {
@@ -389,25 +615,75 @@ const onWinnerClick = (competitor, match, event) => {
 const onCompetitorClick = (competitor, match, _side, event) => {
   emit("competitor-click", competitor, match, event);
 };
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
-const { textColorClasses, textColorStyles } = useTextColor(props, "color");
+const autoTextColor = ref(null);
+const measureContrast = () => {
+  if (!props.bgColor) {
+    autoTextColor.value = null;
+    return;
+  }
+  const card = connectorContainer()?.querySelector(".origam-bracket-match");
+  if (!card) {
+    autoTextColor.value = null;
+    return;
+  }
+  const channels = getComputedStyle(card).backgroundColor.match(/\d+(?:\.\d+)?/g);
+  if (!channels || channels.length < 3) {
+    autoTextColor.value = null;
+    return;
+  }
+  const linear = (channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  const luminance = 0.2126 * linear(+channels[0]) + 0.7152 * linear(+channels[1]) + 0.0722 * linear(+channels[2]);
+  autoTextColor.value = luminance < 0.179 ? "#ffffff" : "#000000";
+};
+const colorVars = computed(() => {
+  const vars = bracketSurfaceVars(props);
+  const foreground = autoTextColor.value ?? resolveBracketForeground(props.color);
+  if (foreground) vars["--origam-bracket---color"] = foreground;
+  const borderColor = resolveBracketBorderColor(props.borderColor);
+  if (borderColor) {
+    vars["--origam-bracket-connector---stroke-color"] = borderColor;
+    vars["--origam-bracket-connector---stroke-color-winner"] = borderColor;
+  }
+  const borderWidth = resolveBracketBorderWidth(props.border);
+  if (borderWidth) vars["--origam-bracket-connector---stroke-width"] = borderWidth;
+  const dash = bracketDashArray(props.borderStyle);
+  if (dash.dasharray) vars["--origam-bracket-connector---stroke-dasharray"] = dash.dasharray;
+  if (dash.linecap) vars["--origam-bracket-connector---stroke-linecap"] = dash.linecap;
+  return vars;
+});
+const CONTRAST_SETTLE_MS = 200;
+let contrastTimer = null;
+const scheduleContrast = () => {
+  if (typeof window === "undefined") return;
+  if (contrastTimer) clearTimeout(contrastTimer);
+  contrastTimer = setTimeout(measureContrast, CONTRAST_SETTLE_MS);
+};
+watch(
+  [() => props.bgColor, () => props.variant, displayRounds],
+  scheduleContrast,
+  { flush: "post" }
+);
+onMounted(scheduleContrast);
+onBeforeUnmount(() => {
+  if (contrastTimer) clearTimeout(contrastTimer);
+  contrastTimer = null;
+});
 const { dimensionStyles } = useDimension(props);
-const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
+const { typographyStyles } = useTypography(props, "bracket-double-label");
 const rootStyles = computed(() => {
   return [
-    roundedStyles.value,
-    backgroundColorStyles.value,
-    textColorStyles.value,
     dimensionStyles.value,
-    elevationStyles.value,
     marginStyles.value,
     paddingStyles.value,
     {
       "--origam-bracket---round-gap": `${roundGap}px`,
-      "--origam-bracket---match-gap": `${baseGap}px`
+      "--origam-bracket---match-gap": `${baseGap}px`,
+      ...colorVars.value
     },
     props.style
   ];
@@ -419,10 +695,6 @@ const rootClasses = computed(() => {
     `origam-bracket--direction-${props.direction}`,
     `origam-bracket--density-${props.density ?? "default"}`,
     `origam-bracket--color-${props.color}`,
-    roundedClasses.value,
-    backgroundColorClasses.value,
-    textColorClasses.value,
-    elevationClasses.value,
     marginClasses.value,
     paddingClasses.value,
     props.class
@@ -478,6 +750,54 @@ defineExpose({
 			z-index: 1;
 		}
 
+		&__double {
+			display: grid;
+			position: relative;
+			grid-template-columns: max-content max-content;
+			grid-template-areas:
+				"winners grand-final"
+				"losers  grand-final";
+			column-gap: var(--origam-bracket---round-gap, 48px);
+			row-gap: var(--origam-bracket-double---section-gap, 40px);
+			width: max-content;
+		}
+
+		&__de-section {
+			position: relative;
+			z-index: 1;
+
+			&--winners {
+				grid-area: winners;
+			}
+
+			&--losers {
+				grid-area: losers;
+			}
+
+			&--grand-final {
+				grid-area: grand-final;
+				align-self: center;
+			}
+		}
+
+		&__de-label {
+			margin: 0 0 var(--origam-bracket-double-label---margin-block-end, 12px);
+			color: var(--origam-bracket-double-label---color, var(--origam-color__text---primary, #1a1a1a));
+			font-size: var(--origam-bracket-double-label---font-size, 0.75rem);
+			font-weight: var(--origam-bracket-double-label---font-weight, 700);
+			letter-spacing: var(--origam-bracket-double-label---letter-spacing, 0.08em);
+			text-transform: var(--origam-bracket-double-label---text-transform, uppercase);
+		}
+
+		&__de-tree {
+			display: flex;
+			position: relative;
+			flex-direction: row;
+			align-items: stretch;
+			gap: var(--origam-bracket---round-gap, 48px);
+			width: max-content;
+		}
+
 		&__connectors {
 			position: absolute;
 			inset: 0;
@@ -489,12 +809,14 @@ defineExpose({
 		}
 
 		&__connector {
-			stroke: var(--origam-bracket-connector---stroke-color, var(--origam-color__border---default, rgba(0, 0, 0, 0.24)));
-			stroke-width: var(--origam-bracket-connector---stroke-width, 1px);
+			stroke: var(--origam-bracket-connector---stroke-color, var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12))));
+			stroke-width: var(--origam-bracket-connector---stroke-width, var(--origam-bracket-match---border-width, 1px));
+			stroke-dasharray: var(--origam-bracket-connector---stroke-dasharray, none);
+			stroke-linecap: var(--origam-bracket-connector---stroke-linecap, butt);
 
 			&--winner {
-				stroke: var(--origam-bracket-connector---stroke-color-winner, var(--origam-color__action--primary---bg, #1976d2));
-				stroke-width: calc(var(--origam-bracket-connector---stroke-width, 1px) + 1px);
+				stroke: var(--origam-bracket-connector---stroke-color-winner, var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12))));
+				stroke-width: var(--origam-bracket-connector---stroke-width, var(--origam-bracket-match---border-width, 1px));
 			}
 		}