QuantEngineByItz/src/frontend/src/components/fields/CodeField.vue

<script setup lang="ts">
import { computed } from 'vue';
import TextField from './TextField.vue';
import type { InputDensity } from '../primitives/BaseInput.vue';
import type { FieldState } from '../../types/enterpriseTemplateContracts';

interface Props {
  id?: string;
  label?: string;
  fieldState?: FieldState<string>;
  modelValue?: string;
  placeholder?: string;
  density?: InputDensity;
  required?: boolean;
  readonly?: boolean;
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  density: 'standard',
  required: false,
  readonly: false,
  disabled: false
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
  (e: 'change', value: string): void;
  (e: 'blur'): void;
}>();

// Automatic Uppercase Normalization for Alphanumeric Code Field
const uppercaseNormalizer = (val: string): string => {
  return val.toUpperCase().replace(/[^A-Z0-9_-]/g, '');
};

const currentValue = computed({
  get: () => props.fieldState?.value ?? props.modelValue,
  set: (val: string) => {
    const normalized = uppercaseNormalizer(val);
    emit('update:modelValue', normalized);
    emit('change', normalized);
  }
});
</script>

<template>
  <TextField
    :id="id"
    v-model="currentValue"
    :label="label"
    :field-state="fieldState"
    :placeholder="placeholder || '예: ORD-2026-001'"
    :density="density"
    :required="required"
    :readonly="readonly"
    :disabled="disabled"
    :normalizer="uppercaseNormalizer"
    @blur="emit('blur')"
  />
</template>