pgo-uiux2 1.0.0

package/src/pgo-components/directives/tooltip-directive.ts

@@ -0,0 +1,393 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import { watch } from 'vue'
+import { globalRtl } from '../lib/core/rtl/rtl.ts'
+import { useLanguageSelected } from '../lib/componentConfig.js'
+import { useI18n } from '../lib/i18n/useI18n.js'
+
+export type Placement = 'top' | 'bottom' | 'left' | 'right'
+
+export interface TooltipOptions {
+  text?: string | Object
+  placement?: Placement
+  arrow?: boolean
+  openOnHover?: boolean
+  openOnFocus?: boolean
+  openOnClick?: boolean
+  showDelay?: number
+  hideDelay?: number
+  offset?: { x?: number; y?: number }
+  disabled?: boolean
+}
+
+interface TooltipState {
+  options: TooltipOptions
+  tooltipEl: HTMLElement | null
+  arrowEl: HTMLElement | null
+  showTimer: number | null
+  hideTimer: number | null
+  open: boolean
+  handlers: {
+    mouseover?: (e: MouseEvent) => void
+    mouseout?: (e: MouseEvent) => void
+    focusin?: (e: Event) => void
+    focusout?: (e: Event) => void
+    click?: (e: Event) => void
+    docClick?: (e: MouseEvent) => void
+    keydown?: (e: KeyboardEvent) => void
+  }
+  lastTrigger: 'hover' | 'focus' | 'click' | 'manual' | null
+  classModifiers: string[]
+}
+
+function normalizeOptions(binding: DirectiveBinding<string | TooltipOptions>): TooltipOptions {
+  const v = binding.value
+  const isObj = typeof v === 'object' && v !== null
+  
+  const hasOptionKeys = isObj && (
+    'text' in v ||
+    'placement' in v || 
+    'arrow' in v || 
+    'openOnHover' in v || 
+    'showDelay' in v || 
+    'hideDelay' in v ||
+    'disabled' in v
+  )
+  
+  const text = typeof v === 'string' 
+    ? v 
+    : hasOptionKeys && 'text' in v
+      ? (v as TooltipOptions).text
+      : hasOptionKeys
+        ? 'default tooltip'
+        : v
+  
+  const base: TooltipOptions = {
+    text: text,
+    placement: hasOptionKeys && (v as TooltipOptions).placement ? (v as TooltipOptions).placement : 'top',
+    arrow: hasOptionKeys && (v as TooltipOptions).arrow !== undefined ? !!(v as TooltipOptions).arrow : true,
+    openOnHover: hasOptionKeys && (v as TooltipOptions).openOnHover !== undefined ? !!(v as TooltipOptions).openOnHover : true,
+    openOnFocus: hasOptionKeys && (v as TooltipOptions).openOnFocus !== undefined ? !!(v as TooltipOptions).openOnFocus : true,
+    openOnClick: hasOptionKeys && (v as TooltipOptions).openOnClick !== undefined ? !!(v as TooltipOptions).openOnClick : false,
+    showDelay: hasOptionKeys && (v as TooltipOptions).showDelay !== undefined ? Number((v as TooltipOptions).showDelay) : 80,
+    hideDelay: hasOptionKeys && (v as TooltipOptions).hideDelay !== undefined ? Number((v as TooltipOptions).hideDelay) : 80,
+    offset: hasOptionKeys && (v as TooltipOptions).offset ? (v as TooltipOptions).offset! : { x: 0, y: 0 },
+    disabled: hasOptionKeys && (v as TooltipOptions).disabled !== undefined ? !!(v as TooltipOptions).disabled : false
+  }
+  return base
+}
+
+function applyTriggerModifiers(base: TooltipOptions, modifiers: Record<string, boolean>): TooltipOptions {
+  const hasPreset = !!(modifiers?.hover || modifiers?.click || modifiers?.focus)
+  if (!hasPreset) return base
+  return {
+    ...base,
+    openOnHover: !!modifiers.hover,
+    openOnClick: !!modifiers.click,
+    openOnFocus: !!modifiers.focus
+  }
+}
+
+function applyPlacementModifiers(base: TooltipOptions, modifiers: Record<string, boolean>): TooltipOptions {
+  if (!modifiers) return base
+  const order: Placement[] = ['top', 'bottom', 'left', 'right']
+  const chosen = order.find(p => (modifiers as any)[p])
+  if (!chosen) return base
+  return { ...base, placement: chosen }
+}
+
+function getClassModifiers(modifiers: Record<string, boolean> | undefined): string[] {
+  const supported = ['faruma']
+  const mods: string[] = []
+  if (!modifiers) return mods
+  for (const key of supported) {
+    if ((modifiers as any)[key]) mods.push(key)
+  }
+  return mods
+}
+
+function applyClassesToTooltip(state: TooltipState) {
+  if (!state.tooltipEl) return
+  const supported = ['faruma']
+  for (const key of supported) {
+    if (state.classModifiers.includes(key)) state.tooltipEl.classList.add(key)
+    else state.tooltipEl.classList.remove(key)
+  }
+}
+
+function getNormalizedPlacement(p: Placement): Placement {
+  const rtl = !!globalRtl.value
+  if (!rtl) return p
+  if (p === 'left') return 'right'
+  if (p === 'right') return 'left'
+  return p
+}
+
+function getLocalizedText(text: string | Object | undefined): string {
+  if (!text) return 'empty-tooltip'
+  return useLanguageSelected(text, '') || 'empty-tooltip'
+}
+
+function ensureTooltipEl(state: TooltipState) {
+  if (state.tooltipEl) return
+  const el = document.createElement('div')
+  el.className = 'vts-tooltip'
+  el.setAttribute('role', 'tooltip')
+  el.style.position = 'absolute'
+  el.style.top = '-9999px'
+  el.style.left = '-9999px'
+  el.style.visibility = 'hidden'
+  el.style.zIndex = 'var(--vts-z-tooltip, 1000)'
+
+  const content = document.createElement('div')
+  content.className = 'vts-tooltip-content'
+  
+  // Add faruma class if global language is dv
+  const { language } = useI18n()
+  if (language.value === 'dv' || state.classModifiers.includes('faruma')) {
+    content.classList.add('faruma')
+  }
+  
+  content.textContent = getLocalizedText(state.options.text)
+  el.appendChild(content)
+
+  if (state.options.arrow) {
+    const arrow = document.createElement('div')
+    arrow.className = 'vts-tooltip-arrow'
+    el.appendChild(arrow)
+    state.arrowEl = arrow
+  }
+
+  document.body.appendChild(el)
+  state.tooltipEl = el
+  applyClassesToTooltip(state)
+}
+
+function updateText(state: TooltipState) {
+  if (!state.tooltipEl) return
+  const content = state.tooltipEl.querySelector('.vts-tooltip-content') as HTMLElement | null
+  if (content) {
+    content.textContent = getLocalizedText(state.options.text)
+    
+    // Update faruma class based on global language
+    const { language } = useI18n()
+    if (language.value === 'dv' || state.classModifiers.includes('faruma')) {
+      content.classList.add('faruma')
+    } else {
+      content.classList.remove('faruma')
+    }
+  }
+}
+
+function computePosition(activator: HTMLElement, state: TooltipState) {
+  if (!state.tooltipEl) return
+  const tooltip = state.tooltipEl
+  const rect = activator.getBoundingClientRect()
+  const tooltipRect = tooltip.getBoundingClientRect()
+  const scrollX = window.scrollX || window.pageXOffset
+  const scrollY = window.scrollY || window.pageYOffset
+  const placement = getNormalizedPlacement(state.options.placement || 'top')
+  const offsetX = state.options.offset?.x ?? 0
+  const offsetY = state.options.offset?.y ?? 0
+  const gap = state.options.arrow ? 8 : 0
+
+  let top = 0
+  let left = 0
+
+  switch (placement) {
+    case 'top':
+      top = rect.top + scrollY - tooltipRect.height - gap - offsetY
+      left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX
+      break
+    case 'bottom':
+      top = rect.bottom + scrollY + gap + offsetY
+      left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX
+      break
+    case 'left':
+      top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY
+      left = rect.left + scrollX - tooltipRect.width - gap - offsetX
+      break
+    case 'right':
+      top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY
+      left = rect.right + scrollX + gap + offsetX
+      break
+  }
+
+  tooltip.style.top = `${top}px`
+  tooltip.style.left = `${left}px`
+  tooltip.style.visibility = ''
+
+  if (state.options.arrow && state.arrowEl) {
+    const size = 8
+    const arrow = state.arrowEl
+    arrow.style.width = `${size}px`
+    arrow.style.height = `${size}px`
+    switch (placement) {
+      case 'top':
+        arrow.style.bottom = '-4px'
+        arrow.style.left = '50%'
+        arrow.style.top = ''
+        arrow.style.right = ''
+        arrow.style.transform = 'translateX(-50%) rotate(225deg)'
+        break
+      case 'bottom':
+        arrow.style.top = '-4px'
+        arrow.style.left = '50%'
+        arrow.style.bottom = ''
+        arrow.style.right = ''
+        arrow.style.transform = 'translateX(-50%) rotate(45deg)'
+        break
+      case 'left':
+        arrow.style.right = '-4px'
+        arrow.style.top = '50%'
+        arrow.style.left = ''
+        arrow.style.bottom = ''
+        arrow.style.transform = 'translateY(-50%) rotate(135deg)'
+        break
+      case 'right':
+        arrow.style.left = '-4px'
+        arrow.style.top = '50%'
+        arrow.style.right = ''
+        arrow.style.bottom = ''
+        arrow.style.transform = 'translateY(-50%) rotate(315deg)'
+        break
+    }
+  }
+}
+
+function open(el: HTMLElement, state: TooltipState, source: TooltipState['lastTrigger'] = null) {
+  if (state.options.disabled) return
+  if (state.showTimer) window.clearTimeout(state.showTimer)
+  if (state.hideTimer) window.clearTimeout(state.hideTimer)
+  state.showTimer = window.setTimeout(() => {
+    state.lastTrigger = source
+    ensureTooltipEl(state)
+    state.open = true
+    computePosition(el, state)
+  }, state.options.showDelay ?? 80)
+}
+
+function close(state: TooltipState) {
+  if (state.showTimer) window.clearTimeout(state.showTimer)
+  if (state.hideTimer) window.clearTimeout(state.hideTimer)
+  state.hideTimer = window.setTimeout(() => {
+    state.open = false
+    if (state.tooltipEl) state.tooltipEl.style.visibility = 'hidden'
+    state.lastTrigger = null
+  }, state.options.hideDelay ?? 80)
+}
+
+function cleanup(el: HTMLElement, state: TooltipState) {
+  el.removeEventListener('mouseover', state.handlers.mouseover as EventListener)
+  el.removeEventListener('mouseout', state.handlers.mouseout as EventListener)
+  el.removeEventListener('focusin', state.handlers.focusin as EventListener)
+  el.removeEventListener('focusout', state.handlers.focusout as EventListener)
+  el.removeEventListener('click', state.handlers.click as EventListener)
+  document.removeEventListener('click', state.handlers.docClick as EventListener)
+  document.removeEventListener('keydown', state.handlers.keydown as EventListener)
+
+  // Stop watching language changes
+  if ((state as any).unwatchLanguage) {
+    ;(state as any).unwatchLanguage()
+  }
+
+  if (state.tooltipEl && state.tooltipEl.parentNode) {
+    state.tooltipEl.parentNode.removeChild(state.tooltipEl)
+  }
+
+  if (state.showTimer) window.clearTimeout(state.showTimer)
+  if (state.hideTimer) window.clearTimeout(state.hideTimer)
+
+  ;(el as any).__tooltipState = undefined
+}
+
+export const tooltipDirective: Directive<HTMLElement, string | TooltipOptions> = {
+  mounted(el, binding) {
+    const options = applyPlacementModifiers(
+      applyTriggerModifiers(normalizeOptions(binding), binding.modifiers || {}),
+      binding.modifiers || {}
+    )
+    
+    const state: TooltipState = {
+      options,
+      tooltipEl: null,
+      arrowEl: null,
+      showTimer: null,
+      hideTimer: null,
+      open: false,
+      handlers: {},
+      lastTrigger: null,
+      classModifiers: getClassModifiers(binding.modifiers)
+    }
+
+    // Watch for global language changes
+    const { language } = useI18n()
+    const unwatchLanguage = watch(language, () => {
+      updateText(state)
+      if (state.open) computePosition(el, state)
+    })
+
+    // Store unwatch function for cleanup
+    ;(state as any).unwatchLanguage = unwatchLanguage
+
+    // Event handlers
+    state.handlers.mouseover = (evt: MouseEvent) => {
+      if (!state.options.openOnHover) return
+      open(el, state, 'hover')
+    }
+
+    state.handlers.mouseout = (evt: MouseEvent) => {
+      if (!state.options.openOnHover) return
+      const related = evt.relatedTarget as Node | null
+      if (related && el.contains(related)) return
+      close(state)
+    }
+    state.handlers.focusin = () => state.options.openOnFocus && open(el, state, 'focus')
+    state.handlers.focusout = () => state.options.openOnFocus && close(state)
+    state.handlers.click = () => {
+      if (!state.options.openOnClick) return
+      if (state.open) close(state)
+      else open(el, state, 'click')
+    }
+    state.handlers.docClick = e => {
+      if (!state.open) return
+      const target = e.target as Node
+      if (state.tooltipEl && state.tooltipEl.contains(target)) return
+      if (el.contains(target)) return
+      close(state)
+    }
+    state.handlers.keydown = e => {
+      if (e.key === 'Escape') close(state)
+    }
+
+    el.addEventListener('mouseover', state.handlers.mouseover as EventListener)
+    el.addEventListener('mouseout', state.handlers.mouseout as EventListener)
+    el.addEventListener('focusin', state.handlers.focusin)
+    el.addEventListener('focusout', state.handlers.focusout)
+    el.addEventListener('click', state.handlers.click)
+    document.addEventListener('click', state.handlers.docClick as EventListener, { passive: true })
+    document.addEventListener('keydown', state.handlers.keydown as EventListener)
+
+    ;(el as any).__tooltipState = state
+  },
+  
+  updated(el, binding) {
+    const state = (el as any).__tooltipState as TooltipState | undefined
+    if (!state) return
+    state.options = applyPlacementModifiers(
+      applyTriggerModifiers(normalizeOptions(binding), binding.modifiers || {}),
+      binding.modifiers || {}
+    )
+    state.classModifiers = getClassModifiers(binding.modifiers)
+    updateText(state)
+    applyClassesToTooltip(state)
+    if (state.open) computePosition(el, state)
+  },
+  
+  unmounted(el) {
+    const state = (el as any).__tooltipState as TooltipState | undefined
+    if (!state) return
+    cleanup(el, state)
+  }
+}
+
+export default tooltipDirective

package/src/pgo-components/index.js

@@ -0,0 +1,96 @@
+// Import all components
+import './styles/global.css'
+import { createThemePlugin } from './plugins/theme-plugin.js'
+import { themes } from './tokens/index.js'
+import { useTheme as _useTheme } from './composables/useTheme.js'
+import { SnackBarPlugin } from './plugins/SnackBarPlugin.ts'
+import { useSnackBar } from './plugins/useSnackBar.js'
+import validationPlugin from './plugins/validation-plugin'
+import { tooltipDirective } from './directives/tooltip-directive.ts'
+import { i18nPlugin } from './lib/i18n/i18nPlugin'
+import api from './services/axios'
+
+
+//components
+import Footer from '../components/pgo/Footer.vue'
+import PApp from '../components/pgo/PApp.vue'
+import Button from '../components/pgo/Button.vue'
+import Card from '../components/pgo/Card.vue'
+import Select from '../components/pgo/inputs/Select.vue'
+import AppBar from '../components/pgo/AppBar.vue'
+import NavigationDrawer from '../components/pgo/NavigationDrawer.vue'
+import Main from '../components/pgo/Main.vue'
+import HeroIcon from '../components/pgo/HeroIcon.vue'
+import NavDrawer from '../components/pgo/NavDrawer.vue'
+import NavDrawerItem from '../components/pgo/NavDrawerItem.vue'
+import { drawerOpen } from '../pgo-components/lib/drawerState.ts'
+
+
+import {globalRtl} from '../pgo-components/lib/core/rtl/rtl.ts'
+import { setRtl } from '../pgo-components/lib/core/rtl/setRtl.ts'
+
+
+// Export components
+export {
+  Footer,
+  PApp,
+  Button,
+  Card,
+  Select,
+  AppBar,
+  NavigationDrawer,
+  Main,
+  HeroIcon,
+  NavDrawer,
+  NavDrawerItem,
+}
+
+// Export plugin
+export { i18nPlugin }
+export { globalRtl }
+export { setRtl }
+export { drawerOpen }
+// export { useSnackBar }
+export { _useTheme as useTheme }
+
+// create default plugin instance
+const defaultPlugin = createThemePlugin({ themes, defaultTheme: 'default', defaultVariant: 'light' })
+
+// attach to window for the demo/example app convenience
+if (typeof window !== 'undefined') {
+  window.__VTS_PLUGIN__ = defaultPlugin
+  window.__VTS_THEMES__ = Object.keys(themes)
+}
+
+// Export install function
+export default {
+  install(app) {
+    app.component('Button', Button)
+    app.component('Card', Card)
+    app.component('Select', Select)
+    app.component('PApp', PApp)
+    app.component('Footer', Footer)
+    app.component('AppBar', AppBar)
+    app.component('NavigationDrawer', NavigationDrawer)
+    app.component('Main', Main)
+    app.component('HeroIcon', HeroIcon)
+    app.component('NavDrawer', NavDrawer)
+    app.component('NavDrawerItem', NavDrawerItem)
+
+    app.provide('api', api)
+    app.provide('themes', themes)
+    app.provide('useTheme', _useTheme)
+    app.provide('globalRtl', globalRtl)
+    app.provide('setRtl', setRtl)
+    app.provide('drawerOpen', drawerOpen)
+    // app.provide('snackbar', useSnackBar())
+    // Do NOT use app.use(globalRtl) or app.use(setRtl)
+    app.use(i18nPlugin)
+    app.use(defaultPlugin)
+    app.use(SnackBarPlugin, { position: 'top-right', timeout: 5000 })
+    app.use(validationPlugin)
+    app.directive('tooltip', tooltipDirective)
+    // app.config.globalProperties.$snackbar = useSnackBar()
+  }
+}
+

package/src/pgo-components/lib/componentConfig.js

@@ -0,0 +1,147 @@
+import { computed, ref } from 'vue'
+import { useI18n } from './i18n/useI18n.js'
+
+export const sizes = {
+  xs: 'vts-text-caption vts-pl-2 vts-pr-2 vts-pt-1 vts-pb-1',
+  sm: 'vts-text-body-2 vts-pl-3 vts-pr-3 vts-pt-2 vts-pb-2',
+  md: 'vts-text-body-1 vts-pl-4 vts-pr-4 vts-pt-2 vts-pb-2',
+  lg: 'vts-text-body-1 vts-pl-5 vts-pr-5 vts-pt-3 vts-pb-3',
+  xl: 'vts-text-body-1 vts-pl-6 vts-pr-6 vts-pt-4 vts-pb-4',
+}
+
+export const iconSizes = {
+  xs: 15,
+  sm: 15,
+  md: 18,
+  lg: 20,
+  xl: 24,
+}
+
+export const roundedMap = {
+  none: 'vts-rounded-none',
+  sm: 'vts-rounded-sm',
+  md: 'vts-rounded-md',
+  lg: 'vts-rounded-lg',
+  xl: 'vts-rounded-xl',
+  '2xl': 'vts-rounded-2xl',
+  '3xl': 'vts-rounded-3xl',
+  full: 'vts-rounded-full',
+}
+
+export const colorMap = {
+  primary: {
+    contained: 'vts-bg-primary vts-text-on-primary vts-transition-colors vts-hover-bg-primary',
+    outlined: 'border vts-border-primary vts-text-primary bg-transparent transition-colors vts-hover-bg-surface',
+    text: 'vts-text-primary vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    tonal: 'vts-bg-surface vts-text-primary vts-transition-colors vts-hover-bg-surface'
+  },
+  success: {
+    contained: 'vts-bg-success vts-text-on-success vts-transition-colors vts-hover-bg-success',
+    outlined: 'vts-border vts-border-color vts-text-success vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    text: 'vts-text-success vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    tonal: 'vts-bg-surface vts-text-success vts-transition-colors vts-hover-bg-surface'
+  },
+  danger: {
+    contained: 'vts-bg-error vts-text-on-error vts-transition-colors vts-hover-bg-error',
+    outlined: 'vts-border vts-border-color vts-text-error vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    text: 'vts-text-error vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    tonal: 'vts-bg-surface vts-text-error vts-transition-colors vts-hover-bg-surface'
+  },
+  warning: {
+    contained: 'vts-bg-warning vts-text-on-warning vts-transition-colors vts-hover-bg-warning',
+    outlined: 'vts-border vts-border-color vts-text-warning vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    text: 'vts-text-warning vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    tonal: 'vts-bg-surface vts-text-warning vts-transition-colors vts-hover-bg-surface'
+  },
+  info: {
+    contained: 'vts-bg-info vts-text-on-info vts-transition-colors vts-hover-bg-info',
+    outlined: 'vts-border vts-border-color vts-text-info vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    text: 'vts-text-info vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    tonal: 'vts-bg-surface vts-text-info vts-transition-colors vts-hover-bg-surface'
+  },
+  gray: {
+    contained: 'vts-bg-surface-elevated vts-text vts-transition-colors vts-hover-bg-surface',
+    outlined: 'vts-border vts-border-color vts-text-secondary vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    text: 'vts-text-secondary vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
+    tonal: 'vts-bg-surface vts-text-secondary vts-transition-colors vts-hover-bg-surface'
+  },
+  disable: {
+    contained: 'vts-bg-disabled vts-text-on-disabled vts-transition-colors',
+    outlined: 'vts-border vts-border-color vts-text-disabled vts-bg-transparent vts-transition-colors',
+    text: 'vts-text-disabled vts-bg-transparent vts-transition-colors',
+    tonal: 'vts-bg-surface vts-text-disabled vts-transition-colors'
+  },
+  none: {
+    contained: '',
+    outlined: '',
+    text: '',
+    tonal: ''
+  },
+}
+
+export const spacing = {
+  none: '',
+  xs: 'vts-p-1',
+  sm: 'vts-p-2',
+  md: 'vts-p-4',
+  lg: 'vts-p-6',
+  xl: 'vts-p-8',
+}
+export const heights = {
+  none: '',
+  xs: 'vts-h-6',
+  sm: 'vts-h-8',
+  md: 'vts-h-10',
+  lg: 'vts-h-12',
+  xl: 'vts-h-14',
+}
+
+export const margins = {
+  none: '',
+  xs: 'vts-m-1',
+  sm: 'vts-m-2',
+  md: 'vts-m-4',
+  lg: 'vts-m-6',
+  xl: 'vts-m-8',
+}
+
+export const useLanguageSelected = (item, lang, label = null) => {
+
+    const { language } = useI18n()
+
+    console.log("useLanguageSelected called with item:", item['en'],);
+
+    const selectLanguage = computed(() => {
+        let Selected = ''
+        if (lang != ''){
+            Selected = lang
+        }
+        else {
+            Selected = language.value
+        }
+        return (Selected === 'dv') ? 'dv' : 'en'
+    })
+
+    // If item is a plain string, return it directly
+    if (typeof item === 'string' && item !== '') {
+      return item
+    }
+    
+    // If item is null or undefined, return empty string
+    if (!item) return ''
+    
+    // If item is not an object, return empty string
+    if (typeof item !== 'object') return ''
+    
+    const key = selectLanguage.value === 'dv' ? 'dv' : 'en'
+    
+    // If label parameter is provided, access nested structure: item[key][label]
+    // Otherwise, access direct structure: item[key]
+    if (label) {
+      return item[key]?.[label] ?? item['en']?.[label] ?? ''
+    }
+    
+    // console.log("here called with item:", item[key],);
+    // Try the key first, fallback to 'en' if not found
+    return item[key] ?? item['en'] ?? ''
+}