sit-onyx 1.0.0-alpha.64 → 1.0.0-alpha.66

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

@@ -9,6 +9,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     truncation: string;
     skeleton: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    validityChange: (validity: ValidityState) => void;
     "update:modelValue": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxCheckboxProps>, {
     modelValue: boolean;
@@ -20,13 +21,14 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     skeleton: boolean;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
 }, {
     required: boolean;
     disabled: boolean;
     loading: boolean;
     skeleton: boolean;
-    modelValue: boolean;
     indeterminate: boolean;
+    modelValue: boolean;
     truncation: "ellipsis" | "multiline";
 }, {}>;
 export default _default;

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

@@ -1,8 +1,9 @@
 import { TruncationType } from '../../types/fonts';
+import { CustomValidityProp } from '../../composables/useCustomValidity';
 import { RequiredMarkerProp } from '../../composables/required';
 import { DensityProp } from '../../composables/density';
 
-export type OnyxCheckboxProps = DensityProp & RequiredMarkerProp & {
+export type OnyxCheckboxProps = DensityProp & RequiredMarkerProp & CustomValidityProp & {
     /**
      * Whether the checkbox is checked.
      */

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

@@ -4,7 +4,7 @@ declare const _default: <TValue extends string | number | boolean>(__VLS_props:
     skeleton?: number | undefined;
     modelValue?: TValue[] | undefined;
     "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
-    options: import('../../index').CheckboxGroupOption<TValue>[];
+    options: import('./types').CheckboxGroupOption<TValue>[];
     headline?: string | undefined;
     direction?: "horizontal" | "vertical" | undefined;
     withCheckAll?: boolean | undefined;
@@ -20,7 +20,7 @@ declare const _default: <TValue extends string | number | boolean>(__VLS_props:
         skeleton?: number | undefined;
         modelValue?: TValue[] | undefined;
         "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
-        options: import('../../index').CheckboxGroupOption<TValue>[];
+        options: import('./types').CheckboxGroupOption<TValue>[];
         headline?: string | undefined;
         direction?: "horizontal" | "vertical" | undefined;
         withCheckAll?: boolean | undefined;
@@ -40,7 +40,7 @@ declare const _default: <TValue extends string | number | boolean>(__VLS_props:
             skeleton?: number | undefined;
             modelValue?: TValue[] | undefined;
             "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
-            options: import('../../index').CheckboxGroupOption<TValue>[];
+            options: import('./types').CheckboxGroupOption<TValue>[];
             headline?: string | undefined;
             direction?: "horizontal" | "vertical" | undefined;
             withCheckAll?: boolean | undefined;

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

@@ -9,10 +9,11 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled: boolean;
     loading: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    validityChange: (validity: ValidityState) => void;
+    blur: () => void;
+    focus: () => void;
     "update:modelValue": (value: string) => void;
     change: (value: string) => void;
-    focus: () => void;
-    blur: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxInputProps>, {
     modelValue: string;
     type: string;
@@ -26,13 +27,14 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     onBlur?: (() => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
 }, {
     type: "search" | "text" | "email" | "password" | "tel" | "url";
     required: boolean;
     disabled: boolean;
     loading: boolean;
-    modelValue: string;
     autocapitalize: "none" | "sentences" | "words" | "characters";
+    modelValue: string;
     readonly: boolean;
 }, {}>;
 export default _default;

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

@@ -1,7 +1,8 @@
+import { CustomValidityProp } from '../../composables/useCustomValidity';
 import { RequiredMarkerProp } from '../../composables/required';
 import { DensityProp } from '../../composables/density';
 
-export type OnyxInputProps = DensityProp & RequiredMarkerProp & {
+export type OnyxInputProps = DensityProp & RequiredMarkerProp & CustomValidityProp & {
     /**
      * Label to show above the input. Required due to accessibility / screen readers.
      * If you want to visually hide the label, use the `hideLabel` property.

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

@@ -3,6 +3,7 @@ import { SelectionOptionValue } from './types';
 declare const _default: <TValue extends SelectionOptionValue = SelectionOptionValue>(__VLS_props: {
     required?: boolean | undefined;
     label: string;
+    onChange?: ((value: string) => any) | undefined;
     selected?: boolean | undefined;
     value?: unknown;
     id: TValue;
@@ -10,17 +11,19 @@ declare const _default: <TValue extends SelectionOptionValue = SelectionOptionVa
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
     skeleton?: boolean | undefined;
-    truncation?: "ellipsis" | "multiline" | undefined;
+    customError?: string | undefined;
     name: string;
-    errorMessage?: string | undefined;
+    truncation?: "ellipsis" | "multiline" | undefined;
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
 } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
     slots: {};
-    emit: any;
+    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "change", value: string) => void);
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
         required?: boolean | undefined;
         label: string;
+        onChange?: ((value: string) => any) | undefined;
         selected?: boolean | undefined;
         value?: unknown;
         id: TValue;
@@ -28,14 +31,15 @@ declare const _default: <TValue extends SelectionOptionValue = SelectionOptionVa
         disabled?: boolean | undefined;
         loading?: boolean | undefined;
         skeleton?: boolean | undefined;
-        truncation?: "ellipsis" | "multiline" | undefined;
+        customError?: string | undefined;
         name: string;
-        errorMessage?: string | undefined;
+        truncation?: "ellipsis" | "multiline" | undefined;
+        onValidityChange?: ((validity: ValidityState) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};
-    emit: any;
+    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "change", value: string) => void);
 }>) => import('vue').VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> & {
@@ -43,6 +47,7 @@ declare const _default: <TValue extends SelectionOptionValue = SelectionOptionVa
         props: {
             required?: boolean | undefined;
             label: string;
+            onChange?: ((value: string) => any) | undefined;
             selected?: boolean | undefined;
             value?: unknown;
             id: TValue;
@@ -50,14 +55,15 @@ declare const _default: <TValue extends SelectionOptionValue = SelectionOptionVa
             disabled?: boolean | undefined;
             loading?: boolean | undefined;
             skeleton?: boolean | undefined;
-            truncation?: "ellipsis" | "multiline" | undefined;
+            customError?: string | undefined;
             name: string;
-            errorMessage?: string | undefined;
+            truncation?: "ellipsis" | "multiline" | undefined;
+            onValidityChange?: ((validity: ValidityState) => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
         attrs: any;
         slots: {};
-        emit: any;
+        emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "change", value: string) => void);
     } | undefined;
 };
 export default _default;

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

@@ -1,4 +1,5 @@
 import { TruncationType } from '../../types/fonts';
+import { CustomValidityProp } from '../../composables/useCustomValidity';
 import { DensityProp } from '../../composables/density';
 
 export type SelectionOptionValue = string | number | boolean;
@@ -30,7 +31,7 @@ export type SelectionOption<T extends SelectionOptionValue = SelectionOptionValu
      */
     skeleton?: boolean;
 };
-export type RadioButtonProps<TValue extends SelectionOptionValue = SelectionOptionValue> = SelectionOption<TValue> & DensityProp & {
+export type OnyxRadioButtonProps<TValue extends SelectionOptionValue = SelectionOptionValue> = SelectionOption<TValue> & DensityProp & CustomValidityProp & {
     /**
      * Identifier for the radio buttons in the group.
      * All radio buttons that should belong to the same radio group must have the same name.
@@ -47,5 +48,4 @@ export type RadioButtonProps<TValue extends SelectionOptionValue = SelectionOpti
      * See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#required
      */
     required?: boolean;
-    errorMessage?: string;
 };

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

@@ -5,37 +5,39 @@ declare const _default: <TValue extends SelectionOptionValue>(__VLS_props: {
     density?: "default" | "cozy" | "compact" | undefined;
     disabled?: boolean | undefined;
     skeleton?: number | undefined;
+    customError?: string | undefined;
+    name?: string | undefined;
     modelValue?: SelectionOption<TValue> | undefined;
     requiredMarker?: "required" | "optional" | undefined;
     "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
     options: SelectionOption<TValue>[];
     headline?: string | undefined;
     direction?: "horizontal" | "vertical" | undefined;
-    name?: string | undefined;
-    errorMessage?: string | undefined;
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
 } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
     slots: {};
-    emit: (evt: "update:modelValue", selected: SelectionOption<TValue>) => void;
+    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", selected: SelectionOption<TValue>) => void);
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
         required?: boolean | undefined;
         density?: "default" | "cozy" | "compact" | undefined;
         disabled?: boolean | undefined;
         skeleton?: number | undefined;
+        customError?: string | undefined;
+        name?: string | undefined;
         modelValue?: SelectionOption<TValue> | undefined;
         requiredMarker?: "required" | "optional" | undefined;
         "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
         options: SelectionOption<TValue>[];
         headline?: string | undefined;
         direction?: "horizontal" | "vertical" | undefined;
-        name?: string | undefined;
-        errorMessage?: string | undefined;
+        onValidityChange?: ((validity: ValidityState) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};
-    emit: (evt: "update:modelValue", selected: SelectionOption<TValue>) => void;
+    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", selected: SelectionOption<TValue>) => void);
 }>) => import('vue').VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> & {
@@ -45,19 +47,20 @@ declare const _default: <TValue extends SelectionOptionValue>(__VLS_props: {
             density?: "default" | "cozy" | "compact" | undefined;
             disabled?: boolean | undefined;
             skeleton?: number | undefined;
+            customError?: string | undefined;
+            name?: string | undefined;
             modelValue?: SelectionOption<TValue> | undefined;
             requiredMarker?: "required" | "optional" | undefined;
             "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
             options: SelectionOption<TValue>[];
             headline?: string | undefined;
             direction?: "horizontal" | "vertical" | undefined;
-            name?: string | undefined;
-            errorMessage?: string | undefined;
+            onValidityChange?: ((validity: ValidityState) => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
         attrs: any;
         slots: {};
-        emit: (evt: "update:modelValue", selected: SelectionOption<TValue>) => void;
+        emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", selected: SelectionOption<TValue>) => void);
     } | undefined;
 };
 export default _default;

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

@@ -1,9 +1,10 @@
 import { SelectionOption, SelectionOptionValue } from '../OnyxRadioButton/types';
 import { Direction } from '../../types';
+import { CustomValidityProp } from '../../composables/useCustomValidity';
 import { RequiredMarkerProp } from '../../composables/required';
 import { DensityProp } from '../../composables/density';
 
-export type OnyxRadioButtonGroupProps<TValue extends SelectionOptionValue> = DensityProp & RequiredMarkerProp & {
+export type OnyxRadioButtonGroupProps<TValue extends SelectionOptionValue = SelectionOptionValue> = DensityProp & RequiredMarkerProp & CustomValidityProp & {
     /**
      * Unique name for the radio button group form element.
      * Will automatically filled, when it is not given.
@@ -23,10 +24,6 @@ export type OnyxRadioButtonGroupProps<TValue extends SelectionOptionValue> = Den
      * Disable the radio button group.
      */
     disabled?: boolean;
-    /**
-     * Set the radio button group into the error state with the given error message.
-     */
-    errorMessage?: string;
     /**
      * Direction of the checkboxes. Can be vertical (default) or horizontal.
      */

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

@@ -7,14 +7,14 @@ declare const _default: <TValue extends SelectModelValue<TMultiple>, TMultiple e
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
     skeleton?: boolean | undefined;
+    multiple?: TMultiple | undefined;
+    placeholder?: string | undefined;
     modelValue?: TValue | undefined;
     hideLabel?: boolean | undefined;
     requiredMarker?: "required" | "optional" | undefined;
     "onUpdate:modelValue"?: ((value: TValue | undefined) => any) | undefined;
-    placeholder?: string | undefined;
     readonly?: boolean | undefined;
     message?: string | undefined;
-    multiple?: TMultiple | undefined;
 } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
     slots: {};
@@ -27,14 +27,14 @@ declare const _default: <TValue extends SelectModelValue<TMultiple>, TMultiple e
         disabled?: boolean | undefined;
         loading?: boolean | undefined;
         skeleton?: boolean | undefined;
+        multiple?: TMultiple | undefined;
+        placeholder?: string | undefined;
         modelValue?: TValue | undefined;
         hideLabel?: boolean | undefined;
         requiredMarker?: "required" | "optional" | undefined;
         "onUpdate:modelValue"?: ((value: TValue | undefined) => any) | undefined;
-        placeholder?: string | undefined;
         readonly?: boolean | undefined;
         message?: string | undefined;
-        multiple?: TMultiple | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -51,14 +51,14 @@ declare const _default: <TValue extends SelectModelValue<TMultiple>, TMultiple e
             disabled?: boolean | undefined;
             loading?: boolean | undefined;
             skeleton?: boolean | undefined;
+            multiple?: TMultiple | undefined;
+            placeholder?: string | undefined;
             modelValue?: TValue | undefined;
             hideLabel?: boolean | undefined;
             requiredMarker?: "required" | "optional" | undefined;
             "onUpdate:modelValue"?: ((value: TValue | undefined) => any) | undefined;
-            placeholder?: string | undefined;
             readonly?: boolean | undefined;
             message?: string | undefined;
-            multiple?: TMultiple | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
         attrs: any;

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

@@ -7,8 +7,8 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     truncation: string;
     skeleton: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    validityChange: (validity: ValidityState) => void;
     "update:modelValue": (value: boolean) => void;
-    validityChange: (state: ValidityState) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxSwitchProps>, {
     modelValue: boolean;
     disabled: boolean;
@@ -17,7 +17,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     skeleton: boolean;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onValidityChange?: ((state: ValidityState) => any) | undefined;
+    onValidityChange?: ((validity: ValidityState) => any) | undefined;
 }, {
     disabled: boolean;
     loading: boolean;

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

@@ -1,8 +1,9 @@
-import { TruncationType } from '../../types/fonts';
+import { TruncationType } from '../../types';
+import { CustomValidityProp } from '../../composables/useCustomValidity';
 import { RequiredMarkerProp } from '../../composables/required';
 import { DensityProp } from '../../composables/density';
 
-export type OnyxSwitchProps = DensityProp & RequiredMarkerProp & {
+export type OnyxSwitchProps = DensityProp & RequiredMarkerProp & CustomValidityProp & {
     /**
      * Whether the switch should be checked or not.
      */
@@ -19,10 +20,6 @@ export type OnyxSwitchProps = DensityProp & RequiredMarkerProp & {
      * Shows a loading indicator.
      */
     loading?: boolean;
-    /**
-     * The error message will set switch to invalid state.
-     */
-    errorMessage?: string;
     /**
      * If `true`, the label will be visually hidden and the `title` attribute will be set.
      * For accessibility / screen readers, the aria-label will still be set.

package/dist/composables/useCustomValidity.d.ts

@@ -0,0 +1,46 @@
+export type CustomValidityProp = {
+    /**
+     * Custom error message to show. Will only show up after the user has interacted with the input.
+     */
+    customError?: string;
+};
+export type UseCustomValidityOptions = {
+    /**
+     * Component props as defined with `const props = defineProps()`
+     */
+    props: CustomValidityProp & {
+        modelValue?: unknown;
+    };
+    /**
+     * Component emit as defined with `const emit = defineEmits()`
+     */
+    emit: (evt: "validityChange", validity: ValidityState) => void;
+};
+export type InputValidationElement = Pick<HTMLInputElement, "validity" | "setCustomValidity">;
+/**
+ * Composable for unified handling of custom error 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) => {
+    /**
+     * Directive to set the custom error message and emit validityChange event.
+     */
+    vCustomValidity: {
+        mounted: (el: InputValidationElement) => void;
+    };
+};