origam 2.2.1 → 2.3.0

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

@@ -0,0 +1,530 @@
+<template>
+	<component
+			:is="tag"
+			:id="resolvedId"
+			:aria-label="ariaLabel"
+			:class="rootClasses"
+			:style="rootStyles"
+			role="region"
+	>
+		<template v-if="variant === BRACKET_VARIANT.ROUND_ROBIN">
+			<div
+					class="origam-bracket__round-robin"
+					data-cy="origam-bracket-round-robin"
+					role="table"
+			>
+				<div
+						class="origam-bracket__rr-row origam-bracket__rr-row--head"
+						role="row"
+				>
+					<div
+							class="origam-bracket__rr-corner"
+							role="columnheader"
+					/>
+					<div
+							v-for="competitor in roundRobinCompetitors"
+							:key="`head-${competitor.id}`"
+							:title="competitor.name"
+							class="origam-bracket__rr-head"
+							role="columnheader"
+					>
+						{{ competitor.name }}
+					</div>
+				</div>
+				<div
+						v-for="row in roundRobinCompetitors"
+						:key="`row-${row.id}`"
+						class="origam-bracket__rr-row"
+						role="row"
+				>
+					<div
+							:title="row.name"
+							class="origam-bracket__rr-head origam-bracket__rr-head--row"
+							role="rowheader"
+					>
+						{{ row.name }}
+					</div>
+					<div
+							v-for="col in roundRobinCompetitors"
+							:key="`cell-${row.id}-${col.id}`"
+							:aria-label="describeRoundRobinCell(row, col)"
+							:class="roundRobinCellClasses(row, col)"
+							role="cell"
+							@click="onRoundRobinCellClick(row, col, $event)"
+					>
+						<template v-if="row.id === col.id">
+							—
+						</template>
+						<template v-else>
+							{{ roundRobinScore(row, col) }}
+						</template>
+					</div>
+				</div>
+			</div>
+		</template>
+
+		<template v-else>
+			<div
+					:class="treeClasses"
+					data-cy="origam-bracket-tree"
+			>
+				<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>
+
+				<origam-bracket-round
+						v-for="(round, index) in displayRounds"
+						:key="round.id"
+						:color="color"
+						:data-cy="`origam-bracket-round-${index}`"
+						:direction="direction"
+						:index="index"
+						:interactive="interactive"
+						:round="round"
+						:show-round-title="showRoundTitles"
+						:show-scores="showScores"
+						:show-seed="showSeed"
+						:style="roundStyleFor(index)"
+						:total-rounds="displayRounds.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>
+		</template>
+	</component>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+import OrigamBracketRound from "./OrigamBracketRound.vue";
+import { useProps, useRounded } from "../../composables";
+import {
+  BRACKET_DEFAULT_MATCH_GAP,
+  BRACKET_DEFAULT_MATCH_HEIGHT,
+  BRACKET_DEFAULT_MATCH_WIDTH,
+  BRACKET_DEFAULT_ROUND_GAP
+} from "../../consts";
+import { BRACKET_VARIANT, DIRECTION } from "../../enums";
+const props = defineProps({
+  rounds: { type: Array, required: true },
+  variant: { type: null, required: false, default: BRACKET_VARIANT.SINGLE_ELIMINATION },
+  direction: { type: String, required: false, default: DIRECTION.HORIZONTAL },
+  showRoundTitles: { type: Boolean, required: false, default: true },
+  showScores: { type: Boolean, required: false, default: true },
+  showSeed: { type: Boolean, required: false, default: false },
+  color: { type: String, required: false, default: "primary" },
+  interactive: { type: Boolean, required: false, default: true },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" },
+  density: { type: null, required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, 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 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);
+  const losers = props.rounds.filter((r) => r.side === "loser");
+  const grandFinals = props.rounds.filter((r) => r.side === "grand-final");
+  return [...winners, ...losers, ...grandFinals];
+});
+const roundRobinCompetitors = computed(() => {
+  const seen = /* @__PURE__ */ new Map();
+  for (const round of props.rounds) {
+    for (const match of round.matches) {
+      if (match.competitorA && !seen.has(match.competitorA.id)) {
+        seen.set(match.competitorA.id, match.competitorA);
+      }
+      if (match.competitorB && !seen.has(match.competitorB.id)) {
+        seen.set(match.competitorB.id, match.competitorB);
+      }
+    }
+  }
+  return Array.from(seen.values());
+});
+const roundRobinMap = computed(() => {
+  const out = /* @__PURE__ */ new Map();
+  for (const round of props.rounds) {
+    for (const match of round.matches) {
+      if (!match.competitorA || !match.competitorB) continue;
+      const aId = match.competitorA.id;
+      const bId = match.competitorB.id;
+      out.set(`${aId}|${bId}`, match);
+    }
+  }
+  return out;
+});
+const findRoundRobinMatch = (rowId, colId) => {
+  return roundRobinMap.value.get(`${rowId}|${colId}`) ?? roundRobinMap.value.get(`${colId}|${rowId}`);
+};
+const roundRobinScore = (row, col) => {
+  const match = findRoundRobinMatch(row.id, col.id);
+  if (!match) return "";
+  const isOrderedNormal = match.competitorA?.id === row.id;
+  const rowScore = isOrderedNormal ? match.scoreA : match.scoreB;
+  const colScore = isOrderedNormal ? match.scoreB : match.scoreA;
+  if (rowScore == null && colScore == null) return "";
+  return `${rowScore ?? "\u2014"} \u2013 ${colScore ?? "\u2014"}`;
+};
+const roundRobinCellClasses = (row, col) => {
+  const isDiag = row.id === col.id;
+  const match = findRoundRobinMatch(row.id, col.id);
+  const isWinner = match?.winnerId === row.id;
+  return [
+    "origam-bracket__rr-cell",
+    {
+      "origam-bracket__rr-cell--diag": isDiag,
+      "origam-bracket__rr-cell--winner": isWinner,
+      "origam-bracket__rr-cell--clickable": !isDiag && match && props.interactive
+    }
+  ];
+};
+const describeRoundRobinCell = (row, col) => {
+  if (row.id === col.id) return `${row.name} versus itself, not applicable`;
+  const match = findRoundRobinMatch(row.id, col.id);
+  if (!match) return `${row.name} vs ${col.name}, no match`;
+  const score = roundRobinScore(row, col);
+  return `${row.name} vs ${col.name}${score ? `, score ${score}` : ""}`;
+};
+const onRoundRobinCellClick = (row, col, event) => {
+  if (row.id === col.id) return;
+  const match = findRoundRobinMatch(row.id, col.id);
+  if (!match) return;
+  const round = props.rounds.find((r) => r.matches.some((m) => m.id === match.id));
+  if (!round) return;
+  emit("match-click", match, round, event);
+};
+const matchWidth = BRACKET_DEFAULT_MATCH_WIDTH;
+const matchHeight = BRACKET_DEFAULT_MATCH_HEIGHT;
+const baseGap = BRACKET_DEFAULT_MATCH_GAP;
+const roundGap = BRACKET_DEFAULT_ROUND_GAP;
+const isHorizontal = computed(() => props.direction === DIRECTION.HORIZONTAL);
+const showConnectors = computed(() => {
+  if (props.variant === BRACKET_VARIANT.ROUND_ROBIN) return false;
+  return displayRounds.value.length > 1;
+});
+const maxMatchesInRound = computed(() => {
+  let max = 1;
+  for (const r of displayRounds.value) {
+    if (r.matches.length > max) max = r.matches.length;
+  }
+  return max;
+});
+const totalHeight = computed(() => {
+  return maxMatchesInRound.value * (matchHeight + baseGap);
+});
+const totalWidth = computed(() => {
+  const n = displayRounds.value.length;
+  return n * matchWidth + (n - 1) * roundGap;
+});
+const connectorViewBox = computed(() => {
+  if (isHorizontal.value) {
+    return `0 0 ${totalWidth.value} ${totalHeight.value}`;
+  }
+  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) => {
+  return roundIndex * (matchWidth + roundGap) + matchWidth / 2;
+};
+const connectorPaths = computed(() => {
+  if (!showConnectors.value) return [];
+  const paths = [];
+  for (let r = 0; r < displayRounds.value.length - 1; r += 1) {
+    const round = displayRounds.value[r];
+    const nextRound = displayRounds.value[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 (!nextMatch) continue;
+      const fromXCenter = matchXCenter(r);
+      const toXCenter = matchXCenter(r + 1);
+      const fromX = fromXCenter + matchWidth / 2;
+      const toX = toXCenter - matchWidth / 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
+      });
+    }
+  }
+  return paths;
+});
+const roundStyleFor = (_index) => {
+  const minHeight = `${totalHeight.value}px`;
+  if (isHorizontal.value) {
+    return {
+      minHeight,
+      width: `${matchWidth}px`,
+      flex: "0 0 auto"
+    };
+  }
+  return {
+    minWidth: `${totalHeight.value}px`,
+    height: `${matchWidth}px`,
+    flex: "0 0 auto"
+  };
+};
+const onMatchClick = (match, event) => {
+  const round = displayRounds.value.find((r) => r.matches.some((m) => m.id === match.id));
+  if (!round) return;
+  emit("match-click", match, round, event);
+};
+const onWinnerClick = (competitor, match, event) => {
+  emit("winner-click", competitor, match, event);
+};
+const onCompetitorClick = (competitor, match, _side, event) => {
+  emit("competitor-click", competitor, match, event);
+};
+const { roundedClasses, roundedStyles } = useRounded(props);
+const rootStyles = computed(() => {
+  return [
+    roundedStyles.value,
+    {
+      "--origam-bracket---round-gap": `${roundGap}px`,
+      "--origam-bracket---match-gap": `${baseGap}px`
+    },
+    props.style
+  ];
+});
+const rootClasses = computed(() => {
+  return [
+    "origam-bracket",
+    `origam-bracket--variant-${props.variant}`,
+    `origam-bracket--direction-${props.direction}`,
+    `origam-bracket--density-${props.density ?? "default"}`,
+    `origam-bracket--color-${props.color}`,
+    roundedClasses.value,
+    props.class
+  ];
+});
+const treeClasses = computed(() => {
+  return [
+    "origam-bracket__tree",
+    `origam-bracket__tree--direction-${props.direction}`
+  ];
+});
+defineExpose({
+  filterProps,
+  displayRounds,
+  connectorPaths,
+  roundRobinCompetitors
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-bracket {
+		display: block;
+		position: relative;
+		color: var(--origam-bracket---color, currentColor);
+		background-color: var(--origam-bracket---background-color, transparent);
+		padding-block: var(--origam-bracket---padding-block, 16px);
+		padding-inline: var(--origam-bracket---padding-inline, 16px);
+		overflow: auto;
+
+		&__tree {
+			display: flex;
+			position: relative;
+			gap: var(--origam-bracket---round-gap, 48px);
+			min-width: max-content;
+
+			&--direction-horizontal {
+				flex-direction: row;
+				align-items: stretch;
+			}
+
+			&--direction-vertical {
+				flex-direction: column;
+				align-items: stretch;
+			}
+		}
+
+		&__round {
+			position: relative;
+			z-index: 1;
+		}
+
+		&__connectors {
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			pointer-events: none;
+			z-index: 0;
+			overflow: visible;
+		}
+
+		&__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);
+
+			&--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);
+			}
+		}
+
+		&__round-robin {
+			display: grid;
+			gap: 1px;
+			background: var(--origam-color__border---subtle, rgba(0, 0, 0, 0.08));
+			border: 1px solid var(--origam-color__border---subtle, rgba(0, 0, 0, 0.08));
+			border-radius: 6px;
+			overflow: hidden;
+			min-width: max-content;
+		}
+
+		&__rr-row {
+			display: grid;
+			grid-template-columns: 200px repeat(auto-fit, minmax(72px, 1fr));
+			gap: 1px;
+		}
+
+		&__rr-corner {
+			background: var(--origam-bracket-round-robin---header-background, var(--origam-color__surface---subtle, #f5f5f5));
+		}
+
+		&__rr-head {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 8px 12px;
+			background: var(--origam-bracket-round-robin---header-background, var(--origam-color__surface---subtle, #f5f5f5));
+			color: var(--origam-bracket-round-robin---header-color, var(--origam-color__text---secondary, rgba(0, 0, 0, 0.66)));
+			font-size: 0.8125rem;
+			font-weight: 600;
+			text-align: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			&--row {
+				justify-content: flex-start;
+			}
+		}
+
+		&__rr-cell {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-height: var(--origam-bracket-round-robin---cell-size, 56px);
+			padding: 8px;
+			background: var(--origam-bracket-round-robin---cell-background, var(--origam-color__surface---default, #fff));
+			font-size: 0.8125rem;
+			color: var(--origam-color__text---primary, #1a1a1a);
+
+			&--diag {
+				background: var(--origam-bracket-round-robin---cell-background-diag, var(--origam-color__surface---subtle, #f5f5f5));
+				color: var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.4));
+			}
+
+			&--winner {
+				font-weight: 600;
+				color: var(--origam-color__action--primary---fg, #1976d2);
+			}
+
+			&--clickable {
+				cursor: pointer;
+
+				&:hover {
+					background: var(--origam-color__surface---elevated, #fafafa);
+				}
+			}
+		}
+
+		&--density-compact {
+			--origam-bracket-match---min-height: 56px;
+			--origam-bracket-competitor---height: 28px;
+			--origam-bracket-round---match-gap: 16px;
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-bracket---round-gap: 48px;
+		--origam-bracket---match-gap: 24px;
+		--origam-bracket---padding-block: 16px;
+		--origam-bracket---padding-inline: 16px;
+		--origam-bracket-connector---stroke-width: 1px;
+	}
+</style>