pgo-uiux2 1.0.0

package/src/components/pgo/Avatar.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="avatar"
+    :class="[
+      sizeClass,
+      shapeClass,
+      bordered ? 'vts-border-sm vts-border-solid vts-border-color' : 'vts-border-0',
+      disabled ? 'avatar--disabled' : ''
+    ]"
+    :aria-label="ariaLabelComputed"
+  >
+    <template v-if="showImage">
+      <img
+        :src="src"
+        :alt="alt || ariaLabelComputed"
+        class="avatar-img"
+        @error="onImgError"
+      />
+    </template>
+    <template v-else>
+      <div class="avatar-fallback" aria-hidden="true">{{ initials }}</div>
+    </template>
+
+    <span v-if="status" class="avatar-status vts-border-md vts-border-solid" :class="`status--${status}`" aria-hidden="true" />
+
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type AvatarShape = 'circular' | 'rounded' | 'square'
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline'
+
+const props = defineProps<{
+  src?: string
+  alt?: string
+  text?: string
+  size?: AvatarSize
+  shape?: AvatarShape
+  bordered?: boolean
+  status?: AvatarStatus
+  disabled?: boolean
+  ariaLabel?: string
+}>()
+
+const imgError = ref(false)
+const showImage = computed(() => !!props.src && !imgError.value)
+
+function onImgError() {
+  imgError.value = true
+}
+
+function computeInitials(text?: string) {
+  if (!text) return '?'
+  const clean = text.trim()
+  if (!clean) return '?'
+  const parts = clean.split(/\s+/).filter(Boolean)
+  const first = parts[0]?.[0] || ''
+  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] : ''
+  return (first + last).toUpperCase()
+}
+
+const initials = computed(() => computeInitials(props.text))
+
+const sizeClass = computed(() => `avatar--${props.size || 'md'}`)
+const shapeClass = computed(() => {
+  const shape = props.shape || 'circular'
+  return `avatar-shape--${shape}`
+})
+
+const ariaLabelComputed = computed(() => props.ariaLabel || props.alt || props.text || 'Avatar')
+</script>
+
+<style scoped>
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vts-color-surfaceElevated);
+  color: var(--vts-color-text);
+  overflow: hidden;
+  user-select: none;
+}
+
+.avatar--disabled {
+  opacity: 0.6;
+  filter: grayscale(0.1);
+}
+
+/* Sizes */
+.avatar--xs { width: 24px; height: 24px; font-size: 0.75rem; }
+.avatar--sm { width: 32px; height: 32px; font-size: 0.75rem; }
+.avatar--md { width: 40px; height: 40px; font-size: 0.875rem; }
+.avatar--lg { width: 48px; height: 48px; font-size: 1rem; }
+.avatar--xl { width: 64px; height: 64px; font-size: 1.25rem; }
+
+/* Shapes */
+.avatar-shape--circular { border-radius: 9999px; }
+.avatar-shape--rounded { border-radius: var(--vts-radius-md); }
+.avatar-shape--square { border-radius: 0; }
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.avatar-fallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+/* Status dot */
+.avatar-status {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  /* border set via utilities; keep color here */
+  border-color: var(--vts-color-surfaceElevated);
+  box-shadow: 0 0 0 1px var(--vts-color-border);
+}
+
+.status--online { background-color: var(--vts-color-success, var(--vts-color-primary)); }
+.status--away { background-color: var(--vts-color-warning, var(--vts-color-primary)); }
+.status--busy { background-color: var(--vts-color-error, var(--vts-color-primary)); }
+.status--offline { background-color: var(--vts-color-border); }
+</style>

package/src/components/pgo/Banner.vue

@@ -0,0 +1,300 @@
+<template>
+  <transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="transform translate-y-[-100%] opacity-0"
+    enter-to-class="transform translate-y-0 opacity-100"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="transform translate-y-0 opacity-100"
+    leave-to-class="transform translate-y-[-100%] opacity-0"
+  >
+    <div
+      v-if="isVisible"
+      :class="bannerClasses"
+      role="alert"
+    >
+      <div :class="contentContainerClasses">
+        <!-- Icon/Prepend -->
+        <div v-if="$slots.prepend || icon" class="flex-shrink-0">
+          <slot name="prepend">
+            <component :is="iconComponent" v-if="icon" class="h-5 w-5" />
+          </slot>
+        </div>
+
+        <!-- Content -->
+        <div class="flex-1 min-w-0">
+          <!-- Title -->
+          <div v-if="title || $slots.title" :class="titleClasses">
+            <slot name="title">{{ title }}</slot>
+          </div>
+
+          <!-- Message -->
+          <div v-if="message || $slots.default" :class="messageClasses">
+            <slot>{{ message }}</slot>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div v-if="$slots.actions || closeable" class="flex items-center gap-2">
+          <slot name="actions" />
+          
+          <!-- Close Button -->
+          <button
+            v-if="closeable"
+            @click="close"
+            :class="closeButtonClasses"
+            aria-label="Close banner"
+          >
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Progress Bar (for auto-dismiss) -->
+      <div
+        v-if="timeout && showProgress"
+        :class="progressBarClasses"
+        :style="progressStyle"
+      ></div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { sizes, iconSizes, roundedMap, colorMap } from '../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: true },
+  title: { type: String, default: '' },
+  message: { type: String, default: '' },
+  color: { type: String, default: 'primary' },
+  variant: { type: String, default: 'contained' }, 
+  icon: { type: String, default: '' }, // info | success | warning | error | custom
+  closeable: { type: Boolean, default: true },
+  sticky: { type: Boolean, default: false },
+  position: { type: String, default: 'top' }, // top | bottom
+  timeout: { type: Number, default: 0 }, // Auto-dismiss after X ms (0 = no auto-dismiss)
+  showProgress: { type: Boolean, default: false },
+  rounded: { type: String, default: 'none' }, // none | sm | md | lg
+  elevation: { type: Boolean, default: true },
+  outlined: { type: Boolean, default: false },
+  dense: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'close', 'dismiss'])
+
+const isVisible = ref(props.modelValue)
+const progress = ref(100)
+let timeoutId = null
+let intervalId = null
+
+// Watch modelValue changes
+watch(() => props.modelValue, (val) => {
+  isVisible.value = val
+  if (val && props.timeout) {
+    startTimeout()
+  }
+})
+
+// Icon component mapping
+const iconComponent = computed(() => {
+  const icons = {
+    info: InfoIcon,
+    success: SuccessIcon,
+    warning: WarningIcon,
+    error: ErrorIcon,
+  }
+  return icons[props.icon] || null
+})
+
+// Banner classes
+const bannerClasses = computed(() => {
+  const base = [
+    'w-full relative',
+    props.sticky ? 'sticky z-45' : 'relative',
+  ]
+
+  // Position
+  if (props.sticky) {
+    base.push(props.position === 'bottom' ? 'bottom-0' : 'top-0')
+  }
+
+  // Variant colors
+  // const variantMap = {
+  //   primary: 'bg-primary border-primary text-white',
+  //   primaryLight: 'bg-primary/80 border-primary/15 text-primary',
+  //   default: 'bg-background border-border text-foreground',
+  //   info: 'bg-blue-50 border-blue-200 text-blue-900',
+  //   success: 'bg-green-50 border-green-200 text-green-900',
+  //   warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
+  //   error: 'bg-red-50 border-red-200 text-red-900',
+  // }
+
+  base.push(colorMap[props.color][props.variant])
+
+  // Border
+  if (props.outlined) {
+    base.push('border-t-4')
+  } else {
+    // base.push('border')
+  }
+
+  // Elevation
+  if (props.elevation) {
+    base.push('shadow-md')
+  }
+
+  // Rounded
+  const roundedMap = {
+    none: '',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+  }
+  base.push(roundedMap[props.rounded])
+
+  return base
+})
+
+// Content container classes
+const contentContainerClasses = computed(() => [
+  'flex items-start gap-3',
+  props.dense ? 'p-3 px-6' : 'p-4',
+])
+
+// Title classes
+const titleClasses = computed(() => [
+  'font-semibold',
+  props.dense ? 'text-sm' : 'text-base',
+])
+
+// Message classes
+const messageClasses = computed(() => [
+  props.dense ? 'text-xs' : 'text-sm',
+  props.title ? 'mt-1' : '',
+])
+
+// Close button classes
+const closeButtonClasses = computed(() => [
+  'flex-shrink-0 rounded-md p-1.5',
+  'hover:bg-black/5 dark:hover:bg-white/10',
+  'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'transition-colors',
+])
+
+// Progress bar classes
+const progressBarClasses = computed(() => {
+  const variantMap = {
+    default: 'bg-gray-400',
+    info: 'bg-blue-400',
+    success: 'bg-green-400',
+    warning: 'bg-yellow-400',
+    error: 'bg-red-400',
+  }
+  
+  return [
+    'absolute bottom-0 left-0 h-1 transition-all duration-100',
+    variantMap[props.variant]
+  ]
+})
+
+const progressStyle = computed(() => ({
+  width: `${progress.value}%`,
+}))
+
+// Methods
+const close = () => {
+  isVisible.value = false
+  emit('update:modelValue', false)
+  emit('close')
+  clearTimers()
+}
+
+const startTimeout = () => {
+  if (!props.timeout) return
+
+  clearTimers()
+
+  const startTime = Date.now()
+  const duration = props.timeout
+
+  if (props.showProgress) {
+    intervalId = setInterval(() => {
+      const elapsed = Date.now() - startTime
+      progress.value = Math.max(0, 100 - (elapsed / duration) * 100)
+    }, 10)
+  }
+
+  timeoutId = setTimeout(() => {
+    close()
+    emit('dismiss')
+  }, props.timeout)
+}
+
+const clearTimers = () => {
+  if (timeoutId) {
+    clearTimeout(timeoutId)
+    timeoutId = null
+  }
+  if (intervalId) {
+    clearInterval(intervalId)
+    intervalId = null
+  }
+  progress.value = 100
+}
+
+// Lifecycle
+onMounted(() => {
+  if (isVisible.value && props.timeout) {
+    startTimeout()
+  }
+})
+
+onBeforeUnmount(() => {
+  clearTimers()
+})
+
+// Expose methods
+defineExpose({ close })
+
+// Icon Components
+const InfoIcon = {
+  template: `
+    <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5">
+      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+    </svg>
+  `
+}
+
+const SuccessIcon = {
+  template: `
+    <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5">
+      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+    </svg>
+  `
+}
+
+const WarningIcon = {
+  template: `
+    <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5">
+      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+    </svg>
+  `
+}
+
+const ErrorIcon = {
+  template: `
+    <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5">
+      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+    </svg>
+  `
+}
+</script>
+
+<style scoped>
+.sticky {
+  position: sticky;
+}
+</style>

package/src/components/pgo/Breadcrumb.vue

@@ -0,0 +1,101 @@
+<template>
+  <nav
+    aria-label="Breadcrumb"
+    :class="['flex items-center text-sm text-[var(--vts-color-textSecondary)]', containerClass]"
+  >
+    <!-- Prepend slot -->
+    <slot name="prepend" />
+
+    <ol class="flex items-center">
+      <li
+        v-for="(item, index) in itemsFinal"
+        :key="index"
+        class="flex items-center"
+      >
+        <!-- Divider -->
+        <span
+          v-if="index !== 0"
+          :class="['vts-mx-2 select-none text-[var(--vts-color-textSecondary)]', dividerClass]"
+        >
+          <slot name="divider">
+            {{ isRTL ? '‹' : '›' }}
+          </slot>
+        </span>
+
+        <!-- Item -->
+        <span
+          :class="[
+            'flex items-center',
+            itemClass,
+            index === itemsFinal.length - 1 && 'font-medium text-[var(--vts-color-text)]',
+            index === itemsFinal.length - 1 && activeClass,
+            item.disabled && 'opacity-50 cursor-not-allowed'
+          ]"
+        >
+          <component
+            :is="item.to && !item.disabled ? 'RouterLink' : (item.href && !item.disabled ? 'a' : 'span')"
+            :to="item.to"
+            :href="item.href"
+            class="hover:underline"
+          >
+            {{ item.label }}
+          </component>
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup>
+
+  import { computed } from 'vue'
+  import { useRoute } from 'vue-router'
+    defineOptions({ name: 'PgoBreadcrumb' })
+
+  const props = defineProps({
+    items: { type: Array, default: () => [] },
+    containerClass: { type: String, default: '' },
+    itemClass: { type: String, default: '' },
+    activeClass: { type: String, default: '' },
+    dividerClass: { type: String, default: '' }
+  })
+
+  const isRTL = computed(() => {
+    if (typeof window === 'undefined') return false
+    return document.documentElement.dir === 'rtl' || document.documentElement.lang === 'dv'
+  })
+
+  const route = useRoute()
+
+  /** @type {import('vue').ComputedRef<Array<Record<string, any>>>} */
+  const routeItems = computed(() => {
+    const matched = route.matched || []
+    const items = []
+    matched.forEach((rec, idx) => {
+      const bc = rec.meta && rec.meta.breadcrumb
+      
+      // Handle function-based breadcrumb
+      const breadcrumbData = typeof bc === 'function' ? bc(route) : bc
+      
+      if (Array.isArray(breadcrumbData)) {
+        breadcrumbData.forEach((it) => {
+          if (typeof it === 'string') {
+            items.push({ label: it })
+          } else if (it && typeof it === 'object') {
+            items.push({ label: it.label, to: it.to, href: it.href, disabled: !!it.disabled })
+          }
+        })
+      } else {
+        const label = breadcrumbData || rec.meta?.title || rec.name || rec.path
+        const to = idx < matched.length - 1 ? rec.path : undefined
+        items.push({ label, to })
+      }
+    })
+    return items
+  })
+
+  /** @type {import('vue').ComputedRef<Array<Record<string, any>>>} */
+  const itemsFinal = computed(() => {
+    return props.items && props.items.length ? props.items : routeItems.value
+  })
+</script>

package/src/components/pgo/Button.vue

@@ -0,0 +1,171 @@
+<template>
+  <button :class="buttonClasses" :disabled="disabled || loading" @click="handleClick">
+    <!-- Loader -->
+    <span v-if="loading" class="loader vts-mr-2" />
+
+    <!-- Prepend Icon -->
+    <span v-if="($slots.prepend || prependIcon) && !loading" class="">
+      <slot name="prepend">
+        <HeroIcon v-if="prependIcon" :name="prependIcon" :type="iconType || 'outline'" :size="iconSizes[props.size]" color="text-current" />
+      </slot>
+    </span>
+
+    <!-- Label -->
+    <span v-if="!loading">
+      <slot>
+        <HeroIcon v-if="icon" :name="icon" :type="iconType || 'outline'" :size="iconSizes[props.size]" color="text-current" />
+        <div v-if="!icon">
+          {{ displayLabel }}
+        </div>
+      </slot>
+    </span>
+
+    <!-- Append Icon -->
+    <span v-if="($slots.append || appendIcon) && !loading" class="">
+      <slot name="append">
+        <HeroIcon
+          v-if="appendIcon"
+          :name="appendIcon"
+          :type="iconType || 'outline'"
+          :size="iconSizes[props.size]"
+          stroke="currentColor"
+          color="text-current"
+        />
+      </slot>
+    </span>
+  </button>
+</template>
+
+<script setup>
+  import { computed, inject, provide, ref } from 'vue'
+  import HeroIcon from './HeroIcon.vue'
+  import { sizes, iconSizes, roundedMap, colorMap } from '../../pgo-components/lib/componentConfig'
+
+  const { t, setLanguage } = inject('i18n')
+
+  const emit = defineEmits(['click'])
+
+    const injectedLang = inject('parentLang', '')
+    const currentLang = computed(() => {
+      return props.lang ? props.lang : injectedLang
+    })
+
+    // provide('parentLang', currentLang.value)
+  // console.log("languge in Button.vue", injectedLang)
+  // const lang = inject('lang')
+
+  const props = defineProps({
+    variant: {
+      type: String,
+      default: 'contained' // contained | outlined | text | tonal | plain
+    },
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    size: {
+      type: String,
+      default: 'md' // xs | sm | md | lg | xl
+    },
+    rounded: {
+      type: String,
+      default: 'sm' // none | sm | md | lg | xl | full
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    prependIcon: {
+      type: String,
+      default: ''
+    },
+    appendIcon: {
+      type: String,
+      default: ''
+    },
+    iconType: {
+      type: String,
+      default: 'outline'
+    },
+    padding: {
+      type: Boolean,
+      default: false
+    },
+    lang: {
+      type: String,
+      default: '' // Component-level language override
+    }
+  })
+
+  const variantClasses = computed(() => {
+    // Classes only for layout/structure, colors handled by buttonThemeStyles
+    return colorMap[props.color] ? colorMap[props.color][props.variant] : colorMap['primary'][props.variant]
+    // return 'transition-all'
+  })
+
+  const buttonClasses = computed(() => [
+    'inline-flex items-center gap-2      justify-center font-medium transition-all select-none',
+    props.icon && !props.padding ? '' : sizes[props.size],
+    roundedMap[props.rounded],
+    variantClasses.value,
+    props.block ? 'w-full' : '',
+    currentLang.value === 'dv' ? 'faruma' : '',
+    props.disabled || props.loading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+  ])
+
+  const handleClick = event => {
+    if (!props.disabled && !props.loading) emit('click', event)
+  }
+  // Check if label is a translation key like 'buttons.submit'
+  const displayLabel = computed(() => {
+    if (!props.label) {
+      return t('buttons.submit', currentLang.value)
+    }
+
+    // Check if label starts with 'buttons.' and try to translate it
+    if (props.label.startsWith('buttons.')) {
+      const translatedValue = t(props.label, currentLang.value)
+      // If translation exists and is different from the key, use it
+      if (translatedValue !== props.label) {
+        return translatedValue
+      }
+    }
+
+    // Otherwise, use the label as-is
+    return props.label
+  })
+</script>
+
+<style scoped>
+  /* Simple Loader */
+  .loader {
+    width: 16px;
+    height: 16px;
+    border: 2px solid transparent;
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.7s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>