Sakai Vue Documentation

The application is initialized using the standard Vue createApp pattern. It integrates vue-router for navigation, PrimeVue for UI components, and PrimeVue services for feedback mechanisms.

Key integrations include:

• PrimeVue Configuration: Configured with the Aura theme preset. The darkModeSelector is set to .app-dark, meaning dark mode is toggled by applying this class to a parent element.
• Services: ToastService (for notifications) and ConfirmationService (for confirmation dialogs) are registered globally.
• Styles: The application imports Tailwind CSS and custom SCSS styles.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import Aura from '@primeuix/themes/aura';
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';

import '@/assets/tailwind.css';
import '@/assets/styles.scss';

const app = createApp(App);

app.use(router);
app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            darkModeSelector: '.app-dark'
        }
    }
});
app.use(ToastService);
app.use(ConfirmationService);

app.mount('#app');

Sakai-Vue uses vue-router to manage application navigation. The routing structure is organized into two main types of routes:

1. Layout-wrapped routes: Routes defined as children of the / path use AppLayout.vue as their parent component. These routes typically include the main application dashboard, UI kit documentation, and utility pages. They inherit the application's shell (sidebar, topbar, etc.).
2. Standalone routes: Routes defined outside the AppLayout children array, such as /landing, /pages/notfound, and authentication pages (/auth/login, /auth/access, /auth/error). These are used for pages that do not require the standard application layout.

To add a new page that uses the application layout, add a new object to the children array of the / path. To add a page that stands alone (like a custom landing page), add it to the top-level routes array.

import AppLayout from '@/layout/AppLayout.vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: AppLayout,
            children: [
                // Add layout-wrapped routes here
            ]
        },
        {
            path: '/standalone-path',
            name: 'standalone',
            component: () => import('@/views/Standalone.vue')
        }
    ]
});

export default router;

The useLayout composable provides access to the global layout configuration and state, allowing you to control themes, menus, and sidebars across your Sakai Vue application. It returns reactive objects for configuration and state, along with helper methods to trigger UI transitions.

Configuration (layoutConfig)

Use layoutConfig to manage the visual appearance:

• preset: The UI preset (e.g., 'Aura').
• primary: The primary color theme (e.g., 'emerald').
• surface: The surface color theme.
• darkTheme: Boolean indicating if dark mode is active.
• menuMode: The menu behavior, typically 'static' or 'overlay'.

State (layoutState)

Use layoutState to track the current UI status:

• staticMenuInactive: Whether the static menu is collapsed.
• overlayMenuActive: Whether the overlay menu is open.
• configSidebarVisible: Whether the configuration sidebar is visible.
• sidebarExpanded: Whether the sidebar is expanded.
• activeMenuItem: The currently active menu item.
• activePath: The current application path.

import { useLayout } from '@/layout/composables/layout';

const { layoutConfig, layoutState, toggleDarkMode, toggleMenu } = useLayout();

// Example: Accessing state in a component
// <div v-if="layoutState.configSidebarVisible">...</div>

// Example: Triggering actions
// <button @click="toggleDarkMode">Toggle Dark Mode</button>

The NodeService provides methods to retrieve hierarchical node data, typically used for populating tree or treeTable components. It supports both synchronous data retrieval and asynchronous Promise-based retrieval.

Available Methods

• getTreeNodes(): Returns a Promise that resolves to an array of tree nodes. Each node contains key, label, data, icon, and an optional children array.
• getTreeTableNodes(): Returns a Promise that resolves to an array of tree table nodes. Each node contains a key, a data object (containing properties like name, size, and type), and an optional children array.

Node Structure

For standard trees, nodes follow this shape:

{
    key: string;
    label: string;
    data?: string;
    icon?: string;
    children?: Array<Node>;
}

For tree tables, nodes follow this shape:

{
    key: string;
    data: {
        name: string;
        size: string;
        type: string;
    };
    children?: Array<Node>;
}

import { NodeService } from '@/service/NodeService';

// Fetching tree nodes
const nodes = await NodeService.getTreeNodes();

// Fetching tree table nodes
const tableNodes = await NodeService.getTreeTableNodes();

The ProductService object provides several methods to retrieve product information, simulating API calls by returning Promises. These methods allow you to fetch different subsets of data, including products with or without associated order history.

Available methods:

• getProducts(): Returns all products.
• getProductsMini(): Returns a small subset (first 5) of products.
• getProductsSmall(): Returns a small subset (first 10) of products.
• getProductsWithOrders(): Returns all products, including an orders array for each product.
• getProductsWithOrdersSmall(): Returns a small subset (first 10) of products including their orders array.
• getProductsWithOrdersData(): Returns the raw array of products with order data (synchronous).

import { ProductService } from 'src/service/ProductService';

// Example: Fetching all products
ProductService.getProducts().then(products => {
    console.log(products);
});

// Example: Fetching products with their order history
ProductService.getProductsWithOrders().then(productsWithOrders => {
    console.log(productsWithOrders);
});

The useLayout composable exports several methods to programmatically control the application layout:

• toggleDarkMode(): Toggles the darkTheme configuration and updates the app-dark class on the document element. It uses document.startViewTransition for smooth transitions if supported by the browser.
• toggleMenu(): Toggles the menu based on the current menuMode and device type (desktop vs mobile).
• toggleConfigSidebar(): Toggles the visibility of the configuration sidebar.
• hideMobileMenu(): Specifically closes the mobile menu.
• changeMenuMode(event): Updates the menuMode (e.g., switching from 'static' to 'overlay') and resets various menu-related states like staticMenuInactive and sidebarExpanded.

const { 
    toggleDarkMode, 
    toggleMenu, 
    toggleConfigSidebar, 
    hideMobileMenu, 
    changeMenuMode 
} = useLayout();

// To change menu mode via an event (e.g., from a Select component)
// changeMenuMode({ value: 'overlay' });