Directives

We have only one custom Vue directive in Cylc UI, the v-cylc-object directive to display the mutations menu:

It is used in components like TreeItem when it creates an instance of Task or Job.

You must pass in to the binding a javascript object containing certain keys/properties¹, as that is used to create the form and mutations. E.g. passing in an object node.node:

<task v-cylc-object="node.node"  ... />

The object passed into the binding is received in the bind() function in src/cylc/cylcObject/plugin.js. This function emits an event called show-mutations-menu here, and this event is handled in the mounted() method in src/cylc/ObjectMenu/Menu.vue.

The directive simply creates a listener that emits an event to show the context menu. The click event that you use when you click a task, job, etc, is created here.

---

¹: For example, for the TreeItem component, the object is the node prop of the component. At time of writing, the certain properties that the object must have are:

• id (string) - e.g. ~user/workflow//cycle/task

If the cylc-object is a cycle point, family, task or job, these are used to show status at top of menu (these aren't needed if the cylc-object is a workflow):

• state (string); will default to "state unknown" if not provided

If the cylc-object is a task, these are used to show status at top of menu (these aren't needed if the cylc-object is a workflow, cycle point, family or job):

• isHeld (bool); note that if the cylc-object is a family this should not be provided as this is used to distinguish between tasks and families
• isQueued (bool)
• isRunahead (bool)