popup-menu

A Vue.js multi-level popup menu, using a page like navigation inside the menu container.

Demo

Props

| Prop name | Description | Type | Default | | --- | --- | --- | --- | | idKey | Field name in the menu item data set that holds item identifier. | string | 'id' | | labelKey | Field name in the menu item data set that holds item label. | string | 'label' | | subtitleKey | Field name in the menu item data set that holds item subtitle. | string | 'subtitle' | | hintKey | Field name in the menu item data set that holds item tool tip. | string | 'hint' | | checkerKey | Field name in the menu item data set that tells whether the item has acheckbox attached. | string | 'checker' | | checkedKey | Field name in the menu item data set that holds item's checkbox is checked. | string | 'checked' | | shortcutKey | Field name in the menu item data set that holds item keyboard shortcut. | string | 'shortcut' | | childrenKey | Field name in the menu item data set that holds sub-menu item. | string | 'children' | | addElementId | Whether to add element id attribute, using the idKey field. | boolean | false |

Slots

| Name | Description | Bindings | | -------- | ------------- | ---------------- | | default | Item label | item: G8MenuItem | | subtitle | Item subtitle | item: G8MenuItem |

Events

| Event name | Type | Description | | --- | --- | --- | | open | MouseEvent | The popup menu has been opened. | | close | G8MenuItem | The popup menu has been closed. | | click | G8MenuItemClicked | A menu item has been clicked. | | state-changed | G8MenuItem | A checkbox in the menu item has been checked or unchecked. | | select | G8MenuItem | A menu item has been selected. |

Types

/**
 * Menu item. Fields listed here serve default data structure. There can be
 * arbitrary fields in the data set. Actual fields used in rendering can be
 * customized using component properties such as `idKey`.
 */
export interface G8MenuItem {
  /**
   * Arbitrary field declaration, also enables accessing via index.
   */
  [key: string]: unknown | undefined;

  /**
   * Arbitrary field declaration, also enables accessing via index.
   */
  [key: number]: unknown | undefined;

  /**
   * Default menu item identifier.
   */
  id?: string;

  /**
   * Default menu item label. `'---'` here denotes a separator item. Separator
   * item will not close menu or trigger any event.
   */
  label?: string;

  /**
   * Default menu item subtitle.
   */
  subtitle?: string;

  /**
   * Default menu item tool tip (mouse hover).
   */
  hint?: string;

  /**
   * Whether the item has a checkbox attached. Items with checkbox will not
   * close the menu while clicked. However, the `click` event will be fired,
   * followed by `state-changed` event.
   */
  checker?: boolean;

  /**
   * Whether checkbox of the item has been checked.
   */
  checked?: boolean;

  /**
   * Keyboard shortcut, must be on single character.
   */
  shortcut?: string;

  /**
   * Sub-menu items
   */
  children?: G8MenuItem[];
}

/**
 * A menu item has been clicked.
 */
export class G8MenuItemClicked extends Event {
  /**
   * The item that was clicked.
   */
  data?: G8MenuItem;
}