pgo-ui 1.0.38 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "description": "A Vue 3 component library with PGO design system",
   "private": false,
   "type": "module",

package/src/components/pgo/DocumentViewer.vue

@@ -48,7 +48,7 @@
 
         <!-- Iframe PDF viewer -->
         <iframe
-          v-if="validatedSrc && open && !error"
+          v-if="src && open && !error"
           ref="iframeRef"
           :src="iframeSrc"
           class="w-full h-full border-0"
@@ -85,80 +85,19 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'loaded', 'error', 'close'])
 
-const open         = ref(props.modelValue)
-const iframeRef    = ref(null)
-const loading      = ref(true)
-const error        = ref(null)
-const validatedSrc = ref('')
-
-const DOCUMENT_TYPES = [
-  'application/pdf',
-  'image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml',
-  'text/plain',
-]
+const open      = ref(props.modelValue)
+const iframeRef = ref(null)
+const loading   = ref(true)
+const error     = ref(null)
 
 // Build iframe src — hide native toolbar so only our custom buttons are used
 const iframeSrc = computed(() => {
-  if (!validatedSrc.value) return ''
+  if (!props.src) return ''
   const params = ['toolbar=0', 'navpanes=0']
   if (props.initialPage > 1) params.push(`page=${props.initialPage}`)
-  return `${validatedSrc.value}#${params.join('&')}`
+  return `${props.src}#${params.join('&')}`
 })
 
-// ─── Validate source URL ──────────────────────────────────────────────────────
-
-function isValidUrl(str) {
-  if (/^https?:\/\//i.test(str)) return true
-  if (str.startsWith('/')) return true
-  try { return Boolean(new URL(str)) } catch { return false }
-}
-
-async function validateSrc(url) {
-  if (!url) {
-    error.value   = 'No document source provided'
-    loading.value = false
-    return
-  }
-
-  if (!isValidUrl(url)) {
-    error.value   = 'Invalid document URL'
-    loading.value = false
-    emit('error', error.value)
-    return
-  }
-
-  loading.value     = true
-  error.value       = null
-  validatedSrc.value = ''
-
-  try {
-    const res = await fetch(url, { method: 'HEAD' })
-
-    if (!res.ok) {
-      error.value = res.status === 404
-        ? 'Document not found'
-        : `Failed to load document (${res.status})`
-      loading.value = false
-      emit('error', error.value)
-      return
-    }
-
-    const contentType = (res.headers.get('content-type') || '').split(';')[0].trim().toLowerCase()
-    if (contentType && !DOCUMENT_TYPES.some(t => contentType.startsWith(t))) {
-      error.value   = `Unsupported file type: ${contentType}`
-      loading.value = false
-      emit('error', error.value)
-      return
-    }
-
-    validatedSrc.value = url
-  } catch {
-    error.value   = 'Unable to reach the document. Please check the URL or your connection.'
-    loading.value = false
-    emit('error', error.value)
-  }
-}
-
 // ─── Sync modelValue ──────────────────────────────────────────────────────────
 
 watch(() => props.modelValue, (val) => { open.value = val })
@@ -166,11 +105,11 @@ watch(() => props.modelValue, (val) => { open.value = val })
 watch(open, (val) => {
   emit('update:modelValue', val)
   if (val) {
-    validateSrc(props.src)
+    loading.value = true
+    error.value   = null
   } else {
-    loading.value      = false
-    error.value        = null
-    validatedSrc.value = ''
+    loading.value = false
+    error.value   = null
   }
 })
 
@@ -222,8 +161,9 @@ function printPdf() {
   }
 }
 
-watch(() => props.src, (url) => {
-  if (open.value) validateSrc(url)
+watch(() => props.src, () => {
+  loading.value = true
+  error.value   = null
 })
 
 defineExpose({ printPdf, downloadPdf })

package/src/components/pgo/Tooltip.vue

@@ -16,10 +16,10 @@
 
   <Teleport to="body">
     <div
-      v-show="isOpen"
+      v-show="isOpen && hasPositioned"
       :id="tooltipId"
       ref="tooltipRef"
-      class="vts-position-absolute vts-bg-surface-elevated vts-text vts-border vts-rounded-sm vts-elevation-2 vts-pt-2 vts-pb-2 vts-pl-3 vts-pr-3 vts-max-w-280"
+      class="vts-bg-surface-elevated vts-text vts-border vts-rounded-sm vts-elevation-2 vts-pt-2 vts-pb-2 vts-pl-3 vts-pr-3 vts-max-w-280 tooltip-container"
       role="tooltip"
       :class="[placementClass]"
       :style="tooltipStyles"
@@ -109,25 +109,23 @@
     const activator = activatorRef.value
     const tooltip = tooltipRef.value
     if (!activator || !tooltip) return
-    // Ensure the tooltip can be measured on first render
+
+    // Measure tooltip off-screen first
     if (!hasPositioned.value) {
       tooltipStyles.value = {
-        position: 'absolute',
+        position: 'fixed',
         top: '-9999px',
         left: '-9999px',
         visibility: 'hidden',
-        zIndex: 'var(--vts-z-tooltip, 1000)'
+        zIndex: 'var(--vts-z-tooltip, 1000)',
+        pointerEvents: 'none'
       }
-      // Force a reflow so getBoundingClientRect has correct size
       void tooltip.offsetHeight
     }
 
     const rect = activator.getBoundingClientRect()
     const tooltipRect = tooltip.getBoundingClientRect()
 
-    const scrollX = window.scrollX || window.pageXOffset
-    const scrollY = window.scrollY || window.pageYOffset
-
     let top = 0
     let left = 0
 
@@ -135,50 +133,71 @@
     const offsetY = props.offset?.y ?? 0
     const gap = props.arrow ? 8 : 0
 
+    // Position relative to viewport (fixed positioning)
     switch (normalizedPlacement.value) {
       case 'top':
-        top = rect.top + scrollY - tooltipRect.height - gap - offsetY
-        left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX
+        top = rect.top - tooltipRect.height - gap - offsetY
+        left = rect.left + 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
+        top = rect.bottom + gap + offsetY
+        left = rect.left + 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
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2 + offsetY
+        left = rect.left - tooltipRect.width - gap - offsetX
         break
       case 'right':
-        top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY
-        left = rect.right + scrollX + gap + offsetX
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2 + offsetY
+        left = rect.right + gap + offsetX
         break
     }
 
+    // Clamp to viewport so the tooltip never causes scrollbars
+    const viewW = document.documentElement.clientWidth
+    const viewH = document.documentElement.clientHeight
+    const pad = 8
+
+    left = Math.max(pad, Math.min(left, viewW - tooltipRect.width - pad))
+    top  = Math.max(pad, Math.min(top, viewH - tooltipRect.height - pad))
+
     tooltipStyles.value = {
-      position: 'absolute',
+      position: 'fixed',
       top: `${top}px`,
       left: `${left}px`,
       zIndex: 'var(--vts-z-tooltip, 1000)',
-      visibility: ''
+      visibility: '',
+      pointerEvents: 'auto'
     }
 
-    // Arrow positioning
+    // Arrow positioning — offset arrow to point at the activator center
     if (props.arrow) {
       const size = 8
       const common = { width: `${size}px`, height: `${size}px` }
+      const actCenterX = rect.left + rect.width / 2
+      const actCenterY = rect.top + rect.height / 2
+      const arrowMinEdge = 12
       switch (normalizedPlacement.value) {
-        case 'top':
-          arrowStyles.value = { ...common, bottom: `-4px`, left: '50%', transform: 'translateX(-50%) rotate(45deg)' }
+        case 'top': {
+          const ax = Math.max(arrowMinEdge, Math.min(actCenterX - left, tooltipRect.width - arrowMinEdge))
+          arrowStyles.value = { ...common, bottom: `-4px`, left: `${ax}px`, transform: 'translateX(-50%) rotate(45deg)' }
           break
-        case 'bottom':
-          arrowStyles.value = { ...common, top: `-4px`, left: '50%', transform: 'translateX(-50%) rotate(45deg)' }
+        }
+        case 'bottom': {
+          const ax = Math.max(arrowMinEdge, Math.min(actCenterX - left, tooltipRect.width - arrowMinEdge))
+          arrowStyles.value = { ...common, top: `-4px`, left: `${ax}px`, transform: 'translateX(-50%) rotate(45deg)' }
           break
-        case 'left':
-          arrowStyles.value = { ...common, right: `-4px`, top: '50%', transform: 'translateY(-50%) rotate(45deg)' }
+        }
+        case 'left': {
+          const ay = Math.max(arrowMinEdge, Math.min(actCenterY - top, tooltipRect.height - arrowMinEdge))
+          arrowStyles.value = { ...common, right: `-4px`, top: `${ay}px`, transform: 'translateY(-50%) rotate(45deg)' }
           break
-        case 'right':
-          arrowStyles.value = { ...common, left: `-4px`, top: '50%', transform: 'translateY(-50%) rotate(45deg)' }
+        }
+        case 'right': {
+          const ay = Math.max(arrowMinEdge, Math.min(actCenterY - top, tooltipRect.height - arrowMinEdge))
+          arrowStyles.value = { ...common, left: `-4px`, top: `${ay}px`, transform: 'translateY(-50%) rotate(45deg)' }
           break
+        }
       }
     }
 
@@ -278,4 +297,9 @@
 </script>
 
 <style scoped>
+.tooltip-container {
+  position: fixed;
+  pointer-events: none;
+  max-width: calc(100vw - 16px);
+}
 </style>

package/src/components/pgo/__Tooltip.vue

@@ -0,0 +1,281 @@
+<template>
+  <div
+    ref="activatorRef"
+    class="vts-d-inline-block"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @focusin="onFocusIn"
+    @focusout="onFocusOut"
+    @click="onClick"
+    :aria-describedby="tooltipId"
+    :aria-expanded="isOpen"
+    :aria-disabled="disabled ? 'true' : 'false'"
+  >
+    <slot name="activator" :props="activatorSlotProps"></slot>
+  </div>
+
+  <Teleport to="body">
+    <div
+      v-show="isOpen"
+      :id="tooltipId"
+      ref="tooltipRef"
+      class="vts-position-absolute vts-bg-surface-elevated vts-text vts-border vts-rounded-sm vts-elevation-2 vts-pt-2 vts-pb-2 vts-pl-3 vts-pr-3 vts-max-w-280"
+      role="tooltip"
+      :class="[placementClass]"
+      :style="tooltipStyles"
+      @keydown.esc.stop.prevent="close"
+    >
+      <div v-if="arrow" class="vts-position-absolute vts-bg-surface-elevated vts-border-t vts-border-s vts-border-color" :class="[placementClass]" :style="arrowStyles"></div>
+      <div class="vts-text-body-2">
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { globalRtl } from '../../pgo-components/lib/core/rtl/rtl'
+
+  // Props
+  interface Offset {
+    x?: number
+    y?: number
+  }
+
+  type Trigger = 'hover' | 'focus' | 'click' | 'manual'
+
+  type PlacementBase = 'top' | 'bottom' | 'left' | 'right'
+
+
+  const props = defineProps({
+    modelValue: { type: Boolean, default: undefined }, // controlled mode
+    openOnHover: { type: Boolean, default: true },
+    openOnFocus: { type: Boolean, default: true },
+    openOnClick: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    placement: { type: String as () => PlacementBase, default: 'top' },
+    offset: { type: Object as () => Offset, default: () => ({ x: 0, y: 0 }) },
+    arrow: { type: Boolean, default: true },
+    showDelay: { type: Number, default: 80 },
+    hideDelay: { type: Number, default: 80 },
+    teleport: { type: String, default: 'body' }
+  })
+
+  const emit = defineEmits(['update:modelValue', 'open', 'close'])
+
+  // State
+  const isControlled = computed(() => props.modelValue !== undefined)
+  const internalOpen = ref(false)
+  const isOpen = computed({
+    get: () => (isControlled.value ? !!props.modelValue : internalOpen.value),
+    set: (val: boolean) => {
+      if (props.disabled) return
+      if (isControlled.value) emit('update:modelValue', val)
+      else internalOpen.value = val
+    }
+  })
+
+  // Elements
+  const activatorRef = ref<HTMLElement | null>(null)
+  const tooltipRef = ref<HTMLElement | null>(null)
+
+  // IDs
+  const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 10)}`
+
+  // RTL
+  const isRtl = computed(() => globalRtl.value)
+
+  // Placement with RTL adjustment for left/right
+  const normalizedPlacement = computed<PlacementBase>(() => {
+    if (!isRtl.value) return props.placement
+    if (props.placement === 'left') return 'right'
+    if (props.placement === 'right') return 'left'
+    return props.placement
+  })
+
+  const placementClass = computed(() => `placement-${normalizedPlacement.value}`)
+
+  // Positioning
+  const tooltipStyles = ref<Record<string, string>>({})
+  const arrowStyles = ref<Record<string, string>>({})
+  const hasPositioned = ref(false)
+
+  // Track how tooltip was opened to coordinate closing behavior
+  type TriggerSource = 'hover' | 'focus' | 'click' | 'manual' | null
+  const lastTrigger = ref<TriggerSource>(null)
+
+  function computePosition() {
+    const activator = activatorRef.value
+    const tooltip = tooltipRef.value
+    if (!activator || !tooltip) return
+    // Ensure the tooltip can be measured on first render
+    if (!hasPositioned.value) {
+      tooltipStyles.value = {
+        position: 'absolute',
+        top: '-9999px',
+        left: '-9999px',
+        visibility: 'hidden',
+        zIndex: 'var(--vts-z-tooltip, 1000)'
+      }
+      // Force a reflow so getBoundingClientRect has correct size
+      void tooltip.offsetHeight
+    }
+
+    const rect = activator.getBoundingClientRect()
+    const tooltipRect = tooltip.getBoundingClientRect()
+
+    const scrollX = window.scrollX || window.pageXOffset
+    const scrollY = window.scrollY || window.pageYOffset
+
+    let top = 0
+    let left = 0
+
+    const offsetX = props.offset?.x ?? 0
+    const offsetY = props.offset?.y ?? 0
+    const gap = props.arrow ? 8 : 0
+
+    switch (normalizedPlacement.value) {
+      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
+    }
+
+    tooltipStyles.value = {
+      position: 'absolute',
+      top: `${top}px`,
+      left: `${left}px`,
+      zIndex: 'var(--vts-z-tooltip, 1000)',
+      visibility: ''
+    }
+
+    // Arrow positioning
+    if (props.arrow) {
+      const size = 8
+      const common = { width: `${size}px`, height: `${size}px` }
+      switch (normalizedPlacement.value) {
+        case 'top':
+          arrowStyles.value = { ...common, bottom: `-4px`, left: '50%', transform: 'translateX(-50%) rotate(45deg)' }
+          break
+        case 'bottom':
+          arrowStyles.value = { ...common, top: `-4px`, left: '50%', transform: 'translateX(-50%) rotate(45deg)' }
+          break
+        case 'left':
+          arrowStyles.value = { ...common, right: `-4px`, top: '50%', transform: 'translateY(-50%) rotate(45deg)' }
+          break
+        case 'right':
+          arrowStyles.value = { ...common, left: `-4px`, top: '50%', transform: 'translateY(-50%) rotate(45deg)' }
+          break
+      }
+    }
+
+    hasPositioned.value = true
+  }
+
+  // Open/close with delays
+  let showTimer: number | null = null
+  let hideTimer: number | null = null
+
+  function clearTimers() {
+    if (showTimer) {
+      window.clearTimeout(showTimer)
+      showTimer = null
+    }
+    if (hideTimer) {
+      window.clearTimeout(hideTimer)
+      hideTimer = null
+    }
+  }
+
+  function open(source: TriggerSource = null) {
+    if (props.disabled) return
+    clearTimers()
+    showTimer = window.setTimeout(async () => {
+      lastTrigger.value = source
+      isOpen.value = true
+      await nextTick()
+      computePosition()
+      emit('open')
+    }, props.showDelay)
+  }
+
+  function close() {
+    clearTimers()
+    hideTimer = window.setTimeout(() => {
+      isOpen.value = false
+      lastTrigger.value = null
+      hasPositioned.value = false
+      emit('close')
+    }, props.hideDelay)
+  }
+
+  // Triggers
+  const activatorSlotProps = computed(() => ({
+    open: (src?: TriggerSource) => open(src ?? 'manual'),
+    close,
+    isOpen: isOpen.value
+  }))
+
+  function onMouseEnter() {
+    if (props.openOnHover) open('hover')
+  }
+  function onMouseLeave() {
+    if (props.openOnHover) close()
+  }
+  function onFocusIn() {
+    if (props.openOnFocus) open('focus')
+  }
+  function onFocusOut() {
+    // Avoid immediate close on click-first interaction when openOnClick is enabled
+    if (props.openOnFocus && lastTrigger.value === 'focus') close()
+  }
+  function onClick() {
+    if (!props.openOnClick) return
+    if (isOpen.value) close()
+    else open('click')
+  }
+
+  // Outside click & escape
+  function onDocumentClick(e: MouseEvent) {
+    if (!isOpen.value) return
+    const target = e.target as Node
+    if (tooltipRef.value && tooltipRef.value.contains(target)) return
+    if (activatorRef.value && activatorRef.value.contains(target)) return
+    close()
+  }
+
+  function onDocumentKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') close()
+  }
+
+  onMounted(() => {
+    computePosition()
+    document.addEventListener('click', onDocumentClick, { passive: true })
+    document.addEventListener('keydown', onDocumentKeydown)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('click', onDocumentClick)
+    document.removeEventListener('keydown', onDocumentKeydown)
+  })
+
+  watch(isOpen, val => {
+    if (val) nextTick(computePosition)
+  })
+</script>
+
+<style scoped>
+</style>

package/src/components/pgo/forms/DynamicForm.vue

@@ -20,6 +20,7 @@
                 type="hidden"
             />
             <!-- Render grouped fields --> 
+            
              <!--    -->
             <template v-if="form.groups">
                 <template v-for="(group, id) in form.groups" :key="id">
@@ -123,7 +124,7 @@
     import { ref, computed, watch, defineAsyncComponent, inject, reactive, onMounted, nextTick } from 'vue'
     import Form from './Form.vue';
     import Modal from '../Modal.vue'
-    import { Banner } from '../index'
+    import { Banner, LabelField } from '../index'
     import { gridColsMap, columnSpansMap, useLanguageSelected, initializeFunctions } from '@/pgo-components/lib/componentConfig';
     
     const rules = inject('validationRules')
@@ -522,6 +523,10 @@
             map['file'] = defineAsyncComponent(() => import('../inputs/FileUpload.vue'))
             map['filefield'] = defineAsyncComponent(() => import('../inputs/FileUpload.vue'))
         }
+        if (usedTypes.has('label') || usedTypes.has('labelfield')) {
+            map['label'] = defineAsyncComponent(() => import('../inputs/LabelField.vue'))
+            map['labelfield'] = defineAsyncComponent(() => import('../inputs/LabelField.vue'))
+        }
 
         return map
     })

package/src/components/pgo/index.ts

@@ -22,6 +22,7 @@ import FileUpload from './inputs/FileUpload.vue'
 import FilterSection from './filters/FilterSection.vue'
 import Footer from './Footer.vue'
 import Form from './forms/Form.vue'
+import LabelField from './inputs/LabelField.vue'
 import LayoutContainer from './LayoutContainer.vue'
 import Main from './Main.vue'
 import Modal from './Modal.vue'
@@ -70,6 +71,7 @@ export {  Button, Card, HeroIcon,
     FilterSection,
     Footer,
     Form,
+    LabelField,
     LayoutContainer,
     Main,
     Modal,

package/src/components/pgo/inputs/LabelField.vue

@@ -2,10 +2,10 @@
   <div :class="['flex items-start gap-2', width, margin]">
     <!-- Label -->
     <span
-      v-if="computedLabel"
+      v-if="label"
       :class="['text-sm font-medium shrink-0', labelClass]"
     >
-      {{ computedLabel }}:
+      {{ useLanguageSelected(label, computedLang) }}:
     </span>
 
     <!-- Value -->
@@ -21,8 +21,8 @@ import { useLanguageSelected } from '../../../pgo-components/lib/componentConfig
 
 const props = defineProps({
   label:       { type: [String, Object], default: '' },
-  labelEn:     { type: String, default: '' },
-  labelDv:     { type: String, default: '' },
+  // labelEn:     { type: String, default: '' },
+  // labelDv:     { type: String, default: '' },
   value:       { type: [String, Number, Boolean, Object, Array], default: '' },
   placeholder: { type: String, default: '-' },
   width:       { type: String, default: 'w-full' },
@@ -35,14 +35,15 @@ const props = defineProps({
 
 const cardDir  = inject('parentDir', '')
 const cardLang = inject('parentLang', '')
+const { language } = inject('i18n')
 
-const computedLang = computed(() => props.lang || cardLang)
+const computedLang = computed(() => props.lang || cardLang || language.value || 'dv')
 
 const { selectedLabel } = useLanguageSelected(
   computed(() => ({
     label:   props.label,
-    labelEn: props.labelEn,
-    labelDv: props.labelDv,
+    // labelEn: props.labelEn,
+    // labelDv: props.labelDv,
   })),
   computedLang
 )