ContextMenu

const contextMenuFixture = {
  id: "contextmenu",
  region: "Right-click anywhere here",
  header: "ledger-api",
  items: [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Restart replicas", shortcut: "⌘R", disabled: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ],
} satisfies {
  id: string;
  region: string;
  header: string;
  items: ReadonlyArray<
    { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
  >;
};
 
import { ContextMenu } from "@grassroot/ui-react";
 
export default function ContextMenuDemo() {
  return (
    <div>
      <ContextMenu header={contextMenuFixture.header} items={[...contextMenuFixture.items]}>
        <div>{contextMenuFixture.region}</div>
      </ContextMenu>
    </div>
  );
}

<script setup lang="ts">
const contextMenuFixture = {
  id: "contextmenu",
  region: "Right-click anywhere here",
  header: "ledger-api",
  items: [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Restart replicas", shortcut: "⌘R", disabled: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ],
} satisfies {
  id: string;
  region: string;
  header: string;
  items: ReadonlyArray<
    { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
  >;
};
 
import { ContextMenu } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <ContextMenu :header="contextMenuFixture.header" :items="contextMenuFixture.items">
      <div>{{ contextMenuFixture.region }}</div>
    </ContextMenu>
  </div>
</template>

import { Component } from "@angular/core";
const contextMenuFixture = {
  id: "contextmenu",
  region: "Right-click anywhere here",
  header: "ledger-api",
  items: [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Restart replicas", shortcut: "⌘R", disabled: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ],
} satisfies {
  id: string;
  region: string;
  header: string;
  items: ReadonlyArray<
    { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
  >;
};
 
import { GrassrootContextMenu } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-context-menu-demo",
  standalone: true,
  imports: [GrassrootContextMenu],
  template: `
    <div>
      <grassroot-context-menu [header]="fixture.header" [items]="fixture.items">
        <div>{{ fixture.region }}</div>
      </grassroot-context-menu>
    </div>
  `,
})
export class ContextMenuDemoComponent {
  protected readonly fixture = contextMenuFixture;
}
 
export default ContextMenuDemoComponent;

<script lang="ts">
  import { ContextMenu } from "@grassroot/ui-svelte";
  const contextMenuFixture = {
    id: "contextmenu",
    region: "Right-click anywhere here",
    header: "ledger-api",
    items: [
      { label: "View logs", shortcut: "⌘L" },
      { divider: true },
      { label: "Restart replicas", shortcut: "⌘R", disabled: true },
      { label: "Tear down", shortcut: "⌘⌫", danger: true },
    ],
  } satisfies {
    id: string;
    region: string;
    header: string;
    items: ReadonlyArray<
      { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
    >;
  };
 
  </script>
 
{#snippet children()}<div>{contextMenuFixture.region}</div>{/snippet}
<div>
  <ContextMenu header={contextMenuFixture.header} items={contextMenuFixture.items} {children} />
</div>

/** @jsxImportSource solid-js */
import { ContextMenu } from "@grassroot/ui-solid";
const contextMenuFixture = {
  id: "contextmenu",
  region: "Right-click anywhere here",
  header: "ledger-api",
  items: [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Restart replicas", shortcut: "⌘R", disabled: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ],
} satisfies {
  id: string;
  region: string;
  header: string;
  items: ReadonlyArray<
    { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
  >;
};
 
export default function ContextMenuDemo() {
  return (
    <div>
      <ContextMenu header={contextMenuFixture.header} items={[...contextMenuFixture.items]}>
        <div>{contextMenuFixture.region}</div>
      </ContextMenu>
    </div>
  );
}