origam 2.2.1 → 2.3.0

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

@@ -0,0 +1,210 @@
+<template>
+	<component
+			:is="tag"
+			:id="id"
+			:aria-label="ariaLabel"
+			:class="rowClasses"
+			:role="interactive ? 'button' : undefined"
+			:style="rowStyles"
+			:tabindex="interactive ? 0 : undefined"
+			@click="handleClick"
+			@keydown="handleKeydown"
+	>
+		<span
+				v-if="showSeed && competitor?.seed != null"
+				class="origam-bracket-competitor__seed"
+		>
+			{{ competitor.seed }}
+		</span>
+
+		<img
+				v-if="competitor?.avatar"
+				:alt="`${competitor.name} avatar`"
+				:src="competitor.avatar"
+				class="origam-bracket-competitor__avatar"
+		>
+
+		<span class="origam-bracket-competitor__name">
+			{{ displayName }}
+		</span>
+
+		<span
+				v-if="showScore"
+				class="origam-bracket-competitor__score"
+		>
+			{{ displayScore }}
+		</span>
+	</component>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+import { useProps } from "../../composables";
+const props = defineProps({
+  competitor: { type: [Object, null], required: true },
+  score: { type: [Number, String], required: false },
+  isWinner: { type: Boolean, required: false, default: false },
+  isLoser: { type: Boolean, required: false, default: false },
+  showScore: { type: Boolean, required: false, default: true },
+  showSeed: { type: Boolean, required: false, default: false },
+  interactive: { type: Boolean, required: false, default: true },
+  color: { type: String, required: false, default: "primary" },
+  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" }
+});
+const emit = defineEmits(["click"]);
+const { filterProps } = useProps(props);
+const isTbd = computed(() => props.competitor === null);
+const displayName = computed(() => {
+  if (isTbd.value) return "TBD";
+  return props.competitor.name;
+});
+const displayScore = computed(() => {
+  if (props.score == null) return "\u2014";
+  if (typeof props.score === "number") return String(props.score);
+  return props.score;
+});
+const ariaLabel = computed(() => {
+  if (isTbd.value) return "To be determined";
+  const base = props.competitor.name;
+  const score = props.score != null ? `, score ${displayScore.value}` : "";
+  const winner = props.isWinner ? ", winner" : "";
+  return `${base}${score}${winner}`;
+});
+const handleClick = (event) => {
+  if (!props.interactive) return;
+  emit("click", event);
+};
+const handleKeydown = (event) => {
+  if (!props.interactive) return;
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  emit("click", event);
+};
+const rowStyles = computed(() => {
+  return [props.style];
+});
+const rowClasses = computed(() => {
+  return [
+    "origam-bracket-competitor",
+    `origam-bracket-competitor--color-${props.color}`,
+    {
+      "origam-bracket-competitor--winner": props.isWinner,
+      "origam-bracket-competitor--loser": props.isLoser,
+      "origam-bracket-competitor--tbd": isTbd.value,
+      "origam-bracket-competitor--interactive": props.interactive
+    },
+    props.class
+  ];
+});
+defineExpose({
+  filterProps
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-bracket-competitor {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: var(--origam-bracket-competitor---gap, 8px);
+		min-height: var(--origam-bracket-competitor---height, 36px);
+		padding-block: var(--origam-bracket-competitor---padding-block, 4px);
+		padding-inline: var(--origam-bracket-competitor---padding-inline, 12px);
+		font-size: var(--origam-bracket-competitor---font-size, 0.875rem);
+		font-weight: var(--origam-bracket-competitor---font-weight, 400);
+		color: var(--origam-bracket-competitor---color, currentColor);
+		background-color: var(--origam-bracket-competitor---background-color, transparent);
+		border: 0;
+		transition: background-color 120ms ease, color 120ms ease;
+		user-select: none;
+
+		&__seed {
+			min-width: var(--origam-bracket-seed---min-width, 20px);
+			font-size: var(--origam-bracket-seed---font-size, 0.75rem);
+			font-weight: var(--origam-bracket-seed---font-weight, 500);
+			color: var(--origam-bracket-seed---color, var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5)));
+			text-align: end;
+			flex: 0 0 auto;
+		}
+
+		&__avatar {
+			width: var(--origam-bracket-avatar---size, 20px);
+			height: var(--origam-bracket-avatar---size, 20px);
+			border-radius: var(--origam-bracket-avatar---border-radius, 9999px);
+			object-fit: cover;
+			flex: 0 0 auto;
+		}
+
+		&__name {
+			flex: 1 1 auto;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		&__score {
+			min-width: var(--origam-bracket-score---min-width, 28px);
+			text-align: end;
+			font-size: var(--origam-bracket-score---font-size, 0.875rem);
+			font-weight: var(--origam-bracket-score---font-weight, 600);
+			color: var(--origam-bracket-score---color, currentColor);
+			flex: 0 0 auto;
+		}
+
+		&--interactive {
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--origam-bracket-competitor--hover---background-color, rgba(0, 0, 0, 0.04));
+			}
+
+			&:focus-visible {
+				outline: 2px solid var(--origam-color__action--primary---bg, #1976d2);
+				outline-offset: -2px;
+			}
+		}
+
+		&--winner {
+			color: var(--origam-bracket-competitor--winner---color, currentColor);
+			background-color: var(--origam-bracket-competitor--winner---background-color, rgba(25, 118, 210, 0.08));
+			font-weight: var(--origam-bracket-competitor--winner---font-weight, 600);
+
+			.origam-bracket-competitor__score {
+				color: var(--origam-bracket-competitor--winner---color, var(--origam-color__action--primary---bg, #1976d2));
+			}
+		}
+
+		&--loser {
+			color: var(--origam-bracket-competitor--loser---color, var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5)));
+			opacity: var(--origam-bracket-competitor--loser---opacity, 0.75);
+		}
+
+		&--tbd {
+			color: var(--origam-bracket-competitor--pending---color, var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5)));
+			font-style: var(--origam-bracket-competitor--pending---font-style, italic);
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-bracket-competitor---height: 36px;
+		--origam-bracket-competitor---padding-block: 4px;
+		--origam-bracket-competitor---padding-inline: 12px;
+		--origam-bracket-competitor---gap: 8px;
+		--origam-bracket-competitor---font-size: 0.875rem;
+		--origam-bracket-competitor---font-weight: 400;
+		--origam-bracket-avatar---size: 20px;
+		--origam-bracket-avatar---border-radius: 9999px;
+		--origam-bracket-score---min-width: 28px;
+		--origam-bracket-score---font-size: 0.875rem;
+		--origam-bracket-score---font-weight: 600;
+		--origam-bracket-seed---min-width: 20px;
+		--origam-bracket-seed---font-size: 0.75rem;
+		--origam-bracket-seed---font-weight: 500;
+	}
+</style>

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

@@ -0,0 +1,288 @@
+<template>
+	<component
+			:is="tag"
+			:id="id"
+			:aria-label="ariaLabel"
+			:class="matchClasses"
+			:style="matchStyles"
+			role="group"
+			@click="handleMatchClick"
+	>
+		<div
+				v-if="match.scheduledAt || resolvedStatus"
+				class="origam-bracket-match__meta"
+		>
+			<span
+					v-if="resolvedStatus"
+					:class="statusClasses"
+			>
+				{{ statusLabel }}
+			</span>
+			<span
+					v-if="match.scheduledAt"
+					class="origam-bracket-match__schedule"
+			>
+				{{ match.scheduledAt }}
+			</span>
+		</div>
+
+		<div class="origam-bracket-match__body">
+			<slot
+					name="competitor"
+					:competitor="match.competitorA"
+					:match="match"
+					:is-winner="isWinnerA"
+					:side="'A'"
+			>
+				<origam-bracket-competitor
+						:color="color"
+						:competitor="match.competitorA"
+						:interactive="interactive"
+						:is-loser="isLoserA"
+						:is-winner="isWinnerA"
+						:score="match.scoreA"
+						:show-score="showScores"
+						:show-seed="showSeed"
+						class="origam-bracket-match__row"
+						@click="handleCompetitorClick($event, match.competitorA, 'A')"
+				/>
+			</slot>
+
+			<div class="origam-bracket-match__divider"/>
+
+			<slot
+					name="competitor"
+					:competitor="match.competitorB"
+					:match="match"
+					:is-winner="isWinnerB"
+					:side="'B'"
+			>
+				<origam-bracket-competitor
+						:color="color"
+						:competitor="match.competitorB"
+						:interactive="interactive"
+						:is-loser="isLoserB"
+						:is-winner="isWinnerB"
+						:score="match.scoreB"
+						:show-score="showScores"
+						:show-seed="showSeed"
+						class="origam-bracket-match__row"
+						@click="handleCompetitorClick($event, match.competitorB, 'B')"
+				/>
+			</slot>
+		</div>
+	</component>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+import OrigamBracketCompetitor from "./OrigamBracketCompetitor.vue";
+import { useProps } from "../../composables";
+const props = defineProps({
+  match: { type: Object, required: true },
+  status: { type: null, required: false },
+  isFinal: { type: Boolean, required: false, default: false },
+  showScores: { type: Boolean, required: false, default: true },
+  showSeed: { type: Boolean, required: false, default: false },
+  interactive: { type: Boolean, required: false, default: true },
+  color: { type: String, required: false, default: "primary" },
+  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" }
+});
+const emit = defineEmits(["click", "competitor-click", "winner-click"]);
+const { filterProps } = useProps(props);
+const resolvedStatus = computed(() => props.status ?? props.match.status);
+const STATUS_LABELS = {
+  pending: "TBD",
+  live: "LIVE",
+  completed: "Completed",
+  forfeited: "Forfeit"
+};
+const statusLabel = computed(() => {
+  if (!resolvedStatus.value) return "";
+  return STATUS_LABELS[resolvedStatus.value] ?? resolvedStatus.value;
+});
+const statusClasses = computed(() => {
+  return [
+    "origam-bracket-match__status",
+    `origam-bracket-match__status--${resolvedStatus.value ?? "pending"}`
+  ];
+});
+const isWinnerA = computed(() => {
+  if (props.match.winnerId == null) return false;
+  if (!props.match.competitorA) return false;
+  return props.match.competitorA.id === props.match.winnerId;
+});
+const isWinnerB = computed(() => {
+  if (props.match.winnerId == null) return false;
+  if (!props.match.competitorB) return false;
+  return props.match.competitorB.id === props.match.winnerId;
+});
+const isLoserA = computed(() => {
+  if (props.match.winnerId == null) return false;
+  if (!props.match.competitorA) return false;
+  return props.match.competitorA.id !== props.match.winnerId;
+});
+const isLoserB = computed(() => {
+  if (props.match.winnerId == null) return false;
+  if (!props.match.competitorB) return false;
+  return props.match.competitorB.id !== props.match.winnerId;
+});
+const ariaLabel = computed(() => {
+  const a = props.match.competitorA?.name ?? "TBD";
+  const b = props.match.competitorB?.name ?? "TBD";
+  return `Match: ${a} versus ${b}`;
+});
+const handleMatchClick = (event) => {
+  const target = event.target;
+  if (target?.closest(".origam-bracket-competitor")) return;
+  emit("click", props.match, event);
+};
+const handleCompetitorClick = (event, competitor, side) => {
+  if (!competitor) return;
+  emit("competitor-click", competitor, props.match, side, event);
+  if (props.match.winnerId != null && competitor.id === props.match.winnerId) {
+    emit("winner-click", competitor, props.match, event);
+  }
+};
+const matchStyles = computed(() => {
+  return [props.style];
+});
+const matchClasses = computed(() => {
+  return [
+    "origam-bracket-match",
+    `origam-bracket-match--color-${props.color}`,
+    {
+      "origam-bracket-match--final": props.isFinal,
+      "origam-bracket-match--interactive": props.interactive,
+      [`origam-bracket-match--status-${resolvedStatus.value}`]: !!resolvedStatus.value
+    },
+    props.class
+  ];
+});
+defineExpose({
+  filterProps
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-bracket-match {
+		display: flex;
+		flex-direction: column;
+		width: var(--origam-bracket-match---width, 240px);
+		min-height: var(--origam-bracket-match---min-height, 72px);
+		background-color: var(--origam-bracket-match---background-color, var(--origam-color__surface---default, #fff));
+		border-width: var(--origam-bracket-match---border-width, 1px);
+		border-style: var(--origam-bracket-match---border-style, solid);
+		border-color: var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
+		border-radius: var(--origam-bracket-match---border-radius, 6px);
+		box-shadow: var(--origam-bracket-match---box-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
+		overflow: hidden;
+		transition: background-color var(--origam-bracket-match---transition-duration, 120ms) ease,
+		border-color var(--origam-bracket-match---transition-duration, 120ms) ease,
+		box-shadow var(--origam-bracket-match---transition-duration, 120ms) ease;
+
+		&__meta {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 2px 8px;
+			font-size: 0.6875rem;
+			border-block-end: 1px solid var(--origam-color__border---subtle, rgba(0, 0, 0, 0.08));
+		}
+
+		&__status {
+			text-transform: uppercase;
+			font-weight: 600;
+			letter-spacing: 0.04em;
+
+			&--live {
+				color: var(--origam-color__feedback--danger---fg, #d32f2f);
+				display: inline-flex;
+				align-items: center;
+				gap: 4px;
+
+				&::before {
+					content: '';
+					width: 6px;
+					height: 6px;
+					border-radius: 50%;
+					background: currentColor;
+					animation: origam-bracket-pulse 1.2s infinite;
+				}
+			}
+
+			&--completed {
+				color: var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5));
+			}
+
+			&--forfeited {
+				color: var(--origam-color__feedback--warning---fg, #ed6c02);
+			}
+		}
+
+		&__schedule {
+			color: var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5));
+		}
+
+		&__body {
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+		}
+
+		&__divider {
+			height: 1px;
+			background: var(--origam-color__border---subtle, rgba(0, 0, 0, 0.08));
+		}
+
+		&--interactive {
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--origam-bracket-match--hover---background-color, var(--origam-color__surface---elevated, #fafafa));
+				border-color: var(--origam-bracket-match--hover---border-color, var(--origam-color__border---default, rgba(0, 0, 0, 0.24)));
+			}
+		}
+
+		&--final {
+			background-color: var(--origam-bracket-match--final---background-color, var(--origam-color__surface---elevated, #fafafa));
+			border-color: var(--origam-bracket-match--final---border-color, var(--origam-color__action--primary---bg, #1976d2));
+			box-shadow: var(--origam-bracket-match--final---box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+		}
+
+		&--status-completed {
+			opacity: 0.95;
+		}
+	}
+
+	@keyframes origam-bracket-pulse {
+		0%, 100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.5;
+			transform: scale(1.4);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		@keyframes origam-bracket-pulse {
+			0%, 100% { opacity: 1; }
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-bracket-match---width: 240px;
+		--origam-bracket-match---min-height: 72px;
+		--origam-bracket-match---border-width: 1px;
+		--origam-bracket-match---border-style: solid;
+		--origam-bracket-match---border-radius: 6px;
+		--origam-bracket-match---transition-duration: 120ms;
+	}
+</style>

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

@@ -0,0 +1,150 @@
+<template>
+	<component
+			:is="tag"
+			:id="resolvedId"
+			:aria-labelledby="showRoundTitle ? titleId : undefined"
+			:class="roundClasses"
+			:style="roundStyles"
+			role="group"
+	>
+		<h3
+				v-if="showRoundTitle"
+				:id="titleId"
+				class="origam-bracket-round__title"
+		>
+			<slot
+					name="round-title"
+					:round="round"
+					:index="index"
+			>
+				{{ round.title }}
+			</slot>
+		</h3>
+
+		<div class="origam-bracket-round__matches">
+			<slot
+					v-for="(match, matchIndex) in round.matches"
+					name="match"
+					:match="match"
+					:round="round"
+					:is-final="isFinalRound && matchIndex === 0 && round.matches.length === 1"
+			>
+				<origam-bracket-match
+						:key="match.id"
+						:color="color"
+						:data-cy="`origam-bracket-match-${match.id}`"
+						:interactive="interactive"
+						:is-final="isFinalRound && matchIndex === 0 && round.matches.length === 1"
+						:match="match"
+						:show-scores="showScores"
+						:show-seed="showSeed"
+						class="origam-bracket-round__match"
+						@click="onMatchClick"
+						@competitor-click="onCompetitorClick"
+						@winner-click="onWinnerClick"
+				/>
+			</slot>
+		</div>
+	</component>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+import OrigamBracketMatch from "./OrigamBracketMatch.vue";
+import { useProps } from "../../composables";
+import { DIRECTION } from "../../enums";
+const props = defineProps({
+  round: { type: Object, required: true },
+  index: { type: Number, required: true },
+  totalRounds: { type: Number, required: true },
+  showRoundTitle: { type: Boolean, required: false, default: true },
+  showScores: { type: Boolean, required: false, default: true },
+  showSeed: { type: Boolean, required: false, default: false },
+  interactive: { type: Boolean, required: false, default: true },
+  color: { type: String, required: false, default: "primary" },
+  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" },
+  direction: { type: null, required: false, default: DIRECTION.HORIZONTAL }
+});
+const emit = defineEmits(["match-click", "competitor-click", "winner-click"]);
+const { filterProps } = useProps(props);
+const resolvedId = computed(() => props.id ?? `origam-bracket-round-${props.round.id}`);
+const titleId = computed(() => `${resolvedId.value}-title`);
+const isFinalRound = computed(() => props.index === props.totalRounds - 1);
+const onMatchClick = (match, event) => {
+  emit("match-click", match, event);
+};
+const onCompetitorClick = (competitor, match, side, event) => {
+  emit("competitor-click", competitor, match, side, event);
+};
+const onWinnerClick = (competitor, match, event) => {
+  emit("winner-click", competitor, match, event);
+};
+const roundStyles = computed(() => {
+  return [props.style];
+});
+const roundClasses = computed(() => {
+  return [
+    "origam-bracket-round",
+    `origam-bracket-round--direction-${props.direction}`,
+    {
+      "origam-bracket-round--final": isFinalRound.value,
+      [`origam-bracket-round--side-${props.round.side}`]: !!props.round.side
+    },
+    props.class
+  ];
+});
+defineExpose({
+  filterProps
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-bracket-round {
+		display: flex;
+		flex-direction: column;
+
+		&__title {
+			margin: 0 0 var(--origam-bracket-round-title---margin-block-end, 12px);
+			color: var(--origam-bracket-round-title---color, var(--origam-color__text---secondary, rgba(0, 0, 0, 0.66)));
+			font-size: var(--origam-bracket-round-title---font-size, 0.875rem);
+			font-weight: var(--origam-bracket-round-title---font-weight, 600);
+			letter-spacing: var(--origam-bracket-round-title---letter-spacing, 0.04em);
+			text-transform: var(--origam-bracket-round-title---text-transform, uppercase);
+			text-align: center;
+		}
+
+		&__matches {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			flex: 1 1 auto;
+			gap: var(--origam-bracket-round---match-gap, 24px);
+		}
+
+		&__match {
+			flex: 0 0 auto;
+		}
+
+		&--direction-vertical {
+			flex-direction: column;
+
+			.origam-bracket-round__matches {
+				flex-direction: row;
+				justify-content: space-around;
+			}
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-bracket-round-title---margin-block-end: 12px;
+		--origam-bracket-round-title---font-size: 0.875rem;
+		--origam-bracket-round-title---font-weight: 600;
+		--origam-bracket-round-title---letter-spacing: 0.04em;
+		--origam-bracket-round-title---text-transform: uppercase;
+	}
+</style>

package/dist/src/components/Bracket/index.cjs

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamBracket", {
+  enumerable: true,
+  get: function () {
+    return _OrigamBracket.default;
+  }
+});
+Object.defineProperty(exports, "OrigamBracketCompetitor", {
+  enumerable: true,
+  get: function () {
+    return _OrigamBracketCompetitor.default;
+  }
+});
+Object.defineProperty(exports, "OrigamBracketMatch", {
+  enumerable: true,
+  get: function () {
+    return _OrigamBracketMatch.default;
+  }
+});
+Object.defineProperty(exports, "OrigamBracketRound", {
+  enumerable: true,
+  get: function () {
+    return _OrigamBracketRound.default;
+  }
+});
+var _OrigamBracket = _interopRequireDefault(require("./OrigamBracket.vue"));
+var _OrigamBracketRound = _interopRequireDefault(require("./OrigamBracketRound.vue"));
+var _OrigamBracketMatch = _interopRequireDefault(require("./OrigamBracketMatch.vue"));
+var _OrigamBracketCompetitor = _interopRequireDefault(require("./OrigamBracketCompetitor.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Bracket/index.d.ts

@@ -0,0 +1,4 @@
+export { default as OrigamBracket } from './OrigamBracket.vue';
+export { default as OrigamBracketRound } from './OrigamBracketRound.vue';
+export { default as OrigamBracketMatch } from './OrigamBracketMatch.vue';
+export { default as OrigamBracketCompetitor } from './OrigamBracketCompetitor.vue';

package/dist/src/components/Bracket/index.js

@@ -0,0 +1,4 @@
+export { default as OrigamBracket } from "./OrigamBracket.vue";
+export { default as OrigamBracketRound } from "./OrigamBracketRound.vue";
+export { default as OrigamBracketMatch } from "./OrigamBracketMatch.vue";
+export { default as OrigamBracketCompetitor } from "./OrigamBracketCompetitor.vue";