Development Widget

In this section, we will develop a simple module list widget. For demonstration purposes, we will use JSX to create this widget. This widget can also be understood as a component.

Create a New Module

First, create a modulesWidget directory and add an index.jsx file inside it.

modulesWidget
  └─index.jsx

index.jsx

Below is an example implementation of a simple module list widget:

import { ref } from 'vue';
import { usePtahInstance } from '@ptahjs/creative-vue';

export const ModulesWidget = {
    name: 'ModulesWidget',
    setup() {
        const ptahInstance = usePtahInstance();
        // Retrieve all data from moduleResource using ptahInstance.$moduleResource.getData()
        const items = ref(ptahInstance.$moduleResource.getData());

        // Render the content or image of a single item
        const renderItemsContent = (data) => {
            return <a>{data.title}</a>;
        };

        // Render child items
        const renderItems = (data) => {
            return data.items.map((item) => {
                if (item.items && item.items.length > 0) {
                    return (
                        <div class="module-content" key={item.id}>
                            <strong>{item.title}</strong>
                            <ul>{item.items.map((subItem) => renderItemsContent(subItem))}</ul>
                        </div>
                    );
                } else {
                    return <ul key={item.id}>{renderItemsContent(item)}</ul>;
                }
            });
        };

        // Render group data
        const renderGroup = () => {
            return (
                items.value
                    // Filter data that needs to be displayed
                    .filter((item) => item.visible)
                    .map((item) => (
                        <section class="source-module" key={item.id}>
                            <header>{item.title}</header>
                            {renderItems(item)}
                        </section>
                    ))
            );
        };

        return () => <aside class="module-resource-widget">{renderGroup()}</aside>;
    }
};

Explanation

• usePtahInstance: Use the usePtahInstance Hook to retrieve the application instance and access module data.
• ptahInstance.$moduleResource.getData(): Retrieve all module data from moduleResource.
• renderItemsContent: Render the content of a single module item.
• renderItems: Recursively render modules and their child items.
• renderGroup: Filter and render module group data that meets the criteria.

This widget demonstrates how to utilize underlying APIs for data rendering and processing, providing developers with a basic module list view. Depending on actual requirements, you can further extend and customize the functionality of this widget.