pgo-uiux2 1.0.0

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, withDefaults, defineProps, defineEmits } 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>