pgo-uiux2 1.0.0

package/src/components/pgo/Timeline.vue

@@ -0,0 +1,367 @@
+<template>
+  <div
+    class="timeline"
+    :class="[
+      direction === 'vertical' ? 'timeline--vertical vts-py-2' : 'timeline--horizontal vts-py-6 vts-px-2',
+      direction === 'vertical' && side === 'one' ? 'timeline--one' : '',
+      direction === 'vertical' && side === 'both' ? 'timeline--both' : '',
+      condensed ? 'timeline--condensed' : ''
+    ]"
+    :style="{ '--timeline-dot-size': dotSizePx + 'px', '--timeline-gap': gapPx + 'px' }"
+  >
+    <!-- Rail line -->
+    <div class="timeline-line" :class="{ 'is-dashed': lineStyle === 'dashed' }"></div>
+
+    <!-- Vertical items -->
+    <div v-if="direction === 'vertical'" class="timeline-items">
+      <div v-for="(item, i) in items" :key="item.id ?? i" class="timeline-item" :class="['timeline-item--' + itemSide(i), condensed ? 'vts-mb-3' : 'vts-mb-6']">
+        <!-- Dot -->
+        <div
+          class="timeline-dot vts-border-md vts-border-solid vts-rounded-circle"
+          :style="{
+            width: dotSizePx + 'px',
+            height: dotSizePx + 'px',
+            background: statusColor(item),
+            borderColor: 'var(--vts-color-surface)'
+          }"
+        ></div>
+
+        <!-- Content card -->
+        <div
+          class="timeline-card"
+          :class="['align-' + align, clickable ? 'is-clickable' : '', elevation ? 'elevation-' + elevation : '', 'vts-border-sm vts-border-solid vts-border-color vts-rounded-md vts-py-3 vts-px-4']"
+          :style="cardStyle(i)"
+          role="group"
+          tabindex="0"
+          @click="emit('item-click', { item, index: i })"
+          @keydown.enter.prevent="emit('item-click', { item, index: i })"
+          @keydown.space.prevent="emit('item-click', { item, index: i })"
+        >
+          <template v-if="hasItemSlot">
+            <slot name="item" :item="item" :index="i" />
+          </template>
+
+          <template v-else-if="hasDefaultSlot">
+            <slot :item="item" :index="i" />
+          </template>
+
+          <template v-else>
+            <div v-if="item.title" class="timeline-title vts-mb-1">{{ item.title }}</div>
+            <div v-if="item.time" class="timeline-time vts-mb-2">{{ item.time }}</div>
+            <div v-if="item.content" class="timeline-content">{{ item.content }}</div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- Horizontal items -->
+    <div v-else class="timeline-items timeline-items--horizontal vts-ga-6" :class="[equalizeCards ? 'equalize' : '']">
+      <div v-for="(item, i) in items" :key="item.id ?? i" class="timeline-item-h vts-pt-6">
+        <div class="timeline-dot vts-border-md vts-border-solid vts-rounded-circle" :style="{ width: dotSizePx + 'px', height: dotSizePx + 'px', background: statusColor(item), borderColor: 'var(--vts-color-surface)' }"></div>
+        <div
+          class="timeline-card"
+          :class="['align-' + align, elevation ? 'elevation-' + elevation : '', 'vts-border-sm vts-border-solid vts-border-color vts-rounded-md vts-py-3 vts-px-4 vts-mt-4']"
+          role="group"
+          tabindex="0"
+          @click="emit('item-click', { item, index: i })"
+          @keydown.enter.prevent="emit('item-click', { item, index: i })"
+          @keydown.space.prevent="emit('item-click', { item, index: i })"
+        >
+          <template v-if="hasItemSlot">
+            <slot name="item" :item="item" :index="i" />
+          </template>
+          <template v-else-if="hasDefaultSlot">
+            <slot :item="item" :index="i" />
+          </template>
+          <template v-else>
+            <div v-if="item.title" class="timeline-title vts-mb-1">{{ item.title }}</div>
+            <div v-if="item.time" class="timeline-time vts-mb-2">{{ item.time }}</div>
+            <div v-if="item.content" class="timeline-content">{{ item.content }}</div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, useSlots } from 'vue'
+  import { globalRtl } from '../../pgo-components/lib/core/rtl/rtl'
+
+  export type TimelineStatus = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'
+
+  export interface TimelineItem {
+    id: string | number
+    title?: string
+    content?: string
+    time?: string
+    status?: TimelineStatus
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      items: TimelineItem[]
+      direction?: 'vertical' | 'horizontal'
+      side?: 'one' | 'both' // vertical only
+      align?: 'start' | 'center' | 'end' // content box alignment
+      alternate?: boolean // vertical/both: alternate left/right
+      rtl?: boolean
+      lineStyle?: 'solid' | 'dashed'
+      dotShape?: 'circle' | 'diamond'
+      dotSize?: 'sm' | 'md' | 'lg'
+      clickable?: boolean
+      condensed?: boolean
+      elevation?: 0 | 1 | 2 | 3
+      equalizeCards?: boolean
+      gap?: number
+    }>(),
+    {
+      direction: 'vertical',
+      side: 'both',
+      align: 'start',
+      alternate: true,
+      lineStyle: 'solid',
+      dotShape: 'circle',
+      dotSize: 'lg',
+      clickable: false,
+      condensed: false,
+      elevation: 1,
+      equalizeCards: true,
+      gap: 30
+    }
+  )
+
+  const isRtl = computed(() => props.rtl ?? globalRtl.value)
+
+  // Slots detection for card content customization
+  const slots = useSlots()
+  const hasItemSlot = computed(() => !!slots.item)
+  const hasDefaultSlot = computed(() => !!slots.default)
+
+  // Vertical line position and dot offsets
+  const railWidth = 2
+  const dotSizePx = computed(() => (props.dotSize === 'sm' ? 10 : props.dotSize === 'lg' ? 16 : 12))
+  const gapPx = computed(() => props.gap ?? 16)
+
+  function itemSide(index: number) {
+    if (props.direction === 'horizontal') return 'bottom'
+    if (props.side === 'one') {
+      // Content on one side; choose based on RTL
+      return isRtl.value ? 'right' : 'left'
+    }
+    // both sides
+    const left = props.alternate ? index % 2 === 0 : true
+    const logical = left ? 'left' : 'right'
+    return isRtl.value ? (logical === 'left' ? 'right' : 'left') : logical
+  }
+
+  // Inline margin styles for vertical layout, replacing CSS margins
+  function cardStyle(index: number) {
+    if (props.direction === 'horizontal') return {}
+    if (props.side === 'one') {
+      return {
+        maxWidth: '100%',
+        marginLeft: '0',
+        marginRight: '0',
+        marginInlineStart: gapPx.value + 'px',
+        marginInlineEnd: '0'
+      }
+    }
+    const side = itemSide(index) // 'left' or 'right' honoring RTL
+    if (side === 'left') {
+      return {
+        maxWidth: '45%',
+        marginLeft: '0',
+        marginRight: 'calc(50% + 16px)'
+      }
+    }
+    return {
+      maxWidth: '45%',
+      marginRight: '0',
+      marginLeft: 'calc(50% + 16px)'
+    }
+  }
+
+  function statusColor(item: TimelineItem) {
+    const s = item.status ?? 'default'
+    switch (s) {
+      case 'primary':
+        return 'var(--vts-color-primary)'
+      case 'success':
+        return 'var(--vts-color-success, #16a34a)'
+      case 'warning':
+        return 'var(--vts-color-warning, #f59e0b)'
+      case 'error':
+        return 'var(--vts-color-error, #dc2626)'
+      case 'info':
+        return 'var(--vts-color-info, #0ea5e9)'
+      default:
+        return 'var(--vts-color-borderHeavy)'
+    }
+  }
+
+  function onItemClick(item: TimelineItem, index: number) {
+    if (!props.clickable) return
+    // Emit item-click when clickable
+    // defineEmits must be at top in <script setup>
+  }
+
+  const emit = defineEmits<{
+    (e: 'item-click', payload: { item: TimelineItem; index: number }): void
+  }>()
+</script>
+
+<style scoped>
+  .timeline {
+    position: relative;
+    color: var(--vts-color-text);
+  }
+
+
+  /* Rail line */
+  .timeline-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--vts-color-borderHeavy);
+  }
+  .timeline-line.is-dashed {
+    background-image: linear-gradient(var(--vts-color-borderHeavy) 50%, rgba(0, 0, 0, 0) 0%);
+    background-size: 2px 8px;
+    background-repeat: repeat-y;
+    background-color: transparent;
+  }
+
+  /* Vertical layout */
+  .timeline--both .timeline-line {
+    left: calc(50% - 1px);
+  }
+  .timeline--one .timeline-line {
+    left: 0;
+  }
+  :dir(rtl) .timeline--one .timeline-line {
+    right: 0;
+    left: auto;
+  }
+
+  .timeline-items {
+    display: block;
+  }
+  .timeline-item {
+    position: relative;
+    clear: both;
+  }
+  /* Item vertical spacing moved to vts utility classes in template */
+
+  /* Dot */
+  .timeline-dot {
+    position: absolute;
+    left: calc(50% - (var(--timeline-dot-size, 12px) / 2));
+    top: 0.5rem;
+    box-shadow: var(--vts-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.1));
+  }
+  /* In one-side layout, place dot centered on the edge rail (2px wide => center at 1px) */
+  .timeline--one .timeline-dot {
+    left: calc(1px - (var(--timeline-dot-size, 12px) / 2));
+  }
+  :dir(rtl) .timeline--one .timeline-dot {
+    left: auto;
+    right: calc(1px - (var(--timeline-dot-size, 12px) / 2));
+  }
+  /* Item side placement */
+  /* Item side placement moved to inline styles on card */
+
+  /* One-side overrides moved to inline styles on card */
+
+  /* Card appearance */
+  .timeline-card {
+    background: var(--vts-color-surfaceElevated);
+    box-shadow: var(--vts-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12));
+  }
+  .timeline-card.elevation-0 {
+    box-shadow: none;
+  }
+  .timeline-card.elevation-2 {
+    box-shadow: var(--vts-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.12));
+  }
+  .timeline-card.elevation-3 {
+    box-shadow: var(--vts-elevation-3, 0 10px 20px rgba(0, 0, 0, 0.2));
+  }
+  .timeline-card.is-clickable {
+    cursor: pointer;
+  }
+
+  /* Alignment inside card */
+  .timeline-card.align-start {
+    text-align: left;
+  }
+  .timeline-card.align-center {
+    text-align: center;
+  }
+  .timeline-card.align-end {
+    text-align: right;
+  }
+  :dir(rtl) .timeline-card.align-start {
+    text-align: right;
+  }
+  :dir(rtl) .timeline-card.align-end {
+    text-align: left;
+  }
+
+  .timeline-title {
+    font-weight: 600;
+  }
+  .timeline-time {
+    color: var(--vts-color-textSecondary);
+    font-size: 0.8125rem;
+  }
+
+  /* Horizontal layout */
+  .timeline--horizontal .timeline-line {
+    left: 0;
+    right: 0;
+    /* Place rail through dot centers: padding-top (24px) + half dot size */
+    top: calc(24px + (var(--timeline-dot-size, 12px) / 2));
+    height: 2px;
+    width: auto;
+    background: var(--vts-color-borderHeavy);
+  }
+  .timeline--horizontal .timeline-line.is-dashed {
+    /* Horizontal dashed rail */
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--vts-color-borderHeavy) 0,
+      var(--vts-color-borderHeavy) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+    background-color: transparent;
+  }
+  .timeline-items--horizontal {
+    display: flex;
+    align-items: flex-start; /* ensure all items share the same top baseline */
+    justify-content: space-between;
+    position: relative;
+  }
+  .timeline-items--horizontal.equalize {
+    align-items: stretch;
+  }
+  .timeline-item-h {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+  }
+  .timeline-item-h .timeline-dot {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0;
+    box-shadow: var(--vts-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.1));
+  }
+
+  .timeline-items--horizontal.equalize .timeline-item-h .timeline-card {
+    flex: 1 1 auto;
+  }
+</style>

package/src/components/pgo/TimelineItem.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="v-timeline-item">
+    <!-- Opposite -->
+    <div class="v-timeline-item__opposite vts-py-2 vts-px-4">
+      <slot name="opposite" />
+    </div>
+
+    <!-- Dot -->
+    <div v-if="!hideDot" class="v-timeline-item__dot vts-rounded-circle vts-mt-3" :style="{ background: color }">
+      <slot name="icon">
+        <span v-if="icon" class="v-timeline-item__icon">{{ icon }}</span>
+      </slot>
+    </div>
+
+    <!-- Content -->
+    <div class="v-timeline-item__content vts-py-2 vts-px-4 vts-rounded-md">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, inject } from 'vue'
+
+  const timeline = inject<any>('timeline')
+
+  const props = withDefaults(
+    defineProps<{
+      color?: string
+      icon?: string
+      dot?: boolean
+      hideDot?: boolean
+    }>(),
+    {
+      color: '#1976D2',
+      dot: true
+    }
+  )
+
+  const classes = computed(() => ({
+    'v-timeline-item': true,
+    'v-timeline-item--alternate': timeline?.align === 'alternate'
+  }))
+</script>
+
+
+
+<style scoped>
+  .v-timeline-item {
+    display: flex;
+    position: relative;
+    min-height: 48px;
+  }
+
+  .v-timeline-item__opposite,
+  .v-timeline-item__content {
+    width: 45%;
+  }
+
+  .v-timeline-item__dot {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .v-timeline-item__icon {
+    color: white;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  .v-timeline-item__content {
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  }
+</style>