pgo-uiux2 1.0.0

package/src/pgo-components/plugins/theme-plugin.js

@@ -0,0 +1,114 @@
+import { reactive, readonly } from 'vue'
+import { themes } from '../tokens/index.js'
+
+const LOCAL_KEY = 'vts:theme'
+const MEDIA = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null
+
+function flattenTokens(obj, prefix = '') {
+  const out = {}
+  for (const k in obj) {
+    const val = obj[k]
+    const name = prefix ? `${prefix}-${k}` : k
+    if (val && typeof val === 'object') Object.assign(out, flattenTokens(val, name))
+    else out[name] = val
+  }
+  return out
+}
+
+export function createThemePlugin({
+  themes: themeMap = themes,
+  defaultTheme = 'default',
+  defaultVariant = 'system' // supports 'light' | 'dark' | 'system'
+} = {}) {
+  const state = reactive({
+    theme: defaultTheme,
+    variant: defaultVariant // 'system' or 'light' or 'dark'
+  })
+
+  function resolveVariant(variant) {
+    if (variant === 'system') {
+      if (MEDIA) return MEDIA.matches ? 'dark' : 'light'
+      return 'light'
+    }
+    return variant
+  }
+
+  function applyCssVars(themeName, resolvedVariant) {
+    const tokens = themeMap?.[themeName]?.[resolvedVariant]
+    if (!tokens) {
+      console.warn(`[vts] No tokens for ${themeName}/${resolvedVariant}`)
+      return
+    }
+    // also set a data-theme attribute for convenience/scoping
+    document.documentElement.setAttribute('data-theme', `${themeName}--${resolvedVariant}`)
+    // write CSS variables
+    const flat = flattenTokens(tokens)
+    Object.entries(flat).forEach(([k, v]) => {
+      if (v == null) return
+      const varName = `--vts-${k}`
+      document.documentElement.style.setProperty(varName, String(v))
+
+      // automatic component alias for component-level tokens
+      if (/^[a-z][a-zA-Z0-9]+-/.test(k)) {
+        const kebab = k.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+        document.documentElement.style.setProperty(`--${kebab}`, `var(--vts-${k})`)
+      }
+    })
+  }
+
+
+
+  function setTheme(themeName, variantName = defaultVariant, { persist = true } = {}) {
+    if (!themeMap[themeName]) {
+      throw new Error(`[vts] Unknown theme "${themeName}"`)
+    }
+    state.theme = themeName
+    state.variant = variantName
+    const resolved = resolveVariant(variantName)
+    applyCssVars(themeName, resolved)
+    if (persist) {
+      try {
+        localStorage.setItem(LOCAL_KEY, JSON.stringify({ theme: themeName, variant: variantName }))
+      } catch {}
+    }
+  }
+
+  // initialize
+  ;(function init() {
+    try {
+      const stored = JSON.parse(localStorage.getItem(LOCAL_KEY) || 'null')
+      if (stored?.theme) setTheme(stored.theme, stored.variant ?? defaultVariant, { persist: false })
+      else setTheme(defaultTheme, defaultVariant, { persist: false })
+    } catch (e) {
+      setTheme(defaultTheme, defaultVariant, { persist: false })
+    }
+
+    if (MEDIA) {
+      MEDIA.addEventListener('change', () => {
+        if (state.variant === 'system') {
+          const resolved = resolveVariant('system')
+          applyCssVars(state.theme, resolved)
+        }
+      })
+    }
+  })()
+
+  return {
+    install(app) {
+      app.provide('vts-theme', readonly(state))
+      app.config.globalProperties.$vts = {
+        get theme() {
+          return state.theme
+        },
+        get variant() {
+          return state.variant
+        },
+        setTheme
+      }
+    },
+    setTheme,
+    state: readonly(state),
+    themes: themeMap,
+    resolveVariant
+  }
+}

package/src/pgo-components/plugins/types.ts

@@ -0,0 +1,46 @@
+export type Variant = 'default' | 'success' | 'error' | 'warning' | 'info'
+
+export interface SnackAction {
+  label: string
+  onClick?: (payload?: any) => void
+}
+
+export interface SnackOptions {
+  id?: string
+  message?: string
+  variant?: Variant
+  timeout?: number
+  actions?: SnackAction[]
+  position?: string
+  transition?: string
+  closeOnClick?: boolean
+  pauseOnHover?: boolean
+  mode?: 'stack' | 'queue'
+  onClose?: () => void
+  color?: string
+  icon?: any
+  rtl?: boolean
+  meta?: any
+}
+
+export interface SnackInternal
+  extends Required<
+    Pick<
+      SnackOptions,
+      | 'id'
+      | 'message'
+      | 'variant'
+      | 'timeout'
+      | 'actions'
+      | 'position'
+      | 'transition'
+      | 'closeOnClick'
+      | 'pauseOnHover'
+      | 'mode'
+      | 'onClose'
+      | 'color'
+      | 'icon'
+      | 'rtl'
+      | 'meta'
+    >
+  > {}

package/src/pgo-components/plugins/useSnackBar.js

@@ -0,0 +1,11 @@
+import { inject } from 'vue'
+
+export function useSnackBar() {
+  const snackbar = inject('snackbar')
+
+  if (!snackbar) {
+    throw new Error('[useSnackBar] SnackBar plugin not installed')
+  }
+
+  return snackbar
+}

package/src/pgo-components/plugins/useSnackBar.ts

@@ -0,0 +1,21 @@
+import { inject } from 'vue'
+import type { SnackOptions } from './types.ts'
+
+export function useSnackBar() {
+  const api = inject('snackbar') as any
+
+  if (!api) {
+    throw new Error('[useSnackBar] SnackBar plugin not installed')
+  }
+
+  return api as {
+    show: (o: SnackOptions) => string
+    success: (m: string | SnackOptions, o?: Partial<SnackOptions>) => string
+    error: (m: string | SnackOptions, o?: Partial<SnackOptions>) => string
+    info: (m: string | SnackOptions, o?: Partial<SnackOptions>) => string
+    warning: (m: string | SnackOptions, o?: Partial<SnackOptions>) => string
+    close: (id?: string) => void
+    clear: () => void
+    state: any
+  }
+}

package/src/pgo-components/plugins/validation-plugin.js

@@ -0,0 +1,11 @@
+import validationRules from '../../validations/validationRules'
+
+export default {
+  install(app) {
+    // Make validation rules available globally via $rules
+    app.config.globalProperties.$rules = validationRules
+    
+    // Also provide them for Composition API
+    app.provide('validationRules', validationRules)
+  }
+}