<Workspace>

INFO

The <Workspace> component must be used within a <Provider> component.

The <Workspace> component serves as a workspace for rendering and editing other components. It provides a variety of slots, allowing developers to customize page loading states, toolbar actions, menu popups, and more, enhancing the user experience.

Usage Example

Basic Version

In the basic version, the <Workspace> component is used directly, supporting custom loading prompts, toolbar actions, and other content:

<template>
    <Workspace>
        <!-- Custom loading content -->
        <template #loading>Loading...</template>

        <!-- Custom toolbar actions -->
        <template #toolbar="item">
            <button @click="removeItem(item.id)">Remove</button>
        </template>

        <!-- Custom menu popup -->
        <template #flowMenuPopper>
            <div>Menu-1</div>
        </template>
    </Workspace>
</template>

Slot Explanation

• #loading: Customizes the content displayed during the page load, typically used to show a loading animation or a message until the page data is fully loaded.
• #toolbar: Customizes the toolbar content of the workspace. This can be used to implement common action buttons. The item parameter passes relevant data for the current toolbar item.
• #flowMenuPopper: Customizes the popup content for the flow menu. This slot can contain any custom menu items or actions.

Notes

• <Provider> component: The <Workspace> must be nested within a <Provider> component to ensure proper functionality and access to the necessary Ptah engine context.
• Slot Customization: With slots, you can customize various regions of the workspace, including loading states, toolbar buttons, menus, etc., to flexibly adapt to the needs of the application.
• Event Handling: In the slots, you can use event bindings (e.g., @click) to interact with external data or functionality, such as delete actions and more.