Implement a "Stop Effect" Component in Vue.js

You need to create a reusable Vue.js component that allows users to trigger and cancel a visual "stop" effect on an element. This is commonly seen in applications for pausing animations, highlighting critical states, or indicating a temporary halt in processing.

Problem Description

The goal is to build a Vue component named StopEffect that wraps around any child content. This component should provide a mechanism to apply a visual "stop" overlay to its children when a stop prop is true, and remove it when stop is false. The stop effect should be a semi-transparent, colored overlay with a distinct visual indicator (e.g., a "STOP" text or an icon).

Key Requirements:

• Conditional Overlay: The component must conditionally render an overlay element. This overlay should only be visible when the stop prop is true.
• Content Preservation: The original content of the StopEffect component should remain interactive and visible underneath the overlay.
• Styling: The overlay should be visually distinct and clearly communicate the "stop" state. Consider making the overlay semi-transparent to allow some of the underlying content to be visible.
• Reusability: The component should be generic enough to wrap any HTML content or other Vue components.
• Props: The component should accept a stop prop (boolean) to control the visibility of the effect.
• Slots: The component should use Vue slots to render its child content.

Expected Behavior:

When the stop prop is false, the child content is displayed normally. When the stop prop is true, a semi-transparent overlay appears on top of the child content, obscuring it to some degree and displaying a "STOP" indicator.

Edge Cases:

• What happens if the stop prop changes rapidly? The transition should be smooth if possible, but functional correctness is paramount.
• Consider how the overlay positions itself relative to its parent.

Examples

Example 1:

Component Usage:

<template>
  <StopEffect :stop="isStopped">
    <div class="content-box">
      This is some content that can be stopped.
    </div>
  </StopEffect>
  <button @click="isStopped = !isStopped">Toggle Stop</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import StopEffect from './StopEffect.vue';

const isStopped = ref(false);
</script>

<style>
.content-box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Expected Visual Output:

• When isStopped is false: The div.content-box is displayed normally.
• When isStopped is true: The div.content-box is still visible, but an overlay covers it. The overlay is semi-transparent (e.g., light red with 50% opacity) and displays "STOP" in the center in a prominent font.

Example 2:

Component Usage:

<template>
  <StopEffect :stop="processingData">
    <SomeComplexChartComponent :data="chartData" />
  </StopEffect>
  <button @click="processingData = !processingData">Toggle Processing Stop</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import StopEffect from './StopEffect.vue';
// Assume SomeComplexChartComponent is imported

const processingData = ref(false);
const chartData = ref({ /* ... */ });
</script>

Expected Visual Output:

• When processingData is false: SomeComplexChartComponent renders and functions as expected.
• When processingData is true: The SomeComplexChartComponent is overlaid with the "stop" effect.

Constraints

• The StopEffect component should be implemented using Vue 3's Composition API with TypeScript.
• The stop prop must be a boolean.
• The overlay should not interfere with the underlying content's ability to be styled or to receive events (though the effect implies interaction might be paused).
• The solution should be performant and avoid unnecessary re-renders.

Notes

• Consider using CSS for positioning and styling the overlay. Absolute positioning relative to the StopEffect component's parent will be key.
• Think about how to best center the "STOP" text or indicator within the overlay.
• You might want to provide default styling for the overlay, but allow for customization through CSS classes if desired.
• The problem is about implementing the visual effect, not necessarily stopping actual underlying processes.