resolver

Description

enables the multi-area mode and defines whether an element needs a menu

Type

function

Example

<script>
    // the id inside the resolver is the value of the "data-context-id" attribute
    function getItem(id){
        return items.find(a => a.id == id);
    }
</script>

<ContextMenu {options} resolver={getItem}>
    {#each items as item(item.id)}
        <div data-context-id={item.id} class="item">{item.type} {item.id}</div>
    {/each}
</ContextMenu>

Details

The result of the resolver call will be provided in the resulting click event as ev.detail.item.

Check the examples of valid resolvers below:

const allowAll = (id, ev) => true;
const allowElementsWithCorrectAttribute = (id, ev) => return id;
const allowAndReturnTaskObject = (id, ev) => return tasks[id];

Related article: Using ContextMenu for multiple targets

Related sample: ContextData