gypsy-crm-frontend-vu/directives/v-t.js

import { watch } from 'vue'
import { lang } from '@/composables/config'

const parseBinding = (val) => {
  if (Array.isArray(val)) {
    const [key, ...rest] = val
    if (rest.length === 0) return { key, param: undefined }
    if (rest.length === 1) return { key, param: rest[0] }
    return { key, param: rest }
  }
  return { key: val, param: undefined }
}

const updateElementText = (el, text) => {
  if (!el) return
  if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
    el.value = text
  } else if ('textContent' in el) {
    el.textContent = text
  } else if ('innerText' in el) {
    el.innerText = text
  }
}

const getI18n = () => {
  return typeof globalThis !== 'undefined' && globalThis.__i18n ? globalThis.__i18n : null
}

export default {
  mounted(el, binding) {
    const setState = (val) => {
      const { key, param } = parseBinding(val)
      el._vTKey = key
      el._vTParam = param
    }
    const update = () => {
      const i18n = getI18n()
      const key = el._vTKey
      const param = el._vTParam
      if (!key) return
      const text = i18n ? i18n.global.t(key, param) : String(key)
      updateElementText(el, text)
    }
    setState(binding.value)
    update()
    el._vTSetState = setState
    el._vTUpdate = update

    el._vTStopWatch = watch(() => lang.value, () => {
      const i18n = getI18n()
      if (i18n?.global?.locale?.value !== undefined) {
        i18n.global.locale.value = lang.value
      }
      update()
    }, { immediate: false, flush: 'sync' })
  },
  updated(el, binding) {
    if (el._vTSetState) el._vTSetState(binding.value)
    if (el._vTUpdate) el._vTUpdate()
  },
  unmounted(el) {
    if (el._vTStopWatch) {
      el._vTStopWatch()
      delete el._vTStopWatch
    }
    if (el._vTUpdate) delete el._vTUpdate
    if (el._vTSetState) delete el._vTSetState
    if (el._vTKey) delete el._vTKey
    if (el._vTParam) delete el._vTParam
  }
}