menuOptions

Description

Optional. The function takes the context menu type name (and a file/folder data if necessary) as an input and returns customized context menu options

It allows configuring default context menu options.

Usage

menuOptions?: () => (
  mode: "folder" | "file" | "body" | "add" | "multiselect",
  item?: {
    id: string,
    type?: "file" | "folder",
    size?: number,
    lazy?: boolean,
    date?: Date,
    parent: string,
    name: string,
    ext: string,
    open?: boolean,
    data?: IParsedEntity[],
    [key: string]: any,
  }
) => {
  id?: string,
  text?: string,
  hotkey: string,
  icon?: string,
  comp?: string,
  type?: string,
}[];

Parameters

• mode - (required) the name of the context menu mode that can be one of the following:
  • file - the list of context menu options for a file
  • folder - the context menu mode for folders
  • add - menu options that are available when clicking the Add New button
  • body - menu options that open on clicking an empty area in the cards or table view mode
  • multiselect - menu options available when multiple files or folders are selected
• item - (optional) an object with data for a file or folder (if the file or folder mode is set) with the next parameters:
  • id – (required) unique identifier of the file or folder
  • type - (optional) it can be "file" | "folder"` that indicates whether the entity is a file or folder
  • size – (optional) the size of the file in bytes (folders may omit this)
  • lazy – (optional) if true, children are loaded on demand
  • date – (optional) last modification or creation date
  • parent – (required) ID of the parent folder
  • name – (required) the name of the file or folder
  • ext – (required) file extension; empty string for folders
  • open – (optional) whether the folder is expanded in the UI
  • data – (optional) nested children (if any), each with the same structure as file
  • [key: string]: any – additional metadata fields provided by the backend

Returns

The function returns an array with context menu options for the requested menu mode and/or item. If the menuOptions function returns false or an empty array, the context menu will not be displayed. The default array of menu options includes objects with the following parameters for each:

• id – (optional) an id for the menu item
• text – (optional) the label for the menu item
• hotkey – (required) keyboard shortcut associated with the menu item
• icon – (optional) icon class or URL to display alongside the menu item
• comp – (optional) optional component name to render custom menu content
• type – (optional) type of menu item, e.g., "separator" or "upload"

The full list of menu options for each menu type is provided here Default context menu options

Example

In the example below we keep only the Delete option for the "/Pictures" folder.

<script setup>
  import { getData, getDrive } from "./common/data";
  import { Filemanager, getMenuOptions } from "@svar-ui/vue-filemanager";

  function menuOptions(mode, item) {
    switch (mode) {
      case "folder":
        if (item.id === "/Pictures")
          return [
            {
              icon: "wxi-close",
              text: "Delete",
              hotkey: "Delete",
              id: "delete",
            },
          ];
      default:
        return getMenuOptions(mode);
    }
  }
</script>

<template>
  <Filemanager :data="getData()" :drive="getDrive()" :menuOptions="menuOptions" />
</template>

If the menuOptions function returns false or an empty array, the context menu will not be displayed.

<script setup>
  import { getData, getDrive } from "./common/data";
  import { Filemanager, getMenuOptions } from "@svar-ui/vue-filemanager";

  function menuOptions(mode, item) {
    switch (mode) {
      case "file":
      case "folder":
        if (item.id === "/Code") return false;

      default:
        return getMenuOptions(mode);
    }
  }
</script>

<template>
  <Filemanager :data="getData()" :drive="getDrive()" :menuOptions="menuOptions" />
</template>