@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/composables/useAppConfig.ts

@@ -1,332 +0,0 @@
-/**
- * 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/template/src/composables/useDarkMode.ts

@@ -1,71 +0,0 @@
-// 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/template/src/config/app.config.ts

@@ -1,318 +0,0 @@
-/**
- * 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