CocToast

CocToast is a reusable, stackable, glass-effect toast / notification component for Vue 2.

This component provides:

• Automatic stacking (no overlap)
• Multiple position support
• Glass / brand background styling
• Optional primary and secondary actions
• “Don’t show again” handling using localStorage
• Flash-free behavior on page reload

---

📦 Import

const COCToast = () =>
  import(
    /* webpackChunkName: "coc-common" */ 'school@/components/common/COCToast.vue'
  )

export default {
  components: { CocToast },
}

🧩 Basic Usage

<CocToast
  v-model="showToast"
  title="Plan expiring soon"
  subtitle="Renew within 1 day(s) to keep access uninterrupted."
/>

🎯 Positions

Supported positions:

• top-left
• top-right
• bottom-left
• bottom-right

<CocToast v-model="showToast" position="top-right" title="Top right toast" />

🔘 Actions (Optional)

Primary Action (Button)

<CocToast
  v-model="showToast"
  title="Plan expiring soon"
  primary-text="Renew"
  @primary="goToRenew"
/>

Secondary Action (Link)

<CocToast
  v-model="showToast"
  title="Reminder"
  secondary-text="Don’t show again"
  storage-key="renewal_toast_hide"
/>

ℹ️ Secondary action behavior:

• Toast closes immediately
• Value is stored in localStorage (if storageKey is provided)
• Toast will not appear again after page reload

🎨 Effects

Supported effects:

• none (default)
• pulse
• shake
• glow

<CocToast v-model="showToast" title="Attention required" effect="glow" />

🎨 Icon Slot (Optional)

<CocToast
  v-model="showToast"
  title="New update"
>
  <template #icon>
    🔔
  </template>
</CocToast>

🧠 Auto Stacking (Built-in)

When multiple CocToast components are shown in the same position:

<CocToast v-model="toast1" title="Toast one" />
<CocToast v-model="toast2" title="Toast two" />

✔ Toasts stack automatically ✔ Spacing adjusts dynamically based on content height ✔ No index or counter is required

💾 Remember Dismiss ("Don’t show again")

<CocToast
  v-model="showToast"
  title="Plan expiring"
  secondary-text="Don’t show again"
  storage-key="plan_expiry_dismissed"
/>

✔ Toast will not reappear after reload ✔ No flicker or flash on page load

📑 Props

Prop	Type	Default	Description
value	Boolean	true	v-model control
title	String	''	Toast title
subtitle	String	''	Toast subtitle
primaryText	String	''	Primary button text
secondaryText	String	''	Secondary link text
position	String	bottom-right	Toast position
effect	String	none	Animation effect
storageKey	String	''	localStorage key
stackGap	Number	12	Gap between stacked toasts

📣 Events

Event	When
@primary	Primary button clicked
@dont-show-again	Secondary clicked
@close	Close button clicked
@input	v-model update

🎯 Example: Renewal Toast

<CocToast
  v-model="showRenewal"
  title="Plan expiring soon"
  subtitle="Renew within 1 day(s) to keep access uninterrupted."
  primary-text="Renew"
  secondary-text="Don’t show again"
  position="top-right"
  effect="pulse"
  storage-key="renewal_dismissed"
  @primary="goToBilling"
/>