pgo-ui 1.0.0

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>

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

@@ -0,0 +1,162 @@
+<template>
+  <label
+    :class="['inline-flex gap-2 items-center', { 'opacity-50 cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]"
+  >
+    <input
+      ref="inputRef"
+      v-bind="attrs"
+      class="sr-only"
+      type="radio"
+      :name="name"
+      :value="value"
+      :disabled="disabled"
+      :checked="isChecked"
+      @change="onChange"
+      @keydown.enter.prevent="onChange"
+    />
+
+    <!-- Outer circle -->
+    <span
+      :class="[
+        'relative flex items-center justify-center rounded-full border transition-colors duration-150',
+        sizeOuter,
+        isChecked ? checkedOuter : uncheckedOuter,
+        focusClass
+      ]"
+      aria-hidden="true"
+    >
+      <!-- inner dot -->
+      <span
+        v-if="isChecked"
+        :class="['rounded-full bg-white transition-transform', sizeInner]"
+      />
+    </span>
+
+    <!-- Label -->
+    <span v-if="$slots.default || label" class="select-none ml-2 text-sm" :class="labelClass">
+      <slot>{{ selectedlabel }}</slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, inject, useAttrs } from 'vue'
+import { useLanguageSelected } from '../../../pgo-components/lib/componentConfig'
+
+const { language } = inject<{ language: { value: string } }>('i18n') || { language: { value: 'en' } }
+
+const props = withDefaults(defineProps<{
+  modelValue?: string|number|boolean|null,
+  value: string|number|boolean,
+  name?: string,
+  label?: string|object,
+  disabled?: boolean,
+  size?: 'sm'|'md'|'lg',
+  lang?: string,
+  dir?: string,
+  color?: string
+}>(), {
+  size: 'md',
+  disabled: false,
+  color: 'primary'
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const attrs = useAttrs()
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const isChecked = computed(() => {
+  // Loose equality to support number/string matching
+  // but keep it predictable; change if strict equality preferred
+  // (e.g. Number/ String conversion)
+  // eslint-disable-next-line eqeqeq
+  return props.modelValue == props.value
+})
+
+const selectedDirection = computed(() => {
+    let selected = ''
+    if (props.dir == 'rtl') selected = 'rtl'
+    else if (props.lang == 'dv') selected = 'rtl'
+    else if (props.dir == 'ltr') selected = 'ltr'
+    else if (props.lang == 'en') selected = 'ltr'
+    else selected = ''
+    return selected
+})
+
+const selectLanguage = computed(() => {
+    let Selected = ''
+    if (props.lang != ''){
+        Selected = props.lang
+    }
+    else if (props.dir == 'rtl') {
+        Selected = 'dv'
+    }
+    else if (props.dir == 'ltr') {
+        Selected = 'en'
+    }
+    else {
+        Selected = language.value
+    }
+    console.log('selectLanguage in Card222:', Selected)
+    return (Selected === 'dv') ? 'dv' : 'en'
+})
+
+const faruma = computed(() => {
+    if (selectLanguage.value == 'dv') return 'faruma'
+    return ''
+})
+
+const selectedlabel = computed(() => {
+    return useLanguageSelected(props.label, selectLanguage.value, '')
+})
+
+const onChange = (e?: Event) => {
+  if (props.disabled) return
+  emit('update:modelValue', props.value)
+  emit('change', props.value)
+}
+
+// Size classes
+const sizeOuter = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'w-4 h-4'
+    case 'lg': return 'w-6 h-6'
+    default: return 'w-5 h-5'
+  }
+})
+const sizeInner = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'w-2 h-2'
+    case 'lg': return 'w-3 h-3'
+    default: return 'w-2.5 h-2.5'
+  }
+})
+
+// Color mapping (common tokens in your project). Accept a Tailwind class string too.
+const colorClass = computed(() => {
+  const c = String(props.color || 'primary')
+  // If user passed a tailwind color class like "bg-red-500" or "text-red-500", use it.
+  if (/^(bg-|text-|border-)/.test(c)) return c
+  // Map simple tokens to classes — adapt to your project's tokens
+  const map: Record<string, string> = {
+    primary: 'bg-primary',
+    secondary: 'bg-secondary',
+    success: 'bg-green-500',
+    danger: 'bg-red-500',
+    info: 'bg-sky-500',
+    warning: 'bg-amber-500'
+  }
+  return map[c] || 'bg-primary'
+})
+
+// Checked / unchecked classes
+const checkedOuter = computed(() => `${colorClass.value} border-transparent`)
+const uncheckedOuter = computed(() => 'bg-white border-gray-300 dark:border-gray-600')
+
+// Focus ring
+const focusClass = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary'
+
+// Optional label color
+const labelClass = computed(() => props.disabled ? 'text-gray-400' : 'text-text')
+</script>

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

@@ -0,0 +1,188 @@
+<template>
+  <div
+    :id="id"
+    role="radiogroup"
+    :aria-labelledby="ariaLabelledby"
+    :aria-disabled="disabled ? 'true' : undefined"
+    :class="['inline-flex', direction === 'vertical' ? 'flex-col' : 'items-center', gapClass]"
+    @keydown="onKeydown"
+  >
+    <!-- Render from options prop if provided -->
+    <template v-if="Array.isArray(options) && options.length > 0">
+      <label
+        v-for="(opt, idx) in options"
+        :key="`opt-${idx}-${String(opt?.value)}`"
+        :class="['inline-flex items-center', { 'opacity-50 pointer-events-none': disabled || opt.disabled }]"
+      >
+        <Radio
+          ref="setOptionRef(idx)"
+          v-model="internalValue"
+          :value="opt.value"
+          :name="groupName"
+          :disabled="disabled || !!opt.disabled"
+          :size="size"
+          :color="opt.color || color"
+          @change="onChange(opt.value)"
+        >
+          <template #default>
+            <div class="flex flex-col">
+              <div class="select-none ml-2 text-sm" :class="labelClass">{{ opt.label }}</div>
+              <small v-if="opt.description" class="text-xs text-gray-500 ml-2">{{ opt.description }}</small>
+            </div>
+          </template>
+        </Radio>
+      </label>
+    </template>
+
+    <!-- Fallback: render default slot - expected to contain Radio children -->
+    <slot v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import Radio from './Radio.vue'
+
+/**
+ Props
+ - modelValue: the v-model value
+ - options: optional array of { label, value, disabled?, description?, color? }
+ - name: optional group name (if not provided a unique name is generated)
+ - disabled, size, color, direction
+ - ariaLabelledby: optional id for label element (for accessibility)
+*/
+const props = defineProps<{
+  modelValue?: unknown,
+  options?: Array<{
+    label: string,
+    value: any,
+    disabled?: boolean,
+    description?: string,
+    color?: string
+  }>,
+  name?: string,
+  disabled?: boolean,
+  size?: 'sm'|'md'|'lg',
+  color?: string,
+  direction?: 'horizontal'|'vertical',
+  gap?: string,
+  ariaLabelledby?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+  (e: 'change', value: any): void
+}>()
+
+// local id + group name
+const uid = Math.random().toString(36).slice(2, 9)
+const id = `radio-group-${uid}`
+const groupName = computed(() => props.name || `rg-${uid}`)
+const ariaLabelledby = computed(() => props.ariaLabelledby || undefined)
+
+// layout helpers
+const direction = computed(() => props.direction || 'horizontal')
+const gapClass = computed(() => {
+  if (props.gap) return props.gap
+  return direction.value === 'vertical' ? 'space-y-2' : 'space-x-4'
+})
+
+// simple defaults
+const size = computed(() => props.size || 'md')
+const color = computed(() => props.color || 'primary')
+const disabled = computed(() => !!props.disabled)
+const labelClass = computed(() => disabled.value ? 'text-gray-400' : 'text-text')
+
+// internal v-model proxy
+const internalValue = ref(props.modelValue)
+watch(() => props.modelValue, v => { internalValue.value = v }, { immediate: true })
+watch(internalValue, (val) => {
+  emit('update:modelValue', val)
+})
+
+// refs to child radios for keyboard navigation
+const optionRefs = ref<Array<HTMLElement | null>>([])
+
+function setOptionRef(index: number) {
+  return (el: HTMLElement | null) => {
+    optionRefs.value[index] = el
+  }
+}
+
+// update:modelValue already emitted via watcher above; this emits a change event too
+function onChange(val: any) {
+  return () => {
+    emit('change', val)
+  }
+}
+
+// Keyboard navigation: ArrowRight/ArrowDown => next, ArrowLeft/ArrowUp => prev, Home/End
+function focusIndex(index: number) {
+  const el = optionRefs.value[index]
+  if (el && typeof (el as any).focus === 'function') {
+    ;(el as any).focus()
+  }
+}
+
+function findEnabledIndex(start = 0, step = 1) {
+  const len = optionRefs.value.length
+  if (len === 0) return -1
+  let i = (start + len) % len
+  for (let iter = 0; iter < len; iter++) {
+    const idx = (i + iter * step + len) % len
+    const el = optionRefs.value[idx]
+    if (!el) continue
+    const radioEl = el.querySelector ? el.querySelector('input[type="radio"]') : el
+    if (!radioEl) continue
+    if ((radioEl as HTMLInputElement).disabled) continue
+    return idx
+  }
+  return -1
+}
+
+async function onKeydown(e: KeyboardEvent) {
+  if (!Array.isArray(props.options) || props.options.length === 0) return
+  const len = props.options.length
+  if (len === 0) return
+
+  const currentIndex = props.options.findIndex(o => o.value == internalValue.value)
+
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+    e.preventDefault()
+    const next = findEnabledIndex((currentIndex >= 0 ? currentIndex : -1) + 1, 1)
+    if (next >= 0) {
+      internalValue.value = props.options[next].value
+      await nextTick()
+      focusIndex(next)
+      emit('change', internalValue.value)
+    }
+  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    e.preventDefault()
+    const prev = findEnabledIndex((currentIndex >= 0 ? currentIndex : len) - 1, -1)
+    if (prev >= 0) {
+      internalValue.value = props.options[prev].value
+      await nextTick()
+      focusIndex(prev)
+      emit('change', internalValue.value)
+    }
+  } else if (e.key === 'Home') {
+    e.preventDefault()
+    const first = findEnabledIndex(0, 1)
+    if (first >= 0) {
+      internalValue.value = props.options[first].value
+      await nextTick()
+      focusIndex(first)
+      emit('change', internalValue.value)
+    }
+  } else if (e.key === 'End') {
+    e.preventDefault()
+    const last = findEnabledIndex(len - 1, -1)
+    if (last >= 0) {
+      internalValue.value = props.options[last].value
+      await nextTick()
+      focusIndex(last)
+      emit('change', internalValue.value)
+    }
+  }
+}
+</script>