Context Menu System

/**
 * Context menu item - either an option or separator
 */
type ContextMenuItem = ContextMenuOption | 'separator';

/**
 * Context menu option configuration
 */
type ContextMenuOption = {
  /** Function to execute when option is selected */
  action: () => void;
  /** Whether the option is disabled */
  disabled?: boolean;
} & (
  | {
    /** Not in small mode (default) */
    small?: false;
    /** Icon component or string identifier */
    icon?: Component | string;
    /** Label text or component */
    label: string | Component;
  }
  | {
    /** Small display mode */
    small: true;
    /** Icon component or string identifier (required in small mode) */
    icon: Component | string;
    /** Label text (must be string in small mode) */
    label: string;
  }
);

import type { ContextMenuItem } from "@slidev/types";

// Regular context menu option
const printOption: ContextMenuItem = {
  label: "Print Slide",
  icon: "mdi:printer",
  action: () => window.print(),
  disabled: false
};

// Small context menu option
const shareOption: ContextMenuItem = {
  small: true,
  label: "Share",
  icon: "mdi:share",
  action: () => navigator.share({ title: "My Presentation" })
};

// Separator
const separator: ContextMenuItem = 'separator';

// Complete context menu
const contextMenuItems: ContextMenuItem[] = [
  printOption,
  shareOption,
  separator,
  {
    label: "Settings",
    action: () => openSettings()
  }
];

import type { Component } from 'vue';