sit-onyx 1.0.0-alpha.46 → 1.0.0-alpha.48

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

@@ -37,6 +37,15 @@ export declare const Danger: {
         variation: "danger";
     };
 };
+/**
+ * This example shows the button in loading state
+ */
+export declare const Loading: {
+    args: {
+        label: string;
+        loading: true;
+    };
+};
 /**
  * This example shows the button with icon
  */

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

@@ -1,6 +1,7 @@
 import type { OnyxButtonProps } from "./types";
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxButtonProps>, {
     disabled: boolean;
+    loading: boolean;
     type: string;
     variation: string;
     mode: string;
@@ -9,6 +10,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     click: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxButtonProps>, {
     disabled: boolean;
+    loading: boolean;
     type: string;
     variation: string;
     mode: string;
@@ -18,6 +20,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }, {
     type: "button" | "submit" | "reset";
     disabled: boolean;
+    loading: boolean;
     variation: "primary" | "secondary" | "danger";
     mode: "default" | "outline" | "plain";
     skeleton: boolean;

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

@@ -7,6 +7,10 @@ export type OnyxButtonProps = {
      * If the button should be disabled or not.
      */
     disabled?: boolean;
+    /**
+     * Shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The button type.
      */

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

@@ -3,6 +3,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     modelValue: boolean;
     indeterminate: boolean;
     disabled: boolean;
+    loading: boolean;
     required: boolean;
     truncation: string;
     skeleton: boolean;
@@ -12,6 +13,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     modelValue: boolean;
     indeterminate: boolean;
     disabled: boolean;
+    loading: boolean;
     required: boolean;
     truncation: string;
     skeleton: boolean;
@@ -20,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }, {
     required: boolean;
     disabled: boolean;
+    loading: boolean;
     skeleton: boolean;
     modelValue: boolean;
     indeterminate: boolean;

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

@@ -1,5 +1,6 @@
+import type { RequiredMarkerProp } from "../../composables/required";
 import type { TruncationType } from "../../types/fonts";
-export type OnyxCheckboxProps = {
+export type OnyxCheckboxProps = RequiredMarkerProp & {
     /**
      * Whether the checkbox is checked.
      */
@@ -18,9 +19,9 @@ export type OnyxCheckboxProps = {
      */
     disabled?: boolean;
     /**
-     * Whether the checkbox is required / has to be checked.
+     * Shows a loading indicator.
      */
-    required?: boolean;
+    loading?: boolean;
     /**
      * If `true`, the label will be visually hidden.
      * For accessibility / screen readers, the aria-label will still be set.

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

@@ -18,16 +18,25 @@ export declare const Default: {
             id: string;
             required?: undefined;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
+            loading?: undefined;
+        } | {
+            label: string;
+            id: string;
+            loading: true;
+            required?: undefined;
+            disabled?: undefined;
         })[];
     };
 };
@@ -44,16 +53,25 @@ export declare const Horizontal: {
             id: string;
             required?: undefined;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
+            loading?: undefined;
+        } | {
+            label: string;
+            id: string;
+            loading: true;
+            required?: undefined;
+            disabled?: undefined;
         })[];
     };
 };
@@ -70,16 +88,25 @@ export declare const WithCheckAll: {
             id: string;
             required?: undefined;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
+            loading?: undefined;
+        } | {
+            label: string;
+            id: string;
+            loading: true;
+            required?: undefined;
+            disabled?: undefined;
         })[];
     };
 };
@@ -96,16 +123,25 @@ export declare const Disabled: {
             id: string;
             required?: undefined;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
+            loading?: undefined;
+        } | {
+            label: string;
+            id: string;
+            loading: true;
+            required?: undefined;
+            disabled?: undefined;
         })[];
     };
 };
@@ -150,16 +186,25 @@ export declare const Skeleton: {
             id: string;
             required?: undefined;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
+            loading?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
+            loading?: undefined;
+        } | {
+            label: string;
+            id: string;
+            loading: true;
+            required?: undefined;
+            disabled?: undefined;
         })[];
     };
 };

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

@@ -3,9 +3,9 @@ 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>[];
     headline?: string | undefined;
     direction?: "horizontal" | "vertical" | undefined;
-    options: import('../../index').CheckboxGroupOption<TValue>[];
     withCheckAll?: boolean | undefined;
     checkAllLabel?: string | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
@@ -18,9 +18,9 @@ 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>[];
         headline?: string | undefined;
         direction?: "horizontal" | "vertical" | undefined;
-        options: import('../../index').CheckboxGroupOption<TValue>[];
         withCheckAll?: boolean | undefined;
         checkAllLabel?: string | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
@@ -37,9 +37,9 @@ 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>[];
             headline?: string | undefined;
             direction?: "horizontal" | "vertical" | undefined;
-            options: import('../../index').CheckboxGroupOption<TValue>[];
             withCheckAll?: boolean | undefined;
             checkAllLabel?: string | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;

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

@@ -9,9 +9,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     loading: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => void;
-    blur: () => 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;
@@ -29,8 +29,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     type: "search" | "text" | "email" | "password" | "tel" | "url";
     required: boolean;
     disabled: boolean;
-    modelValue: string;
     loading: boolean;
+    modelValue: string;
     autocapitalize: "none" | "sentences" | "words" | "characters";
     readonly: boolean;
 }, {}>;

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

@@ -1,4 +1,5 @@
-export type OnyxInputProps = {
+import type { RequiredMarkerProp } from "../../composables/required";
+export type OnyxInputProps = RequiredMarkerProp & {
     /**
      * Label to show above the input. Required due to accessibility / screen readers.
      * If you want to visually hide the label, use the `hideLabel` property.
@@ -16,10 +17,6 @@ export type OnyxInputProps = {
      * Placeholder to show when the value is empty.
      */
     placeholder?: string;
-    /**
-     * Whether the input is required.
-     */
-    required?: boolean;
     /**
      * If and how text should be automatically be capitalized when using non-physical keyboards
      * (such as virtual keyboard on mobile devices or voice input).

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

@@ -5,9 +5,11 @@ declare const _default: <TValue>(__VLS_props: {
     value?: TValue | undefined;
     id: string;
     disabled?: boolean | undefined;
+    loading?: boolean | undefined;
     skeleton?: boolean | undefined;
     truncation?: "ellipsis" | "multiline" | undefined;
     name: string;
+    density?: "default" | "cozy" | "compact" | undefined;
     errorMessage?: string | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
@@ -21,9 +23,11 @@ declare const _default: <TValue>(__VLS_props: {
         value?: TValue | undefined;
         id: string;
         disabled?: boolean | undefined;
+        loading?: boolean | undefined;
         skeleton?: boolean | undefined;
         truncation?: "ellipsis" | "multiline" | undefined;
         name: string;
+        density?: "default" | "cozy" | "compact" | undefined;
         errorMessage?: string | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
@@ -41,9 +45,11 @@ declare const _default: <TValue>(__VLS_props: {
             value?: TValue | undefined;
             id: string;
             disabled?: boolean | undefined;
+            loading?: boolean | undefined;
             skeleton?: boolean | undefined;
             truncation?: "ellipsis" | "multiline" | undefined;
             name: string;
+            density?: "default" | "cozy" | "compact" | undefined;
             errorMessage?: string | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;

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

@@ -1,3 +1,4 @@
+import type { DensityProp } from "../../composables/density";
 import type { TruncationType } from "../../types/fonts";
 /**
  * TODO: move to dedicated file
@@ -14,6 +15,10 @@ export type SelectionOption<T = unknown> = {
      */
     value?: T;
     disabled?: boolean;
+    /**
+     * Shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * How to truncate the label if it exceeds the max width.
      */
@@ -26,7 +31,7 @@ export type SelectionOption<T = unknown> = {
 export type SelectionProps<T> = SelectionOption<T> & {
     selected?: boolean;
 };
-export type RadioButtonProps<TValue> = SelectionProps<TValue> & {
+export type RadioButtonProps<TValue> = SelectionProps<TValue> & DensityProp & {
     /**
      * Identifier for the radio buttons in the group.
      * All radio buttons that should belong to the same radio group must have the same name.

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

@@ -4,12 +4,14 @@ declare const _default: <TValue>(__VLS_props: {
     disabled?: boolean | undefined;
     skeleton?: number | undefined;
     modelValue?: SelectionOption<TValue> | undefined;
+    requiredMarker?: "required" | "optional" | undefined;
     "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
-    name?: string | undefined;
-    errorMessage?: string | undefined;
+    options: SelectionOption<TValue>[];
     headline?: string | undefined;
     direction?: "horizontal" | "vertical" | undefined;
-    options: SelectionOption<TValue>[];
+    name?: string | undefined;
+    density?: "default" | "cozy" | "compact" | undefined;
+    errorMessage?: string | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
     slots: {};
@@ -20,12 +22,14 @@ declare const _default: <TValue>(__VLS_props: {
         disabled?: boolean | undefined;
         skeleton?: number | undefined;
         modelValue?: SelectionOption<TValue> | undefined;
+        requiredMarker?: "required" | "optional" | undefined;
         "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
-        name?: string | undefined;
-        errorMessage?: string | undefined;
+        options: SelectionOption<TValue>[];
         headline?: string | undefined;
         direction?: "horizontal" | "vertical" | undefined;
-        options: SelectionOption<TValue>[];
+        name?: string | undefined;
+        density?: "default" | "cozy" | "compact" | undefined;
+        errorMessage?: string | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -40,12 +44,14 @@ declare const _default: <TValue>(__VLS_props: {
             disabled?: boolean | undefined;
             skeleton?: number | undefined;
             modelValue?: SelectionOption<TValue> | undefined;
+            requiredMarker?: "required" | "optional" | undefined;
             "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
-            name?: string | undefined;
-            errorMessage?: string | undefined;
+            options: SelectionOption<TValue>[];
             headline?: string | undefined;
             direction?: "horizontal" | "vertical" | undefined;
-            options: SelectionOption<TValue>[];
+            name?: string | undefined;
+            density?: "default" | "cozy" | "compact" | undefined;
+            errorMessage?: string | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
         attrs: any;

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

@@ -1,5 +1,7 @@
+import type { RequiredMarkerProp } from "../../composables/required";
+import type { DensityProp } from "../../composables/density";
 import type { SelectionOption } from "../OnyxRadioButton/types";
-export type OnyxRadioButtonGroupProps<TValue> = {
+export type OnyxRadioButtonGroupProps<TValue> = DensityProp & RequiredMarkerProp & {
     /**
      * Unique name for the radio button group form element.
      * Will automatically filled, when it is not given.
@@ -15,11 +17,6 @@ export type OnyxRadioButtonGroupProps<TValue> = {
      * It will also show the required indicator, if `require` is set to `true`
      */
     headline?: string;
-    /**
-     * Set the radio button group to be required.
-     * If no `headline` is defined then no required indicator will be visible.
-     */
-    required?: boolean;
     /**
      * Disable the radio button group.
      */

package/dist/components/OnyxSkeleton/OnyxSkeleton.stories.d.ts

@@ -3,7 +3,7 @@ import OnyxSkeleton from "./OnyxSkeleton.vue";
 /**
  * The skeleton can be used during the process of building up / loading the initial page.
  *
- * **Note**: If the height/width is not set via CSS, it will use/inherit the full available space.
+ * **Note**: Apply height/width via CSS.
  */
 declare const meta: Meta<typeof OnyxSkeleton>;
 export default meta;

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

@@ -7,7 +7,7 @@ import OnyxSwitch from "./OnyxSwitch.vue";
 declare const meta: Meta<typeof OnyxSwitch>;
 export default meta;
 /**
- * This example shows the default checked state of the switch.
+ * This example shows the default unchecked state of the switch.
  */
 export declare const Default: {
     args: {
@@ -15,7 +15,7 @@ export declare const Default: {
     };
 };
 /**
- * This example shows the default unchecked state of the switch.
+ * This example shows the checked state of the switch.
  */
 export declare const Checked: {
     args: {
@@ -32,6 +32,16 @@ export declare const Invalid: {
         label: string;
     };
 };
+/**
+ * This example shows checked and loading state of the switch.
+ */
+export declare const CheckedLoading: {
+    args: {
+        label: string;
+        modelValue: true;
+        loading: true;
+    };
+};
 /**
  * A switch with truncation. You can set the "truncation" property to choose between the different truncation types.
  */

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

@@ -2,7 +2,7 @@ import type { OnyxSwitchProps } from "./types";
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxSwitchProps>, {
     modelValue: boolean;
     disabled: boolean;
-    required: boolean;
+    loading: boolean;
     truncation: string;
     skeleton: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -11,15 +11,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxSwitchProps>, {
     modelValue: boolean;
     disabled: boolean;
-    required: boolean;
+    loading: boolean;
     truncation: string;
     skeleton: boolean;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onValidityChange?: ((state: ValidityState) => any) | undefined;
 }, {
-    required: boolean;
     disabled: boolean;
+    loading: boolean;
     skeleton: boolean;
     modelValue: boolean;
     truncation: "ellipsis" | "multiline";

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

@@ -1,5 +1,6 @@
+import type { RequiredMarkerProp } from "../../composables/required";
 import type { TruncationType } from "../../types/fonts";
-export type OnyxSwitchProps = {
+export type OnyxSwitchProps = RequiredMarkerProp & {
     /**
      * Whether the switch should be checked or not.
      */
@@ -13,9 +14,9 @@ export type OnyxSwitchProps = {
      */
     disabled?: boolean;
     /**
-     * Whether the switch is required / has to be checked.
+     * Shows a loading indicator.
      */
-    required?: boolean;
+    loading?: boolean;
     /**
      * The error message will set switch to invalid state.
      */

package/dist/composables/density.d.ts

@@ -0,0 +1,15 @@
+declare const DENSITY: readonly ["cozy", "default", "compact"];
+export type DensityType = (typeof DENSITY)[number];
+export type DensityProp = {
+    /**
+     * Density defines the amount of vertical white space a component has and the height of the main (interactive) element of a component.
+     * @default undefined By default the parents setting is used, if none is defined on any parent `default` is the default.
+     */
+    density?: DensityType;
+};
+export declare const useDensity: (props: DensityProp) => {
+    densityClass: import("vue").ComputedRef<{
+        [x: string]: "default" | "cozy" | "compact" | undefined;
+    }>;
+};
+export {};

package/dist/composables/required.d.ts

@@ -0,0 +1,27 @@
+declare const REQUIRED_MARKER: readonly ["optional", "required"];
+export type RequiredMarkerType = (typeof REQUIRED_MARKER)[number];
+export type RequiredMarkerProp = {
+    /**
+     * 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.
+     * @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) => {
+    /**
+     * Class that configures which type of required marker is used.
+     */
+    requiredTypeClass: import("vue").ComputedRef<{
+        [x: string]: "required" | "optional" | undefined;
+    }>;
+    requiredMarkerClass: import("vue").ComputedRef<{
+        "onyx-required-marker": boolean | undefined;
+        "onyx-optional-marker": boolean;
+    }>;
+};
+export {};