ローカライゼーションアップデートとダイアログ入力検証の強化#

type Input = {
  type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local' | 'textarea';
  placeholder?: string | null;
  autocomplete?: string;
  default: string | number | null;
  minLength?: number;
  maxLength?: number;
  min?: number;
  max?: number;
  step?: InputHTMLAttributes['step'];
};

<MkInput v-if="input.type !== 'textarea'" 
  ref="inputComponent" 
  v-model="inputValue" 
  :type="input.type || 'text'" 
  :min="input.min" 
  :max="input.max" 
  :step="input.step" 
  @keydown="onInputKeydown">

<input
  :type="type"
  :step="step"
  :min="min"
  :max="max"
  ...
/>

export function inputNumber(props: {
  title?: string | null;
  text?: string | null;
  placeholder?: string | null;
  autocomplete?: string;
  default?: number | null;
  min?: number;
  max?: number;
  step?: InputHTMLAttributes['step'];
}): Promise<{
  canceled: true; result: undefined;
} | {
  canceled: false; result: number | null;
}>;

const { canceled, result } = await os.inputNumber({
  title: i18n.ts.dimension,
  default: current ?? prefer.r.dimension.value,
  min: 0,
  max,
  step: 1,
});

const okButtonDisabledReason = computed<null | 'charactersExceeded' | 'charactersBelow' | 'numberBelow' | 'numberAbove' | 'invalid'>(() => {
  if (props.input) {
    if (props.input.type === 'number') {
      const rawValue = inputValue.value;
      const numericValue = typeof rawValue === 'number'
        ? rawValue
        : rawValue === '' || rawValue == null
          ? null
          : Number(rawValue);

      if (numericValue != null && Number.isFinite(numericValue)) {
        if (props.input.min != null && numericValue < props.input.min) {
          return 'numberBelow';
        }
        if (props.input.max != null && numericValue > props.input.max) {
          return 'numberAbove';
        }
      } else if (numericValue != null) {
        return 'invalid';
      }

      if (inputComponent.value && !inputComponent.value.inputEl.validity.valid) {
        return 'invalid';
      }
    }
    // ... 文字列長の検証 ...
  }
  return null;
});

<template #caption>
  <span v-if="okButtonDisabledReason === 'charactersExceeded'" 
    v-text="i18n.tsx._dialog.charactersExceeded({ current: (inputValue as string)?.length ?? 0, max: input.maxLength ?? 'NaN' })"/>
  <span v-else-if="okButtonDisabledReason === 'charactersBelow'" 
    v-text="i18n.tsx._dialog.charactersBelow({ current: (inputValue as string)?.length ?? 0, min: input.minLength ?? 'NaN' })"/>
  <span v-else-if="okButtonDisabledReason === 'numberBelow'" 
    v-text="i18n.tsx._dialog.numberBelow({ current: inputValue ?? 'NaN', min: input.min ?? 'NaN' })"/>
  <span v-else-if="okButtonDisabledReason === 'numberAbove'" 
    v-text="i18n.tsx._dialog.numberAbove({ current: inputValue ?? 'NaN', max: input.max ?? 'NaN' })"/>
  <span v-else-if="okButtonDisabledReason === 'invalid'" 
    v-text="i18n.tsx._dialog.invalid({ current: inputValue ?? 'NaN' })"/>
</template>

_dialog:
  charactersExceeded: "You've exceeded the maximum character limit! Currently at {current} of {max}."
  charactersBelow: "You're below the minimum character limit! Currently at {current} of {min}."
  numberBelow: "The value is below the minimum. Currently at {current} of {min}."
  numberAbove: "The value exceeds the maximum. Currently at {current} of {max}."
  invalid: "The input is invalid. Currently {current}."

<MkInput v-else-if="v.type === 'number'" 
  v-model="values[k]" 
  type="number" 
  :min="v.min" 
  :max="v.max" 
  :step="v.step || 1">

type FormItem = {
  label?: string;
  type: 'number';
  default?: number | null;
  description?: string;
  required?: boolean;
  hidden?: Hidden;
  step?: number;
  min?: number;
  max?: number;
} | // ... その他の型

const props = withDefaults(defineProps<{
  modelValue: number;
  disabled?: boolean;
  min: number;
  max: number;
  step?: number;
  textConverter?: (value: number) => string,
  showTicks?: boolean;
  easing?: boolean;
  continuousUpdate?: boolean;
}>(), {
  step: 1,
  textConverter: (v) => v.toString(),
  easing: false,
});