sit-onyx 1.1.0-dev-20250926072651 → 1.1.0-dev-20250926121514

package/dist/components/OnyxCheckboxGroup/types.d.ts

@@ -1,5 +1,5 @@
 import { RequiredProp } from '../../composables/required.js';
-import { CustomValidityProp } from '../../composables/useCustomValidity.js';
+import { CustomValidityProp } from '../../composables/useFormElementError.js';
 import { AutofocusProp, BaseSelectOption, Nullable, Orientation, SelectOptionValue } from '../../types/index.js';
 import { SharedFormElementProps } from '../OnyxFormElement/types.js';
 export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = Pick<BaseSelectOption, "truncation"> & Pick<SharedFormElementProps, "label" | "labelTooltip" | "hideLabel" | "density" | "skeleton" | "disabled" | "requiredMarker"> & {

package/dist/components/OnyxErrorTooltip/OnyxErrorTooltip.d.vue.ts

@@ -1,4 +1,4 @@
-import { FormMessages } from '../../composables/useCustomValidity.js';
+import { FormMessages } from '../../composables/useFormElementError.js';
 type __VLS_Props = {
     /**
      * The given component will be shown inside a tooltip when

package/dist/components/OnyxFormElement/FormMessage.d.vue.ts

@@ -1,4 +1,4 @@
-import { FormMessages } from '../../composables/useCustomValidity.js';
+import { FormMessages } from '../../composables/useFormElementError.js';
 type __VLS_Props = {
     /**
      * Message to display.

package/dist/components/OnyxFormElement/types.d.ts

@@ -1,6 +1,6 @@
 import { DensityProp } from '../../composables/density.js';
 import { RequiredProp } from '../../composables/required.js';
-import { CustomMessageType, CustomValidityProp, FormMessages } from '../../composables/useCustomValidity.js';
+import { CustomMessageType, CustomValidityProp, FormMessages } from '../../composables/useFormElementError.js';
 import { SharedTextInputProps } from '../../composables/useLenientMaxLengthValidation.js';
 import { SkeletonInjected } from '../../composables/useSkeletonState.js';
 import { AutofocusProp, Nullable } from '../../types/index.js';

package/dist/composables/useCustomValidity.d.ts

@@ -1,94 +1,21 @@
 import { MaybeRefOrGetter } from 'vue';
-import { DateValue, OnyxDatePickerProps } from '../components/OnyxDatePicker/types.js';
-import { InputType } from '../components/OnyxInput/types.js';
-import { default as enUS } from '../i18n/locales/en-US.json';
-import { MaxLength } from './useLenientMaxLengthValidation.js';
-export type CustomMessageType = string | FormMessages;
-export type CustomValidityProp = {
-    /**
-     * Custom error message to show. Takes precedence over intrinsic error messages.
-     */
-    error?: CustomMessageType;
-};
-export type UseCustomValidityOptions = {
+export type UseFormValidityOptions<TProps extends Record<string, MaybeRefOrGetter<unknown>> = Record<string, MaybeRefOrGetter<unknown>>> = {
     /**
      * Explicitly set custom error. Any non-nullish value will set the input to be invalid.
-     * If both, `options.customError` and `options.props.error` are provided, the message from the props will take precedence.
      */
-    error?: MaybeRefOrGetter<CustomMessageType | undefined>;
+    error?: MaybeRefOrGetter<string | undefined>;
     /**
-     * Component props as defined with `const props = defineProps()`.
-     * These prop values are used for the error messages of the native validation errors.
+     * Props that influence native validation state. These are not used directly, but watched to trigger a re-evaluation of validation state.
+     * E.g. when `required` is changed from `true` to `false` the state needs to be re-evaluated.
      */
-    props: {
-        error?: CustomMessageType;
-        modelValue?: unknown;
-        type?: InputType | OnyxDatePickerProps["type"];
-        maxlength?: MaxLength;
-        minlength?: number;
-        min?: DateValue;
-        max?: DateValue;
-        validStepSize?: number;
-    };
+    props: TProps;
     /**
      * Component emit as defined with `const emit = defineEmits()`
      */
     emit: (evt: "validityChange", validity: ValidityState) => void;
 };
 export type InputValidationElement = Pick<HTMLInputElement, "validity" | "setCustomValidity">;
-/**
- * Input types that have a translation for their validation error message.
- */
-export declare const TRANSLATED_INPUT_TYPES: (keyof typeof enUS.validations.typeMismatch)[];
-export type TranslatedInputType = (typeof TRANSLATED_INPUT_TYPES)[number];
-/**
- * Translated messages that inform about the state of a form element.
- */
-export type FormMessages = {
-    /**
-     * A short message preview to inform the user about the input state.
-     * It's usually shown directly underneath the input field.
-     */
-    shortMessage: string;
-    /**
-     * An extended informative message to provide more details.
-     * It's usually shown in a tooltip next to the shortMessage.
-     */
-    longMessage?: string;
-    /**
-     * Will visually hide the message.
-     */
-    hidden?: boolean;
-};
-/**
- * Transforms a customMessage into the format needed to display an error preview and extended message
- */
-export declare const getFormMessages: (customMessage?: CustomMessageType) => FormMessages | undefined;
-/**
- * Returns a string combining short + long message or just the customMessage if it was provided as single string.
- * Will be used e.g. for customInvalidity and showing a tooltip e.g. in RadioButtons
- */
-export declare const getFormMessageText: (error?: CustomMessageType) => string | undefined;
-/**
- * Composable for unified handling of custom messages for form components.
- * Will call `setCustomValidity()` accordingly and emit the "validityChange" event
- * whenever the input value / error changes.
- *
- * @example
- * ```html
- * <script lang="ts" setup>
- * const props = defineProps<CustomValidityProp>();
- * const emit = defineEmits<{ validityChange: [validity: ValidityState] }>();
- *
- * const { vCustomValidity } = useCustomValidity({ props, emit });
- * </script>
- *
- * <template>
- *  <input v-custom-validity />
- * </template>
- * ```
- */
-export declare const useCustomValidity: (options: UseCustomValidityOptions) => {
+export declare const useCustomValidity: <TProps extends Record<string, MaybeRefOrGetter<unknown>>>(options: Omit<UseFormValidityOptions<TProps>, "emit">) => {
     /**
      * Directive to set the custom error message and emit validityChange event.
      */
@@ -96,7 +23,7 @@ export declare const useCustomValidity: (options: UseCustomValidityOptions) => {
         mounted: (el: InputValidationElement) => void;
     };
     /**
-     * A custom error or the default translation of the first invalid state if one exists.
+     * validityState of the html element.
      */
-    errorMessages: import('vue').ComputedRef<FormMessages | undefined>;
+    validityState: import('vue').Ref<Record<keyof ValidityState, boolean> | undefined, Record<keyof ValidityState, boolean> | undefined>;
 };

package/dist/composables/useFormElementError.d.ts

@@ -0,0 +1,69 @@
+import { MaybeRefOrGetter } from 'vue';
+import { DateValue, OnyxDatePickerProps } from '../components/OnyxDatePicker/types.js';
+import { InputType } from '../components/OnyxInput/types.js';
+import { default as enUS } from '../i18n/locales/en-US.json';
+import { UseFormValidityOptions } from './useCustomValidity.js';
+import { MaxLength } from './useLenientMaxLengthValidation.js';
+export type CustomMessageType = string | FormMessages;
+export type FormMessages = {
+    /**
+     * A short message preview to inform the user about the input state.
+     * It's usually shown directly underneath the input field.
+     */
+    shortMessage: string;
+    /**
+     * An extended informative message to provide more details.
+     * It's usually shown in a tooltip next to the shortMessage.
+     */
+    longMessage?: string;
+    /**
+     * Will visually hide the message.
+     */
+    hidden?: boolean;
+};
+export type CustomValidityProp = {
+    /**
+     * Custom error message to show. Takes precedence over intrinsic error messages.
+     */
+    error?: CustomMessageType;
+};
+export type FormValidationProps = {
+    error?: CustomMessageType;
+    modelValue?: unknown;
+    type?: InputType | OnyxDatePickerProps["type"];
+    maxlength?: MaxLength;
+    minlength?: number;
+    min?: DateValue;
+    max?: DateValue;
+    validStepSize?: number;
+};
+export type UseFormElementErrorOptions = Omit<UseFormValidityOptions<FormValidationProps>, "error"> & {
+    props: FormValidationProps;
+    error?: MaybeRefOrGetter<CustomMessageType | undefined>;
+};
+/**
+ * Input types that have a translation for their validation error message.
+ */
+export declare const TRANSLATED_INPUT_TYPES: (keyof typeof enUS.validations.typeMismatch)[];
+export type TranslatedInputType = (typeof TRANSLATED_INPUT_TYPES)[number];
+/**
+ * Transforms a customMessage into the format needed to display an error preview and extended message
+ */
+export declare const getFormMessages: (customMessage?: CustomMessageType) => FormMessages | undefined;
+/**
+ * Returns a string combining short + long message or just the customMessage if it was provided as single string.
+ * Will be used e.g. for customInvalidity and showing a tooltip e.g. in RadioButtons
+ */
+export declare const getFormMessageText: (error?: CustomMessageType) => string | undefined;
+export declare const useFormElementError: (options: UseFormElementErrorOptions) => {
+    /**
+     * Directive to set the custom error message and emit validityChange event.
+     */
+    vCustomValidity: {
+        mounted: (el: import('./useCustomValidity.js').InputValidationElement) => void;
+    };
+    /**
+     * A custom error or the default translation of the first invalid state if one exists.
+     */
+    errorMessages: import('vue').ComputedRef<FormMessages | undefined>;
+};

package/dist/index.esm-bundler.js

@@ -4158,6 +4158,23 @@ const useRequired = (props, requiredMarker) => ({
 const isValidDate = (date) => {
   return date instanceof Date && !isNaN(date);
 };
+const getValidityStateProperties = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([_, value]) => value.enumerable).map(([key]) => key);
+const transformValidityStateToObject = (validityState) => {
+  return getValidityStateProperties().reduce(
+    (validityStateCopy, key) => {
+      validityStateCopy[key] = validityState[key];
+      return validityStateCopy;
+    },
+    {}
+  );
+};
+const getFirstInvalidType = (validity) => {
+  if (validity.valueMissing) return "valueMissing";
+  const availableValidityTypes = getValidityStateProperties().filter((key) => key !== "valid").sort();
+  for (const type of availableValidityTypes) {
+    if (type in validity && validity[type]) return type;
+  }
+};
 const areObjectsFlatEqual = (obj1, obj2) => {
   const noUndefinedEntries1 = Object.entries(obj1).filter(([_, value]) => value !== void 0);
   const noUndefinedEntries2 = Object.entries(obj2).filter(([_, value]) => value !== void 0);
@@ -4199,22 +4216,38 @@ const asArray = (value, keepNullish = false) => {
   }
   return [value];
 };
-const getValidityStateProperties = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([_, value]) => value.enumerable).map(([key]) => key);
-const transformValidityStateToObject = (validityState) => {
-  return getValidityStateProperties().reduce(
-    (validityStateCopy, key) => {
-      validityStateCopy[key] = validityState[key];
-      return validityStateCopy;
-    },
-    {}
-  );
-};
-const getFirstInvalidType = (validity) => {
-  if (validity.valueMissing) return "valueMissing";
-  const availableValidityTypes = getValidityStateProperties().filter((key) => key !== "valid").sort();
-  for (const type of availableValidityTypes) {
-    if (type in validity && validity[type]) return type;
-  }
+const useCustomValidity = (options) => {
+  const validityState = ref();
+  const vCustomValidity = {
+    mounted: (el) => {
+      watch(
+        // we need to watch all props instead of only modelValue so the validity is re-checked
+        // when the validation rules change
+        [() => toValue(options.error), () => toValue(options.props)],
+        () => {
+          el.setCustomValidity(toValue(options.error) ?? "");
+          const newValidityState = transformValidityStateToObject(el.validity);
+          if (!validityState.value && newValidityState.valid) return;
+          if (validityState.value && areObjectsFlatEqual(newValidityState, validityState.value)) {
+            return;
+          }
+          validityState.value = newValidityState;
+        },
+        // We use "post" flush timing, to ensure the DOM is up-to-date and the elements validity state is in sync.
+        { immediate: true, deep: true, flush: "post" }
+      );
+    }
+  };
+  return {
+    /**
+     * Directive to set the custom error message and emit validityChange event.
+     */
+    vCustomValidity,
+    /**
+     * validityState of the html element.
+     */
+    validityState
+  };
 };
 const TRANSLATED_INPUT_TYPES = Object.keys(
   enUS.validations.typeMismatch
@@ -4237,48 +4270,30 @@ const getFormMessageText = (error) => {
   const { shortMessage, longMessage } = error;
   return `${shortMessage}: ${longMessage}`;
 };
-const useCustomValidity = (options) => {
+const useFormElementError = (options) => {
   const { t, locale } = injectI18n();
-  const validityState = ref();
   const isDirty = ref(false);
-  const error = computed(() => options.props.error || toValue(options.error));
+  const { vCustomValidity, validityState } = useCustomValidity({
+    error: computed(() => getFormMessageText(options.props.error || toValue(options.error))),
+    props: options.props
+  });
   watch(
     () => options.props.modelValue,
     () => isDirty.value = true,
     { once: true }
   );
-  const vCustomValidity = {
-    mounted: (el) => {
-      watch(
-        // we need to watch all props instead of only modelValue so the validity is re-checked
-        // when the validation rules change
-        [() => options.props, error],
-        () => {
-          el.setCustomValidity(getFormMessageText(error.value) ?? "");
-          const newValidityState = transformValidityStateToObject(el.validity);
-          if (!validityState.value && newValidityState.valid) return;
-          if (validityState.value && areObjectsFlatEqual(newValidityState, validityState.value)) {
-            return;
-          }
-          validityState.value = newValidityState;
-        },
-        // We use "post" flush timing, to ensure the DOM is up-to-date and the elements validity state is in sync.
-        { immediate: true, deep: true, flush: "post" }
-      );
-      watch(
-        [error, validityState, isDirty],
-        () => {
-          if (!isDirty.value || !validityState.value) return;
-          options.emit("validityChange", validityState.value);
-        },
-        { immediate: true }
-      );
-    }
-  };
+  watch(
+    [validityState, isDirty],
+    () => {
+      if (!isDirty.value || !validityState.value) return;
+      options.emit("validityChange", validityState.value);
+    },
+    { immediate: true }
+  );
   const errorMessages = computed(() => {
     if (!validityState.value || validityState.value.valid) return;
     const errorType = getFirstInvalidType(validityState.value);
-    const errors = getFormMessages(error.value);
+    const errors = getFormMessages(options.props.error || toValue(options.error));
     if (errors || errorType === "customError") {
       if (!errors) return;
       return errors;
@@ -4610,7 +4625,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       key: "modelValue",
       default: false
     });
-    const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
     const { densityClass } = useDensity(props);
     const { disabled, requiredMarker } = useFormContext(props);
     const skeleton = useSkeletonContext(props);
@@ -6218,7 +6233,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { t } = injectI18n();
-    const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
     const successMessages = computed(() => getFormMessages(props.success));
     const messages = computed(() => getFormMessages(props.message));
     const { disabled, showError } = useFormContext(props);
@@ -8144,7 +8159,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { rootAttrs, restAttrs } = useRootAttrs();
-    const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
     const successMessages = computed(() => getFormMessages(props.success));
     const messages = computed(() => getFormMessages(props.message));
     const { densityClass } = useDensity(props);
@@ -8656,7 +8671,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const { t } = injectI18n();
     const { maxLength, maxLengthError } = useLenientMaxLengthValidation({ modelValue, props });
     const error = computed(() => props.error ?? maxLengthError.value);
-    const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit, error });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit, error });
     const successMessages = computed(() => getFormMessages(props.success));
     const messages = computed(() => getFormMessages(props.message));
     const { densityClass } = useDensity(props);
@@ -10740,7 +10755,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { rootAttrs, restAttrs } = useRootAttrs();
-    const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
     const { densityClass } = useDensity(props);
     const { disabled } = useFormContext(props);
     const skeleton = useSkeletonContext(props);
@@ -11368,7 +11383,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const skeleton = useSkeletonContext(props);
     const errorClass = useErrorClass(showError);
     const { densityClass } = useDensity(props);
-    const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
     const successMessages = computed(() => getFormMessages(props.success));
     const messages = computed(() => getFormMessages(props.message));
     const { rootAttrs, restAttrs } = useRootAttrs();
@@ -11580,7 +11595,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const { densityClass } = useDensity(props);
     const { disabled, showError, requiredMarker } = useFormContext(props);
     const { requiredMarkerClass, requiredTypeClass } = useRequired(props, requiredMarker);
-    const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
     const shownErrorMessages = computed(
       () => showError.value !== false ? errorMessages.value : void 0
     );
@@ -12044,7 +12059,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const { formatFileSize } = useFileSize();
     const skeleton = useSkeletonContext(props);
     const error = computed(() => props.status?.color === "danger" ? props.status.text : void 0);
-    const { vCustomValidity } = useCustomValidity({ props: {}, emit, error });
+    const { vCustomValidity } = useFormElementError({ props: {}, emit, error });
     const link2 = computed(() => {
       if (!props.link) return;
       return extractLinkProps(props.link);
@@ -12764,7 +12779,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const { rootAttrs, restAttrs } = useRootAttrs();
     const { maxLength, maxLengthError } = useLenientMaxLengthValidation({ props, modelValue });
     const error = computed(() => props.error ?? maxLengthError.value);
-    const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit, error });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit, error });
     const { densityClass } = useDensity(props);
     const successMessages = computed(() => getFormMessages(props.success));
     const messages = computed(() => getFormMessages(props.message));