@dasidev/dasi-ui 1.0.0

package/src/config/examples/ecommerce.config.ts

@@ -0,0 +1,132 @@
+/**
+ * E-commerce Configuration Example
+ * Example configuration for an online shopping platform
+ */
+
+import type { AppConfig } from '../app.config'
+
+export const ecommerceConfig: Partial<AppConfig> = {
+  name: 'ShopHub E-commerce Platform',
+  version: '1.0.0',
+  description: 'Modern e-commerce platform for online shopping',
+  
+  branding: {
+    logo: '/img/brand/ecommerce-logo.svg',
+    logoAlt: 'ShopHub Logo',
+    favicon: '/favicon.ico',
+    primaryColor: '#10B981',
+    secondaryColor: '#059669',
+    companyName: 'ShopHub',
+    companyUrl: 'https://shophub.com'
+  },
+  
+  api: {
+    baseUrl: import.meta.env.VITE_API_URL || 'https://api.shophub.com/v1',
+    timeout: 30000,
+    retryAttempts: 3,
+    endpoints: {
+      auth: {
+        login: '/auth/login',
+        logout: '/auth/logout',
+        refresh: '/auth/refresh',
+        forgotPassword: '/auth/forgot-password',
+        changePassword: '/auth/change-password',
+        info: '/auth/me',
+        status: '/auth/status',
+        init: '/auth/init',
+        captcha: '/auth/captcha'
+      },
+      notifications: {
+        unreadCount: '/notifications/unread-count',
+        list: '/notifications'
+      },
+      media: {
+        upload: '/media/upload',
+        delete: '/media'
+      }
+    }
+  },
+  
+  auth: {
+    tokenKey: 'shophub.user.token',
+    userKey: 'shophub.user.name',
+    organizationKey: 'shophub.user.organization',
+    defaultRedirect: '/dashboard',
+    ssoEnabled: false,
+    captchaEnabled: true,
+    otpEnabled: true,
+    passwordPolicy: {
+      minLength: 8,
+      requireUppercase: true,
+      requireLowercase: true,
+      requireNumbers: true,
+      requireSpecialChars: false
+    }
+  },
+  
+  organization: {
+    levels: ['customer', 'seller', 'moderator', 'admin', 'superadmin'],
+    defaultLevel: 'customer',
+    superAdminLevel: 'superadmin'
+  },
+  
+  ui: {
+    theme: {
+      primary: '#10B981',
+      secondary: '#059669',
+      accent: '#D1FAE5',
+      darkMode: true
+    },
+    layout: {
+      sidebarWidth: 80,
+      headerHeight: 40,
+      tabHeight: 32
+    },
+    features: {
+      search: true,
+      notifications: true,
+      darkMode: true,
+      tabs: true,
+      breadcrumbs: true
+    }
+  },
+  
+  i18n: {
+    defaultLocale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+      en: {
+        common: {
+          search: 'Search products...',
+          loading: 'Loading...',
+          error: 'An error occurred',
+          success: 'Success',
+          cancel: 'Cancel',
+          confirm: 'Confirm',
+          save: 'Save',
+          delete: 'Delete',
+          edit: 'Edit',
+          view: 'View'
+        },
+        auth: {
+          login: 'Sign In',
+          logout: 'Sign Out',
+          email: 'Email',
+          password: 'Password',
+          forgotPassword: 'Forgot Password?',
+          changePassword: 'Change Password',
+          loginSuccess: 'Welcome back!',
+          loginError: 'Login failed'
+        }
+      }
+    }
+  },
+  
+  features: {
+    fileUpload: true,
+    export: true,
+    import: true,
+    realTimeNotifications: true,
+    websocket: true
+  }
+}

package/src/config/examples/generic.config.ts

@@ -0,0 +1,132 @@
+/**
+ * Generic Business Configuration Example
+ * Example configuration for a standard business application
+ */
+
+import type { AppConfig } from '../app.config'
+
+export const genericConfig: Partial<AppConfig> = {
+  name: 'Business Management System',
+  version: '1.0.0',
+  description: 'A comprehensive business management platform',
+  
+  branding: {
+    logo: '/img/brand/logo.svg',
+    logoAlt: 'Business Logo',
+    favicon: '/favicon.ico',
+    primaryColor: '#3B82F6',
+    secondaryColor: '#1D4ED8',
+    companyName: 'Your Company',
+    companyUrl: 'https://yourcompany.com'
+  },
+  
+  api: {
+    baseUrl: import.meta.env.VITE_API_URL || 'https://api.yourcompany.com/v1',
+    timeout: 30000,
+    retryAttempts: 3,
+    endpoints: {
+      auth: {
+        login: '/auth/login',
+        logout: '/auth/logout',
+        refresh: '/auth/refresh',
+        forgotPassword: '/auth/forgot-password',
+        changePassword: '/auth/change-password',
+        info: '/auth/me',
+        status: '/auth/status',
+        init: '/auth/init',
+        captcha: '/auth/captcha'
+      },
+      notifications: {
+        unreadCount: '/notifications/unread-count',
+        list: '/notifications'
+      },
+      media: {
+        upload: '/media/upload',
+        delete: '/media'
+      }
+    }
+  },
+  
+  auth: {
+    tokenKey: 'business.user.token',
+    userKey: 'business.user.name',
+    organizationKey: 'business.user.organization',
+    defaultRedirect: '/dashboard',
+    ssoEnabled: false,
+    captchaEnabled: false,
+    otpEnabled: false,
+    passwordPolicy: {
+      minLength: 6,
+      requireUppercase: false,
+      requireLowercase: false,
+      requireNumbers: false,
+      requireSpecialChars: false
+    }
+  },
+  
+  organization: {
+    levels: ['user', 'manager', 'admin', 'superadmin'],
+    defaultLevel: 'user',
+    superAdminLevel: 'superadmin'
+  },
+  
+  ui: {
+    theme: {
+      primary: '#3B82F6',
+      secondary: '#1D4ED8',
+      accent: '#EFF6FF',
+      darkMode: false
+    },
+    layout: {
+      sidebarWidth: 80,
+      headerHeight: 40,
+      tabHeight: 32
+    },
+    features: {
+      search: true,
+      notifications: false,
+      darkMode: false,
+      tabs: true,
+      breadcrumbs: true
+    }
+  },
+  
+  i18n: {
+    defaultLocale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+      en: {
+        common: {
+          search: 'Search...',
+          loading: 'Loading...',
+          error: 'An error occurred',
+          success: 'Success',
+          cancel: 'Cancel',
+          confirm: 'Confirm',
+          save: 'Save',
+          delete: 'Delete',
+          edit: 'Edit',
+          view: 'View'
+        },
+        auth: {
+          login: 'Login',
+          logout: 'Logout',
+          email: 'Email',
+          password: 'Password',
+          forgotPassword: 'Forgot Password?',
+          changePassword: 'Change Password',
+          loginSuccess: 'Login successful',
+          loginError: 'Login failed'
+        }
+      }
+    }
+  },
+  
+  features: {
+    fileUpload: true,
+    export: true,
+    import: false,
+    realTimeNotifications: false,
+    websocket: false
+  }
+}

package/src/config/menu.config.ts

@@ -0,0 +1,149 @@
+/**
+ * Menu Configuration
+ * Configurable menu system for the framework
+ */
+
+import type { AppConfig } from './app.config'
+
+export interface MenuItem {
+  id: string
+  name: string
+  url?: string
+  icon?: string
+  iconSize?: number
+  iconType?: 'svg' | 'lucide'
+  hasData?: boolean
+  connectApi?: boolean
+  checked?: boolean
+  finished?: boolean
+  visible?: boolean
+  keyword?: string
+  version?: string
+  type?: 'header' | 'menu'
+  submenu?: MenuItem[]
+  orgLevels?: string[]
+  permissions?: string[]
+  order?: number
+}
+
+export interface MenuConfig {
+  items: MenuItem[]
+  searchEnabled: boolean
+  historyEnabled: boolean
+  maxHistoryItems: number
+  defaultOpenItems: string[]
+}
+
+export const createMenuConfig = (appConfig: AppConfig): MenuConfig => {
+  return {
+    items: [
+      {
+        id: 'dashboard',
+        name: 'Dashboard',
+        icon: 'LayoutDashboard',
+        order: 1,
+        submenu: [
+          {
+            id: 'dashboard-home',
+            name: 'Dashboard',
+            url: '/',
+            orgLevels: appConfig.organization.levels,
+            order: 1
+          }
+        ]
+      }
+    ],
+    searchEnabled: appConfig.ui.features.search,
+    historyEnabled: true,
+    maxHistoryItems: 5,
+    defaultOpenItems: ['dashboard']
+  }
+}
+
+export const defaultMenuConfig: MenuConfig = {
+  items: [
+    {
+      id: 'dashboard',
+      name: 'Dashboard',
+      icon: 'LayoutDashboard',
+      order: 1,
+      submenu: [
+        {
+          id: 'dashboard-home',
+          name: 'Dashboard',
+          url: '/',
+          order: 1
+        }
+      ]
+    }
+  ],
+  searchEnabled: true,
+  historyEnabled: true,
+  maxHistoryItems: 5,
+  defaultOpenItems: ['dashboard']
+}
+
+export const useMenuConfig = () => {
+  let menuConfig: MenuConfig = { ...defaultMenuConfig }
+  
+  const setMenuConfig = (config: MenuConfig) => {
+    menuConfig = config
+  }
+  
+  const getMenuConfig = (): MenuConfig => {
+    return menuConfig
+  }
+  
+  const getMenuItems = (): MenuItem[] => {
+    return menuConfig.items.sort((a, b) => (a.order || 0) - (b.order || 0))
+  }
+  
+  const getMenuByOrgLevel = (orgLevel: string): MenuItem[] => {
+    return menuConfig.items
+      .map(item => ({
+        ...item,
+        submenu: item.submenu?.filter(sub => 
+          !sub.orgLevels || 
+          sub.orgLevels.includes(orgLevel) || 
+          orgLevel === menuConfig.items.find(i => i.id === 'superadmin')?.id
+        )
+      }))
+      .filter(item => item.submenu && item.submenu.length > 0)
+  }
+  
+  const searchMenu = (query: string, orgLevel?: string): MenuItem[] => {
+    const items = orgLevel ? getMenuByOrgLevel(orgLevel) : menuConfig.items
+    const qlower = query.toLowerCase()
+    
+    return items
+      .map(item => {
+        const headerFound = item.name.toLowerCase().includes(qlower) || 
+          (item.keyword || '').toLowerCase().includes(qlower)
+        
+        if (headerFound) {
+          return item
+        }
+        
+        const filteredSubmenu = item.submenu?.filter(sub => 
+          sub.name.toLowerCase().includes(qlower) || 
+          (sub.keyword || '').toLowerCase().includes(qlower)
+        )
+        
+        if (filteredSubmenu && filteredSubmenu.length > 0) {
+          return { ...item, submenu: filteredSubmenu }
+        }
+        
+        return null
+      })
+      .filter((item): item is MenuItem => item !== null)
+  }
+  
+  return {
+    menuConfig,
+    setMenuConfig,
+    getMenuConfig,
+    getMenuItems,
+    getMenuByOrgLevel,
+    searchMenu
+  }
+}

package/src/config/my-app.config.ts

@@ -0,0 +1,134 @@
+/**
+ * My App Configuration
+ * Example configuration for a new application using this framework
+ */
+
+import type { AppConfig } from './app.config'
+
+export const myAppConfig: Partial<AppConfig> = {
+  name: 'DASI UI',
+  version: '1.0.0',
+  description: 'Dasi UI Framework Template built with Vue.js',
+  
+  branding: {
+    logo: '/src/assets/dasi.png',
+    logoAlt: 'Dasi UI Logo',
+    favicon: '/favicon.ico',
+    primaryColor: '#3B82F6',
+    secondaryColor: '#1D4ED8',
+    companyName: 'DASI UI',
+    companyUrl: 'https://dasi-ui.com',
+    loginBackgroundDay: '/src/assets/login-day.png',
+    loginBackgroundNight: '/src/assets/login-night.png'
+  },
+  
+  api: {
+    baseUrl: import.meta.env.VITE_API_URL || 'http://localhost:8080/api/v1',
+    timeout: 30000,
+    retryAttempts: 3,
+    endpoints: {
+      auth: {
+        login: '/auth/login',
+        logout: '/auth/logout',
+        refresh: '/auth/refresh',
+        forgotPassword: '/auth/forgot-password',
+        changePassword: '/auth/change-password',
+        info: '/auth/me',
+        status: '/auth/status',
+        init: '/auth/init',
+        captcha: '/auth/captcha'
+      },
+      notifications: {
+        unreadCount: '/notifications/unread-count',
+        list: '/notifications'
+      },
+      media: {
+        upload: '/media/upload',
+        delete: '/media'
+      }
+    }
+  },
+  
+  auth: {
+    tokenKey: 'myapp.user.token',
+    userKey: 'myapp.user.name',
+    organizationKey: 'myapp.user.organization',
+    defaultRedirect: '/dashboard',
+    ssoEnabled: false,
+    captchaEnabled: false,
+    otpEnabled: false,
+    passwordPolicy: {
+      minLength: 6,
+      requireUppercase: false,
+      requireLowercase: false,
+      requireNumbers: false,
+      requireSpecialChars: false
+    }
+  },
+  
+  organization: {
+    levels: ['user', 'manager', 'admin', 'superadmin'],
+    defaultLevel: 'user',
+    superAdminLevel: 'superadmin'
+  },
+  
+  ui: {
+    theme: {
+      primary: '#3B82F6',
+      secondary: '#1D4ED8',
+      accent: '#EFF6FF',
+      darkMode: false
+    },
+    layout: {
+      sidebarWidth: 80,
+      headerHeight: 40,
+      tabHeight: 32
+    },
+    features: {
+      search: true,
+      notifications: false,
+      darkMode: false,
+      tabs: true,
+      breadcrumbs: true
+    }
+  },
+  
+  i18n: {
+    defaultLocale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+      en: {
+        common: {
+          search: 'Search...',
+          loading: 'Loading...',
+          error: 'An error occurred',
+          success: 'Success',
+          cancel: 'Cancel',
+          confirm: 'Confirm',
+          save: 'Save',
+          delete: 'Delete',
+          edit: 'Edit',
+          view: 'View'
+        },
+        auth: {
+          login: 'Login',
+          logout: 'Logout',
+          email: 'Email',
+          password: 'Password',
+          forgotPassword: 'Forgot Password?',
+          changePassword: 'Change Password',
+          loginSuccess: 'Login successful',
+          loginError: 'Login failed'
+        }
+      }
+    }
+  },
+  
+  features: {
+    fileUpload: true,
+    export: true,
+    import: false,
+    realTimeNotifications: false,
+    websocket: false
+  }
+}

package/src/config/test-config.ts

@@ -0,0 +1,32 @@
+/**
+ * Configuration Test
+ * Test script to verify configuration system is working
+ */
+
+import { useAppConfig } from '@/composables/useAppConfig'
+import { myAppConfig } from './my-app.config'
+
+export const testConfiguration = () => {
+  
+  const { 
+    config, 
+    isConfigLoaded, 
+    configError,
+    companyName,
+    primaryColor,
+    apiBaseUrl,
+    tokenKey,
+    organizationLevels,
+    logo,
+    appName,
+    appVersion
+  } = useAppConfig()
+
+}
+
+// Auto-run test in development
+if (import.meta.env.DEV) {
+  setTimeout(() => {
+    testConfiguration()
+  }, 2000)
+}