pgo-uiux2 1.0.0

package/src/components/pgo/Tab.vue

@@ -0,0 +1,617 @@
+<template>
+  <div
+    class="tabs-container"
+    :id="tabId"
+    :dir="isRtl ? 'rtl' : 'ltr'"
+    :class="[variantClass, sizeClass, containerUtilityClasses, { 'tabs-container--vertical': vertical }]"
+  >
+    <!-- Tab List -->
+    <div class="tabs-list relative overflow-x-auto" role="tablist" :aria-orientation="vertical ? 'vertical' : 'horizontal'" :class="listBorderClasses">
+      <div class="tabs-header flex vts-ga-1 vts-pa-1" :class="{ 'flex-col': vertical, 'flex-row': !vertical }">
+        <button
+          v-for="(tab, index) in tabsComputed"
+          :id="`tab-${tabId}-${index}`"
+          :key="index"
+          role="tab"
+          :aria-selected="activeTab === index"
+          :aria-controls="`panel-${tabId}-${index}`"
+          :tabindex="activeTab === index ? 0 : -1"
+          :disabled="tab.disabled || disabled"
+          :class="['tabs-item', activeTab === index ? 'tabs-item--active' : '', tab.disabled ? 'tabs-item--disabled' : '', itemClasses, 'vts-rounded-sm', itemBorderSpacingClasses(index)]"
+          @click="selectTab(index)"
+          @keydown="handleKeydown($event, index)"
+        >
+          <!-- Icon -->
+          <span v-if="tab.icon" class="tabs-item-icon">
+            <component :is="tab.icon" class="w-5 h-5" />
+          </span>
+
+          <!-- Label -->
+          <span class="tabs-item-label">{{ tab.label }}</span>
+
+          <!-- Badge -->
+          <span v-if="tab.badge" class="tabs-item-badge" :class="badgeClass(tab)">
+            {{ tab.badge }}
+          </span>
+
+          <!-- Close button -->
+          <button
+            v-if="closable && !tab.disabled"
+            type="button"
+            class="tabs-item-close vts-ms-1 vts-pa-0"
+            :aria-label="`Close ${tab.label}`"
+            @click.stop="closeTab(index)"
+          >
+            <svg class="w-4 h-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>
+        </button>
+      </div>
+
+      <!-- Scroll buttons for horizontal tabs -->
+      <div v-if="!vertical && showScrollButtons" class="tabs-scroll-buttons absolute top-0 right-0 flex vts-ga-1 vts-pa-1">
+        <button v-if="canScrollLeft" type="button" class="tabs-scroll-btn vts-pa-2 vts-rounded-md" @click="scrollTabs(-1)">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <button v-if="canScrollRight" type="button" class="tabs-scroll-btn vts-pa-2 vts-rounded-md" @click="scrollTabs(1)">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Tab Panels -->
+    <div class="tabs-panels">
+      <div
+        v-for="(tab, index) in tabsComputed"
+        :key="index"
+        :id="`panel-${tabId}-${index}`"
+        role="tabpanel"
+        :aria-labelledby="`tab-${tabId}-${index}`"
+        :hidden="activeTab !== index"
+        class="tabs-panel"
+        :class="{ hidden: activeTab !== index }"
+      >
+        <div class="tabs-panel-content" :class="panelPaddingClass">
+          <slot :name="`content-${index}`" :tab="tab">
+            {{ tab.content }}
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed, watch, onMounted } from 'vue'
+  import { globalRtl } from '../../pgo-components/lib/core/rtl/rtl'
+
+  const props = defineProps({
+    // Data
+    tabs: {
+      type: Array,
+      required: true
+    },
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+
+    // Styling
+    variant: {
+      type: String,
+      default: 'line' // 'line' | 'pills' | 'enclosed' | 'card'
+    },
+    size: {
+      type: String,
+      default: 'md' // 'sm' | 'md' | 'lg'
+    },
+    color: {
+      type: String,
+      default: 'primary'
+    },
+
+    // Behavior
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    showScrollButtons: {
+      type: Boolean,
+      default: true
+    },
+    centered: {
+      type: Boolean,
+      default: false
+    },
+    justified: {
+      type: Boolean,
+      default: false
+    },
+
+    // Accessibility
+    ariaLabel: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const emit = defineEmits(['update:modelValue', 'change', 'close', 'keydown'])
+  // Map optional badgeVariant hints on tab items to token-based classes
+  const badgeClass = tab => {
+    const v = String(tab?.badgeVariant || '').toLowerCase()
+    if (v.includes('error') || v.includes('red')) return 'badge--error'
+    if (v.includes('primary') || v.includes('blue')) return 'badge--primary'
+    return 'badge--primary'
+  }
+
+  // Work around template type inference for tab items
+  const tabsComputed = computed(() => /** @type {any[]} */ (props.tabs))
+
+  // Generate unique ID for this tab component
+  const tabId = ref(`tabs-${Math.random().toString(36).substr(2, 9)}`)
+
+  // Active tab state
+  const activeTab = ref(props.modelValue)
+
+  // Scroll state for horizontal tabs
+  const scrollContainer = ref(null)
+  const canScrollLeft = ref(false)
+  const canScrollRight = ref(false)
+
+  // RTL support
+  const isRtl = computed(() => globalRtl.value)
+
+  // Computed classes
+  const variantClass = computed(() => {
+    const variantMap = {
+      line: 'variant-line',
+      pills: 'variant-pills',
+      enclosed: 'variant-enclosed',
+      card: 'variant-card'
+    }
+    return variantMap[props.variant] || variantMap.line
+  })
+
+  const sizeClass = computed(() => {
+    const sizeMap = {
+      sm: 'size-sm',
+      md: 'size-md',
+      lg: 'size-lg'
+    }
+    return sizeMap[props.size] || sizeMap.md
+  })
+
+  const itemClasses = computed(() => {
+    const classes = [
+      'whitespace-nowrap inline-flex items-center vts-ga-2 transition-colors',
+      `text-${props.size === 'sm' ? 'sm' : props.size === 'lg' ? 'lg' : 'base'}`
+    ]
+
+    if (props.centered) classes.push('justify-center')
+    if (props.justified) classes.push('flex-1')
+    if (props.vertical) classes.push('w-full justify-start')
+
+    return classes.join(' ')
+  })
+
+  // Container utilities for variant-specific borders/spacing
+  const containerUtilityClasses = computed(() => {
+    const classes = []
+    if (props.variant === 'enclosed') classes.push('vts-border', 'vts-rounded-md')
+    if (props.variant === 'card') classes.push('vts-ga-4')
+    return classes.join(' ')
+  })
+
+  // List border depending on orientation
+  const listBorderClasses = computed(() => {
+    if (props.vertical) return 'vts-border-e-sm vts-border-solid vts-border-color'
+    return 'vts-border-b-sm vts-border-solid vts-border-color'
+  })
+
+  // Per-item spacing and border utilities
+  const itemBorderSpacingClasses = index => {
+    const classes = []
+
+    // Size-based padding
+    const sizePadMap = {
+      sm: ['vts-py-2', 'vts-px-3'],
+      md: ['vts-py-3', 'vts-px-4'],
+      lg: ['vts-py-4', 'vts-px-5']
+    }
+    if (props.variant === 'pills' && props.size === 'md') {
+      classes.push('vts-py-2', 'vts-px-4')
+    } else {
+      const pad = sizePadMap[props.size] || sizePadMap.md
+      classes.push(...pad)
+    }
+
+    // Variant-specific borders
+    if (props.variant === 'line') {
+      classes.push('vts-border-b-md', 'vts-border-solid', 'vts-border-color-transparent', 'vts-mb-n1')
+      if (props.vertical) classes.push('vts-border-b-0')
+    }
+
+    if (props.variant === 'enclosed') {
+      classes.push('vts-border-e-sm', 'vts-border-solid', 'vts-border-color')
+      if (index === tabsComputed.value.length - 1) classes.push('vts-border-e-0')
+    }
+
+    if (props.variant === 'card') {
+      classes.push('vts-border-sm', 'vts-border-solid', 'vts-border-color', 'vts-rounded-md')
+    }
+
+    if (props.vertical) {
+      classes.push('w-full', 'justify-start')
+    }
+
+    return classes.join(' ')
+  }
+
+  // Panel padding per size and layout
+  const panelPaddingClass = computed(() => {
+    if (props.vertical) return 'vts-py-4 vts-px-6'
+    const map = { sm: 'vts-pa-4', md: 'vts-pa-6', lg: 'vts-pa-8' }
+    return map[props.size] || map.md
+  })
+
+  // Methods
+  const selectTab = index => {
+    if (tabsComputed.value[index]?.disabled || props.disabled) return
+
+    activeTab.value = index
+    emit('update:modelValue', index)
+    emit('change', index)
+  }
+
+  const closeTab = index => {
+    emit('close', index)
+  }
+
+  const handleKeydown = (event, index) => {
+    emit('keydown', event, index)
+
+    const tabsCount = tabsComputed.value.length
+
+    switch (event.key) {
+      case 'ArrowDown':
+        if (props.vertical) {
+          event.preventDefault()
+          selectTab((index + 1) % tabsCount)
+          return
+        }
+        break
+      case 'ArrowUp':
+        if (props.vertical) {
+          event.preventDefault()
+          selectTab((index - 1 + tabsCount) % tabsCount)
+          return
+        }
+        break
+      case 'ArrowRight':
+        if (isRtl.value) {
+          event.preventDefault()
+          selectTab((index - 1 + tabsCount) % tabsCount)
+        } else {
+          event.preventDefault()
+          selectTab((index + 1) % tabsCount)
+        }
+        break
+      case 'ArrowLeft':
+        if (isRtl.value) {
+          event.preventDefault()
+          selectTab((index + 1) % tabsCount)
+        } else {
+          event.preventDefault()
+          selectTab((index - 1 + tabsCount) % tabsCount)
+        }
+        break
+      case 'Home':
+        event.preventDefault()
+        selectTab(0)
+        break
+      case 'End':
+        event.preventDefault()
+        selectTab(tabsCount - 1)
+        break
+    }
+  }
+
+  const scrollTabs = direction => {
+    if (!scrollContainer.value) return
+    const scrollAmount = 200
+    const newScroll = scrollContainer.value.scrollLeft + direction * scrollAmount
+    scrollContainer.value.scrollLeft = newScroll
+    updateScrollButtons()
+  }
+
+  const updateScrollButtons = () => {
+    if (!scrollContainer.value || props.vertical) {
+      canScrollLeft.value = false
+      canScrollRight.value = false
+      return
+    }
+
+    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value
+    canScrollLeft.value = scrollLeft > 0
+    canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 10
+  }
+
+  // Watch for model value changes
+  watch(
+    () => props.modelValue,
+    newValue => {
+      activeTab.value = newValue
+    }
+  )
+
+  // Lifecycle
+  onMounted(() => {
+    scrollContainer.value = document.querySelector(`#${tabId.value} .tabs-list`)
+    updateScrollButtons()
+  })
+</script>
+
+<style scoped>
+  /* Base styles */
+  .tabs-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tabs-list {
+    position: relative;
+  }
+
+  .tabs-  {
+    display: flex;
+    /* spacing moved to vts-ga-* in template */
+  }
+
+  .tabs-item {
+    position: relative;
+    background: transparent;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    color: var(--vts-color-textSecondary);
+  }
+
+  .tabs-item:hover:not(:disabled) {
+    color: var(--vts-color-text);
+  }
+
+  .tabs-item:disabled,
+  .tabs-item--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tabs-item--active {
+    color: var(--vts-color-text);
+    font-weight: 600;
+  }
+
+  /* Dark mode colors handled by CSS variables */
+
+  /* Icon styling */
+  .tabs-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Badge styling */
+  .tabs-item-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--vts-radius-full);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--vts-color-primaryText);
+    background: var(--vts-color-error);
+  }
+
+  .tabs-item-badge.badge--primary {
+    background: var(--vts-color-primary);
+    color: var(--vts-color-primaryText);
+  }
+
+  .tabs-item-badge.badge--error {
+    background: var(--vts-color-error);
+  }
+
+  /* Close button */
+  .tabs-item-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+  }
+
+  .tabs-item-close:hover {
+    opacity: 1;
+  }
+
+  /* Scroll buttons */
+  .tabs-scroll-buttons {
+    display: flex;
+    /* spacing moved to vts-ga-* in template */
+  }
+
+  .tabs-scroll-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--vts-color-textSecondary);
+    transition: all 0.2s ease;
+  }
+
+  .tabs-scroll-btn:hover {
+    color: var(--vts-color-text);
+    background: var(--vts-color-surface);
+  }
+  /* Dark mode via variables */
+
+  /* Panels */
+  .tabs-panels {
+    flex: 1;
+  }
+
+  .tabs-panel {
+    display: block;
+  }
+
+  .tabs-panel.hidden {
+    display: none;
+  }
+
+
+
+  /* Variant: Line (default) */
+
+
+  .variant-line .tabs-item--active {
+    border-bottom-color: var(--vts-color-primary);
+  }
+  /* Dark handled by variables */
+
+  /* Variant: Pills */
+  .variant-pills .tabs-item {
+    background: var(--vts-color-surfaceElevated);
+    /* spacing and radius moved to vts-* classes */
+  }
+
+  .variant-pills .tabs-item:hover:not(:disabled) {
+    background: var(--vts-color-surface);
+  }
+
+  .variant-pills .tabs-item--active {
+    background: var(--vts-color-primary);
+    color: var(--vts-color-primaryText);
+  }
+  /* Dark handled by variables */
+
+  /* Variant: Enclosed */
+  .variant-enclosed {
+    /* border and radius moved to vts-* classes */
+    overflow: hidden;
+  }
+
+  .variant-enclosed .tabs-item {
+    border-radius: 0;
+    /* spacing and right border moved to vts-* classes */
+  }
+
+
+
+  .variant-enclosed .tabs-item--active {
+    background: var(--vts-color-surfaceElevated);
+    color: var(--vts-color-primary);
+  }
+  /* Dark handled by variables */
+
+  /* Variant: Card */
+  .variant-card {
+    display: flex;
+    flex-direction: column;
+    /* spacing moved to vts-* classes */
+  }
+
+  .variant-card .tabs-  {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .variant-card .tabs-item {
+    background: var(--vts-color-surface);
+  }
+
+  .variant-card .tabs-item:hover:not(:disabled) {
+    border-color: var(--vts-color-primary);
+    background: var(--vts-color-surfaceElevated);
+  }
+
+  .variant-card .tabs-item--active {
+    border-color: var(--vts-color-primary);
+    background: var(--vts-color-primary);
+    color: var(--vts-color-primaryText);
+  }
+  /* Dark handled by variables */
+
+  /* Size variants */
+  .size-sm .tabs-item {
+    font-size: 0.875rem;
+  }
+
+
+
+  .size-lg .tabs-item {
+    font-size: 1.125rem;
+  }
+
+
+
+  /* Vertical layout */
+
+
+  /* Two-column vertical layout */
+  .tabs-container--vertical {
+    display: grid;
+    grid-template-columns: minmax(200px, 260px) 1fr;
+    align-items: start;
+    /* spacing moved to vts-* classes if needed */
+  }
+
+  .tabs-container--vertical .tabs-list {
+    /* borders moved to vts-* classes */
+    overflow-y: auto;
+    max-height: 100%;
+  }
+
+
+
+  .tabs-container--vertical .tabs-  {
+    flex-direction: column;
+  }
+
+  .tabs-container--vertical .tabs-item {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .tabs-container--vertical .tabs-panels {
+    min-width: 0; /* allow content to shrink */
+  }
+
+
+</style>