Press Next

# MatchResetPopup

A reset match popup component for displaying match reset selection interface, supporting multi-selection of match groups and confirmation of reset operations.

# Features

  • 🎮 Match Reset - Provides match group reset selection functionality
  • ✅ Multi-selection Support - Supports single selection, multi-selection, and select all operations
  • 🎨 Custom Styles - Rich CSS variables for theme customization
  • 🧩 Slot Customization - Multiple slots for deep customization support
  • 📱 Responsive Design - Adapts to different screen sizes
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance
  • 🔧 Event Callbacks - Complete event handling mechanism

# Use Cases

  • E-sports match reset operations
  • Team match management
  • Online game battle reset
  • Sports event management
  • Match systems requiring custom UI styles
  • Brand-customized tournament platforms

# Import

import PressMatchResetPopup from 'press-next/press-match-reset-popup/press-match-reset-popup';

# Code Demo

# Basic Usage

<template>
  <PressMatchResetPopup
    :show="showPopup"
    :title="title"
    :match-groups="matchGroups"
    @close="handleClose"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';
import PressMatchResetPopup from 'press-next/press-match-reset-popup/press-match-reset-popup.vue';
import { getMockData } from './demo-data';

// Use mock data
const { matchGroups } = getMockData();

const showPopup = ref(false);
const title = ref('Reset Match');

// Event handlers
const handleClose = () => {
  showPopup.value = false;
  console.log('Popup closed');
};

const handleConfirm = (selectedIndexes) => {
  console.log('Confirm reset, selected group indexes:', selectedIndexes);
  showPopup.value = false;
};

// Show popup
const showResetPopup = () => {
  showPopup.value = true;
};
</script>

# Custom Match Group Data

<template>
  <PressMatchResetPopup
    :show="showPopup"
    :title="'Reset Selection'"
    :match-groups="customMatchGroups"
    :z-index="200"
    @close="handleClose"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';

const showPopup = ref(false);
const customMatchGroups = ref([
  { title: 'Group A Finals', desc: '8 teams' },
  { title: 'Group B Finals', desc: '8 teams' },
  { title: 'Group C Finals', desc: '6 teams' },
  { title: 'Group D Finals', desc: '4 teams' },
]);

const handleClose = () => {
  showPopup.value = false;
};

const handleConfirm = (selectedIndexes) => {
  const selectedGroups = selectedIndexes.map(index => customMatchGroups.value[index]);
  console.log('Selected match groups:', selectedGroups);
  showPopup.value = false;
};
</script>

# Custom Styles

<template>
  <PressMatchResetPopup
    :show="showPopup"
    :title="title"
    :match-groups="matchGroups"
    custom-class="custom-reset-popup"
    @close="handleClose"
    @confirm="handleConfirm"
  />
</template>

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

const { matchGroups } = getMockData();
const showPopup = ref(false);
const title = ref('Custom Reset');

const handleClose = () => {
  showPopup.value = false;
};

const handleConfirm = (selectedIndexes) => {
  console.log('Confirm reset:', selectedIndexes);
  showPopup.value = false;
};
</script>

<style>
.custom-reset-popup {
  --rp-content-item-background-color: #f0f8ff;
  --rp-footer-confirm-background: #1890ff;
  --rp-content-item-info-title-color: #1890ff;
}
</style>

# Custom Slots

<template>
  <PressMatchResetPopup
    :show="showPopup"
    :title="title"
    :match-groups="matchGroups"
    @close="handleClose"
    @confirm="handleConfirm"
  >
    <!-- Custom match groups card slot -->
    <template #match-groups-card>
      <div
        v-for="(item, index) in matchGroups"
        :key="index"
        :class="['custom-match-item', { 'custom-match-item--selected': selectedGroups.includes(index) }]"
        @click="toggleSelection(index)"
      >
        <div class="custom-match-item__checkbox">
          <div :class="['custom-checkbox-icon', { 'custom-checkbox-icon--selected': selectedGroups.includes(index) }]">
            {{ selectedGroups.includes(index) ? '✓' : '' }}
          </div>
        </div>
        <div class="custom-match-item__info">
          <div class="custom-match-item__title">{{ item.title }}</div>
          <div class="custom-match-item__desc">{{ item.desc }}</div>
        </div>
      </div>
    </template>

    <!-- Custom select all button slot -->
    <template #all-checked-btn>
      <div class="custom-select-all" @click="toggleSelectAll">
        <div class="custom-select-all__checkbox">
          <div :class="['custom-select-all__icon', { 'custom-select-all__icon--selected': isAllSelected }]">
            {{ isAllSelected ? '♦' : '◇' }}
          </div>
        </div>
        <span class="custom-select-all__text">Select All</span>
      </div>
    </template>

    <!-- Custom confirm button slot -->
    <template #confirm-btn>
      <button 
        class="custom-confirm-btn"
        :disabled="selectedGroups.length === 0"
        @click="handleConfirm(selectedGroups)"
      >
        Confirm Reset ({{ selectedGroups.length }})
      </button>
    </template>
  </PressMatchResetPopup>
</template>

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

const { matchGroups } = getMockData();
const showPopup = ref(false);
const title = ref('Custom Slots');

// Selection state management
const selectedGroups = ref([]);
const isAllSelected = computed(() => 
  selectedGroups.value.length === matchGroups.length && matchGroups.length > 0
);

// Toggle selection state
const toggleSelection = (index) => {
  const selectedIndex = selectedGroups.value.indexOf(index);
  if (selectedIndex === -1) {
    selectedGroups.value.push(index);
  } else {
    selectedGroups.value.splice(selectedIndex, 1);
  }
};

// Toggle select all state
const toggleSelectAll = () => {
  if (isAllSelected.value) {
    selectedGroups.value = [];
  } else {
    selectedGroups.value = matchGroups.map((_, index) => index);
  }
};

const handleClose = () => {
  showPopup.value = false;
  selectedGroups.value = [];
};

const handleConfirm = (selectedIndexes) => {
  console.log('Confirm reset:', selectedIndexes);
  showPopup.value = false;
  selectedGroups.value = [];
};
</script>

<style>
.custom-match-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.custom-match-item--selected {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.custom-checkbox-icon {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.custom-checkbox-icon--selected {
  border-color: white;
  background-color: white;
  color: #ff6b6b;
}

.custom-select-all {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
}

.custom-select-all__icon {
  width: 28px;
  height: 28px;
  border: 2px solid #667eea;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #667eea;
}

.custom-select-all__icon--selected {
  background-color: #667eea;
  color: white;
}

.custom-confirm-btn {
  width: 140px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.custom-confirm-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>

# API

# Props

Attribute Description Type Default
custom-class Custom CSS class string ''
show Whether to show popup boolean false
z-index PopupPlus z-index number 100
title PopupPlus title string 'Reset Match'
match-groups Match groups list MatchGroup[] []

# MatchGroup Data Structure

interface MatchGroup {
  title: string; // Match group title
  desc: string;  // Match group description
}

# Events

Event Description Parameters
close Triggered when popup is closed -
confirm Triggered when reset confirmed selectedIndexes: number[]

# Slots

Slot Name Description Parameters
match-groups-card Custom match groups card area -
all-checked-btn Custom select all button -
confirm-btn Custom confirm button -

# Methods

Method Description Parameters Return Value
onClose Close popup - -

# Notes

# Usage Recommendations

  1. Data Format: Ensure match-groups data format is correct, containing title and desc fields
  2. Event Handling: Must listen to close and confirm events to handle user operations
  3. Selection State: Component will automatically reset selection state when closed
  4. Empty Selection Handling: If no groups are selected when confirming, confirm event will not be triggered
  5. Z-index Management: Set z-index appropriately to avoid layer conflicts
  6. Slot Usage: When using match-groups-card slot, you need to manage selection state and interaction logic yourself
  7. Slot Styling: When customizing slot styles, pay attention to maintaining good user experience and accessibility

# Performance Optimization

  • For large numbers of match groups, consider pagination
  • Use v-show instead of v-if to control popup display
  • Avoid frequent updates to match-groups data

# Compatibility

  • Support Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Support WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

# CSS Variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

# Size Properties (Width/Height)

Name Default Value Description
--rp-reset-popup-height 7.48rem PopupPlus height
--rp-footer-height 1.4rem Footer height
--rp-footer-confirm-width 3.2rem Confirm button width
--rp-footer-confirm-height .8rem Confirm button height
--rp-content-item-checkbox-width .28rem Checkbox width
--rp-content-item-checkbox-height .28rem Checkbox height
--rp-content-item-checkbox-inner-width .28rem Checkbox inner width
--rp-content-item-checkbox-inner-height .28rem Checkbox inner height
--rp-content-item-checkbox-inner-after-width .16rem Checkbox check mark width
--rp-content-item-checkbox-inner-after-height .16rem Checkbox check mark height
--rp-footer-select-checkbox-width .28rem Select all checkbox width
--rp-footer-select-checkbox-height .28rem Select all checkbox height
--rp-footer-select-checkbox-inner-width .28rem Select all checkbox inner width
--rp-footer-select-checkbox-inner-height .28rem Select all checkbox inner height
--rp-footer-select-checkbox-inner-after-width .16rem Select all check mark width
--rp-footer-select-checkbox-inner-after-height .16rem Select all check mark height

# Spacing Properties (Margin/Padding/Gap)

Name Default Value Description
--rp-head-padding-top $spacing-md Header top padding
--rp-head-margin-bottom .29rem Header bottom margin
--rp-content-item-padding .3rem .4rem Content item padding
--rp-content-item-margin-bottom $spacing-md Content item bottom margin
--rp-content-item-checkbox-margin 0 $spacing-xxl 0 0 Checkbox margin
--rp-content-item-info-title-margin-bottom $spacing-sm Title bottom margin
--rp-footer-select-gap $spacing-xs Select all area gap
--rp-footer-select-margin 0 .84rem 0 .28rem Select all area margin
--rp-footer-confirm-margin 0 Confirm button margin

# Color Properties (Color/Background)

Name Default Value Description
--rp-reset-popup-background-color $color-surface-default PopupPlus background color
--rp-head-title-color $color-text-primary Title text color
--rp-content-item-background-color $color-surface-brand-light Content item background color
--rp-content-item-checkbox-inner-background-color $color-surface-default Checkbox background color
--rp-content-item-checkbox-inner-selected-background-color $color-surface-brand-light Checkbox selected background color
--rp-content-item-checkbox-inner-after-background-color $color-surface-brand Checkbox check mark background color
--rp-content-item-info-title-color #3e4c5a Content title color
--rp-content-item-info-desc-color #9fabb6 Content description color
--rp-footer-select-checkbox-inner-background-color $color-surface-default Select all checkbox background color
--rp-footer-select-checkbox-inner-selected-background-color $color-surface-brand-light Select all checkbox selected background color
--rp-footer-select-checkbox-inner-after-background-color $color-surface-brand Select all check mark background color
--rp-footer-select-text-color #9fabb6 Select all text color
--rp-footer-select-text-selected-color $color-text-primary Select all text selected color
--rp-footer-confirm-background $color-surface-brand Confirm button background color
--rp-footer-confirm-color $color-border-invert Confirm button text color

# Font Properties (Font)

Name Default Value Description
--rp-head-title-font-size $font-size-md Title font size
--rp-head-title-font-weight $font-weight-bold Title font weight
--rp-content-item-info-title-font-size $font-size-md Content title font size
--rp-content-item-info-title-font-weight $font-weight-bold Content title font weight
--rp-content-item-info-desc-font-size $font-size-sm Content description font size
--rp-footer-select-text-font-size $font-size-md Select all text font size
--rp-footer-confirm-font-size $font-size-md Confirm button font size
--rp-footer-confirm-font-weight $font-weight-bold Confirm button font weight

# Border Properties (Border/Border-Radius)

Name Default Value Description
--rp-content-item-border .02rem solid rgba(252, 252, 252, .6) Content item border
--rp-content-item-border-radius $border-radius-sm Content item border radius
--rp-content-item-checkbox-inner-border .02rem solid #c8ced7 Checkbox border
--rp-content-item-checkbox-inner-border-radius $border-radius-sm Checkbox border radius
--rp-content-item-checkbox-inner-selected-border-color $color-border-brand Checkbox selected border color
--rp-content-item-checkbox-inner-after-border-radius $border-radius-circle Checkbox check mark border radius
--rp-footer-select-checkbox-inner-border .02rem solid $color-surface-brand Select all checkbox border
--rp-footer-select-checkbox-inner-border-radius $border-radius-sm Select all checkbox border radius
--rp-footer-select-checkbox-inner-selected-border-color $color-border-brand Select all checkbox selected border color
--rp-footer-select-checkbox-inner-after-border-radius $border-radius-circle Select all check mark border radius

# Shadow Properties (Box-Shadow)

Name Default Value Description
--rp-content-item-box-shadow 0 0 .02rem 0 $color-border-tertiary Content item shadow

# Position Properties (Position/Top/Left/Z-Index)

Name Default Value Description
--rp-content-item-checkbox-inner-selected-position relative Checkbox selected position
--rp-content-item-checkbox-inner-after-content '' Checkbox check mark content
--rp-content-item-checkbox-inner-after-position absolute Checkbox check mark position
--rp-content-item-checkbox-inner-after-top 50% Checkbox check mark top position
--rp-content-item-checkbox-inner-after-left 50% Checkbox check mark left position
--rp-footer-select-checkbox-inner-selected-position relative Select all checkbox selected position
--rp-footer-select-checkbox-inner-after-content '' Select all check mark content
--rp-footer-select-checkbox-inner-after-position absolute Select all check mark position
--rp-footer-select-checkbox-inner-after-top 50% Select all check mark top position
--rp-footer-select-checkbox-inner-after-left 50% Select all check mark left position

# Transform Properties (Transform)

Name Default Value Description
--rp-content-item-checkbox-inner-after-transform translate(-50%, -50%) Checkbox check mark transform
--rp-footer-select-checkbox-inner-after-transform translate(-50%, -50%) Select all check mark transform

# Layout Properties (Flex)

Name Default Value Description
--rp-content-flex 1 Content flex layout
--rp-content-item-info-flex 1 Content info flex layout

# Other Properties (Others)

Name Default Value Description
--rp-head-text-align center Header text alignment
--rp-content-overflow-y auto Content vertical scroll
--rp-content-overflow-x hidden Content horizontal scroll
--rp-content-item-backdrop-filter blur(.08rem) Content item backdrop filter

← MatchResultDialog →