sit-onyx 1.0.0-beta.0 → 1.0.0-beta.10

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

@@ -1,7 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
-export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & {
+export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & Pick<BaseSelectOption, "truncation"> & {
     /**
      * Checkbox options.
      */

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

@@ -1,17 +1,24 @@
 import type { OnyxFormElementProps } from "./types";
 declare function __VLS_template(): Readonly<{
     /** The place for the actual form element */
-    default(): unknown;
+    default(props: {
+        id: string;
+    }): unknown;
 }> & {
     /** The place for the actual form element */
-    default(): unknown;
+    default(props: {
+        id: string;
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxFormElementProps>, {
     required: boolean;
+    id: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxFormElementProps>, {
     required: boolean;
+    id: string;
 }>>>, {
     required: boolean;
+    id: string;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -1,6 +1,12 @@
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { FormErrorMessages } from "../../composables/useCustomValidity";
 export type OnyxFormElementProps = RequiredMarkerProp & {
+    /**
+     * The id of a labelable form-related element.
+     * If not given an id will be generated.
+     * The id is passed as a `default` slot property.
+     */
+    id?: string;
     /**
      * Current value of the form element.
      */

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

@@ -1,12 +1,12 @@
 import type { OnyxMobileNavButtonProps } from "./types";
 declare function __VLS_template(): Readonly<{
     /**
-     * Slot for the menu content when its open.
+     * Slot for the menu content when it's open.
      */
     default(): unknown;
 }> & {
     /**
-     * Slot for the menu content when its open.
+     * Slot for the menu content when it's open.
      */
     default(): unknown;
 };

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

@@ -12,4 +12,8 @@ export type OnyxMobileNavButtonProps = {
      * If `true`, an "x" icon will be displayed.
      */
     open?: boolean;
+    /**
+     * Headline of the mobile flyout
+     */
+    headline?: string;
 };

package/dist/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue.d.ts

@@ -2,7 +2,13 @@ import { type VNode } from "vue";
 import type { SelectOptionValue } from "../../../../types";
 import type { OnyxFlyoutMenuProps } from "./types";
 declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{}>>, never>, never> & OnyxFlyoutMenuProps> & __VLS_BuiltInPublicProps;
+    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{}>> & {
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    }, never>, "onUpdate:open"> & ({
+        open?: boolean;
+    } & OnyxFlyoutMenuProps)> & __VLS_BuiltInPublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => Readonly<{
@@ -40,7 +46,7 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
          */
         footer?(): unknown;
     }>;
-    emit: {};
+    emit: (evt: "update:open", open: boolean) => void;
 }>) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> & {

package/dist/components/OnyxNavBar/modules/OnyxMenuItem/types.d.ts

@@ -2,7 +2,7 @@ import type { OnyxColor } from "../../../../types";
 export type OnyxMenuItemProps = {
     /**
      * URL that the menu item points to.
-     * If the property is set an anchor tag will be rendered, if not a button will be shown instead
+     * If the property is set the menuitem will act as an anchor, otherwise it will act as an button.
      */
     href?: string;
     /**

package/dist/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue.d.ts

@@ -1,4 +1,8 @@
 import type { OnyxUserMenuProps } from "./types";
+declare let __VLS_typeProps: OnyxUserMenuProps;
+type __VLS_PublicProps = {
+    "flyoutOpen"?: boolean;
+} & typeof __VLS_typeProps;
 declare function __VLS_template(): Readonly<{
     /**
      * Slot for the menu options. Its recommended to use the `OnyxMenuItem` component here.
@@ -18,7 +22,11 @@ declare function __VLS_template(): Readonly<{
      */
     footer?(): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<OnyxUserMenuProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<OnyxUserMenuProps>>>, {}, {}>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_PublicProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:flyoutOpen": (flyoutOpen: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_PublicProps>>> & {
+    "onUpdate:flyoutOpen"?: ((flyoutOpen: boolean) => any) | undefined;
+}, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue.d.ts

@@ -1,8 +1,14 @@
 import type { SelectOptionValue } from "../../../../types";
 declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{}>>, never>, never> & {
+    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
+        "onUpdate:flyoutOpen"?: ((flyoutOpen: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{}>> & {
+        "onUpdate:flyoutOpen"?: ((flyoutOpen: boolean) => any) | undefined;
+    }, never>, "onUpdate:flyoutOpen"> & ({
+        flyoutOpen?: boolean;
+    } & {
         isMobile: boolean;
-    }> & __VLS_BuiltInPublicProps;
+    })> & __VLS_BuiltInPublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => Readonly<{
@@ -16,7 +22,7 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
         options?(): unknown;
         footer?(): unknown;
     }>;
-    emit: {};
+    emit: (evt: "update:flyoutOpen", flyoutOpen: boolean) => void;
 }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> & {

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

@@ -2,7 +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";
-export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & RequiredMarkerProp & CustomValidityProp & {
+export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & RequiredMarkerProp & CustomValidityProp & Pick<BaseSelectOption, "truncation"> & {
     /**
      * Options for the individual radio buttons of the group.
      */

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

@@ -51,7 +51,7 @@ export type SelectModelValueProps<TValue extends SelectOptionValue> = {
         label?: string;
     };
 };
-export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & SelectModelValueProps<TValue> & SelectSearchProps & Omit<OnyxSelectInputProps<TValue>, "density" | "modelValue"> & AutofocusProp & {
+export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & SelectModelValueProps<TValue> & SelectSearchProps & Omit<OnyxSelectInputProps<TValue>, "density" | "modelValue"> & AutofocusProp & Pick<BaseSelectOption, "truncation"> & {
     /**
      * If true, the select popover is expanded and visible.
      * Property is managed internally, when undefined.
@@ -72,7 +72,7 @@ export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue
      */
     lazyLoading?: SelectLazyLoading;
 };
-export type SelectOption<TValue extends SelectOptionValue = SelectOptionValue> = Pick<BaseSelectOption<TValue>, "value" | "label" | "disabled"> & Pick<OnyxSelectOptionProps, "icon"> & {
+export type SelectOption<TValue extends SelectOptionValue = SelectOptionValue> = Pick<BaseSelectOption<TValue>, "value" | "label" | "disabled" | "truncation"> & Pick<OnyxSelectOptionProps, "icon"> & {
     /**
      * Optional group name. If set, all options will be grouped under that group name.
      */

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

@@ -13,11 +13,14 @@ declare function __VLS_template(): Readonly<{
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxSelectOptionProps>, {
     active: boolean;
     multiple: boolean;
+    truncation: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxSelectOptionProps>, {
     active: boolean;
     multiple: boolean;
+    truncation: string;
 }>>>, {
     multiple: boolean;
+    truncation: import("../../index.js").TruncationType;
     active: boolean;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -1,3 +1,4 @@
+import type { TruncationType } from "../../types";
 import type { OnyxListItemProps } from "../OnyxListItem/types";
 export type OnyxSelectOptionProps = Pick<OnyxListItemProps, "active" | "density"> & {
     /**
@@ -13,4 +14,8 @@ export type OnyxSelectOptionProps = Pick<OnyxListItemProps, "active" | "density"
      * Optional icon.
      */
     icon?: string;
+    /**
+     * How to truncate the option label / text content if it exceeds the max width.
+     */
+    truncation?: TruncationType;
 };

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

@@ -1,41 +1,2 @@
-import type { OnyxToastProps } from "./types";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxToastProps>, {
-    color: string;
-    duration: number;
-    clickable: boolean;
-    icon: undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: () => void;
-    close: () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxToastProps>, {
-    color: string;
-    duration: number;
-    clickable: boolean;
-    icon: undefined;
-}>>> & {
-    onClick?: (() => any) | undefined;
-    onClose?: (() => any) | undefined;
-}, {
-    icon: string | false;
-    color: Extract<import("../..").OnyxColor, "neutral" | "danger" | "warning" | "success">;
-    duration: number;
-    clickable: boolean;
-}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/components/{OnyxToastProvider → OnyxToast}/useToast.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef, type InjectionKey } from "vue";
-import type { OnyxToastProps } from "../OnyxToast/types";
+import type { OnyxToastMessageProps } from "../OnyxToastMessage/types";
 export type ToastProvider = {
     /**
      * Readonly list of currently active toasts.
@@ -25,7 +25,7 @@ export type ProvidedToast = ShowToastOptions & {
      */
     onClose: () => void;
 };
-export type ShowToastOptions = OnyxToastProps & {
+export type ShowToastOptions = OnyxToastMessageProps & {
     /**
      * Callback when the toast is clicked. Requires `clickable` to be enabled.
      */

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

@@ -0,0 +1,41 @@
+import type { OnyxToastMessageProps } from "./types";
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxToastMessageProps>, {
+    color: string;
+    duration: number;
+    clickable: boolean;
+    icon: undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => void;
+    close: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxToastMessageProps>, {
+    color: string;
+    duration: number;
+    clickable: boolean;
+    icon: undefined;
+}>>> & {
+    onClick?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}, {
+    icon: string | false;
+    color: Extract<import("../..").OnyxColor, "neutral" | "danger" | "warning" | "success">;
+    duration: number;
+    clickable: boolean;
+}, {}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/{OnyxToast → OnyxToastMessage}/types.d.ts

@@ -1,6 +1,6 @@
 import type { DensityProp } from "../../composables/density";
 import type { OnyxColor } from "../../types";
-export type OnyxToastProps = DensityProp & {
+export type OnyxToastMessageProps = DensityProp & {
     /**
      * Main toast headline.
      */