-
-
-
-```
-
-## Customer Service API
-
-Mock data service providing customer records with representative and activity data
-
-```javascript
-import { CustomerService } from '@/service/CustomerService';
-
-CustomerService.getCustomers()
- .then(customers => {
- customers.forEach(customer => {
- console.log({
- id: customer.id,
- name: customer.name,
- country: customer.country, // { name: 'Algeria', code: 'dz' }
- company: customer.company,
- date: customer.date, // ISO date string
- status: customer.status, // 'unqualified', 'negotiation', 'qualified', 'new'
- verified: customer.verified, // boolean
- activity: customer.activity, // 0-100
- representative: {
- name: customer.representative.name,
- image: customer.representative.image
- },
- balance: customer.balance // number
- });
- });
- });
-
-// Usage in DataTable with filtering
-
-
-
-
-
-
-
-
-
-
-
-
- {{ formatCurrency(data.balance) }}
-
-
-
-
-// Expected data structure: Array of customer objects with nested country
-// and representative objects, suitable for DataTable display with badges
-```
-
-## Country Service API
-
-Mock data service providing 249 world countries with ISO codes
-
-```javascript
-import { CountryService } from '@/service/CountryService';
-
-CountryService.getCountries()
- .then(countries => {
- console.log(countries.length); // Output: 249
-
- // Sample country structure
- countries.forEach(country => {
- console.log(country);
- // { name: 'Afghanistan', code: 'af' }
- // { name: 'United States', code: 'us' }
- });
- });
-
-// Usage in Dropdown component
-
-
-
-
-
-
- {{ slotProps.value.name }}
-
-
- {{ slotProps.placeholder }}
-
-
-
-
{{ slotProps.option.name }}
-
-
-
-
-// Expected result: Dropdown with 249 countries, filterable search,
-// returns selected country object with name and code properties
-```
-
-## Node Service API
-
-Mock data service providing hierarchical tree structures for file browsers and navigation
-
-```javascript
-import { NodeService } from '@/service/NodeService';
-
-// Tree structure for Tree component
-NodeService.getTreeNodes()
- .then(nodes => {
- console.log(nodes);
- // Returns 3 root nodes: Documents, Events, Movies
- // Each with nested children representing folders/files
- // Structure: { key, label, data, icon, children[] }
- });
-
-// Tree table structure with detailed data
-NodeService.getTreeTableNodes()
- .then(nodes => {
- nodes.forEach(node => {
- console.log({
- key: node.key, // Unique identifier
- data: {
- name: node.data.name,
- size: node.data.size,
- type: node.data.type
- },
- children: node.children // Nested nodes
- });
- });
- });
-
-// Usage in TreeTable component
-
-
-
-
-
-
-
-
-
-
-// Expected result: 9 root nodes (Applications, Cloud, Desktop, Documents,
-// Downloads, Main, Movies, Photos, Work) with nested children
-// Perfect for file manager UIs and hierarchical data display
-```
-
-## Photo Service API
-
-Mock data service providing gallery images hosted on CDN
-
-```javascript
-import { PhotoService } from '@/service/PhotoService';
-
-PhotoService.getImages()
- .then(images => {
- console.log(images.length); // Output: 15
-
- images.forEach(image => {
- console.log({
- itemImageSrc: image.itemImageSrc,
- thumbnailImageSrc: image.thumbnailImageSrc,
- alt: image.alt,
- title: image.title
- });
- // Example output:
- // {
- // itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
- // thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
- // alt: 'Description for Image 1',
- // title: 'Title 1'
- // }
- });
- });
-
-// Usage in Galleria component
-
-
-
-
-
-
-
-
-
-
-
-
-
-// Expected result: Image gallery with 15 photos, thumbnail navigation,
-// full-size image display, navigation arrows, responsive layout
-```
-
-## Theme Configuration and Dynamic Switching
-
-Real-time theme customization with preset, color, and surface palette options
-
-```javascript
-import { useLayout } from '@/layout/composables/layout';
-
-const { layoutConfig } = useLayout();
-
-// Available theme presets
-const presets = ['Aura', 'Lara', 'Nora'];
-
-// Available primary colors
-const primaryColors = [
- 'noir', 'emerald', 'green', 'lime', 'orange', 'amber',
- 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo',
- 'violet', 'purple', 'fuchsia', 'pink', 'rose'
-];
-
-// Available surface palettes
-const surfacePalettes = [
- 'slate', 'gray', 'zinc', 'neutral',
- 'stone', 'soho', 'viva', 'ocean'
-];
-
-// Change theme preset
-import { updatePreset } from '@primeuix/themes';
-layoutConfig.preset = 'Lara';
-updatePreset({
- preset: 'Lara',
- primary: layoutConfig.primary,
- surface: layoutConfig.surface
-});
-
-// Change primary color
-layoutConfig.primary = 'blue';
-updatePreset({
- preset: layoutConfig.preset,
- primary: 'blue',
- surface: layoutConfig.surface
-});
-
-// Change surface palette
-import { updateSurfacePalette } from '@primeuix/themes';
-layoutConfig.surface = 'slate';
-updateSurfacePalette('slate');
-
-// Toggle dark mode
-import { toggleDarkMode } from '@/layout/composables/layout';
-toggleDarkMode();
-// Result: Adds/removes 'app-dark' class with smooth View Transition API animation
-
-// Complete theme change example
-function applyTheme(preset, primary, surface) {
- layoutConfig.preset = preset;
- layoutConfig.primary = primary;
- layoutConfig.surface = surface;
-
- updatePreset({ preset, primary, surface });
- if (surface) {
- updateSurfacePalette(surface);
- }
-}
-
-applyTheme('Nora', 'purple', 'ocean');
-// Result: Theme instantly updates across entire application
-// All PrimeVue components reflect new colors and styling
-```
-
-## PrimeVue DataTable with Filtering and Pagination
-
-Advanced data table with global search, column filtering, sorting, and pagination
-
-```vue
-
-
-
-
-
-
- Products
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ formatCurrency(data.price) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Summary
-
-Sakai Vue serves as a comprehensive foundation for building modern admin dashboards and data-driven web applications with Vue 3. The template demonstrates enterprise-grade patterns including service-based architecture for data management, reactive state with composables, and extensive PrimeVue component integration. The five mock data services (Product, Customer, Country, Node, Photo) provide realistic sample data with proper structure for immediate prototyping, while the complete CRUD implementation showcases best practices for data manipulation with user feedback through toasts and confirmations.
-
-The template's standout features include its flexible theming system supporting three presets (Aura, Lara, Nora) with 17 primary colors and 8 surface palettes, all switchable in real-time without page reloads. The responsive layout system adapts seamlessly from mobile to desktop with static and overlay menu modes, dark mode support with smooth view transitions, and a component library of 15+ UI showcase pages demonstrating every major PrimeVue component. Whether building internal tools, customer portals, or SaaS applications, Sakai Vue provides production-ready code, professional design, and extensive examples that accelerate development from concept to deployment.