sit-onyx 1.0.0-beta.70 → 1.0.0-beta.71

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

@@ -4,8 +4,8 @@ import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
 import type { FormInjected } from "../OnyxForm/OnyxForm.core";
-import type { OnyxFormElementProps } from "../OnyxFormElement/types";
-export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & Pick<BaseSelectOption, "truncation"> & Pick<OnyxFormElementProps, "label" | "hideLabel"> & {
+import type { SharedFormElementProps } from "../OnyxFormElement/types";
+export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & Pick<BaseSelectOption, "truncation"> & Pick<SharedFormElementProps, "label" | "hideLabel"> & {
     /**
      * Checkbox options.
      */

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

@@ -0,0 +1,13 @@
+import type { FormMessages } from "../../composables/useCustomValidity";
+type __VLS_Props = {
+    /**
+     * Message to display.
+     */
+    messages: FormMessages;
+    /**
+     * How the message should be colored and displayed.
+     */
+    type: "danger" | "success" | "neutral";
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/OnyxFormElement/OnyxFormElement.ct-utils.d.ts

@@ -1,7 +1,7 @@
 import type { MountResultJsx } from "@playwright/experimental-ct-vue";
 import { type Locator, type Page } from "@playwright/test";
 type PageOrLocator = Page | Locator | MountResultJsx;
-type FormElementTooltip = "label" | "error" | "message";
+type FormElementTooltip = "label" | "message";
 export declare const createFormElementUtils: (page: PageOrLocator) => {
     getRoot: (prev?: PageOrLocator) => Locator;
     getTooltipTrigger: (type: FormElementTooltip, prev?: PageOrLocator) => Locator;

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

@@ -1,12 +1,22 @@
 import type { RequiredMarkerProp } from "../../composables/required";
-import type { FormMessages } from "../../composables/useCustomValidity";
-export type OnyxFormElementProps = RequiredMarkerProp & {
+import type { CustomMessageType, FormMessages } from "../../composables/useCustomValidity";
+export type OnyxFormElementProps = Omit<SharedFormElementProps, "error" | "message" | "success"> & {
+    errorMessages?: FormMessages;
+    message?: FormMessages;
+    successMessages?: FormMessages;
+};
+export type SharedFormElementProps = RequiredMarkerProp & {
     /**
      * The id of a labelable form-related element.
      * If not given an id will be generated.
      * The id is passed as a `default` slot property.
      */
     id?: string;
+    /**
+     * Same as the native `name` attribute of `<input>`.
+     * Used to reference the input in JavaScript or in submitted form data.
+     */
+    name?: string;
     /**
      * Current value of the form element.
      */
@@ -14,6 +24,7 @@ export type OnyxFormElementProps = RequiredMarkerProp & {
     /**
      * Label to show above the form element. Required due to accessibility / screen readers.
      * If you want to visually hide the label, use the `hideLabel` property.
+     * TODO: make CustomMessageType
      */
     label: string;
     /**
@@ -28,18 +39,18 @@ export type OnyxFormElementProps = RequiredMarkerProp & {
      */
     hideLabel?: boolean;
     /**
-     * Message / help text to display below the form element.
-     * Will be replaced by an error message if the form element is invalid.
+     * Error messages that gives details about the cause of a form elements invalidity.
      */
-    message?: string;
+    error?: CustomMessageType;
     /**
-     * Info message / additional text to display inside a tooltip next to the message.
+     * Message / help text to display below the form element.
+     * Will be replaced by an error message if the form element is invalid.
      */
-    messageTooltip?: string;
+    message?: CustomMessageType;
     /**
-     * Error messages that inform about causes for invalidity of form components
+     * Success messages that inform about the state of form components
      */
-    errorMessages?: FormMessages;
+    success?: CustomMessageType;
     /**
      * Maximum number of characters that are allowed to be entered.
      * Warning: when the value is (pre)set programmatically,

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

@@ -1,6 +1,6 @@
 import type { OnyxInfoTooltipProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxInfoTooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxInfoTooltipProps> & Readonly<{}>, {
-    color: Extract<import("../../index.ts").OnyxColor, "neutral" | "danger">;
+    color: Extract<import("../../index.ts").OnyxColor, "neutral" | "danger" | "success">;
     open: import("../OnyxTooltip/types.ts").TooltipOpen;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLSpanElement>;
 export default _default;

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

@@ -4,8 +4,8 @@ import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp } from "../../types";
 import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
-import type { OnyxFormElementProps } from "../OnyxFormElement/types";
-export type OnyxInputProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages"> & AutofocusProp & {
+import type { SharedFormElementProps } from "../OnyxFormElement/types";
+export type OnyxInputProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & Omit<SharedFormElementProps, "modelValue" | "errorMessages"> & AutofocusProp & {
     /**
      * Current value of the input.
      */
@@ -35,11 +35,6 @@ export type OnyxInputProps = FormInjectedProps & DensityProp & RequiredMarkerPro
      * @see [MDN autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
      */
     autocomplete?: Autocomplete;
-    /**
-     * Same as the native `name` attribute of `<input>`.
-     * Used to reference the input in JavaScript or in submitted form data.
-     */
-    name?: string;
     /**
      * Pattern the value must match to be valid.
      */

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

@@ -4,18 +4,12 @@ import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
 import type { FormInjected } from "../OnyxForm/OnyxForm.core";
-import type { OnyxFormElementProps } from "../OnyxFormElement/types";
-export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & RequiredMarkerProp & CustomValidityProp & Pick<BaseSelectOption, "truncation"> & Pick<OnyxFormElementProps, "label" | "hideLabel"> & {
+import type { SharedFormElementProps } from "../OnyxFormElement/types";
+export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & RequiredMarkerProp & CustomValidityProp & Pick<BaseSelectOption, "truncation"> & Pick<SharedFormElementProps, "label" | "hideLabel" | "name"> & {
     /**
      * Options for the individual radio buttons of the group.
      */
     options: RadioButtonOption<TValue>[];
-    /**
-     * Unique name for the radio group form element.
-     * Will automatically filled, when it is not given.
-     * Warning: Never use a name for form elements twice!
-     */
-    name?: string;
     /**
      * The selected radio button option.
      */

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

@@ -4,10 +4,10 @@ import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp } from "../../types";
 import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
-import type { OnyxFormElementProps } from "../OnyxFormElement/types";
+import type { SharedFormElementProps } from "../OnyxFormElement/types";
 export declare const MULTISELECT_TEXT_MODE: readonly ["summary", "preview"];
 export type MultiselectTextMode = (typeof MULTISELECT_TEXT_MODE)[number];
-export type OnyxSelectInputProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & Omit<OnyxFormElementProps, "modelValue" | "maxlength" | "withCounter"> & {
+export type OnyxSelectInputProps = FormInjectedProps & DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & Omit<SharedFormElementProps, "modelValue" | "maxlength" | "withCounter"> & {
     /**
      * Current label(s) of the select.
      */

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

@@ -3,14 +3,9 @@ import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp } from "../../types";
 import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
-import type { OnyxFormElementProps } from "../OnyxFormElement/types";
+import type { SharedFormElementProps } from "../OnyxFormElement/types";
 import type { Autocomplete } from "../OnyxInput/types";
-export type OnyxStepperProps = FormInjectedProps & DensityProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages" | "withCounter" | "maxlength"> & AutofocusProp & {
-    /**
-     * Same as the native `name` attribute of `<input>`.
-     * Used to reference the input in JavaScript or in submitted form data.
-     */
-    name?: string;
+export type OnyxStepperProps = FormInjectedProps & DensityProp & CustomValidityProp & Omit<SharedFormElementProps, "modelValue" | "errorMessages" | "withCounter" | "maxlength"> & AutofocusProp & {
     /**
      * Placeholder to show when the value is empty.
      */

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

@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { OnyxInputProps } from "../OnyxInput/types";
-export type OnyxTextareaProps = DensityProp & RequiredMarkerProp & CustomValidityProp & Pick<OnyxInputProps, "label" | "labelTooltip" | "hideLabel" | "modelValue" | "placeholder" | "autocapitalize" | "autofocus" | "name" | "readonly" | "disabled" | "minlength" | "maxlength" | "withCounter" | "message" | "messageTooltip" | "skeleton"> & {
+export type OnyxTextareaProps = DensityProp & RequiredMarkerProp & CustomValidityProp & Pick<OnyxInputProps, "label" | "labelTooltip" | "hideLabel" | "modelValue" | "placeholder" | "autocapitalize" | "autofocus" | "name" | "readonly" | "disabled" | "minlength" | "maxlength" | "withCounter" | "message" | "success" | "skeleton"> & {
     /**
      * Override the default autosize behavior (height adjusts based on the current value).
      * By default, the textarea will autosize while maintaining at least 3 and at most 10 rows.

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

@@ -41,7 +41,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxTooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxTooltipProps> & Readonly<{}>, {
-    color: Extract<import("../../index.ts").OnyxColor, "neutral" | "danger">;
+    color: Extract<import("../../index.ts").OnyxColor, "neutral" | "danger" | "success">;
     position: import("./types").TooltipPosition;
     alignment: import("../../composables/useWedgePosition").WedgePosition | "auto";
     fitParent: boolean;

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

@@ -21,7 +21,7 @@ export type OnyxTooltipProps = DensityProp & {
      * Optional icon to show on the left of the text.
      */
     icon?: string;
-    color?: Extract<OnyxColor, "neutral" | "danger">;
+    color?: Extract<OnyxColor, "neutral" | "danger" | "success">;
     /**
      * How to position the tooltip relative to the parent element.
      */

package/dist/composables/useCustomValidity.d.ts

@@ -7,10 +7,6 @@ export type CustomValidityProp = {
      * Custom error message to show. Will only show up after the user has interacted with the input.
      */
     customError?: CustomMessageType;
-    /**
-     * Success message to show. Will only show up after the user has interacted with the input.
-     */
-    successMessage?: CustomMessageType;
 };
 export type UseCustomValidityOptions = {
     /**
@@ -37,17 +33,23 @@ export type InputValidationElement = Pick<HTMLInputElement, "validity" | "setCus
 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 validity state of form components
+ * Translated messages that inform about the state of a form element.
  */
 export type FormMessages = {
     /**
-     * A short message preview to inform the user about the validity state
+     * 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 info
+     * 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
@@ -88,8 +90,4 @@ export declare const useCustomValidity: (options: UseCustomValidityOptions) => {
      * A custom error or the default translation of the first invalid state if one exists.
      */
     errorMessages: import("vue").ComputedRef<FormMessages | undefined>;
-    /**
-     * A custom success message if provided by the user.
-     */
-    successMessages: import("vue").ComputedRef<FormMessages | undefined>;
 };