sit-onyx 1.0.0-beta.147 → 1.0.0-beta.149

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

@@ -1,8 +1,8 @@
-import type { RequiredMarkerProp } from "../../composables/required";
+import type { RequiredProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
 import type { SharedFormElementProps } from "../OnyxFormElement/types";
-export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = Pick<BaseSelectOption, "truncation"> & Pick<SharedFormElementProps, "label" | "labelTooltip" | "hideLabel" | "density" | "skeleton" | "disabled"> & {
+export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = Pick<BaseSelectOption, "truncation"> & Pick<SharedFormElementProps, "label" | "labelTooltip" | "hideLabel" | "density" | "skeleton" | "disabled" | "requiredMarker"> & {
     /**
      * Checkbox options.
      */
@@ -27,4 +27,4 @@ export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOpti
         label?: string;
     };
 };
-export type CheckboxGroupOption<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & RequiredMarkerProp & CustomValidityProp & AutofocusProp;
+export type CheckboxGroupOption<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & RequiredProp & CustomValidityProp & AutofocusProp;

package/dist/components/OnyxForm/OnyxForm.core.d.ts

@@ -1,4 +1,5 @@
 import { type Reactive, type Ref } from "vue";
+import type { RequiredMarkerType } from "../../composables/required";
 import type { ShowErrorMode } from "../../composables/useErrorClass";
 /**
  * Props on the `OnyxForm` component.
@@ -22,6 +23,13 @@ export type FormProps = {
      * See [:user-invalid](https://drafts.csswg.org/selectors/#user-invalid-pseudo).
      */
     showError?: ShowErrorMode;
+    /**
+     * Required mode: `optional` will show an `(optional)` text after the label for optional form elements.
+     * `required` will show an `*` indicator for required inputs after the label instead.
+     * No marker will be visible if the label is hidden.
+     * @default undefined By default the parents setting is used, if none is defined on any `required` is the default.
+     */
+    requiredMarker?: RequiredMarkerType;
 };
 /**
  * Props that may be used by the form child components.
@@ -33,11 +41,11 @@ export type FormComputedProps = {
  * ❗️ DO NOT USE THIS TYPE ❗️
  *
  * Manual replication of the `keyof FormProps` type.
- * Unfortunately this is necessary because Vue can only supports simple index types.
+ * Unfortunately this is necessary because Vue can only support simple index types.
  *
  * See discussion in https://github.com/vuejs/core/issues/8286
  */
-export type __DONT_USE_VUE_FIX_KeyOfFormProps = "disabled" | "showError";
+export type __DONT_USE_VUE_FIX_KeyOfFormProps = "disabled" | "showError" | "requiredMarker";
 /**
  * Props that may be used by the form child components.
  */
@@ -87,4 +95,5 @@ export declare const provideFormContext: (formProps: Reactive<FormProps> | undef
 export declare const useFormContext: (props: Reactive<FormInjectedProps>) => {
     disabled: Readonly<Ref<boolean, boolean>>;
     showError: Readonly<Ref<boolean | "touched", boolean | "touched">>;
+    requiredMarker: Readonly<Ref<"required" | "optional", "required" | "optional">>;
 };

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

@@ -1,5 +1,5 @@
 import type { DensityProp } from "../../composables/density";
-import type { RequiredMarkerProp } from "../../composables/required";
+import type { RequiredProp } from "../../composables/required";
 import type { CustomMessageType, CustomValidityProp, FormMessages } from "../../composables/useCustomValidity";
 import type { SharedTextInputProps } from "../../composables/useLenientMaxLengthValidation";
 import type { SkeletonInjected } from "../../composables/useSkeletonState";
@@ -10,7 +10,7 @@ export type OnyxFormElementProps = Omit<SharedFormElementProps, "error" | "messa
     message?: FormMessages;
     successMessages?: FormMessages;
 };
-export type SharedFormElementProps = RequiredMarkerProp & FormInjectedProps & DensityProp & CustomValidityProp & AutofocusProp & {
+export type SharedFormElementProps = FormInjectedProps & RequiredProp & DensityProp & CustomValidityProp & AutofocusProp & {
     /**
      * The id of a labelable form-related element.
      * If not given an id will be generated.

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

@@ -51,6 +51,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     readonly: boolean;
     skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
     showError: boolean | symbol | "touched";
+    requiredMarker: symbol | "required" | "optional";
     hideSuccessIcon: boolean;
     hideClearIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {

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

@@ -10,8 +10,9 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     loading: boolean;
-    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
+    disabled: boolean | symbol;
     skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
+    requiredMarker: symbol | "required" | "optional";
     modelValue: boolean;
     truncation: import("../../index.ts").TruncationType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {

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

@@ -17,6 +17,8 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean | symbol;
     readonly: boolean;
     skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
+    showError: boolean | symbol | "touched";
+    requiredMarker: symbol | "required" | "optional";
     disableManualResize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
     inputRef: HTMLTextAreaElement;

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

@@ -1,8 +1,5 @@
-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" | "placeholder" | "autocapitalize" | "autofocus" | "name" | "readonly" | "disabled" | "minlength" | "maxlength" | "withCounter" | "message" | "success" | "skeleton"> & {
+export type OnyxTextareaProps = Omit<OnyxInputProps, "autocomplete" | "hideClearIcon" | "hideSuccessIcon" | "loading" | "pattern" | "type"> & {
     /**
      * 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/composables/required.d.ts

@@ -1,24 +1,18 @@
+import { type Ref } from "vue";
 export declare const RequiredMarkerTypes: readonly ["optional", "required"];
 export type RequiredMarkerType = (typeof RequiredMarkerTypes)[number];
-export type RequiredMarkerProp = {
+export type RequiredProp = {
     /**
      * Whether the a value for this form element is required.
      */
     required?: boolean;
-    /**
-     * Required mode: `optional` will show an `(optional)` text after the label for optional inputs.
-     * `required` will show an `*` indicator for required inputs after the label instead.
-     * No marker will be visible if the label is hidden.
-     * @default undefined By default the parents setting is used, if none is defined on any `required` is the default.
-     */
-    requiredMarker?: RequiredMarkerType;
 };
-export declare const useRequired: (props: RequiredMarkerProp) => {
+export declare const useRequired: (props: RequiredProp, requiredMarker: Readonly<Ref<RequiredMarkerType>>) => {
     /**
      * Class that configures which type of required marker is used.
      */
     requiredTypeClass: import("vue").ComputedRef<{
-        [x: string]: "required" | "optional" | undefined;
+        [x: string]: boolean;
     }>;
     requiredMarkerClass: import("vue").ComputedRef<{
         "onyx-required-marker": boolean | undefined;

package/dist/composables/useCustomValidity.d.ts

@@ -6,7 +6,7 @@ import type { MaxLength } from "./useLenientMaxLengthValidation";
 export type CustomMessageType = string | FormMessages;
 export type CustomValidityProp = {
     /**
-     * Custom error message to show. Will only show up after the user has interacted with the input.
+     * Custom error message to show. Takes precedence over intrinsic error messages.
      */
     customError?: CustomMessageType;
 };