pgo-uiux2 1.0.0

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

@@ -0,0 +1,320 @@
+<template>
+  <div :class="['relative', margin]">
+    <label
+      :class="[
+        'inline-flex items-start gap-3 cursor-pointer select-none',
+        disabled ? 'opacity-50 cursor-not-allowed' : '',
+        labelPosition === 'left' ? 'flex-row-reverse' : ''
+      ]"
+      @click.prevent="toggle"
+    >
+      <!-- Checkbox Box -->
+      <div
+        :class="[
+          'flex-shrink-0 flex items-center justify-center border-2 transition-all duration-200',
+          sizeClasses,
+          roundedClasses,
+          stateClasses,
+          !disabled ? 'cursor-pointer' : 'cursor-not-allowed'
+        ]"
+      >
+        <!-- Checkmark Icon -->
+        <Transition name="scale">
+          <svg
+            v-if="isChecked && !indeterminate"
+            class="text-white"
+            :class="iconSizeClasses"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="3"
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        </Transition>
+
+        <!-- Indeterminate Icon -->
+        <Transition name="scale">
+          <svg
+            v-if="indeterminate"
+            class="text-white"
+            :class="iconSizeClasses"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="3"
+              d="M5 12h14"
+            />
+          </svg>
+        </Transition>
+      </div>
+
+      <!-- Label & Description -->
+      <div v-if="label || description || $slots.default" class="flex flex-col">
+        <span
+          v-if="label || $slots.default"
+          :class="[
+            'ui-text-primary leading-tight',
+            labelSizeClasses
+          ]"
+        >
+          <slot>{{ label }}</slot>
+          <span v-if="required" class="text-red-500 ml-0.5">*</span>
+        </span>
+        <span
+          v-if="description"
+          :class="[
+            'ui-text-secondary mt-0.5',
+            descriptionSizeClasses
+          ]"
+        >
+          {{ description }}
+        </span>
+      </div>
+    </label>
+
+    <!-- Error Message -->
+    <p v-if="error" class="mt-1 text-sm text-red-500">
+      {{ typeof error === 'string' ? error : '' }}
+    </p>
+
+    <!-- Hint Message -->
+    <p v-if="hint && !error" class="mt-1 text-sm ui-text-secondary">
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [Boolean, Array],
+    default: false
+  },
+  value: {
+    type: [String, Number, Boolean, Object],
+    default: true
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  labelPosition: {
+    type: String,
+    default: 'right', // 'left' | 'right'
+    validator: (v) => ['left', 'right'].includes(v)
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: [String, Boolean],
+    default: false
+  },
+  hint: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v)
+  },
+  rounded: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['none', 'sm', 'md', 'lg', 'full'].includes(v)
+  },
+  color: {
+    type: String,
+    default: 'primary' // 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  },
+  margin: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// Check if checkbox is checked
+const isChecked = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(props.value)
+  }
+  return props.modelValue === true || props.modelValue === props.value
+})
+
+// Toggle checkbox
+const toggle = () => {
+  if (props.disabled) return
+
+  let newValue
+
+  if (Array.isArray(props.modelValue)) {
+    // Array mode (multiple checkboxes)
+    newValue = [...props.modelValue]
+    const index = newValue.indexOf(props.value)
+    if (index === -1) {
+      newValue.push(props.value)
+    } else {
+      newValue.splice(index, 1)
+    }
+  } else {
+    // Boolean mode (single checkbox)
+    newValue = !props.modelValue
+  }
+
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+
+// Size classes for the checkbox box
+const sizeClasses = computed(() => {
+  const sizes = {
+    xs: 'w-3.5 h-3.5',
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6',
+    xl: 'w-7 h-7'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+// Icon size classes
+const iconSizeClasses = computed(() => {
+  const sizes = {
+    xs: 'w-2.5 h-2.5',
+    sm: 'w-3 h-3',
+    md: 'w-3.5 h-3.5',
+    lg: 'w-4 h-4',
+    xl: 'w-5 h-5'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+// Label size classes
+const labelSizeClasses = computed(() => {
+  const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base',
+    xl: 'text-lg'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+// Description size classes
+const descriptionSizeClasses = computed(() => {
+  const sizes = {
+    xs: 'text-xs',
+    sm: 'text-xs',
+    md: 'text-xs',
+    lg: 'text-sm',
+    xl: 'text-base'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+// Rounded classes
+const roundedClasses = computed(() => {
+  const rounded = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded',
+    lg: 'rounded-lg',
+    full: 'rounded-full'
+  }
+  return rounded[props.rounded] || rounded.md
+})
+
+// Color classes based on state
+const colorClasses = computed(() => {
+  const colors = {
+    primary: {
+      checked: 'bg-primary border-primary',
+      unchecked: 'border-primary/20 hover:border-primary'
+    },
+    success: {
+      checked: 'bg-green-500 border-green-500',
+      unchecked: 'border-green-100 hover:border-green-500'
+    },
+    warning: {
+      checked: 'bg-yellow-500 border-yellow-500',
+      unchecked: 'border-yellow-100 hover:border-yellow-500'
+    },
+    danger: {
+      checked: 'bg-red-500 border-red-500',
+      unchecked: 'border-red-100 hover:border-red-500'
+    },
+    info: {
+      checked: 'bg-blue-500 border-blue-500',
+      unchecked: 'border-blue-100 hover:border-blue-500'
+    }
+  }
+  return colors[props.color] || colors.primary
+})
+
+// State classes combining everything
+const stateClasses = computed(() => {
+  if (props.error) {
+    if (isChecked.value || props.indeterminate) {
+      return 'bg-red-500 border-red-500'
+    }
+    return 'border-red-500 hover:border-red-600'
+  }
+
+  if (isChecked.value || props.indeterminate) {
+    return colorClasses.value.checked
+  }
+
+  if (props.disabled) {
+    return 'border-color-3 bg-color-2'
+  }
+
+  return colorClasses.value.unchecked
+})
+</script>
+
+<style scoped>
+.scale-enter-active,
+.scale-leave-active {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  transform: scale(0);
+  opacity: 0;
+}
+
+.scale-enter-to,
+.scale-leave-from {
+  transform: scale(1);
+  opacity: 1;
+}
+</style>

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

@@ -0,0 +1,395 @@
+<template>
+    <div v-on-click-outside="close" :class="['relative', width]">
+    <Base v-bind="$props"
+        :model-value="formattedDate"
+        @update:model-value="handleUpdate"
+        @click:clear="clearSelection"
+        v-on="$attrs"
+        :dir="computedDir"
+        :lang="computedLang"
+        :label="label"
+        :prepend="prepend || 'calendar'"
+        :append="append"
+        :isOpen="isOpen"
+        :size="size"
+        :disabled="disabled"
+        :readonly="false"
+        :required="required"
+        :bg="bg"
+        :border="border"
+        :text-color="textColor"
+        :rounded="rounded"
+        :width="width"
+        :hint="hint"
+        :persistent-hint="!!hint"
+        :rules="rules"
+        :clearable="true"
+    >
+    <template #control="{ attrs, events }">
+        <div :class="['flex-1', 'flex', 'items-center', 'gap-2', 'justify-between', 'w-full', 'h-full']">
+            <!-- Editable date input -->
+            <input
+                ref="inputRef"
+                v-model="displayValue"
+                type="text"
+                :placeholder="placeholder || ''"
+                :disabled="disabled"
+                :class="[
+                    'w-full bg-transparent outline-none border-none',
+                    'placeholder:text-gray-400',
+                    'focus:outline-none',
+                    'cursor-text'
+                ]"
+                @click.stop
+                @input="handleInputChange"
+                @focus="handleFocus"
+                @blur="(e) => { handleInputBlur(); events.blur(e); }"
+            />
+        </div>
+    </template>
+
+    <template #prepend>
+        <!-- <div @click="toggleOpen" class="cursor-pointer">
+            <HeroIcon
+                name="calendar"
+                type="outline"
+                size="16"
+                class="text-input-border"
+            />
+        </div> -->
+    </template>
+    </Base>
+    
+    <Transition name="fade">
+    <div
+        v-if="isOpen"
+        :class="[
+            'absolute left-0 right-0 mt-1 z-100 w-fit',
+            menuClass
+        ]"
+        :style="menuStyle"
+    >
+        <VueDatePicker
+            v-model="internalDate"
+            inline
+            :placeholder="placeholder"
+            :range="range"
+            :auto-apply="range ? false : autoApply"
+            :multi-calendars="multiCalendars"
+            :enable-time-picker="enableTimePicker"
+            :format="format"
+            :week-picker="weekPicker"
+            :month-picker="monthPicker"
+            :year-picker="yearPicker"
+            :min-date="minDate"
+            :max-date="maxDate"
+            :disabled-dates="disabledDates"
+            :multi-dates="multiDates"
+            :text-input="textInput"
+            @update:model-value="handleDateSelect"
+        />
+    </div>
+    </Transition>
+    </div>
+</template>
+
+<script setup>
+    import { ref, computed, watch, nextTick, inject } from 'vue'
+    import { roundedMap } from '../../../pgo-components/lib/componentConfig'
+    import { VueDatePicker } from '@vuepic/vue-datepicker'
+    import '@vuepic/vue-datepicker/dist/main.css'
+    import Base from '../base/Base.vue'
+    import HeroIcon from '../HeroIcon.vue'
+    import { vOnClickOutside } from '@vueuse/components'
+
+    const emit = defineEmits(['update:modelValue', 'change', 'clear', 'open', 'close']);
+
+    const props = defineProps({
+        modelValue: {
+            type: [String, Date, Number, Array],
+            default: null
+        },
+        label: { type: [Object, String], default: '' },
+        dir: { type: String, default: '' },
+        placeholder: { type: String, default: '' },
+        prepend: { type: String, default: '' },
+        append: { type: String, default: '' },
+        disabled: { type: Boolean, default: false },
+        errorMessages: { type: Array, default: () => [] },
+        rounded: { type: String, default: 'sm' },
+        size: { type: String },
+        border: { type: String },
+        textColor: { type: String },
+        menuClass: { type: String, default: '' },
+        menuStyle: { type: Object, default: () => ({}) },
+        bg: { type: String },
+        readonly: { type: Boolean, default: false },
+        required: { type: Boolean, default: false },
+        width: { type: String, default: '' },
+        hint: { type: String, default: '' },
+        lang: { type: String },
+        rules: { type: Array, default: () => [] },
+        format: { type: String, default: 'dd/MM/yyyy' }, // Date format for display
+        range: { type: Boolean, default: false },
+        autoApply: { type: Boolean, default: true },
+        multiCalendars: { type: Number },
+        enableTimePicker: { type: Boolean, default: true },
+        weekPicker: { type: Boolean, default: false },
+        monthPicker: { type: Boolean, default: false },
+        yearPicker: { type: Boolean, default: false },
+        minDate: { type: Date, default: null },
+        maxDate: { type: Date, default: null },
+        disabledDates: { default: undefined },
+        multiDates: { type: Boolean, default: false },
+        textInput: { type: Boolean, default: true },
+
+    });
+
+    // Inject dir from parent Card (if exists)
+    const cardDir = inject('parentDir', '')
+    const cardLang = inject('parentLang', '')
+    const formContext = inject('formContext', null)
+    const isFocused = ref(false)
+
+    // Use component's dir if provided, otherwise use card's dir
+    const computedDir = computed(() => props.dir || cardDir)
+    const computedLang = computed(() => props.lang || cardLang)
+
+    const isOpen = ref(false)
+    const internalDate = ref(props.modelValue)
+    const displayValue = ref('')
+    const inputRef = ref(null)
+    const isTyping = ref(false)
+
+    // Date formatter function
+    const formatDate = (date, format) => {
+        if (!date) return ''
+        
+        const d = new Date(date)
+        if (isNaN(d.getTime())) return ''
+        
+        const year = d.getFullYear()
+        const month = String(d.getMonth() + 1).padStart(2, '0')
+        const day = String(d.getDate()).padStart(2, '0')
+        const hours = String(d.getHours()).padStart(2, '0')
+        const minutes = String(d.getMinutes()).padStart(2, '0')
+        const seconds = String(d.getSeconds()).padStart(2, '0')
+        
+        let formatted = format
+            .replace('yyyy', year)
+            .replace('MM', month)
+            .replace('dd', day)
+        
+        // Add time if enableTimePicker is true
+        if (props.enableTimePicker) {
+            formatted += ` ${hours}:${minutes}`
+        }
+        
+        return formatted
+    }
+
+    // Parse date from string based on format
+    const parseDate = (dateString, format) => {
+        if (!dateString) return null
+        
+        const parts = dateString.split(' ')
+        const datePart = parts[0]
+        const timePart = parts[1]
+        
+        let date = null
+        
+        // Parse based on separator in format
+        const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '/'
+        const dateParts = datePart.split(separator)
+        
+        if (format.startsWith('dd')) {
+            // dd-MM-yyyy or dd/MM/yyyy
+            if (dateParts.length >= 3) {
+                date = new Date(dateParts[2], dateParts[1] - 1, dateParts[0])
+            }
+        } else if (format.startsWith('MM')) {
+            // MM/dd/yyyy
+            if (dateParts.length >= 3) {
+                date = new Date(dateParts[2], dateParts[0] - 1, dateParts[1])
+            }
+        } else if (format.startsWith('yyyy')) {
+            // yyyy-MM-dd
+            if (dateParts.length >= 3) {
+                date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
+            }
+        }
+        
+        // Parse time if present
+        if (date && timePart && props.enableTimePicker) {
+            const timeParts = timePart.split(':')
+            if (timeParts.length >= 2) {
+                date.setHours(parseInt(timeParts[0], 10) || 0)
+                date.setMinutes(parseInt(timeParts[1], 10) || 0)
+                if (timeParts.length === 3) {
+                    date.setSeconds(parseInt(timeParts[2], 10) || 0)
+                }
+            }
+        }
+        
+        return date
+    }
+    // Format date for display
+    const formattedDate = computed(() => {
+        if (!props.modelValue) return ''
+
+        if (props.range) {
+            if (!Array.isArray(props.modelValue)) return ''
+            const [start, end] = props.modelValue
+            if (!start || !end) return ''
+            return `${formatDate(start, props.format)} - ${formatDate(end, props.format)}`
+        }
+
+        return formatDate(props.modelValue, props.format)
+    })
+
+    // Watch for external modelValue changes
+    watch(() => props.modelValue, (newVal) => {
+        if (!isTyping.value) {  // Only update if not typing
+            internalDate.value = newVal
+            displayValue.value = formattedDate.value
+        }
+    }, { immediate: true })
+
+    watch(internalDate, (newVal) => {
+        if (newVal && !isNaN(new Date(newVal).getTime()) && !isTyping.value) {  // Only update if not typing
+            nextTick(() => {
+                displayValue.value = formatDate(newVal, props.format)
+            })
+        }
+    })
+
+    const handleUpdate = (val) => {
+        // This handles Base component updates (not used for DatePicker)
+    }
+    const handleInput = (e) => {
+        emit('update:modelValue', e.target.value)
+    }
+
+    const handleInputChange = (e) => {
+        isTyping.value = true  // Set typing flag
+        displayValue.value = e.target.value
+        
+        // Only parse and update calendar when we have a complete date
+        const separator = props.format.includes('/') ? '/' : props.format.includes('-') ? '-' : '/'
+        const parts = displayValue.value.split(' ')[0].split(separator)
+        
+        // Wait for complete date with full year (4 digits)
+        if (parts.length === 3 && parts.every(part => part.length > 0)) {
+            // Find which part is the year based on format
+            let yearPart
+            if (props.format.startsWith('dd')) {
+                yearPart = parts[2] // dd/MM/yyyy
+            } else if (props.format.startsWith('MM')) {
+                yearPart = parts[2] // MM/dd/yyyy
+            } else if (props.format.startsWith('yyyy')) {
+                yearPart = parts[0] // yyyy-MM-dd
+            }
+            
+            // Only update if year has 4 digits
+            if (yearPart && yearPart.length === 4) {
+                const parsedDate = parseDate(displayValue.value, props.format)
+                if (parsedDate && !isNaN(parsedDate.getTime())) {
+                    // Create new Date to force reactivity
+                    internalDate.value = new Date(parsedDate.getTime())
+                }
+            }
+        }
+    }
+
+    const handleFocus = () => {
+        // Open picker when focusing on input
+        if (!isOpen.value) {
+            isOpen.value = true
+            emit('open')
+        }
+    }
+
+    const handleInputBlur = () => {
+        isTyping.value = false  // Reset typing flag on blur
+        
+        if (!displayValue.value) {
+            clearSelection()
+            return
+        }
+        
+        const parsedDate = parseDate(displayValue.value, props.format)
+        if (parsedDate && !isNaN(parsedDate.getTime())) {
+            // JavaScript Date auto-corrects invalid dates (e.g., month 13 becomes month 1 of next year)
+            // Update displayValue to show the corrected date
+            displayValue.value = formatDate(parsedDate, props.format)
+            emit('update:modelValue', parsedDate)
+            emit('change', parsedDate)
+            internalDate.value = parsedDate
+        } else {
+            // Invalid date, reset to previous value
+            displayValue.value = formattedDate.value
+        }
+    }
+
+    const handleDateSelect = (date) => {
+        internalDate.value = date
+        emit('update:modelValue', date)
+        emit('change', date)
+
+        if (props.range) {
+            if (Array.isArray(date) && date[0] && date[1]) {
+            displayValue.value =
+                `${formatDate(date[0], props.format)} - ${formatDate(date[1], props.format)}`
+            isOpen.value = false
+            }
+        } else {
+            displayValue.value = formatDate(date, props.format)
+            isOpen.value = false
+        }
+    }
+
+    const toggleOpen = () => {
+        if (!props.disabled) {
+            isOpen.value = !isOpen.value
+
+            if (isOpen.value) {
+                emit('open')
+            } else {
+                emit('close')
+            }
+        }
+    }
+
+    const close = () => {
+        isOpen.value = false
+        emit('close')
+    }
+
+    const clearSelection = () => {
+        internalDate.value = null
+        displayValue.value = ''
+        isTyping.value = false
+        emit('update:modelValue', null)
+        emit('change', null)
+        emit('clear')
+    }
+
+    // Expose methods
+    defineExpose({
+        close,
+        open: () => toggleOpen(),
+        clear: clearSelection,
+    })
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>