sit-onyx 1.0.0-beta.46 → 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/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue.d.ts

@@ -0,0 +1,17 @@
+import type { DataGridEntry, DataGridMetadata } from "../types";
+import type { OnyxDataGridRendererProps } from "./types";
+declare const _default: <TEntry extends DataGridEntry, TMetadata extends DataGridMetadata>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<{}> & Readonly<{}>, never>, never> & OnyxDataGridRendererProps<TEntry, TMetadata>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/OnyxDataGrid/OnyxDataGridRenderer/types.d.ts

@@ -0,0 +1,87 @@
+import type { FunctionalComponent, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "vue";
+import type { WithHTMLAttributes } from "../../../types";
+import type { OnyxTableProps } from "../../OnyxTable/types";
+import type { DataGridEntry, DataGridMetadata } from "../types";
+export type OnyxDataGridRendererProps<TEntry extends DataGridEntry = DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = OnyxTableProps & {
+    /**
+     * Will define which columns and their headers are rendered in which order.
+     */
+    columns: DataGridRendererColumn<TEntry, object>[];
+    rows: DataGridRendererRow<TEntry, TMetadata>[];
+};
+/**
+ * Describes how a column header is rendered in the data grid.
+ */
+export type DataGridRendererColumn<TEntry extends DataGridEntry, TProps extends object> = {
+    /**
+     * (Unique) Key of the column - usually a key of the table data.
+     * But can also be used for custom columns.
+     */
+    key: keyof TEntry;
+    /**
+     * The component that renders the header content and is placed into the `<th>` element.
+     */
+    component: FunctionalComponent<WithHTMLAttributes<TProps>>;
+    /**
+     * Attributes and data that is provided to the component using `v-bind`.
+     */
+    props: WithHTMLAttributes<TProps>;
+    /**
+     * Attributes that are bound directly to the `<th>` element of the column.
+     */
+    thAttributes?: ThHTMLAttributes;
+};
+/**
+ * Describes how a specific row is rendered in the data grid.
+ */
+export type DataGridRendererRow<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = {
+    /**
+     * Unique id of the row.
+     */
+    id: PropertyKey;
+    /**
+     * Describes how a cell in a specific row is rendered in the data grid.
+     * Only cells that are defined in the columns will be rendered in the defined order.
+     */
+    cells: Partial<Record<keyof TEntry, DataGridRendererCell<TEntry, TMetadata>>>;
+    /**
+     * Attributes that are bound directly to the `<tr>` element of the row.
+     */
+    trAttributes?: HTMLAttributes;
+};
+/**
+ * Describes how a single cell in a specific row is rendered in the data grid.
+ */
+export type DataGridRendererCell<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = {
+    /**
+     * The component that renders the actual cell content and is placed into the `<td>` element.
+     */
+    component: DataGridRendererCellComponent<TEntry, TMetadata>;
+    /**
+     * Attributes and data that is provided to the component using `v-bind`.
+     */
+    props: DataGridRendererCellComponentProps<TEntry, TMetadata>;
+    /**
+     * Attributes that are bound directly to the `<td>` element of the cell.
+     */
+    tdAttributes?: TdHTMLAttributes;
+};
+/**
+ * Vue component that renders the actual content of a single data grid cell.
+ */
+export type DataGridRendererCellComponent<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = FunctionalComponent<WithHTMLAttributes<DataGridRendererCellComponentProps<TEntry, TMetadata>, TdHTMLAttributes>>;
+export type DataGridRendererCellComponentProps<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata> = {
+    /**
+     * Complete row data.
+     */
+    row: TEntry;
+    /**
+     * Cell data that is provided to the component via the `metadata` prop.
+     */
+    metadata?: TMetadata;
+    /**
+     * Cell data that is provided to the component via the `modelValue` prop.
+     * If the cell renders readonly, this will just be the non-editable value.
+     */
+    modelValue?: TEntry[keyof TEntry];
+};

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

@@ -0,0 +1,8 @@
+export type DataGridMetadata = Record<string, unknown>;
+/**
+ * "Raw" user data for a data grid entry/row, e.g. fetched from a backend service.
+ */
+export type DataGridEntry = {
+    id: PropertyKey;
+    [key: PropertyKey]: unknown;
+};

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/OnyxTable/types.d.ts

@@ -15,4 +15,27 @@ export type OnyxTableProps = DensityProp & {
      * - Warning: Don't set a max-height/width on the table when `withPageScrolling` is set.
      */
     withPageScrolling?: boolean;
+    /**
+     * Optional column groups that are rendered above the table head to group columns together.
+     * Slot `head` must be filled for this to work and `withVerticalBorders` property should be set.
+     */
+    columnGroups?: TableColumnGroup[];
+};
+/**
+ * Table group that is rendered as `<colgroup>` and corresponding `<th scope="colgroup">` inside the table.
+ */
+export type TableColumnGroup = {
+    /**
+     * Unique key to identify the column group.
+     */
+    key: PropertyKey;
+    /**
+     * Number of columns to span. Must be >= 1.
+     * Sum of all column group spans must add up to the total number of table columns.
+     */
+    span: number;
+    /**
+     * Header text to display.
+     */
+    header?: string;
 };

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;