@dasidev/dasi-ui 1.0.0

package/src/composables/useAppConfig.ts

@@ -0,0 +1,332 @@
+/**
+ * App Configuration Composable
+ * Provides reactive access to application configuration
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useAppConfig as useAppConfigCore, type AppConfig } from '@/config/app.config'
+import { useMenuConfig } from '@/config/menu.config'
+import { useThemeConfig } from '@/config/theme.config'
+import { myAppConfig } from '@/config/my-app.config'
+
+export const useAppConfig = () => {
+  const { config, setConfig, getConfig, getConfigValue } = useAppConfigCore()
+  const { setMenuConfig, getMenuConfig, getMenuItems, getMenuByOrgLevel, searchMenu } = useMenuConfig()
+  const { setThemeConfig, getThemeConfig, getColor, generateCSSVariables } = useThemeConfig()
+  
+  // Make config reactive
+  const reactiveConfig = ref(getConfig())
+  
+  // Check if config is loaded - config is considered loaded if it has meaningful data
+  // Since we now use myAppConfig as default, config should always be available
+  const isConfigLoaded = computed(() => {
+    const currentConfig = getConfig()
+    // Config is loaded if it has a name and it's not the base template name
+    // Also check if branding exists (means config was properly initialized)
+    return !!(
+      currentConfig?.name && 
+      currentConfig.name !== 'Vue Framework Template' &&
+      currentConfig.branding?.companyName
+    )
+  })
+  
+  const configError = ref<string | null>(null)
+  
+  // Initialize configuration
+  const initializeConfig = async (customConfig?: Partial<AppConfig>) => {
+    try {
+      // Use myAppConfig as default if no custom config provided
+      const configToUse = customConfig || myAppConfig
+      
+      // Load configuration
+      if (configToUse) {
+        setConfig(configToUse)
+      }
+      
+      // Load configuration from localStorage if available
+      const savedConfig = localStorage.getItem('app.config')
+      if (savedConfig) {
+        const parsedConfig = JSON.parse(savedConfig)
+        setConfig(parsedConfig)
+      }
+      
+      // Load configuration from environment variables
+      const currentConfig = getConfig()
+      const envConfig: Partial<AppConfig> = {
+        api: {
+          baseUrl: import.meta.env.VITE_API_URL || currentConfig.api.baseUrl,
+          endpoints: currentConfig.api.endpoints
+        },
+        branding: {
+          logo: currentConfig.branding.logo,
+          companyName: import.meta.env.VITE_COMPANY_NAME || currentConfig.branding.companyName,
+          primaryColor: import.meta.env.VITE_PRIMARY_COLOR || currentConfig.branding.primaryColor
+        }
+      }
+      
+      setConfig(envConfig)
+      
+      // Get updated config after all changes
+      const finalConfig = getConfig()
+      
+      // Initialize menu configuration
+      setMenuConfig({
+        items: finalConfig.ui.features.search ? getMenuItems() : [],
+        searchEnabled: finalConfig.ui.features.search,
+        historyEnabled: true,
+        maxHistoryItems: 5,
+        defaultOpenItems: ['dashboard']
+      })
+      
+      // Initialize theme configuration
+      setThemeConfig({
+        colors: {
+          primary: finalConfig.branding.primaryColor,
+          primaryHover: finalConfig.branding.secondaryColor || finalConfig.branding.primaryColor,
+          primaryActive: finalConfig.ui.theme.accent || '#e8f1fb',
+          secondary: finalConfig.branding.secondaryColor,
+          accent: finalConfig.ui.theme.accent,
+          background: '#ffffff',
+          surface: '#f8f9fa',
+          text: '#4D5E80',
+          textSecondary: '#6c757d',
+          border: '#dee2e6',
+          error: '#dc3545',
+          warning: '#ffc107',
+          success: '#28a745',
+          info: '#17a2b8'
+        },
+        darkMode: {
+          enabled: finalConfig.ui.theme.darkMode,
+          colors: {
+            background: '#0a0a0a',
+            surface: '#111111',
+            text: '#cccccc',
+            textSecondary: '#999999',
+            border: '#151515'
+          }
+        }
+      })
+      
+      configError.value = null
+      
+      // Update reactive config
+      reactiveConfig.value = getConfig()
+    } catch (error) {
+      configError.value = error instanceof Error ? error.message : 'Failed to load configuration'
+      console.error('Configuration initialization failed:', error)
+    }
+  }
+  
+  // Save configuration to localStorage
+  const saveConfig = () => {
+    try {
+      localStorage.setItem('app.config', JSON.stringify(getConfig()))
+    } catch (error) {
+      console.error('Failed to save configuration:', error)
+    }
+  }
+  
+  // Reset configuration to defaults
+  const resetConfig = () => {
+    localStorage.removeItem('app.config')
+    initializeConfig()
+  }
+  
+  // Computed properties for easy access with null checks
+  const appName = computed(() => reactiveConfig.value?.name || 'Loading...')
+  const logoAlt = computed(() => reactiveConfig.value?.branding?.logoAlt || 'Logo Alt')
+  const appVersion = computed(() => reactiveConfig.value?.version || '1.0.0')
+  const companyName = computed(() => reactiveConfig.value?.branding?.companyName || 'Loading...')
+  const primaryColor = computed(() => reactiveConfig.value?.branding?.primaryColor || '#3B82F6')
+  const logo = computed(() => reactiveConfig.value?.branding?.logo || '/img/brand/logo.svg')
+  const loginBackgroundDay = computed(() => reactiveConfig.value?.branding?.loginBackgroundDay || '/src/assets/login-day.png')
+  const loginBackgroundNight = computed(() => reactiveConfig.value?.branding?.loginBackgroundNight || '/src/assets/login-night.png')
+  
+  // API configuration
+  const apiBaseUrl = computed(() => reactiveConfig.value?.api?.baseUrl || 'http://localhost:3000/api')
+  const apiEndpoints = computed(() => reactiveConfig.value?.api?.endpoints || {
+    auth: {
+      login: '/auth/login',
+      logout: '/auth/logout',
+      refresh: '/auth/refresh',
+      forgotPassword: '/auth/forgot-password',
+      changePassword: '/auth/change-password',
+      info: '/auth/info',
+      status: '/auth/status',
+      init: '/auth/init',
+      captcha: '/auth/captcha'
+    },
+    notifications: {
+      unreadCount: '/notifications/unread-count',
+      list: '/notifications'
+    },
+    media: {
+      upload: '/media/upload',
+      delete: '/media'
+    }
+  })
+  
+  // Authentication configuration
+  const authConfig = computed(() => reactiveConfig.value?.auth || {
+    tokenKey: 'app.user.token',
+    userKey: 'app.user.name',
+    organizationKey: 'app.user.organization',
+    defaultRedirect: '/',
+    ssoEnabled: false,
+    captchaEnabled: false,
+    otpEnabled: false,
+    passwordPolicy: {
+      minLength: 6,
+      requireUppercase: false,
+      requireLowercase: false,
+      requireNumbers: false,
+      requireSpecialChars: false
+    }
+  })
+  const tokenKey = computed(() => reactiveConfig.value?.auth?.tokenKey || 'app.user.token')
+  const userKey = computed(() => reactiveConfig.value?.auth?.userKey || 'app.user.name')
+  const organizationKey = computed(() => reactiveConfig.value?.auth?.organizationKey || 'app.user.organization')
+  
+  // Organization configuration
+  const organizationLevels = computed(() => reactiveConfig.value?.organization?.levels || ['user', 'admin', 'superadmin'])
+  const defaultOrgLevel = computed(() => reactiveConfig.value?.organization?.defaultLevel || 'user')
+  const superAdminLevel = computed(() => reactiveConfig.value?.organization?.superAdminLevel || 'superadmin')
+  
+  // UI configuration
+  const uiConfig = computed(() => reactiveConfig.value?.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
+    }
+  })
+  const themeConfig = computed(() => reactiveConfig.value?.ui?.theme || {
+    primary: '#3B82F6',
+    secondary: '#1D4ED8',
+    accent: '#EFF6FF',
+    darkMode: false
+  })
+  const layoutConfig = computed(() => reactiveConfig.value?.ui?.layout || {
+    sidebarWidth: 80,
+    headerHeight: 40,
+    tabHeight: 32
+  })
+  const features = computed(() => reactiveConfig.value?.ui?.features || {
+    search: true,
+    notifications: false,
+    darkMode: false,
+    tabs: true,
+    breadcrumbs: true
+  })
+  
+  // Localization
+  const locale = computed(() => reactiveConfig.value?.i18n?.defaultLocale || 'en')
+  const messages = computed(() => reactiveConfig.value?.i18n?.messages || {})
+  
+  // Features
+  const enabledFeatures = computed(() => reactiveConfig.value?.features || {
+    fileUpload: true,
+    export: true,
+    import: false,
+    realTimeNotifications: false,
+    websocket: false
+  })
+  
+  // Watch for configuration changes and save to localStorage
+  watch(
+    () => getConfig(),
+    (newConfig) => {
+      if (isConfigLoaded.value) {
+        saveConfig()
+        reactiveConfig.value = newConfig
+      }
+    },
+    { deep: true }
+  )
+  
+  // Watch reactiveConfig to keep it in sync
+  watch(
+    () => getConfig(),
+    (newConfig) => {
+      reactiveConfig.value = newConfig
+    },
+    { immediate: true }
+  )
+  
+  return {
+    // State
+    isConfigLoaded,
+    configError,
+    
+    // Configuration
+    config: computed(() => reactiveConfig.value),
+    appName,
+    appVersion,
+    companyName,
+    primaryColor,
+    logo,
+    logoAlt,
+    loginBackgroundDay,
+    loginBackgroundNight,
+    
+    // API
+    apiBaseUrl,
+    apiEndpoints,
+    
+    // Authentication
+    authConfig,
+    tokenKey,
+    userKey,
+    organizationKey,
+    
+    // Organization
+    organizationLevels,
+    defaultOrgLevel,
+    superAdminLevel,
+    
+    // UI
+    uiConfig,
+    themeConfig,
+    layoutConfig,
+    features,
+    
+    // Localization
+    locale,
+    messages,
+    
+    // Features
+    enabledFeatures,
+    
+    // Methods
+    initializeConfig,
+    saveConfig,
+    resetConfig,
+    setConfig,
+    getConfigValue,
+    
+    // Menu
+    getMenuConfig,
+    getMenuItems,
+    getMenuByOrgLevel,
+    searchMenu,
+    
+    // Theme
+    getThemeConfig,
+    getColor,
+    generateCSSVariables
+  }
+}

package/src/composables/useDarkMode.ts

@@ -0,0 +1,71 @@
+// composables/useDarkMode.ts
+import { ref, onMounted, watch } from 'vue'
+
+const isDark = ref<boolean>(false)
+const isInitialized = ref<boolean>(false)
+const followSystem = ref<boolean>(true) 
+
+export function useDarkMode() {
+  const updateDarkMode = (dark: boolean) => {
+    if (dark) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  const toggleDarkMode = () => {
+    followSystem.value = false 
+    isDark.value = !isDark.value
+    localStorage.setItem('darkMode', JSON.stringify(isDark.value))
+    localStorage.setItem('followSystem', 'false')
+  }
+
+  const resetToSystem = () => {
+    followSystem.value = true
+    localStorage.removeItem('darkMode')
+    localStorage.setItem('followSystem', 'true')
+    
+    isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+
+  const initializeDarkMode = () => {
+    if (isInitialized.value) return
+    
+    const savedFollowSystem = localStorage.getItem('followSystem')
+    const savedDarkMode = localStorage.getItem('darkMode')
+    
+    if (savedFollowSystem === 'false' && savedDarkMode !== null) {
+      followSystem.value = false
+      isDark.value = JSON.parse(savedDarkMode)
+    } else {
+      followSystem.value = true
+      isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+    
+    isInitialized.value = true
+  }
+
+  watch(isDark, updateDarkMode, { immediate: true })
+
+  onMounted(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = (e: MediaQueryListEvent) => {
+      if (followSystem.value) {
+        isDark.value = e.matches
+      }
+    }
+    
+    mediaQuery.addEventListener('change', handleChange)
+    
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  })
+
+  return {
+    isDark,
+    followSystem,
+    toggleDarkMode,
+    resetToSystem,
+    initializeDarkMode
+  }
+}

package/src/config/app.config.ts

@@ -0,0 +1,318 @@
+/**
+ * Application Configuration
+ * Centralized configuration for the framework template
+ */
+
+import { myAppConfig } from './my-app.config'
+
+export interface AppConfig {
+  // Application Identity
+  name: string
+  version: string
+  description?: string
+  
+  // Branding
+  branding: {
+    logo: string
+    logoAlt?: string
+    favicon?: string
+    primaryColor: string
+    secondaryColor?: string
+    companyName: string
+    companyUrl?: string
+    loginBackgroundDay?: string
+    loginBackgroundNight?: string
+  }
+  
+  // API Configuration
+  api: {
+    baseUrl: string
+    timeout?: number
+    retryAttempts?: number
+    endpoints: {
+      auth: {
+        login: string
+        logout: string
+        refresh: string
+        forgotPassword: string
+        changePassword: string
+        info: string
+        status: string
+        init: string
+        captcha: string
+      }
+      notifications: {
+        unreadCount: string
+        list: string
+      }
+      media: {
+        upload: string
+        delete: string
+      }
+    }
+  }
+  
+  // Authentication
+  auth: {
+    tokenKey: string
+    userKey: string
+    organizationKey: string
+    defaultRedirect: string
+    ssoEnabled: boolean
+    ssoUrl?: string
+    captchaEnabled: boolean
+    otpEnabled: boolean
+    passwordPolicy: {
+      minLength: number
+      requireUppercase: boolean
+      requireLowercase: boolean
+      requireNumbers: boolean
+      requireSpecialChars: boolean
+    }
+  }
+  
+  // Organization & Permissions
+  organization: {
+    levels: string[]
+    defaultLevel?: string
+    superAdminLevel?: string
+  }
+  
+  // UI Configuration
+  ui: {
+    theme: {
+      primary: string
+      secondary?: string
+      accent?: string
+      darkMode: boolean
+    }
+    layout: {
+      sidebarWidth: number
+      headerHeight: number
+      tabHeight: number
+    }
+    features: {
+      search: boolean
+      notifications: boolean
+      darkMode: boolean
+      tabs: boolean
+      breadcrumbs: boolean
+    }
+  }
+  
+  // Localization
+  i18n: {
+    defaultLocale: string
+    fallbackLocale: string
+    messages: Record<string, any>
+  }
+  
+  // Features
+  features: {
+    fileUpload: boolean
+    export: boolean
+    import: boolean
+    realTimeNotifications: boolean
+    websocket: boolean
+  }
+}
+
+// Base default configuration (fallback values)
+const baseDefaultConfig: AppConfig = {
+  name: 'Vue Framework Template',
+  version: '1.0.0',
+  description: 'A configurable Vue.js framework template',
+  
+  branding: {
+    logo: '/img/brand/logo.svg',
+    logoAlt: 'Application Logo',
+    favicon: '/favicon.ico',
+    primaryColor: '#2671D9',
+    secondaryColor: '#297df0',
+    companyName: 'Your Company',
+    companyUrl: 'https://yourcompany.com',
+    loginBackgroundDay: '/src/assets/login-day.png',
+    loginBackgroundNight: '/src/assets/login-night.png'
+  },
+  
+  api: {
+    baseUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000/api',
+    timeout: 30000,
+    retryAttempts: 3,
+    endpoints: {
+      auth: {
+        login: '/auth/login',
+        logout: '/auth/logout',
+        refresh: '/user/refresh-token',
+        forgotPassword: '/auth/forgotpassword',
+        changePassword: '/auth/changepassword',
+        info: '/auth/info',
+        status: '/auth/status',
+        init: '/auth/login/init',
+        captcha: '/auth/captcha/init'
+      },
+      notifications: {
+        unreadCount: '/notif/unreadCount',
+        list: '/notif/list'
+      },
+      media: {
+        upload: '/media',
+        delete: '/media'
+      }
+    }
+  },
+  
+  auth: {
+    tokenKey: 'app.user.token',
+    userKey: 'app.user.name',
+    organizationKey: 'app.user.organization',
+    defaultRedirect: '/',
+    ssoEnabled: false,
+    captchaEnabled: true,
+    otpEnabled: true,
+    passwordPolicy: {
+      minLength: 8,
+      requireUppercase: true,
+      requireLowercase: true,
+      requireNumbers: true,
+      requireSpecialChars: false
+    }
+  },
+  
+  organization: {
+    levels: ['user', 'admin', 'superadmin'],
+    defaultLevel: 'user',
+    superAdminLevel: 'superadmin'
+  },
+  
+  ui: {
+    theme: {
+      primary: '#2671D9',
+      secondary: '#297df0',
+      accent: '#e8f1fb',
+      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...',
+          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: true,
+    realTimeNotifications: false,
+    websocket: false
+  }
+}
+
+// Deep merge helper function
+function deepMerge(target: AppConfig, source: Partial<AppConfig>): AppConfig {
+  const output = { ...target } as any
+  
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach(key => {
+      const sourceValue = (source as any)[key]
+      const targetValue = (target as any)[key]
+      
+      if (isObject(sourceValue) && isObject(targetValue) && !Array.isArray(sourceValue) && !Array.isArray(targetValue)) {
+        output[key] = deepMergeObject(targetValue, sourceValue)
+      } else if (sourceValue !== undefined) {
+        output[key] = sourceValue
+      }
+    })
+  }
+  
+  return output as AppConfig
+}
+
+// Helper for merging nested objects (not full AppConfig)
+function deepMergeObject(target: Record<string, any>, source: Record<string, any>): Record<string, any> {
+  const output = { ...target }
+  
+  Object.keys(source).forEach(key => {
+    const sourceValue = source[key]
+    const targetValue = target[key]
+    
+    if (isObject(sourceValue) && isObject(targetValue) && !Array.isArray(sourceValue) && !Array.isArray(targetValue)) {
+      output[key] = deepMergeObject(targetValue, sourceValue)
+    } else if (sourceValue !== undefined) {
+      output[key] = sourceValue
+    }
+  })
+  
+  return output
+}
+
+function isObject(item: any): item is Record<string, any> {
+  return item && typeof item === 'object' && !Array.isArray(item)
+}
+
+// Default configuration - merges myAppConfig with base defaults
+export const defaultConfig: AppConfig = deepMerge(baseDefaultConfig, myAppConfig)
+
+// Configuration instance
+let appConfig: AppConfig = { ...defaultConfig }
+
+export const useAppConfig = () => {
+  const setConfig = (config: Partial<AppConfig>) => {
+    appConfig = { ...appConfig, ...config }
+  }
+  
+  const getConfig = (): AppConfig => {
+    return appConfig
+  }
+  
+  const getConfigValue = <T>(path: string): T => {
+    return path.split('.').reduce((obj: any, key) => obj?.[key], appConfig) as T
+  }
+  
+  return {
+    config: appConfig,
+    setConfig,
+    getConfig,
+    getConfigValue
+  }
+}
+
+export default appConfig