Last update: August 29, 2024

API Reference

The VcBlade API reference provides detailed information about the props, events, and slots available for the VcBlade component. The following sections outline the different aspects of the VcBlade API:

VcBlade component

Props

Prop	Type	Default	Description
icon	String	undefined	Font Awesome icon to display in the blade header.
title	String	undefined	Title to display in the blade header.
subtitle	String	undefined	Subtitle to display in the blade header.
width	Number, String	"30%"	The minimum width of the blade in pixels or as a percentage.
expanded	Boolean	true	Handled by the VcVladeNavigation component, the state depends on the number of active blades. You can watch this value to perform actions, such as changing the table layout when two blades are active.
expandable	String	true	Activates the ability to expand and collapse the component by default.
closable	String	true	Determines whether the blade has a close button.
toolbarItems	IBladeToolbar[]	() => []	An array of items to be displayed in the toolbar.

Events

Event	Description
close	Close blade event.
expand	Expand blade event.
collapse	Collapse blade event.

Slots

Slot	Description
default	Blade content.
action	Any component or data to display in blade header.

useBladeNavigation composable

Properties

Name	Type	Description
blades	ComputedRef<BladeRouteRecordLocationNormalized \| undefined>	An array containing active blade components on given route.
currentBladeNavigationData	ComputedRef<BladeVNode["props"]["navigation"]>	An object containing the current blade navigation data.

Methods

openBlade

Opens a blade with the specified configuration.

• Type

  **openBlade**:( { blade, param, options, onOpen, onClose }: IBladeEvent, isWorkspace?: boolean ) => Promise```

• Parameters

  Name	Description
  blade	BladeConstructor
  options (optional)	ExtractedBladeOptions
  param (optional)	String
  onOpen (optional)	() => void
  onClose (optional)	() => void

• Returns: Promise

closeBlade

Closes an opened blade or all opened blades.

• Type

  **closeBlade**:(index: number) => Promise```

• Parameters

  Name	Description
  index	Number

• Returns: Promise<boolean>

onBeforeClose

Allows you to perform actions before closing a blade. If the method returns false, the blade will not be closed.

• Type

  **onBeforeClose**:(callback: () => Promise) => void```

• Parameters

  Name	Description
  callback	() => Promise<boolean | undefined>

• Returns: void

onParentCall

Calls any function on the parent blade, if it has been exposed there.

• Type

  onParentCall: (parentExposedMethods: Record<string, any>, args: IParentCallArgs) => void

• Parameters

  Name	Description
  parentExposedMethods	Record<string, any>
  args	IParentCallArgs

• Returns: void

routeResolver

Resolves and generates routes after page reload or accessing via direct link. Used only in Vue router configuration:

const routes = [
 ...,
 {
    path: "/:pathMatch(.*)*",
    component: App,
    beforeEnter: async (to) => {
      const { routeResolver } = useBladeNavigation();
      return routeResolver(to);
    },
  },
]

• Type:

  routeResolver: (to: RouteLocationNormalized) => Promise<{ name: RouteRecordName | undefined; params: RouteParams; } | undefined> | undefined

• Parameters

  Name	Description
  to	RouteLocationNormalized

• Returns: Promise<{ name: RouteRecordName | undefined; params: RouteParams; } | undefined> | undefined

resolveBladeByName

Allows you to resolve a blade component using its registered name. Supports both runtime and regular blade components.

• Type:

  resolveBladeByName: (name: string) => BladeInstanceConstructor

• Parameters

  Name	Description
  name	String

• Returns: BladeInstanceConstructor

getNavigationQuery

Returns the URL query for selected blade.

• Type:

  getNavigationQuery: () => Record<string, string | number> | undefined

• Returns: Record<string, string | number> | undefined

setNavigationQuery

Sets the URL query for selected blade.

• Type:

  setNavigationQuery: (query: Record<string, string | number>) => void

• Returns: void

Notifications

The notification method is used to display toast notifications.

Method signatures are as follows:

• notification(content: string, options?: NotificationOptions): string | number;
• error(content: string, options?: NotificationOptions): string | number;
• warning(content: string, options?: NotificationOptions): string | number;
• success(content: string, options?: NotificationOptions): string | number;
• clearAll(): void;
• remove(notificationId?: number | string): void;
• update(notificationId: string | number, options: NotificationOptions): void;

NotificationOptions interface

Property	Description
limit	Number
pauseOnHover	Boolean
timeout	Number
content	String
notificationId	Number
type	NotificationType
onOpen	<T>(payload: T) => void
onClose	<T>(payload: T) => void
payload	StringRecord| Any string or object data used as an argument to theonOpenandonClose` method.
updateId	String

useNotifications composable

Properties

Property	Description
notifications	ComputedRef<PushNotification[]>
moduleNotifications	ComputedRef<PushNotification[]>

Methods

loadFromHistory

Loads the saved notifications history from the backend.

• Type

  loadFromHistory(take?: number): Promise<void>

• Parameters

  Property	Description
  take (optional)	Number

• Returns: Promise<void>

addNotification

An internal method used in an embedded signalR plugin that adds a received notification to the notifications array.

• Type

  addNotification(message: PushNotification): void

• Parameters

  Property	Description
  message	PushNotification

• Returns: void

markAsRead

Marks a particular notification as read.

• Type

  markAsRead(message: PushNotification): void

• Parameters

  Property	Description
  message	PushNotification

• Returns: void

markAllAsRead

Marks all notifications as read.

• Type

  markAllAsRead(): void

• Returns: void

VcNotificationTemplate component

Prop	Description
color	Icon circle color.
title	Title of the notification.
icon	Any icon from Font Awesome.