pgo-uiux2 1.0.0

package/src/components/pgo/DatePicker/CalendarPanel.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { isSameDay, isToday } from 'date-fns'
+  import { useCalendar } from './useCalendar.ts'
+
+  const props = defineProps<{
+    value?: any
+    minDate?: Date
+    maxDate?: Date
+    disabledDate?: (date: Date) => boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'select', v: Date): void
+  }>()
+
+  const calendar = useCalendar(new Date())
+  const days = computed(() => calendar.daysInView())
+
+  function disabled(d: Date) {
+    if (props.minDate && d < props.minDate) return true
+    if (props.maxDate && d > props.maxDate) return true
+    return props.disabledDate?.(d)
+  }
+</script>
+
+<template>
+  <div role="grid" class="dp-calendar">
+    <button
+      v-for="d in days"
+      :key="d.toISOString()"
+      role="gridcell"
+      :disabled="disabled(d)"
+      :class="{
+        today: isToday(d),
+        selected: isSameDay(d, value)
+      }"
+      @click="emit('select', d)"
+    >
+      {{ d.getDate() }}
+    </button>
+  </div>
+</template>

package/src/components/pgo/DatePicker/__DatePicker.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="dp-root" dir="ltr" lang="en">
+    <input
+      ref="inputRef"
+      class="dp-input"
+      :value="displayValue"
+      :disabled="disabled"
+      readonly
+      @click="
+        open = !open
+        emit('openChange', open)
+      "
+    />
+
+    <button v-if="clearable && value" class="dp-clear" @click="clear">×</button>
+
+    <teleport to="body">
+      <div v-if="open" class="dp-popup" role="dialog" dir="ltr" lang="en">
+        <CalendarPanel
+          :value="value"
+          :mode="mode"
+          :range="range"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :disabled-date="disabledDate"
+          :locale="locale"
+          @select="onSelect"
+        />
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+  import { format } from 'date-fns'
+  import { useDatePicker } from './useDatePicker.ts'
+  import CalendarPanel from './CalendarPanel.vue'
+  import type { PickerMode, RangeValue, LocaleConfig } from './types.ts'
+
+  const props = defineProps<{
+    modelValue?: Date | RangeValue
+    defaultValue?: Date | RangeValue
+    mode?: PickerMode
+    range?: boolean
+    format?: string
+    disabled?: boolean
+    clearable?: boolean
+    minDate?: Date
+    maxDate?: Date
+    disabledDate?: (d: Date) => boolean
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
+    locale?: LocaleConfig
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', v: any): void
+    (e: 'change', v: any): void
+    (e: 'openChange', v: boolean): void
+  }>()
+
+  const open = ref(false)
+  const inputRef = ref<HTMLInputElement | null>(null)
+
+  const { value } = useDatePicker(props, emit)
+
+  const displayValue = computed(() => {
+    if (!value.value) return ''
+    if (Array.isArray(value.value)) {
+      const [s, e] = value.value
+      return s && e ? `${format(s, props.format ?? 'yyyy-MM-dd')} – ${format(e, props.format ?? 'yyyy-MM-dd')}` : ''
+    }
+    return format(value.value, props.format ?? 'yyyy-MM-dd')
+  })
+
+  function onSelect(date: any) {
+    value.value = date
+    open.value = false
+    emit('openChange', false)
+  }
+
+  function clear() {
+    value.value = undefined
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') open.value = false
+  }
+
+  onMounted(() => document.addEventListener('keydown', onKeydown))
+  onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
+</script>
+
+<style>
+  .dp-root {
+    position: relative;
+  }
+
+  .dp-input {
+    width: 100%;
+    padding: 9.5rem;
+    /* background: var(--vts-color-surface); */
+    background: bg-red-500;
+    color: var(--vts-color-text);
+    border: 1px solid var(--vts-color-border);
+    border-radius: var(--vts-radius-md);
+  }
+
+  .dp-popup {
+    position: absolute;
+    z-index: 1000;
+    /* background: var(--vts-color-surfaceElevated); */
+    background: bg-red-500;
+    color: var(--vts-color-text);
+    border: 1px solid var(--vts-color-border);
+    border-radius: var(--vts-radius-md);
+    box-shadow: var(--vts-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.12));
+    padding: 8px;
+    direction: rtl;
+    /* unicode-bidi: isolate; */
+  }
+</style>

package/src/components/pgo/DatePicker/types.ts

@@ -0,0 +1,11 @@
+export type PickerMode = 'date' | 'week' | 'month' | 'quarter' | 'year' | 'time'
+
+export type RangeValue = [Date | null, Date | null]
+
+export interface LocaleConfig {
+    locale: string
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    months: string[]
+    weekdays: string[]
+    todayLabel?: string
+}

package/src/components/pgo/DatePicker/useCalendar.ts

@@ -0,0 +1,39 @@
+import { ref } from 'vue';
+import { addMonths, addYears, startOfMonth, endOfMonth, eachDayOfInterval, add, } from 'date-fns';
+
+export function useCalendar(initial: Date){
+    const viewDate = ref(startOfMonth(initial))
+
+    function nextMonth(){
+        viewDate.value = addMonths(viewDate.value, 1)
+    }
+
+    function prevMonth(){
+        viewDate.value = addMonths(viewDate.value, -1)
+    }
+
+    function nextYear(){
+        viewDate.value = addYears(viewDate.value, 1)
+    }
+
+    function prevYear(){
+        viewDate.value = addYears(viewDate.value, -1)
+    }
+
+    function daysInView(){
+        return eachDayOfInterval({
+            start: startOfMonth(viewDate.value),
+            end: endOfMonth(viewDate.value)
+        })
+    }
+
+    return {
+        viewDate,
+        nextMonth,
+        prevMonth,
+        nextYear,
+        prevYear,
+        daysInView
+    }
+
+}

package/src/components/pgo/DatePicker/useDatePicker.ts

@@ -0,0 +1,31 @@
+import { ref, computed, watch } from 'vue'
+
+export function useDatePicker<T>(
+  props: {
+    modelValue?: T
+    defaultValue?: T
+  },
+  emit: (e: string, v: any) => void
+) {
+  const internal = ref<T | undefined>(props.defaultValue)
+
+  const value = computed<T | undefined>({
+    get() {
+      return props.modelValue !== undefined ? props.modelValue : internal.value
+    },
+    set(v) {
+      internal.value = v
+      emit('update:modelValue', v)
+      emit('change', v)
+    }
+  })
+
+  watch(
+    () => props.modelValue,
+    v => {
+      if (v !== undefined) internal.value = v
+    }
+  )
+
+  return { value }
+}

package/src/components/pgo/Deprecated/ToastContainer.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="positionClass" class="fixed z-50 flex flex-col gap-2">
+    <TransitionGroup name="toast" tag="div">
+      <ToastItem v-for="toast in toasts" :key="toast.id" :toast="toast" @close="remove(toast.id)" />
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { toast } from '../../../pgo-components/services/toast.js'
+  import ToastItem from './ToastItem.vue'
+
+  const props = defineProps<{
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+  }>()
+
+  const toasts = toast.state.toasts
+
+  const positionClass = computed(() => {
+    switch (props.position) {
+      case 'top-left':
+        return 'top-4 left-4'
+      case 'bottom-left':
+        return 'bottom-4 left-4'
+      case 'bottom-right':
+        return 'bottom-4 right-4'
+      default:
+        return 'top-4 right-4'
+    }
+  })
+
+  function remove(id: number) {
+    toast.remove(id)
+  }
+</script>
+
+<style>
+  .toast-enter-from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  .toast-enter-active,
+  .toast-leave-active {
+    transition: all 0.25s ease;
+  }
+  .toast-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+</style>

package/src/components/pgo/Deprecated/ToastItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="min-w-[260px] max-w-sm rounded-lg px-4 py-3 shadow-lg text-white flex items-start gap-3"
+    :class="typeClass"
+    @mouseenter="pause"
+    @mouseleave="resume"
+  >
+    <div class="flex-1 text-sm">
+      {{ toast.message }}
+    </div>
+
+    <button v-if="toast.closable" class="text-white/70 hover:text-white" @click="$emit('close')">✕</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, onBeforeUnmount } from 'vue'
+  import type { Toast } from '../../services/toast.ts'
+
+  const props = defineProps<{
+    toast: Toast
+  }>()
+
+  const emit = defineEmits(['close'])
+
+  let timeout: number
+  let remaining = props.toast.duration
+  let startTime = Date.now()
+
+  const typeClass = computed(() => {
+    return {
+      info: 'bg-blue-600',
+      success: 'bg-green-600',
+      warning: 'bg-yellow-500 text-black',
+      error: 'bg-red-600'
+    }[props.toast.type]
+  })
+
+  function startTimer() {
+    startTime = Date.now()
+    timeout = window.setTimeout(() => emit('close'), remaining)
+  }
+
+  function pause() {
+    clearTimeout(timeout)
+    remaining -= Date.now() - startTime
+  }
+
+  function resume() {
+    startTimer()
+  }
+
+  onMounted(startTimer)
+  onBeforeUnmount(() => clearTimeout(timeout))
+</script>

package/src/components/pgo/Dropdown.vue

@@ -0,0 +1,296 @@
+<template>
+  <!-- Trigger -->
+  <div ref="triggerRef" @click="toggle" class="inline-block">
+    <slot name="trigger">
+      <button :class="triggerClasses">
+        <slot name="label">{{ label }}</slot>
+        <svg
+          class="ml-2 h-4 w-4 transition-transform"
+          :class="{ 'rotate-180': isOpen }"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+    </slot>
+  </div>
+
+  <!-- Menu (Teleported) -->
+  <teleport to="body">
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        ref="menuRef"
+        :style="menuStyle"
+        :class="menuClasses"
+      >
+        <slot>
+          <!-- Default items rendering -->
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            @click="selectItem(item)"
+            :class="itemClasses"
+          >
+            {{ item.label || item }}
+          </div>
+        </slot>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+import { sizes, iconSizes, roundedMap, colorMap } from '../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  label: { type: String, default: 'Menu' },
+  items: { type: Array, default: () => [] },
+  width: { type: [String, Number], default: 'auto' },
+  minWidth: { type: [String, Number], default: '200' },
+  maxHeight: { type: [String, Number], default: '400' },
+  align: { type: String, default: 'left' }, // left | right | center
+  offsetX: { type: Number, default: 0 },
+  offsetY: { type: Number, default: 8 },
+  openOnHover: { type: Boolean, default: false },
+  closeOnContentClick: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  elevation: { type: Number, default: 8 },
+  rounded: { type: String, default: 'md' }, // none | sm | md | lg | xl
+  dense: { type: Boolean, default: false },
+  color: { type: String, default: 'primary' },
+  variant: { type: String, default: 'contained' }, // contained | outlined | text | tonal | plain
+  size: { type: String, default: 'md' }, // xs | sm | md | lg | xl
+  icon: {type: String, default: '' },
+})
+
+const emit = defineEmits(['update:modelValue', 'select', 'opened', 'closed'])
+
+const isOpen = ref(props.modelValue)
+const triggerRef = ref(null)
+const menuRef = ref(null)
+const menuStyle = ref({})
+
+// Classes
+const variantClasses = computed(() => {
+    const c = colorMap[props.color] || colorMap.gray
+    return c[props.variant] || c.contained
+})
+const triggerClasses = computed(() => [
+  'inline-flex items-center justify-center font-medium transition-all cursor-pointer select-none',
+  props.icon ? '' : sizes[props.size],
+  roundedMap[props.rounded],
+  'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'disabled:pointer-events-none disabled:opacity-50',
+  variantClasses.value,
+  `rounded-${props.rounded}`,
+  props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+])
+
+const menuClasses = computed(() => [
+  'fixed z-50 bg-white text-gray-700',
+  'border border-gray-200 shadow-lg',
+  'animate-in fade-in-0 zoom-in-95',
+  `rounded-${props.rounded}`,
+  props.dense ? 'p-1' : 'p-2',
+  'overflow-auto'
+])
+
+const itemClasses = computed(() => [
+  'relative flex cursor-pointer select-none items-center',
+  'rounded-sm px-2 outline-none transition-colors',
+  'hover:bg-gray-100 hover:text-accent-foreground',
+  'focus:bg-accent focus:text-accent-foreground',
+  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  props.dense ? 'py-1 text-sm' : 'py-2 text-sm'
+])
+
+// Watch modelValue
+watch(() => props.modelValue, (val) => {
+  isOpen.value = val
+  if (val) {
+    nextTick(() => updatePosition())
+  }
+})
+
+// Toggle menu
+const toggle = () => {
+  if (props.disabled) return
+  isOpen.value = !isOpen.value
+  emit('update:modelValue', isOpen.value)
+  
+  if (isOpen.value) {
+    emit('opened')
+    nextTick(() => updatePosition())
+  } else {
+    emit('closed')
+  }
+}
+
+// Open menu
+const open = () => {
+  if (props.disabled || isOpen.value) return
+  isOpen.value = true
+  emit('update:modelValue', true)
+  emit('opened')
+  nextTick(() => updatePosition())
+}
+
+// Close menu
+const close = () => {
+  if (!isOpen.value) return
+  isOpen.value = false
+  emit('update:modelValue', false)
+  emit('closed')
+}
+
+// Select item
+const selectItem = (item) => {
+  emit('select', item)
+  if (props.closeOnContentClick) {
+    close()
+  }
+}
+
+// Update menu position
+const updatePosition = () => {
+  if (!triggerRef.value || !menuRef.value) return
+
+  const trigger = triggerRef.value.getBoundingClientRect()
+  const menu = menuRef.value.getBoundingClientRect()
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+
+  let top = trigger.bottom + props.offsetY
+  let left = trigger.left + props.offsetX
+
+  // Check if menu would overflow viewport
+  const wouldOverflowBottom = top + menu.height > viewport.height
+  const wouldOverflowRight = left + menu.width > viewport.width
+
+  // Open upwards if would overflow bottom
+  if (wouldOverflowBottom) {
+    top = trigger.top - menu.height - props.offsetY
+  }
+
+  // Align based on prop
+  if (props.align === 'right') {
+    left = trigger.right - menu.width + props.offsetX
+  } else if (props.align === 'center') {
+    left = trigger.left + (trigger.width / 2) - (menu.width / 2) + props.offsetX
+  }
+
+  // Adjust if would overflow right
+  if (wouldOverflowRight) {
+    left = viewport.width - menu.width - 8
+  }
+
+  // Adjust if would overflow left
+  if (left < 8) {
+    left = 8
+  }
+
+  const width = props.width === 'auto' 
+    ? `${Math.max(trigger.width, parseInt(props.minWidth))}px`
+    : typeof props.width === 'number'
+    ? `${props.width}px`
+    : props.width
+
+  menuStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: width,
+    minWidth: `${props.minWidth}px`,
+    maxHeight: `${props.maxHeight}px`,
+    zIndex: 50 + props.elevation
+  }
+}
+
+// Click outside handler
+const handleClickOutside = (e) => {
+  if (
+    triggerRef.value && !triggerRef.value.contains(e.target) &&
+    menuRef.value && !menuRef.value.contains(e.target)
+  ) {
+    close()
+  }
+}
+
+// Hover handlers
+const handleMouseEnter = () => {
+  if (props.openOnHover) {
+    open()
+  }
+}
+
+const handleMouseLeave = () => {
+  if (props.openOnHover) {
+    close()
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('scroll', updatePosition, true)
+  window.addEventListener('resize', updatePosition)
+  
+  if (props.openOnHover && triggerRef.value) {
+    triggerRef.value.addEventListener('mouseenter', handleMouseEnter)
+    triggerRef.value.addEventListener('mouseleave', handleMouseLeave)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('scroll', updatePosition, true)
+  window.removeEventListener('resize', updatePosition)
+  
+  if (props.openOnHover && triggerRef.value) {
+    triggerRef.value.removeEventListener('mouseenter', handleMouseEnter)
+    triggerRef.value.removeEventListener('mouseleave', handleMouseLeave)
+  }
+})
+
+// Expose methods
+defineExpose({ open, close, toggle })
+</script>
+
+<style scoped>
+.animate-in {
+  animation-duration: 150ms;
+  animation-fill-mode: both;
+}
+
+.fade-in-0 {
+  animation-name: fadeIn;
+}
+
+.zoom-in-95 {
+  animation-name: zoomIn;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes zoomIn {
+  from { transform: scale(0.95); }
+  to { transform: scale(1); }
+}
+</style>

package/src/components/pgo/DropdownItem.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    @click="handleClick"
+    :class="itemClasses"
+    role="menuitem"
+    :tabindex="disabled ? -1 : 0"
+  >
+    <slot name="prepend" />
+    <span class="flex-1"><slot /></span>
+    <slot name="append" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  disabled: { type: Boolean, default: false },
+  active: { type: Boolean, default: false },
+  dense: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['select'])
+
+const itemClasses = computed(() => [
+  'relative flex cursor-pointer select-none items-center gap-2',
+  'rounded-sm px-2 outline-none transition-colors',
+  props.disabled 
+    ? 'pointer-events-none opacity-50'
+    : 'hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900',
+  props.active ? 'bg-accent text-accent-foreground' : '',
+  props.dense ? 'py-1 text-sm' : 'py-2 text-sm'
+])
+
+const handleClick = () => {
+  if (!props.disabled) {
+    emit('select')
+  }
+}
+</script>