wakeb-composables

45+ reusable Vue 3 composables for Wakeb projects — TypeScript, RTL-aware, and i18n ready.

📖 Full Documentation →

Install

npm install wakeb-composables

Requirements

| Peer dependency | Version | Required | |---|---|---| | vue | ^3.0.0 | ✅ | | vue-router | ^4.0.0 | optional | | vue-i18n | ^9.0.0 | optional | | vuetify | ^3.0.0 | optional | | sweetalert2 | ^11.0.0 | optional | | date-fns | ^3.0.0 | optional | | moment + moment-hijri | ^2.29.0 | optional | | crypto-js | ^4.0.0 | optional | | laravel-echo + pusher-js | — | optional |

Quick Setup

Create a plugin file and call registerWakebComposables() once before your router:

// src/plugins/wakeb-composables.js
import { registerWakebComposables } from 'wakeb-composables'
import { useBreadCrumbStore } from '@/stores/breadCrumb'
import { useEnumsStore } from '@/stores/enums'
import {
  handleErrors, resetSchemaValues,
  transformSchemaToObject, updateSchemaValues,
} from '@/utils/formDataHandler'

const storeModules  = import.meta.glob('/src/modules/*/stores/index.js')
const schemaModules = import.meta.glob('/src/modules/*/schema/index.js')
const configModules = import.meta.glob('/src/modules/*/config.js')

registerWakebComposables({
  storeModules,
  schemaModules,
  configModules,
  formHelpers: { handleErrors, resetSchemaValues, transformSchemaToObject, updateSchemaValues },
  async loadHelpers({ enums = [], models = [], configs = [] } = {}) {
    const store = useEnumsStore()
    await Promise.allSettled([
      enums.length   && store.getHelpEnums(enums),
      models.length  && store.getHelpModels(models),
      configs.length && store.getHelpConfigs(configs),
    ].filter(Boolean))
  },
  async applyBreadcrumbs({ folder, itemKey }) {
    const loader = configModules[`/src/modules/${folder}/config.js`]
    if (!loader) return
    const mod = await loader()
    const cfg = typeof mod.getDataEntryConfig === 'function'
      ? mod.getDataEntryConfig(itemKey) : mod.default
    if (Array.isArray(cfg?.breadcrumbs))
      useBreadCrumbStore().setBreadcrumbs(cfg.breadcrumbs)
  },
})

// src/main.js
import '@/plugins/wakeb-composables'  // before router

Registering Project Composables

Add your own composables to the registry — in bulk or one by one:

import { registerWakebComposables, registerComposable } from 'wakeb-composables'
import { useLogo } from '@/composables/useLogo'
import { useTheme } from '@/composables/useTheme'

// Option 1 — batch
registerWakebComposables({ composables: { useLogo, useTheme } })

// Option 2 — individual (safe to call anywhere, anytime)
registerComposable('useLogo', useLogo)

Retrieve them anywhere:

import { useComposable } from 'wakeb-composables'

const useLogo = useComposable('useLogo')

What's Included

App & UI

useAppSettings · useBreadcrumbs · useIsDark · useItemColor · useToast · useAlert · useResizableSidebar · useImageZoom · useOnClickOutside · useTeleport · useTextTruncator · useChildButtonRefs · useSound

Data & CRUD

useLookupPage · useModuleConfig · useModuleStore · useTableActions · useNestedLocation · useAxiosFetch · useModalFromQuery

Dates & Time

useDateRangePresets · useDateConverterToNow · useDateTimeFormat · useDateTimeFormatter · useHijriDate · useTimer

i18n & Locale

useArabicConverter · useAutoTranslate · useDirection · useKeyTypeCheck · useLanguageSwitcher · useLocaleDirection · useLocaleWatcher · useNumberConverter

Forms & Validation

useValidation · useVariableHandler · useFileUpload · useInitials

Storage & Security

storage · useCookies · useCryptoService

Media & Real-time

useVoiceRecorder · useMarkdown · useLaravelEcho · useFormatFileSize

Highlights

useLookupPage — Full CRUD in one call

const {
  STORE, schema, headers, actions,
  isShowModal, isCreate, modalTitle, addEditLoading,
  getItems, addRow, editRow, viewRow,
  submitForm, deleteRow, toggleActiveRow,
} = await useLookupPage({ itemKey: 'users' })

storage — LocalStorage wrapper

import { storage } from 'wakeb-composables'

storage.set('token', 'abc123')
storage.set({ mode: 'dark', locale: 'ar' })

const token = storage.get('token')
storage.remove('token')

useAlert — SweetAlert2 helpers

import { showAlert, confirmDelete } from 'wakeb-composables'

showAlert({ title: 'Saved!', type: 'success' })

const ok = await confirmDelete({ title: 'Delete User?', locale: 'ar' })
if (ok) await deleteUser(id)

useToast — Lightweight toast

import { useToast } from 'wakeb-composables'

useToast({ message: 'Done!', type: 'success' })

Tree Shaking

The package is fully tree-shakeable ("sideEffects": false). Only the composables you import are included in your bundle.

License

MIT © Kerolos Zakaria