pgo-uiux2 1.0.0

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

@@ -0,0 +1,326 @@
+<template>
+  <div :class="[containerClass, width]">
+    <Base
+      v-bind="$props"
+      :persistent-hint="!!hint"
+      :error="computedErrors.length > 0"
+      :is-open="dragActive"
+      :clearable="false"
+    >
+      <template #control="{ attrs }">
+        <div
+          :class="dropzoneClasses"
+          :aria-disabled="disabled"
+          role="button"
+          tabindex="0"
+          @click="openFileDialog"
+          @keydown.enter.prevent="openFileDialog"
+          @keydown.space.prevent="openFileDialog"
+          @dragenter.prevent="onDragEnter"
+          @dragover.prevent="onDragOver"
+          @dragleave.prevent="onDragLeave"
+          @drop.prevent="onDrop"
+        >
+          <input
+            :id="attrs.id"
+            ref="inputRef"
+            type="file"
+            :accept="accept"
+            :multiple="multiple"
+            class="hidden"
+            :disabled="disabled"
+            :readonly="attrs.readonly"
+            :required="attrs.required"
+            @change="onFileChange"
+          >
+
+          <div class="w-full flex items-center vts-ga-2 sm:gap-3 flex-wrap ">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-5 h-5 text-input-text flex-shrink-0"
+            >
+              <path d="M3 15a4 4 0 014-4h3v2H7a2 2 0 000 4h10a2 2 0 100-4h-3v-2h3a4 4 0 110 8H7a4 4 0 01-4-4z" />
+              <path d="M12 4a1 1 0 011 1v8a1 1 0 11-2 0V5a1 1 0 011-1z" />
+              <path d="M8.293 8.293a1 1 0 011.414 0L12 10.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" />
+            </svg>
+            <div class=" ">
+              <div class="text-sm text-input-text truncate">
+                <span class="font-medium">Click to upload</span> or drag and drop
+              </div>
+              <div class="text-xs text-input-text vts-mt-1 hidden sm:block">
+                {{ helpText }}
+              </div>
+            </div>
+          </div>
+          <Button
+            type="button"
+            size="xs"
+            :disabled="disabled"
+            :rounded="rounded"
+            class="vts-px-3 py-1.5 text-sm text-primaryText "
+          >
+            Browse
+          </Button>
+        </div>
+      </template>
+    </Base>
+
+    <!-- Selected files list -->
+    <div
+      v-if="files.length"
+      class="vts-mt-2 vts-space-y-2"
+    >
+      <div
+        v-for="(f, idx) in files"
+        :key="f._id"
+        :class="['flex items-center vts-ga-3 vts-pa-2 vts-border bg-input-background', border, rounded ? roundedMap[rounded] : 'vts-rounded-md']"
+      >
+        <div
+          v-if="showPreview && isImage(f.file)"
+          class="w-10 h-10 overflow-hidden vts-rounded-md vts-border border-input-border"
+        >
+          <img
+            :src="f.preview"
+            alt="preview"
+            class="w-full h-full object-cover"
+            loading="lazy"
+          >
+        </div>
+        <div class="min-w-0">
+          <div class="text-sm text-input-text truncate">
+            {{ f.file.name }}
+          </div>
+          <div class="text-xs text-input-text opacity-80">
+            {{ formatSize(f.file.size) }}
+          </div>
+        </div>
+        <button
+          type="button"
+          class="text-input-text hover:text-input-focus"
+          @click="removeAt(idx)"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 18 18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import Base from '../base/Base.vue'
+import { roundedMap } from '../../../pgo-components/lib/componentConfig'
+import Button from '../Button.vue'
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  label: { type: [String, Object] },
+  hint: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  errorMessages: { type: Array, default: () => [] },
+  prepend: { type: String, default: '' },
+  append: { type: String, default: '' },
+  size: { type: String, },
+  rounded: { type: String },
+  border: { type: String, default: 'border-input-border' },
+  textColor: { type: String, default: 'text-input-text' },
+  bg: { type: String, default: 'bg-input-bg' },
+  width: { type: String, default: 'w-full' },
+
+  multiple: { type: Boolean, default: true },
+  accept: { type: String, default: '' },
+  maxSizeMB: { type: Number, default: 2 },
+  showPreview: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'error', 'select', 'drop', 'remove'])
+
+const inputRef = ref(null)
+const dragActive = ref(true)
+const containerClass = ref('')
+
+const files = ref([]) // [{ file: File, preview: string|null, _id: string }]
+const componentErrors = ref([])
+
+const computedErrors = computed(() => {
+  const external = Array.isArray(props.errorMessages) ? props.errorMessages : []
+  const internal = Array.isArray(componentErrors.value) ? componentErrors.value : []
+  return [...external, ...internal]
+})
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    // accept external v-model updates
+    files.value = toInternal(val)
+  },
+  { immediate: true }
+)
+
+function toInternal(list) {
+  const arr = Array.isArray(list) ? list : []
+  return arr.map((f) => ({ file: f.file ?? f, preview: f.preview ?? null, _id: genId() }))
+}
+
+function genId() {
+  return Math.random().toString(36).slice(2)
+}
+
+const dropzoneClasses = computed(() => [
+  'w-full h-full flex items-center justify-between',
+  'vts-ga-2 sm:vts-gap-3 vts-px-2 sm:vts-px-3',
+  'cursor-pointer select-none transition',
+  'bg-input-background',
+])
+
+const helpText = computed(() => {
+  const acc = props.accept && props.accept.length ? props.accept : 'any file'
+  return `${props.multiple ? 'Upload multiple ' : 'Upload '}(${acc}) • Max ${props.maxSizeMB}MB each`
+})
+
+function openFileDialog() {
+  if (props.disabled || props.readonly) return
+  inputRef.value?.click()
+}
+
+function onFileChange(e) {
+  if (!e.target.files) return
+  const list = Array.from(e.target.files)
+  addFiles(list)
+  // reset input so same file can be selected again
+  e.target.value = ''
+}
+
+function onDragEnter() {
+  if (props.disabled) return
+  dragActive.value = true
+}
+
+function onDragOver() {
+  if (props.disabled) return
+  dragActive.value = true
+}
+
+function onDragLeave() {
+  dragActive.value = false
+}
+
+function onDrop(e) {
+  dragActive.value = false
+  if (props.disabled) return
+  const dt = e.dataTransfer
+  const list = dt ? Array.from(dt.files || []) : []
+  emit('drop', list)
+  addFiles(list)
+}
+
+function addFiles(list) {
+  componentErrors.value = []
+  const accepted = []
+  const maxBytes = props.maxSizeMB * 1024 * 1024
+  const acceptSet = parseAccept(props.accept)
+
+  for (const f of list) {
+    if (f.size > maxBytes) {
+      componentErrors.value.push(`${f.name} exceeds ${props.maxSizeMB}MB`)
+      emit('error', { type: 'size', file: f })
+      continue
+    }
+    if (acceptSet.size && !matchesAccept(f, acceptSet)) {
+      componentErrors.value.push(`${f.name} type not allowed`)
+      emit('error', { type: 'type', file: f })
+      continue
+    }
+    accepted.push(f)
+  }
+
+  if (!accepted.length) return
+
+  const prepared = accepted.map((f) => ({ file: f, preview: createPreview(f), _id: genId() }))
+  const next = props.multiple ? files.value.concat(prepared) : prepared.slice(0, 1)
+  files.value = next
+  emit('select', accepted)
+  emit('update:modelValue', next.map((x) => ({ file: x.file, preview: x.preview })))
+  emit('change', next.map((x) => x.file))
+}
+
+function createPreview(file) {
+  if (!isImage(file)) return null
+  try {
+    return URL.createObjectURL(file)
+  } catch {
+    return null
+  }
+}
+
+function isImage(file) {
+  return /^image\//.test(file.type)
+}
+
+function removeAt(index) {
+  const removed = files.value.splice(index, 1)
+  emit('remove', removed[0]?.file)
+  emit('update:modelValue', files.value.map((x) => ({ file: x.file, preview: x.preview })))
+  emit('change', files.value.map((x) => x.file))
+}
+
+function parseAccept(accept) {
+  const set = new Set()
+  if (!accept) return set
+  accept
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .forEach((token) => set.add(token.toLowerCase()))
+  return set
+}
+
+function matchesAccept(file, set) {
+  if (!set || !set.size) return true
+  const type = file.type.toLowerCase()
+  const ext = file.name.toLowerCase().split('.').pop()
+  for (const token of set) {
+    if (token.includes('/')) {
+      // e.g., image/* or image/png
+      const [major, minor] = token.split('/')
+      const [ftMajor, ftMinor] = type.split('/')
+      if (minor === '*') {
+        if (major === ftMajor) return true
+      } else if (token === type) {
+        return true
+      }
+    } else if (token.startsWith('.')) {
+      if (ext && token.slice(1) === ext) return true
+    }
+  }
+  return false
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`
+  const kb = bytes / 1024
+  if (kb < 1024) return `${kb.toFixed(1)} KB`
+  const mb = kb / 1024
+  return `${mb.toFixed(2)} MB`
+}
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,243 @@
+<template>
+  <div 
+    ref="containerRef"
+    :class="['relative', containerClass, width]"
+  >
+    <Base
+        :model-value="modelValue"
+        :label="label"
+        :hint="hint"
+        :persistent-hint="!!hint"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :error="!!error || errorMessages.length > 0"
+        :error-messages="errorMessages"
+        :clearable="clearable && !loading"
+        :size="size"
+        :id="inputId"
+        :prepend="prepend"
+        :append="append"
+        :is-open="isFocused"
+        @click:clear="clear"
+        :bg="bg"
+        :border="border"
+        :text-color="textColor"
+        :rounded="rounded"
+        :dir="computedDir" 
+        :lang="computedLang"
+        :width="width"
+        :rules="rules"
+    >
+      <template #control="{ attrs, events }">
+        <input
+          ref="inputRef"
+          v-bind="attrs"
+          v-on="events"
+          type="number"
+          :value="displayValue"
+          :placeholder="isFocused && (modelValue === '' || modelValue === null) ? placeholder : ''"
+          :class="inputClasses"
+          :min="min"
+          :max="max"
+          :step="step"
+          @input="handleInput"
+          @keydown.enter="handleEnter"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+      </template>
+
+      <!-- Loading spinner in append slot -->
+      <template v-if="loading" #append>
+        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 714 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </template>
+    </Base>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject } from 'vue'
+import Base from '../base/Base.vue'
+import { roundedMap, sizes, iconSizes } from '../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+  modelValue: { type: [String, Number, null], default: '' },
+  label: { type: [String, Object], default: '' },
+  placeholder: { type: String, default: '0' },
+  hint: { type: String, default: '' },
+  error: { type: String, default: '' },
+  errorMessages: { type: Array, default: () => [] },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+  loading: { type: Boolean, default: false },
+  prepend: { type: String, default: '' },
+  append: { type: String, default: '' },
+  rules: { type: Array, default: () => [] },
+
+  // number-specific
+  min: { type: [Number, String], default: undefined },
+  max: { type: [Number, String], default: undefined },
+  step: { type: [Number, String], default: '1' },
+  allowDecimal: { type: Boolean, default: true },
+
+  // Appearance
+  size: { type: String },
+  rounded: { type: String },
+  border: { type: String},
+  textColor: { type: String },
+  bg: { type: String },
+  containerClass: { type: String, default: '' },
+  id: { type: String, default: '' },
+  width: { type: String, default: 'w-full' },
+
+  // RTL/Lang support
+  dir: { type: String, default: '' },
+  lang: { type: String, default: '' },
+
+  // Props that might be passed but not used (to avoid warnings)
+  items: { type: Array, default: () => [] },
+  itemText: { type: String, default: 'text' },
+  itemValue: { type: String, default: 'value' },
+})
+
+const emit = defineEmits([
+  'update:modelValue',
+  'input',
+  'change',
+  'focus',
+  'blur',
+  'clear',
+  'enter'
+])
+
+// Inject dir from parent Card (if exists)
+const cardDir = inject('parentDir', '')
+const cardLang = inject('parentLang', '')
+
+// Use component's dir if provided, otherwise use card's dir
+const computedDir = computed(() => props.dir || cardDir)
+const computedLang = computed(() => props.lang || cardLang)
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const containerRef = ref(null)
+const isFocused = ref(false)
+
+// Generate unique ID
+const inputId = computed(() => props.id || `input-${Math.random().toString(36).substr(2, 9)}`)
+
+// Input classes (match TextField)
+const inputClasses = computed(() => [
+  'w-full bg-transparent outline-none border-none',
+  'placeholder:text-gray-400',
+  'focus:outline-none'
+])
+
+// displayValue keeps caret-friendly representation
+const displayValue = computed(() => {
+  if (props.modelValue === null || props.modelValue === undefined || props.modelValue === '') return ''
+  return String(props.modelValue)
+})
+
+/**
+ * Parse input value to number or empty string.
+ * - If field empty => ''
+ * - If allowDecimal false => parseInt
+ * - Otherwise parseFloat
+ * - If parsed is NaN => keep as string to allow user editing (do not force)
+ */
+const parseValue = (val: string) => {
+  if (val === '') return ''
+  // Trim to avoid whitespace
+  const v = String(val).trim()
+  if (v === '') return ''
+  // If not allowed decimal and contains dot -> treat as parseInt of part before dot
+  if (!props.allowDecimal) {
+    const parsed = parseInt(v, 10)
+    return Number.isNaN(parsed) ? v : parsed
+  }
+  const parsedFloat = parseFloat(v)
+  return Number.isNaN(parsedFloat) ? v : parsedFloat
+}
+
+const clampValue = (num: number) => {
+  let n = num
+  if (props.min !== undefined && props.min !== null && props.min !== '') {
+    const minN = Number(props.min)
+    if (!Number.isNaN(minN)) n = Math.max(n, minN)
+  }
+  if (props.max !== undefined && props.max !== null && props.max !== '') {
+    const maxN = Number(props.max)
+    if (!Number.isNaN(maxN)) n = Math.min(n, maxN)
+  }
+  return n
+}
+
+const handleInput = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const raw = target.value
+
+  // Emit input for immediate reactive usage
+  emit('input', raw)
+
+  // Parse the value; if parse returns number, clamp to min/max
+  const parsed = parseValue(raw)
+
+  if (typeof parsed === 'number') {
+    const clamped = clampValue(parsed)
+    emit('update:modelValue', clamped)
+    // For consistency also emit change when user types a valid number
+    emit('change', clamped)
+  } else {
+    // Keep user's intermediate string (e.g. '-' or '.'), emit as-is to model so UI shows it
+    emit('update:modelValue', parsed)
+  }
+}
+
+const handleFocus = (event: Event) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event: Event) => {
+  isFocused.value = false
+  // On blur, if modelValue is numeric string, coerce to number and clamp
+  const mv = props.modelValue
+  if (typeof mv === 'string' && mv.trim() !== '') {
+    const coerced = parseValue(mv)
+    if (typeof coerced === 'number') {
+      const clamped = clampValue(coerced)
+      emit('update:modelValue', clamped)
+      emit('change', clamped)
+    }
+  }
+  emit('blur', event)
+}
+
+const handleEnter = (event: Event) => {
+  emit('enter', props.modelValue)
+}
+
+const clear = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+  inputRef.value?.focus()
+}
+
+// Focus method
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+// Expose methods
+defineExpose({ focus, clear })
+</script>
+
+<style scoped>
+/* no additional styling; Base handles visual chrome */
+</style>