sit-onyx 1.0.0-beta.47 → 1.0.0-beta.48

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

@@ -2,7 +2,7 @@ import type { OnyxButtonProps } from "./types";
 declare const _default: import("vue").DefineComponent<OnyxButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxButtonProps> & Readonly<{}>, {
     type: import("./types").ButtonType;
     color: import("./types").ButtonColor;
-    disabled: boolean;
+    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
     loading: boolean;
     mode: import("./types").ButtonMode;
     skeleton: boolean;

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

@@ -1,5 +1,6 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 export type OnyxButtonProps = DensityProp & AutofocusProp & {
     /**
      * The text content of the button.
@@ -8,7 +9,7 @@ export type OnyxButtonProps = DensityProp & AutofocusProp & {
     /**
      * If the button should be disabled or not.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Shows a loading indicator.
      */

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

@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 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"> & {
     /**
@@ -30,7 +31,7 @@ export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOpti
     /**
      * Whether all checkboxes should be disabled.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * If set, the specified number of skeleton radio buttons will be shown.
      */

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

@@ -0,0 +1,58 @@
+import { type Reactive, type Ref } from "vue";
+/**
+ * Props on the `OnyxForm` component.
+ * These are injected, so that they can be used in the form child components.
+ */
+export type FormInjectedProps = {
+    disabled: boolean;
+};
+/**
+ * Props that may be used by the form child components.
+ */
+type LocalProps = {
+    [TKey in keyof FormInjectedProps]?: FormInjected<FormInjectedProps[TKey]>;
+};
+/**
+ * Symbol for the injected form injected properties.
+ */
+export declare const FORM_INJECTED_SYMBOL: unique symbol;
+export type FORM_INJECTED = typeof FORM_INJECTED_SYMBOL;
+/**
+ * Prop type used by form child elements, which indicates that the prop value is taken from the parent form by default.
+ * The props **MUST** use `FORM_INJECTED_SYMBOL` as default value.
+ * `useFormContext` is used to access the injected form properties.
+ *
+ * @example
+ * ```ts
+ * const props = withDefaults(defineProps<OnyxComponentProps>(), {
+ *   readonly: FORM_INJECTED_SYMBOL,
+ *   disabled: FORM_INJECTED_SYMBOL,
+ * });
+ *
+ * const { disabled, readonly } = useFormContext(props);
+ * ```
+ */
+export type FormInjected<T> = T | FORM_INJECTED;
+export declare const provideFormContext: (formProps: Reactive<FormInjectedProps> | undefined) => void;
+/**
+ * Provides the injected form properties (if available).
+ * Otherwise a defined default is used.
+ * A prop defined on the child component will always take precedence over the injected form properties.
+ *
+ * The props **MUST** use `FORM_INJECTED_SYMBOL` as default value.
+ * The type `FormInjected<T>` can be used as PropType wrapper.
+ *
+ * @example
+ * ```ts
+ * const props = withDefaults(defineProps<OnyxComponentProps>(), {
+ *   readonly: FORM_INJECTED_SYMBOL, // By default, the forms injected value is used
+ *   disabled: FORM_INJECTED_SYMBOL, // By default, the forms injected value is used
+ * });
+ *
+ * const { disabled, readonly } = useFormContext(props);
+ * ```
+ */
+export declare const useFormContext: (props: Reactive<LocalProps>) => {
+    disabled: Ref<boolean, boolean>;
+};
+export {};

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

@@ -0,0 +1,25 @@
+import type { OnyxFormProps } from "./types";
+declare function __VLS_template(): {
+    slots: Readonly<{
+        /**
+         * Any form content
+         */
+        default?(): unknown;
+    }> & {
+        /**
+         * Any form content
+         */
+        default?(): unknown;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<OnyxFormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxFormProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,3 @@
+import type { DensityProp } from "../../composables/density";
+import type { FormInjectedProps } from "./OnyxForm.core";
+export type OnyxFormProps = Partial<FormInjectedProps> & DensityProp;

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

@@ -14,7 +14,7 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<OnyxIconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxIconButtonProps> & Readonly<{}>, {
     type: import("../..").ButtonType;
     color: import("../..").ButtonColor;
-    disabled: boolean;
+    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
     skeleton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
 import type { ButtonColor, ButtonType } from "../OnyxButton/types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 export type OnyxIconButtonProps = DensityProp & AutofocusProp & {
     /**
      * The aria-label of the button.
@@ -9,7 +10,7 @@ export type OnyxIconButtonProps = DensityProp & AutofocusProp & {
     /**
      * If the button should be disabled or not.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * The button type.
      */

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

@@ -8,8 +8,8 @@ declare const _default: import("vue").DefineComponent<OnyxInputProps, {}, {}, {}
 }>, {
     type: import("./types").InputType;
     required: boolean;
+    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
     autocapitalize: import("./types").Autocapitalize;
-    disabled: boolean;
     loading: boolean;
     skeleton: boolean;
     modelValue: string;

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

@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 export type OnyxInputProps = DensityProp & RequiredMarkerProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages"> & AutofocusProp & {
     /**
@@ -49,7 +50,7 @@ export type OnyxInputProps = DensityProp & RequiredMarkerProp & CustomValidityPr
     /**
      * Whether the input should be disabled.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether the input is loading. User interaction will be disabled.
      */

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

@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 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"> & {
     /**
@@ -21,7 +22,7 @@ export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionV
     /**
      * Disable the radio group.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Direction of the checkboxes. Can be vertical (default) or horizontal.
      */

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

@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { ManagedProp } from "../../composables/useManagedState";
 import type { AutofocusProp, BaseSelectOption, SelectOptionValue } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import type { OnyxSelectOptionProps } from "../OnyxSelectOption/types";
 export type SelectSearchProps = {
@@ -58,7 +59,11 @@ export type SelectModelValueProps<TValue extends SelectOptionValue> = {
         label?: string;
     };
 };
-export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & SelectModelValueProps<TValue> & SelectSearchProps & Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus"> & AutofocusProp & Pick<BaseSelectOption, "truncation"> & {
+export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & SelectModelValueProps<TValue> & SelectSearchProps & Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus" | "disabled"> & AutofocusProp & Pick<BaseSelectOption, "truncation"> & {
+    /**
+     * Whether the select should be disabled.
+     */
+    disabled?: FormInjected<boolean>;
     /**
      * Label that will be shown in the input of OnyxSelect.
      * If unset, will be managed internally by comparing `modelValue` with `options`.

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

@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 export declare const MULTISELECT_TEXT_MODE: readonly ["summary", "preview"];
 export type MultiselectTextMode = (typeof MULTISELECT_TEXT_MODE)[number];
@@ -20,7 +21,7 @@ export type OnyxSelectInputProps = DensityProp & RequiredMarkerProp & CustomVali
     /**
      * Whether the select should be disabled.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether to show a skeleton select.
      */

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

@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<OnyxStepperProps, {}, {},
     onValidityChange?: ((validity: ValidityState) => any) | undefined;
     "onUpdate:modelValue"?: ((value?: number | undefined) => any) | undefined;
 }>, {
-    disabled: boolean;
+    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
     loading: boolean;
     skeleton: boolean;
     step: number;

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

@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 import type { Autocomplete } from "../OnyxInput/types";
 export type OnyxStepperProps = DensityProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages" | "withCounter" | "maxlength"> & AutofocusProp & {
@@ -40,7 +41,7 @@ export type OnyxStepperProps = DensityProp & CustomValidityProp & Omit<OnyxFormE
     /**
      * Whether to disable the input and prevent user interaction.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether the input should be readonly.
      */

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

@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<OnyxSwitchProps, {}, {}, {
     onValidityChange?: ((validity: ValidityState) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    disabled: boolean;
+    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
     loading: boolean;
     skeleton: boolean;
     modelValue: boolean;

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

@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, TruncationType } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 export type OnyxSwitchProps = DensityProp & RequiredMarkerProp & CustomValidityProp & AutofocusProp & {
     /**
      * Whether the switch should be checked or not.
@@ -14,7 +15,7 @@ export type OnyxSwitchProps = DensityProp & RequiredMarkerProp & CustomValidityP
     /**
      * Whether to disable the switch and prevent user interaction.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Shows a loading indicator.
      */

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

@@ -7,8 +7,8 @@ declare const _default: import("vue").DefineComponent<OnyxTextareaProps, {}, {},
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     required: boolean;
+    disabled: import("../OnyxForm/OnyxForm.core").FormInjected<boolean>;
     autocapitalize: import("../..").Autocapitalize;
-    disabled: boolean;
     skeleton: boolean;
     modelValue: string;
     readonly: boolean;