vlite3 0.1.0 → 0.1.2

package/src/composables/useKeyStroke.ts

@@ -1,291 +0,0 @@
-import { onMounted, onUnmounted, type Ref } from 'vue'
-
-type KeyStrokeHandler = (event: KeyboardEvent) => void
-type KeyStrokeOptions = {
-  target?: Ref<HTMLElement | null> | HTMLElement | null
-  preventDefault?: boolean
-  stopPropagation?: boolean
-  passive?: boolean
-  capture?: boolean
-}
-
-interface KeyStrokeComposable {
-  onKeyStroke: (
-    key: string | string[],
-    handler: KeyStrokeHandler,
-    options?: KeyStrokeOptions
-  ) => void
-  offKeyStroke: (key: string | string[], handler?: KeyStrokeHandler) => void
-  destroy: () => void
-}
-
-export const useKeyStroke = (): KeyStrokeComposable => {
-  const listeners = new Map<
-    string,
-    Set<{ handler: KeyStrokeHandler; options?: KeyStrokeOptions }>
-  >()
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    const key = normalizeKey(event.key)
-    const keyListeners = listeners.get(key)
-
-    if (keyListeners) {
-      keyListeners.forEach(({ handler, options }) => {
-        if (options?.preventDefault) event.preventDefault()
-        if (options?.stopPropagation) event.stopPropagation()
-        handler(event)
-      })
-    }
-  }
-
-  const normalizeKey = (key: string): string => {
-    return key.toLowerCase()
-  }
-
-  const getTarget = (
-    target?: Ref<HTMLElement | null> | HTMLElement | null
-  ): HTMLElement | Document => {
-    if (!target) return document
-    if ('value' in target) return target.value || document
-    return target || document
-  }
-
-  const onKeyStroke = (
-    key: string | string[],
-    handler: KeyStrokeHandler,
-    options: KeyStrokeOptions = {}
-  ) => {
-    const keys = Array.isArray(key) ? key : [key]
-    const target = getTarget(options.target)
-
-    keys.forEach((k) => {
-      const normalizedKey = normalizeKey(k)
-
-      if (!listeners.has(normalizedKey)) {
-        listeners.set(normalizedKey, new Set())
-        target.addEventListener('keydown', handleKeyDown, {
-          passive: options.passive ?? true,
-          capture: options.capture ?? false,
-        })
-      }
-
-      listeners.get(normalizedKey)!.add({ handler, options })
-    })
-  }
-
-  const offKeyStroke = (key: string | string[], handler?: KeyStrokeHandler) => {
-    const keys = Array.isArray(key) ? key : [key]
-
-    keys.forEach((k) => {
-      const normalizedKey = normalizeKey(k)
-      const keyListeners = listeners.get(normalizedKey)
-
-      if (keyListeners) {
-        if (handler) {
-          keyListeners.forEach((listener) => {
-            if (listener.handler === handler) {
-              keyListeners.delete(listener)
-            }
-          })
-        } else {
-          keyListeners.clear()
-        }
-
-        if (keyListeners.size === 0) {
-          listeners.delete(normalizedKey)
-          document.removeEventListener('keydown', handleKeyDown)
-        }
-      }
-    })
-  }
-
-  const destroy = () => {
-    document.removeEventListener('keydown', handleKeyDown)
-    listeners.clear()
-  }
-
-  onUnmounted(() => {
-    destroy()
-  })
-
-  return {
-    onKeyStroke,
-    offKeyStroke,
-    destroy,
-  }
-}
-
-export const useAdvancedKeyStroke = () => {
-  const pressedKeys = new Set<string>()
-  const listeners = new Map<string, Set<KeyStrokeHandler>>()
-  let keydownTimeout: number | null = null
-
-  const normalizeModifierKey = (key: string): string => {
-    const normalized = key.toLowerCase()
-    if (normalized === 'cmd' || normalized === 'meta' || normalized === 'metakey') return 'meta'
-    if (normalized === 'ctrl' || normalized === 'control' || normalized === 'controlkey')
-      return 'ctrl'
-    if (normalized === 'alt' || normalized === 'option' || normalized === 'altkey') return 'alt'
-    if (normalized === 'shift' || normalized === 'shiftkey') return 'shift'
-    return normalized
-  }
-
-  const parseKeyCombination = (keys: string): string[] => {
-    return keys
-      .toLowerCase()
-      .split('+')
-      .map((key) => key.trim())
-      .map(normalizeModifierKey)
-      .sort()
-  }
-
-  const getAlternativeCombinations = (keys: string[]): string[] => {
-    const combinations: string[] = [keys.join('+')]
-    const hasMeta = keys.includes('meta')
-    const hasCtrl = keys.includes('ctrl')
-
-    if (hasMeta) {
-      const altKeys = keys.map((k) => (k === 'meta' ? 'ctrl' : k))
-      combinations.push(altKeys.join('+'))
-    } else if (hasCtrl) {
-      const altKeys = keys.map((k) => (k === 'ctrl' ? 'meta' : k))
-      combinations.push(altKeys.join('+'))
-    }
-
-    return combinations
-  }
-
-  const getCurrentModifiers = (event: KeyboardEvent): string[] => {
-    const modifiers: string[] = []
-    if (event.metaKey) modifiers.push('meta')
-    if (event.ctrlKey) modifiers.push('ctrl')
-    if (event.altKey) modifiers.push('alt')
-    if (event.shiftKey) modifiers.push('shift')
-    return modifiers.sort()
-  }
-
-  const isExactMatch = (required: string[], current: string[]): boolean => {
-    if (required.length !== current.length) return false
-    return required.every((key, idx) => key === current[idx])
-  }
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    const key = normalizeModifierKey(event.key)
-
-    if (keydownTimeout) {
-      clearTimeout(keydownTimeout)
-      keydownTimeout = null
-    }
-
-    const currentModifiers = getCurrentModifiers(event)
-    const currentKeys = [...currentModifiers]
-
-    if (!['meta', 'ctrl', 'alt', 'shift'].includes(key)) {
-      currentKeys.push(key)
-    }
-
-    currentKeys.sort()
-
-    listeners.forEach((handlers, combination) => {
-      const requiredKeys = parseKeyCombination(combination)
-
-      if (isExactMatch(requiredKeys, currentKeys)) {
-        handlers.forEach((handler) => handler(event))
-      }
-    })
-
-    keydownTimeout = window.setTimeout(() => {
-      pressedKeys.clear()
-      keydownTimeout = null
-    }, 100)
-  }
-
-  const handleKeyUp = (event: KeyboardEvent) => {
-    const key = normalizeModifierKey(event.key)
-    pressedKeys.delete(key)
-
-    if (keydownTimeout) {
-      clearTimeout(keydownTimeout)
-      keydownTimeout = null
-    }
-  }
-
-  const handleBlur = () => {
-    pressedKeys.clear()
-    if (keydownTimeout) {
-      clearTimeout(keydownTimeout)
-      keydownTimeout = null
-    }
-  }
-
-  const handleVisibilityChange = () => {
-    if (document.hidden) {
-      pressedKeys.clear()
-      if (keydownTimeout) {
-        clearTimeout(keydownTimeout)
-        keydownTimeout = null
-      }
-    }
-  }
-
-  const attachListeners = () => {
-    window.addEventListener('keydown', handleKeyDown, { passive: false })
-    window.addEventListener('keyup', handleKeyUp, { passive: false })
-    window.addEventListener('blur', handleBlur, { passive: true })
-    document.addEventListener('visibilitychange', handleVisibilityChange, { passive: true })
-  }
-
-  const detachListeners = () => {
-    window.removeEventListener('keydown', handleKeyDown)
-    window.removeEventListener('keyup', handleKeyUp)
-    window.removeEventListener('blur', handleBlur)
-    document.removeEventListener('visibilitychange', handleVisibilityChange)
-
-    if (keydownTimeout) {
-      clearTimeout(keydownTimeout)
-      keydownTimeout = null
-    }
-  }
-
-  const onKeyStroke = (keys: string, handler: KeyStrokeHandler) => {
-    const keyCombo = parseKeyCombination(keys)
-    const combinations = getAlternativeCombinations(keyCombo)
-
-    combinations.forEach((combo) => {
-      if (!listeners.has(combo)) {
-        listeners.set(combo, new Set())
-      }
-      listeners.get(combo)!.add(handler)
-    })
-
-    if (listeners.size === combinations.length) attachListeners()
-  }
-
-  const offKeyStroke = (keys: string, handler?: KeyStrokeHandler) => {
-    const keyCombo = parseKeyCombination(keys)
-    const combinations = getAlternativeCombinations(keyCombo)
-
-    combinations.forEach((combo) => {
-      const comboListeners = listeners.get(combo)
-
-      if (comboListeners) {
-        if (handler) comboListeners.delete(handler)
-        else comboListeners.clear()
-
-        if (comboListeners.size === 0) listeners.delete(combo)
-      }
-    })
-
-    if (listeners.size === 0) detachListeners()
-  }
-
-  const destroy = () => {
-    detachListeners()
-    listeners.clear()
-    pressedKeys.clear()
-  }
-
-  onUnmounted(destroy)
-
-  return { onKeyStroke, offKeyStroke, destroy }
-}

package/src/composables/useNotifications.ts

@@ -1,206 +0,0 @@
-import { ref } from 'vue'
-
-export type ToastPosition =
-  | 'top-left'
-  | 'top-center'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-center'
-  | 'bottom-right'
-
-interface NotificationAction {
-  label: string
-  onClick: () => void
-}
-
-export interface Notification {
-  id: number
-  message: string
-  description?: string
-  type: 'success' | 'error' | 'info' | 'warning' | 'default'
-  duration?: number
-  action?: NotificationAction
-  position: ToastPosition
-  promise?: Promise<any>
-}
-
-export interface ToastOptions {
-  description?: string
-  duration?: number
-  action?: NotificationAction
-  position?: ToastPosition
-}
-
-export interface ToastConfig {
-  position?: ToastPosition
-  duration?: number
-  expand?: boolean
-  variant?: 'success' | 'error' | 'info' | 'warning' | 'default'
-}
-
-const globalConfig = ref<ToastConfig>({
-  position: 'bottom-right',
-  duration: 4000,
-  expand: false,
-  variant: 'default',
-})
-
-const notifications = ref<Notification[]>([])
-
-interface TimerData {
-  remaining: number
-  start: number
-  timerId?: ReturnType<typeof setTimeout>
-}
-
-const timeouts = new Map<number, TimerData>()
-
-let idCounter = 0
-
-function clearTimer(id: number) {
-  const timer = timeouts.get(id)
-  if (timer?.timerId) {
-    clearTimeout(timer.timerId)
-    timer.timerId = undefined
-  }
-}
-
-function createToast(
-  message: string,
-  type: Notification['type'] = 'default',
-  options: ToastOptions = {}
-) {
-  if (notifications.value.length > 20) {
-    const removed = notifications.value.shift()
-    if (removed) removeToast(removed.id)
-  }
-
-  const id = idCounter++
-  const finalDuration =
-    options.duration ?? globalConfig.value.duration ?? 4000
-  const finalPosition =
-    options.position ?? globalConfig.value.position ?? 'bottom-right'
-  const finalType = type === 'default' ? (globalConfig.value.variant ?? 'default') : type
-
-  const notification: Notification = {
-    id,
-    message,
-    description: options.description,
-    type: finalType,
-    duration: finalDuration,
-    action: options.action,
-    position: finalPosition,
-  }
-
-  notifications.value.push(notification)
-
-  if (finalDuration !== Infinity) {
-    const timerData: TimerData = {
-      remaining: finalDuration,
-      start: Date.now(),
-    }
-    timerData.timerId = setTimeout(() => {
-      removeToast(id)
-    }, finalDuration)
-    timeouts.set(id, timerData)
-  }
-
-  return id
-}
-
-function pauseTimers() {
-  timeouts.forEach((timer) => {
-    if (timer.timerId) {
-      clearTimeout(timer.timerId)
-      timer.timerId = undefined
-      timer.remaining -= Date.now() - timer.start
-    }
-  })
-}
-
-function resumeTimers() {
-  timeouts.forEach((timer, id) => {
-    if (!timer.timerId && timer.remaining > 0) {
-      timer.start = Date.now()
-      timer.timerId = setTimeout(() => {
-        removeToast(id)
-      }, timer.remaining)
-    }
-  })
-}
-
-function showToast(
-  message: string,
-  type?: Notification['type'],
-  options?: ToastOptions
-): number {
-  const finalType = type ?? 'default'
-  const finalOptions = options ?? {}
-  return createToast(message, finalType, finalOptions)
-}
-
-const toast = (message: string, options?: ToastOptions) =>
-  createToast(message, 'default', options)
-
-toast.success = (message: string, options?: ToastOptions) =>
-  createToast(message, 'success', options)
-
-toast.error = (message: string, options?: ToastOptions) =>
-  createToast(message, 'error', options)
-
-toast.info = (message: string, options?: ToastOptions) =>
-  createToast(message, 'info', options)
-
-toast.warning = (message: string, options?: ToastOptions) =>
-  createToast(message, 'warning', options)
-
-toast.promise = <T = any>(
-  promise: Promise<T>,
-  data: {
-    loading: string
-    success: (data: T) => string
-    error: string | ((err: any) => string)
-  }
-) => {
-  const id = createToast(data.loading, 'default', { duration: Infinity })
-
-  promise
-    .then((res) => {
-      removeToast(id)
-      toast.success(data.success(res))
-    })
-    .catch((err) => {
-      removeToast(id)
-      const errMsg =
-        typeof data.error === 'function' ? data.error(err) : data.error
-      toast.error(errMsg)
-    })
-
-  return promise
-}
-
-function removeToast(id: number) {
-  clearTimer(id)
-  timeouts.delete(id)
-  const index = notifications.value.findIndex((n) => n.id === id)
-  if (index !== -1) notifications.value.splice(index, 1)
-}
-
-function configure(config: ToastConfig) {
-  Object.assign(globalConfig.value, config)
-}
-
-export function useNotifications() {
-  return {
-    notifications,
-    showToast,
-    toast,
-    removeToast,
-    configure,
-    globalConfig,
-    pauseTimers,
-    resumeTimers,
-  }
-}
-
-export { showToast, toast, removeToast, configure, pauseTimers, resumeTimers }

package/src/composables/useTheme.ts

@@ -1,55 +0,0 @@
-import { onMounted, ref, watch } from 'vue'
-
-type Theme = 'light' | 'dark'
-
-const theme = ref<Theme>(loadTheme())
-
-function loadTheme(): Theme {
-  const savedTheme = localStorage.getItem('builto-theme')
-  if (savedTheme === 'light' || savedTheme === 'dark') {
-    return savedTheme
-  }
-
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    return 'dark'
-  }
-
-  return 'light'
-}
-
-function applyTheme(newTheme: Theme) {
-  document.documentElement.classList.remove('light', 'dark')
-  document.documentElement.classList.add(newTheme)
-}
-
-export function useTheme() {
-  watch(
-    theme,
-    (newTheme) => {
-      localStorage.setItem('builto-theme', newTheme)
-      applyTheme(newTheme)
-    },
-    { immediate: true }
-  )
-
-  if (window.matchMedia) {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-      if (!localStorage.getItem('builto-theme')) {
-        theme.value = e.matches ? 'dark' : 'light'
-      }
-    })
-  }
-
-  function toggleTheme() {
-    theme.value = theme.value === 'light' ? 'dark' : 'light'
-  }
-
-  onMounted(() => {
-    document.documentElement.classList.add('bg-body')
-  })
-
-  return {
-    theme,
-    toggleTheme,
-  }
-}

package/src/core/config.ts

@@ -1,37 +0,0 @@
-import { reactive, inject, type InjectionKey } from 'vue'
-import type { VLiteConfig } from '../types/config.type'
-
-/**
- * Unique symbol for injecting the VLite configuration.
- */
-export const VLITE_CONFIG_KEY: InjectionKey<VLiteConfig> = Symbol('vlite-config')
-
-/**
- * Default configuration state.
- */
-const defaultConfig: VLiteConfig = {
-  services: {},
-}
-
-/**
- * Global reactive configuration state.
- * This acts as a singleton fallback if inject() is used outside a component
- * or if the plugin wasn't installed (though installation is recommended).
- */
-export const configState = reactive<VLiteConfig>({ ...defaultConfig })
-
-/**
- * Helper to update the global configuration.
- */
-export function updateConfig(updates: Partial<VLiteConfig>) {
-  Object.assign(configState, updates)
-}
-
-/**
- * Composable to access the VLite configuration.
- * It attempts to inject from the Vue context first, falling back to the global singleton.
- */
-export function useVLiteConfig() {
-  return inject(VLITE_CONFIG_KEY, configState)
-}
-

package/src/core/index.ts

@@ -1,49 +0,0 @@
-import type { App } from 'vue'
-import { configState, VLITE_CONFIG_KEY } from './config'
-import type { VLiteConfig } from '../types/config.type'
-
-/**
- * Creates the VLite plugin instance.
- *
- * @example
- * // main.ts
- * import { createApp } from 'vue'
- * import { createVLite } from 'vlite3'
- *
- * const app = createApp(App)
- *
- * const vlite = createVLite({
- * services: {
- * upload: async (file) => {
- * // Custom API call here
- * const formData = new FormData()
- * formData.append('file', file)
- * const res = await axios.post('/api/upload', formData)
- * return res.data.url
- * }
- * }
- * })
- *
- * app.use(vlite)
- * app.mount('#app')
- */
-export function createVLite(options: VLiteConfig = {}) {
-  return {
-    install(app: App) {
-      // 1. Merge provided options into the reactive state
-      if (options) {
-        if (options.services) {
-          configState.services = { ...configState.services, ...options.services }
-        }
-      }
-
-      // 2. Provide the config to the application tree
-      app.provide(VLITE_CONFIG_KEY, configState)
-
-      // 3. Attach to globalProperties for Options API support (optional)
-      app.config.globalProperties.$vlite = configState
-    },
-  }
-}
-
-export * from './config'