Press Next

# MatchRoundSetItem

Round setting item component for displaying match round information including round name, start time, winning format and action button.

# Import

import PressMatchRoundSetItem from 'press-next/press-match-round-set-item/press-match-round-set-item';

# Usage

# Using Demo Data

<template>
  <PressMatchRoundSetItem
    v-bind="mockData"
    @click="handleItemClick"
    @action-click="handleActionClick"
  />
</template>

<script setup>
import { getMockData } from './demo-data';

const mockData = getMockData();

const handleItemClick = () => {
  console.log('Round item clicked');
};

const handleActionClick = () => {
  console.log('Action button clicked');
};
</script>

# Basic Usage

<PressMatchRoundSetItem
  round-name="Round of 32"
  time-text="Mar 18 12:00"
  format-text="Best of 1"
  action-text="Start Round"
  :editable="true"
  @click="handleItemClick"
  @action-click="handleActionClick"
/>

# Custom Column Width

<PressMatchRoundSetItem
  round-name="Round of 32"
  time-text="Mar 18 12:00"
  format-text="Best of 1"
  action-text="Start Round"
  :columns="[
    { key: 'rounds', width: '2.02rem' },
    { key: 'settings', width: '2.24rem' },
    { key: 'ways', width: '1.64rem' },
    { key: 'operate', width: '1.2rem' }
  ]"
  @click="handleItemClick"
  @action-click="handleActionClick"
/>

# Completed State

<PressMatchRoundSetItem
  round-name="Round of 256"
  time-text="Mar 18 10:00"
  format-text="Best of 3"
  action-text="Started"
  :disabled="true"
  :show-time-icon="false"
  :show-format-icon="false"
/>

# Demo Data

The component provides complete demo-data support with the following features:

# Import Demo Data

import { 
  getMockData, 
  getTableColumns, 
  generateRoundSetItems,
  type RoundSetItemData,
  type Column 
} from './demo-data';

# Demo Data Functions

Function Description Return Type
getMockData() Get mock data for a single round set item RoundSetItemData & { columns: Column[] }
getTableColumns() Get table column configuration Column[]
generateRoundSetItems(count?) Generate multiple round set item data RoundSetItemData[]

# Data Interfaces

interface RoundSetItemData {
  roundName: string;
  timeText: string;
  formatText: string;
  actionText: string;
  selected?: boolean;
  disabled?: boolean;
  editable?: boolean;
  showTimeIcon?: boolean;
  showFormatIcon?: boolean;
  hasStarted?: boolean;
  canSetTime?: boolean;
  canSetBo?: boolean;
  bo_type?: number;
}

# API

# Props

Attribute Description Type Default
round-name Round name string 'Round Name'
time-text Start time text string 'Mar 18 12:00'
format-text Winning format text string 'Best of 1'
action-text Action text string 'Start Round'
selected Whether selected boolean false
disabled Whether disabled boolean false
editable Whether editable boolean true
show-time-icon Whether to show time icon boolean true
show-format-icon Whether to show format icon boolean true
columns Column configuration for setting area widths Column[] getTableColumns()

# Column Interface

Attribute Description Type Default
key Column identifier string -
width Column width, e.g. '1.2rem' or 'auto' string -
minWidth Minimum width string -

# Events

Event Description Parameters
click Triggered when clicking the row -
action-click Triggered when clicking action button -
time-click Triggered when clicking time -
format-click Triggered when clicking format -

# Style Customization

# CSS Variables

The component provides rich CSS variables for style customization, all using the --mrsi- prefix with semantic naming conventions:

/* Position System */
--mrsi-item-area-position: relative;         /* Item position type */

/* Spacing System */
--mrsi-content-cell-padding-left: .24rem;    /* Content first cell left padding */
--mrsi-content-area-padding: 0;              /* Content area padding */
--mrsi-content-area-margin-bottom: .02rem;   /* Content area bottom margin */
--mrsi-time-icon-area-margin-left: $spacing-xs; /* Time icon left margin */
--mrsi-format-icon-area-margin-right: $spacing-xs; /* Format icon right margin */

/* Size System */
--mrsi-content-area-width: 100%;             /* Content area width */
--mrsi-content-area-height: 1rem;            /* Content area height */
--mrsi-container-area-width: 100%;           /* Container width */
--mrsi-container-area-height: 100%;          /* Container height */
--mrsi-round-column-area-min-width: 1.48rem; /* Round column minimum width */
--mrsi-time-column-area-min-width: 1.94rem;  /* Time column minimum width */
--mrsi-format-column-area-min-width: 1.6rem; /* Format column minimum width */
--mrsi-action-column-area-min-width: 1.6rem; /* Action column minimum width */
--mrsi-time-icon-area-width: .24rem;         /* Time icon width */
--mrsi-time-icon-area-height: .24rem;        /* Time icon height */
--mrsi-format-icon-area-width: .24rem;       /* Format icon width */
--mrsi-format-icon-area-height: .24rem;      /* Format icon height */

/* Color System */
--mrsi-item-area-bg: $color-surface-default; /* Item background color */
--mrsi-item-area-selected-bg: $color-surface-brand-light; /* Selected state background color */
--mrsi-item-area-text-color: $color-text-primary; /* Item text color */
--mrsi-item-area-disabled-text-color: #9fabb6; /* Disabled state text color */
--mrsi-round-area-text-color: $color-text-primary; /* Round text color */
--mrsi-time-area-text-color: $color-text-primary; /* Time text color */
--mrsi-format-area-text-color: $color-text-secondary; /* Format text color */
--mrsi-action-area-text-color: $color-text-brand; /* Action text color */
--mrsi-action-area-disabled-text-color: $color-text-secondary; /* Disabled action text color */

/* Font System */
--mrsi-round-area-text-font-size: $font-size-sm; /* Round text font size */
--mrsi-round-area-text-font-weight: $font-weight-regular; /* Round text font weight */
--mrsi-time-area-text-font-size: $font-size-sm; /* Time text font size */
--mrsi-time-area-text-font-weight: $font-weight-regular; /* Time text font weight */
--mrsi-time-icon-area-size: .24rem;          /* Time icon font size */
--mrsi-format-area-text-font-size: $font-size-sm; /* Format text font size */
--mrsi-format-area-text-font-weight: $font-weight-regular; /* Format text font weight */
--mrsi-format-icon-area-size: .24rem;        /* Format icon font size */
--mrsi-action-area-text-font-size: $font-size-sm; /* Action text font size */
--mrsi-action-area-text-font-weight: $font-weight-regular; /* Action text font weight */

/* Text Alignment */
--mrsi-time-area-text-align: left;           /* Time text alignment */
--mrsi-action-area-text-align: left;         /* Action text alignment */

/* Other Properties */
--mrsi-item-area-disabled-opacity: 0.6;      /* Disabled state opacity */
--mrsi-item-area-overflow-x: scroll;         /* Item horizontal overflow handling */
--mrsi-container-area-scrollbar-width: none; /* Container scrollbar width */
--mrsi-container-area-scrollbar-style: none; /* Container scrollbar style */
--mrsi-container-area-webkit-scrollbar-display: none; /* Container webkit scrollbar display */
--mrsi-action-area-cursor: pointer;          /* Action area cursor style */
--mrsi-action-area-disabled-cursor: not-allowed; /* Disabled state cursor style */

/* Flexbox */
--mrsi-flex-area-shrink-none: 0;             /* Prevent shrinking */

# Theme Customization Examples

/* Dark Theme */
.dark-theme {
  --mrsi-item-bg: #1a1a1a;
  --mrsi-item-selected-bg: #2d3748;
  --mrsi-round-text-color: #ffffff;
  --mrsi-time-text-color: #ffffff;
  --mrsi-format-text-color: #a0aec0;
  --mrsi-action-text-color: #63b3ed;
}

/* Compact Layout */
.compact-layout {
  --mrsi-content-height: 0.8rem;
  --mrsi-content-padding: 0 $spacing-xs;
  --mrsi-round-column-min-width: 1.2rem;
  --mrsi-time-column-min-width: 1.3rem;
  --mrsi-format-column-min-width: 1.3rem;
  --mrsi-action-column-min-width: 1.3rem;
}

/* Custom Brand Colors */
.custom-brand {
  --mrsi-item-selected-bg: #fff2ee;
  --mrsi-action-text-color: #ff6b35;
}

# Design System Integration

The component is fully integrated with the design system using semantic variables:

  • Color System: References $color-surface-*, $color-text-*, $color-border-* semantic variables
  • Font System: Uses $font-size-*, $font-weight-* standard font variables
  • Spacing System: Follows $spacing-* standard spacing specifications

# Features

# 🎯 State Management

  • Support for selected, disabled, editable and other states
  • Clear visual feedback with smooth state transitions
  • Support for style customization in different states

# πŸ“± Responsive Design

  • Minimum width for each area ensures complete content display
  • Optimized icon and text alignment
  • Compatible with different screen sizes

# πŸ”§ Flexible Configuration

  • Support for showing/hiding icons
  • Customizable text content for each area
  • Support for multiple interaction events
  • Column width configuration: Precise control of area widths through columns property, synchronized with table header component

# πŸ“ Width Synchronization

  • Support for width configuration synchronization with press-match-table-header component
  • Same columns configuration ensures consistent column widths between header and content items
  • Support for fixed width, minimum width, and adaptive width settings

# Use Cases

  • Match round setting and management
  • Tournament schedule display
  • Winning format configuration interface
  • List items that need to display multi-column information
  • Used with table header component to ensure column width synchronization

# Notes

  1. Action button automatically switches cursor style when disabled
  2. Selected state changes background color to provide visual feedback
  3. IconPlus display can be controlled via props, recommend setting based on actual needs
  4. Text alignment has been optimized for different areas
  5. Style variables support runtime dynamic modification for theme switching functionality
  6. Width configuration priority: When both columns configuration and CSS variables are set, columns configuration has higher priority
  7. Column configuration order: The columns array order corresponds to round, time, format, action areas (indices 0-3)
  8. Header synchronization: Recommend using the same columns configuration with press-match-table-header to ensure width synchronization

← MatchRoundSetList β†’