vue-toast-kit 1.0.0

package/src/components/ToastContainer.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { Teleport, TransitionGroup } from 'vue'
+import Toast from './Toast.vue'
+import { useToastContext } from '../composables/useToastContext'
+import { globalBuffer } from '../core/ToastBuffer'
+import { PRIORITY_ORDER } from '../core/types'
+import type { ToastContext, ToastPosition, ToastDesignTokens, ToastItem } from '../core/types'
+
+const ALL_POSITIONS: ToastPosition[] = [
+  'top-left', 'top-center', 'top-right',
+  'bottom-left', 'bottom-center', 'bottom-right',
+]
+
+const props = withDefaults(defineProps<{
+  position?: ToastPosition
+  maxVisible?: number
+  gap?: number
+  offsetX?: number
+  offsetY?: number
+  zIndex?: number
+  expand?: boolean
+  teleportTo?: string
+  context?: ToastContext
+  theme?: 'light' | 'dark' | 'system' | ToastDesignTokens
+  stackMode?: boolean
+}>(), {
+  position: 'bottom-right',
+  maxVisible: 5,
+  gap: 8,
+  offsetX: 16,
+  offsetY: 16,
+  zIndex: 9999,
+  expand: false,
+  teleportTo: 'body',
+  stackMode: false,
+})
+
+// Resolve context once during setup — inject() must not be called inside computed()
+const ctx = props.context ?? useToastContext()
+const queue = ctx.queue
+
+// Sync maxVisible with the queue
+watch(() => props.maxVisible, (n) => queue.setMaxVisible(n), { immediate: true })
+
+const isHovered = ref(false)
+
+// Все видимые тосты
+const allToasts = computed(() => queue.active.filter(t => !queue.isHidden(t.id)))
+
+// Тосты по позиции: тост без position попадает в props.position; critical — первыми
+function toastsForPosition(pos: ToastPosition): ToastItem[] {
+  return allToasts.value
+    .filter(t => (t.options.position ?? props.position) === pos)
+    .sort((a, b) => PRIORITY_ORDER[b.options.priority] - PRIORITY_ORDER[a.options.priority])
+}
+
+// Stack mode: depth = расстояние от "переднего" тоста
+function stackDepth(index: number, total: number, pos: ToastPosition): number {
+  return pos.startsWith('bottom') ? (total - 1 - index) : index
+}
+
+// Inline-стиль обёртки тоста в stack mode
+function stackWrapStyle(index: number, total: number, pos: ToastPosition): Record<string, string> {
+  if (!props.stackMode || isHovered.value) return {}
+  const depth = stackDepth(index, total, pos)
+  if (depth === 0) return { 'z-index': '10' }
+  if (depth > 2) return { display: 'none' }
+
+  const isBottom = pos.startsWith('bottom')
+  const scale = Math.max(0.88, 1 - depth * 0.06)
+  const offset = depth * 8
+  const opacity = Math.max(0.5, 1 - depth * 0.2)
+  const edgeProp = isBottom ? 'bottom' : 'top'
+
+  return {
+    position: 'absolute',
+    width: '100%',
+    [edgeProp]: '0',
+    transform: `translateY(${isBottom ? offset : -offset}px) scale(${scale})`,
+    opacity: String(opacity),
+    'pointer-events': 'none',
+    'z-index': String(10 - depth),
+    transition: 'transform 300ms ease, opacity 300ms ease',
+  }
+}
+
+// CSS-классы контейнера для конкретной позиции
+function containerClass(pos: ToastPosition) {
+  const toasts = toastsForPosition(pos)
+  return [
+    'vtk-container',
+    `vtk-container--${pos}`,
+    props.theme && typeof props.theme === 'string' ? `vtk-theme-${props.theme}` : '',
+    props.stackMode && toasts.length > 1 ? 'vtk-container--stack' : '',
+    props.stackMode && isHovered.value ? 'vtk-container--stack-expanded' : '',
+  ]
+}
+
+// Inline CSS-переменные из объекта дизайн-токенов (одинаковы для всех позиций)
+const containerStyle = computed(() => {
+  const style: Record<string, string> = {
+    '--vtk-z-index': String(props.zIndex),
+    '--vtk-gap': `${props.gap}px`,
+    '--vtk-container-offset-x': `${props.offsetX}px`,
+    '--vtk-container-offset-y': `${props.offsetY}px`,
+  }
+
+  if (props.theme && typeof props.theme === 'object') {
+    const map: Record<keyof ToastDesignTokens, string> = {
+      colorBg: '--vtk-color-bg',
+      colorText: '--vtk-color-text',
+      colorBorder: '--vtk-color-border',
+      colorSuccess: '--vtk-color-success',
+      colorError: '--vtk-color-error',
+      colorWarning: '--vtk-color-warning',
+      colorInfo: '--vtk-color-info',
+      colorLoading: '--vtk-color-loading',
+      fontFamily: '--vtk-font-family',
+      fontSize: '--vtk-font-size',
+      fontWeight: '--vtk-font-weight',
+      lineHeight: '--vtk-line-height',
+      borderRadius: '--vtk-border-radius',
+      borderWidth: '--vtk-border-width',
+      shadow: '--vtk-shadow',
+      paddingX: '--vtk-padding-x',
+      paddingY: '--vtk-padding-y',
+      iconSize: '--vtk-icon-size',
+      progressHeight: '--vtk-progress-height',
+      maxWidth: '--vtk-max-width',
+      minWidth: '--vtk-min-width',
+      transitionDuration: '--vtk-transition-duration',
+      transitionEasing: '--vtk-transition-easing',
+      zIndex: '--vtk-z-index',
+    }
+    for (const [key, cssVar] of Object.entries(map)) {
+      const val = (props.theme as ToastDesignTokens)[key as keyof ToastDesignTokens]
+      if (val) style[cssVar] = val
+    }
+  }
+
+  return style
+})
+
+// Event handlers
+function handleDismiss(id: string) {
+  ctx.dismiss(id)
+}
+
+function handleGroupToggle(groupKey: string) {
+  queue.toggleGroupExpand(groupKey)
+}
+
+function onContainerEnter() {
+  isHovered.value = true
+  queue.pauseAll()
+}
+function onContainerLeave() {
+  isHovered.value = false
+  queue.resumeAll()
+}
+
+// SSR buffer flush on mount
+onMounted(() => {
+  setTimeout(() => {
+    globalBuffer.onFlush((items) => {
+      for (const item of items) {
+        ctx.addToast(item.message, item.options)
+      }
+    })
+    globalBuffer.flush()
+  }, 100)
+})
+
+defineSlots<{
+  toast(props: { toast: ToastItem; dismiss: (id: string) => void }): void
+  'toast-icon'(props: { toast: ToastItem }): void
+  'toast-content'(props: { toast: ToastItem }): void
+  'toast-action'(props: { toast: ToastItem }): void
+  'toast-close'(props: { toast: ToastItem; dismiss: (id: string) => void }): void
+  'toast-undo'(props: { toast: ToastItem; remaining: number }): void
+}>()
+</script>
+
+<template>
+  <Teleport :to="teleportTo">
+    <!--
+      Все 6 позиций рендерятся всегда — даже пустыми.
+      Это гарантирует, что TransitionGroup всегда в DOM,
+      и enter/leave-анимации корректно срабатывают даже для одного тоста.
+    -->
+    <div
+      v-for="pos in ALL_POSITIONS"
+      :key="pos"
+      :class="containerClass(pos)"
+      :style="containerStyle"
+      :role="toastsForPosition(pos).length ? 'region' : undefined"
+      :aria-label="toastsForPosition(pos).length ? 'Notifications' : undefined"
+      @mouseenter="onContainerEnter"
+      @mouseleave="onContainerLeave"
+    >
+      <TransitionGroup :name="`vtk-slide-${pos}`" tag="div" class="vtk-container__list">
+        <div
+          v-for="(t, i) in toastsForPosition(pos)"
+          :key="t.id"
+          class="vtk-toast-wrap"
+          :style="stackWrapStyle(i, toastsForPosition(pos).length, pos)"
+        >
+          <slot
+            v-if="$slots.toast"
+            name="toast"
+            :toast="t"
+            :dismiss="handleDismiss"
+          />
+          <Toast
+            v-else
+            :toast="t"
+            :on-dismiss="handleDismiss"
+            :on-group-toggle="handleGroupToggle"
+          >
+            <template v-if="$slots['toast-icon']" #toast-icon="slotProps">
+              <slot name="toast-icon" v-bind="slotProps" />
+            </template>
+            <template v-if="$slots['toast-content']" #toast-content="slotProps">
+              <slot name="toast-content" v-bind="slotProps" />
+            </template>
+            <template v-if="$slots['toast-action']" #toast-action="slotProps">
+              <slot name="toast-action" v-bind="slotProps" />
+            </template>
+            <template v-if="$slots['toast-close']" #toast-close="slotProps">
+              <slot name="toast-close" v-bind="slotProps" />
+            </template>
+            <template v-if="$slots['toast-undo']" #toast-undo="slotProps">
+              <slot name="toast-undo" v-bind="slotProps" />
+            </template>
+          </Toast>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.vtk-container__list {
+  display: contents;
+}
+
+/* In stack mode, list becomes a positioning context */
+.vtk-container--stack .vtk-container__list {
+  display: block;
+  position: relative;
+}
+
+.vtk-container--stack .vtk-toast-wrap {
+  display: block;
+}
+</style>

package/src/components/ToastIcon.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import type { ToastType } from '../core/types'
+
+const props = defineProps<{
+  type: ToastType
+  icon?: Component | string | false
+}>()
+
+const isComponent = computed(() =>
+  props.icon && typeof props.icon === 'object',
+)
+
+const isString = computed(() =>
+  props.icon && typeof props.icon === 'string',
+)
+
+const showDefault = computed(() => props.icon !== false && !props.icon)
+</script>
+
+<template>
+  <span :class="['vtk-icon', `vtk-icon--${type}`]" aria-hidden="true">
+    <!-- Custom component -->
+    <component :is="icon" v-if="isComponent" />
+
+    <!-- String (emoji or text) -->
+    <span v-else-if="isString">{{ icon }}</span>
+
+    <!-- Loading spinner -->
+    <span v-else-if="type === 'loading'" class="vtk-spinner" />
+
+    <!-- Default SVG icons -->
+    <template v-else-if="showDefault">
+      <!-- success -->
+      <svg v-if="type === 'success'" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+      </svg>
+      <!-- error -->
+      <svg v-else-if="type === 'error'" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+      </svg>
+      <!-- warning -->
+      <svg v-else-if="type === 'warning'" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+      </svg>
+      <!-- info -->
+      <svg v-else-if="type === 'info'" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+      </svg>
+      <!-- custom — no default icon -->
+    </template>
+  </span>
+</template>

package/src/components/ToastProgressBar.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  remaining: number  // 0–1
+}>()
+
+const scaleX = computed(() => props.remaining)
+</script>
+
+<template>
+  <div class="vtk-progress" aria-hidden="true">
+    <div
+      class="vtk-progress__bar"
+      :style="{ transform: `scaleX(${scaleX})` }"
+    />
+  </div>
+</template>

package/src/composables/useToast.ts

@@ -0,0 +1,152 @@
+import { type Component, type VNode } from 'vue'
+import { useToastContext, getOrCreateGlobalContext } from './useToastContext'
+import { UndoTimer } from '../core/UndoTimer'
+import type { ToastContext, ToastOptions, PromiseToastMessages, ToastPosition } from '../core/types'
+import type { ToastQueue } from '../core/ToastQueue'
+
+function restartTimer(queue: ToastQueue, id: string, duration: number): void {
+  const q = queue as unknown as { timers: Map<string, UndoTimer> }
+  q.timers.get(id)?.destroy()
+  q.timers.delete(id)
+
+  const item = queue.active.find(t => t.id === id)
+  if (!item || !duration) return
+
+  const timer = new UndoTimer(
+    duration,
+    () => {
+      item.options.onAutoClose?.()
+      queue.remove(id)
+    },
+    (r: number) => { item.remaining.value = r },
+  )
+  q.timers.set(id, timer)
+  timer.start()
+}
+
+function buildToastApi(ctx: ToastContext) {
+  const q = ctx.queue
+
+  /** Show an info toast. Returns the toast id. */
+  function toast(message: string, options?: ToastOptions): string {
+    return ctx.addToast(message, { type: 'info', ...options })
+  }
+
+  /** Show a success toast. */
+  toast.success = (message: string, options?: ToastOptions): string =>
+    ctx.addToast(message, { type: 'success', ...options })
+
+  /** Show an error toast (default priority: high). */
+  toast.error = (message: string, options?: ToastOptions): string =>
+    ctx.addToast(message, { type: 'error', priority: 'high', ...options })
+
+  /** Show a warning toast. */
+  toast.warning = (message: string, options?: ToastOptions): string =>
+    ctx.addToast(message, { type: 'warning', ...options })
+
+  /** Show an info toast (alias for the default call). */
+  toast.info = (message: string, options?: ToastOptions): string =>
+    ctx.addToast(message, { type: 'info', ...options })
+
+  /** Show a sticky loading toast. Returns the id to update later. */
+  toast.loading = (message: string, options?: ToastOptions): string =>
+    ctx.addToast(message, { type: 'loading', duration: 0, closable: false, ...options })
+
+  /** Show a toast with a fully custom component. */
+  toast.custom = (component: Component, options?: ToastOptions): string =>
+    ctx.addToast('', { type: 'custom', component, duration: 0, ...options })
+
+  /** Dismiss one or all toasts. */
+  toast.dismiss = (id?: string): void => ctx.dismiss(id)
+
+  /** Update options (and optionally the message) of an existing toast. */
+  toast.update = (id: string, partial: Partial<ToastOptions> & { message?: string | VNode }): void => {
+    const item = q.active.find(t => t.id === id)
+    if (item && partial.message !== undefined) {
+      item.message = partial.message
+    }
+    ctx.update(id, partial)
+  }
+
+  /** Update only the message text without touching options. */
+  toast.updateMessage = (id: string, message: string | VNode): void => {
+    const item = q.active.find(t => t.id === id)
+    if (item) item.message = message
+  }
+
+  /** Returns true if the toast with the given id is currently active. */
+  toast.isActive = (id: string): boolean => ctx.isActive(id)
+
+  /**
+   * Show a loading toast, then update it to success or error when the promise settles.
+   * Returns the original promise so it can be awaited or chained.
+   */
+  toast.promise = async <T>(
+    promise: Promise<T>,
+    messages: PromiseToastMessages<T>,
+    options?: ToastOptions,
+  ): Promise<T> => {
+    const id = toast.loading(messages.loading, options)
+
+    try {
+      const data = await promise
+      const msg = typeof messages.success === 'function' ? messages.success(data) : messages.success
+      const item = q.active.find(t => t.id === id)
+      if (item) {
+        item.message = msg
+        item.options.type = 'success'
+        item.options.closable = true
+        item.options.duration = 3000
+        restartTimer(q, id, 3000)
+      }
+      return data
+    } catch (err: unknown) {
+      const msg = typeof messages.error === 'function' ? messages.error(err) : messages.error
+      const item = q.active.find(t => t.id === id)
+      if (item) {
+        item.message = msg
+        item.options.type = 'error'
+        item.options.closable = true
+        item.options.duration = 5000
+        restartTimer(q, id, 5000)
+      }
+      throw err
+    }
+  }
+
+  /** Show an undo toast with a countdown. Call `options.undo.onUndo` if the user taps Undo. */
+  toast.undo = (message: string, options: ToastOptions & { undo: NonNullable<ToastOptions['undo']> }): string => {
+    return ctx.addToast(message, {
+      type: 'info',
+      duration: options.undo.duration ?? 5000,
+      closable: false,
+      ...options,
+    })
+  }
+
+  /** Dismiss all toasts, optionally filtered by position. */
+  toast.dismissAll = (position?: ToastPosition): void => q.dismissAll(position)
+  /** Pause all active toast timers. */
+  toast.pauseAll = (): void => q.pauseAll()
+  /** Resume all active toast timers. */
+  toast.resumeAll = (): void => q.resumeAll()
+
+  return toast
+}
+
+export type ToastApi = ReturnType<typeof buildToastApi>
+
+export function useToast(context?: ToastContext): ToastApi {
+  if (context) return buildToastApi(context)
+
+  // Inside component — try injected context
+  try {
+    const ctx = useToastContext()
+    return buildToastApi(ctx)
+  } catch {
+    return buildToastApi(getOrCreateGlobalContext())
+  }
+}
+
+// Global singleton for use outside components (Pinia stores, axios interceptors, etc.)
+export const toast: ToastApi = buildToastApi(getOrCreateGlobalContext())

package/src/composables/useToastContext.ts

@@ -0,0 +1,63 @@
+import { inject, type App } from 'vue'
+import { ToastQueue } from '../core/ToastQueue'
+import { isServer, globalBuffer } from '../core/ToastBuffer'
+import { TOAST_CONTEXT_KEY, type ToastOptions, type ToastContext, type GlobalToastOptions } from '../core/types'
+import type { VNode } from 'vue'
+
+function buildContext(queue: ToastQueue): ToastContext {
+  return {
+    queue,
+    addToast(message: string | VNode, options: ToastOptions = {}): string {
+      if (isServer) {
+        const id = options.id ?? `vtk-ssr-${Date.now()}`
+        globalBuffer.push(message, { ...options, id })
+        return id
+      }
+      return queue.add(message, options)
+    },
+    dismiss(id?: string): void {
+      queue.dismiss(id)
+    },
+    update(id: string, options: Partial<ToastOptions>): void {
+      queue.update(id, options)
+    },
+    isActive(id: string): boolean {
+      return queue.isActive(id)
+    },
+  }
+}
+
+let globalContext: ToastContext | null = null
+
+export function getOrCreateGlobalContext(opts?: GlobalToastOptions): ToastContext {
+  if (!globalContext) {
+    const queue = new ToastQueue(opts?.maxVisible ?? 5, {
+      rateLimit: opts?.rateLimit,
+      rateLimitWindowMs: opts?.rateLimitWindowMs,
+      persistStorage: opts?.persistStorage,
+    })
+    globalContext = buildContext(queue)
+  }
+  return globalContext
+}
+
+export function createToastContext(opts?: GlobalToastOptions): ToastContext {
+  const queue = new ToastQueue(opts?.maxVisible ?? 5, {
+    rateLimit: opts?.rateLimit,
+    rateLimitWindowMs: opts?.rateLimitWindowMs,
+    persistStorage: opts?.persistStorage,
+  })
+  return buildContext(queue)
+}
+
+export function useToastContext(): ToastContext {
+  const injected = inject<ToastContext>(TOAST_CONTEXT_KEY, null as unknown as ToastContext)
+  if (injected) return injected
+  return getOrCreateGlobalContext()
+}
+
+export function installContext(app: App, opts?: GlobalToastOptions): ToastContext {
+  const ctx = getOrCreateGlobalContext(opts)
+  app.provide(TOAST_CONTEXT_KEY, ctx)
+  return ctx
+}

package/src/composables/useToastState.ts

@@ -0,0 +1,18 @@
+import { computed } from 'vue'
+import { useToastContext } from './useToastContext'
+import type { ToastContext, ToastItem } from '../core/types'
+
+export function useToastState(context?: ToastContext) {
+  const ctx = context ?? useToastContext()
+  const queue = ctx.queue
+
+  const active = computed<ToastItem[]>(() => queue.active.filter(t => !queue.isHidden(t.id)))
+  const pending = computed<ToastItem[]>(() => [...queue.pending])
+  const count = computed(() => active.value.length)
+
+  function has(id: string): boolean {
+    return ctx.isActive(id)
+  }
+
+  return { active, pending, count, has }
+}

package/src/core/GroupManager.ts

@@ -0,0 +1,105 @@
+import type { ToastItem } from './types'
+
+export class GroupManager {
+  private groups = new Map<string, string[]>()
+  private expandedGroups = new Set<string>()
+
+  private getItems: (ids: string[]) => ToastItem[]
+  private hideItem: (id: string) => void
+  private showItem: (id: string) => void
+
+  constructor(
+    getItems: (ids: string[]) => ToastItem[],
+    hideItem: (id: string) => void,
+    showItem: (id: string) => void,
+  ) {
+    this.getItems = getItems
+    this.hideItem = hideItem
+    this.showItem = showItem
+  }
+
+  add(id: string, groupKey: string): void {
+    if (!this.groups.has(groupKey)) {
+      this.groups.set(groupKey, [id])
+      return
+    }
+
+    const ids = this.groups.get(groupKey)!
+    ids.push(id)
+
+    const [leaderId] = ids
+    const leader = this.getItems([leaderId])[0]
+    if (leader) {
+      leader.groupCount.value = ids.length
+    }
+
+    if (!this.expandedGroups.has(groupKey)) {
+      this.hideItem(id)
+    }
+  }
+
+  remove(id: string, groupKey: string): void {
+    const ids = this.groups.get(groupKey)
+    if (!ids) return
+
+    const idx = ids.indexOf(id)
+    if (idx === -1) return
+
+    ids.splice(idx, 1)
+
+    if (ids.length === 0) {
+      this.groups.delete(groupKey)
+      this.expandedGroups.delete(groupKey)
+      return
+    }
+
+    const [leaderId] = ids
+    const leader = this.getItems([leaderId])[0]
+    if (leader) {
+      leader.groupCount.value = ids.length
+    }
+
+    if (idx === 0 && ids.length > 0) {
+      this.showItem(ids[0])
+      if (!this.expandedGroups.has(groupKey)) {
+        for (let i = 1; i < ids.length; i++) {
+          this.hideItem(ids[i])
+        }
+      }
+    }
+  }
+
+  toggleExpand(groupKey: string): void {
+    const ids = this.groups.get(groupKey)
+    if (!ids) return
+
+    if (this.expandedGroups.has(groupKey)) {
+      this.expandedGroups.delete(groupKey)
+      for (let i = 1; i < ids.length; i++) {
+        this.hideItem(ids[i])
+      }
+    } else {
+      this.expandedGroups.add(groupKey)
+      for (const id of ids) {
+        this.showItem(id)
+      }
+    }
+  }
+
+  isExpanded(groupKey: string): boolean {
+    return this.expandedGroups.has(groupKey)
+  }
+
+  getGroupIds(groupKey: string): string[] {
+    return this.groups.get(groupKey) ?? []
+  }
+
+  hasGroup(groupKey: string): boolean {
+    return this.groups.has(groupKey)
+  }
+
+  clear(): void {
+    this.groups.clear()
+    this.expandedGroups.clear()
+  }
+}