sit-onyx 1.0.0-beta.67 → 1.0.0-beta.69

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

@@ -1,5 +1,5 @@
-import { type DataGridEntry, type OnyxDataGridProps } from "../..";
 import { type DataGridFeature } from "./features";
+import type { DataGridEntry, OnyxDataGridProps } from "./types";
 declare const _default: <TEntry extends DataGridEntry, TFeatures extends DataGridFeature<TEntry, symbol>[] | []>(__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, never>, never> & Partial<{}> & OnyxDataGridProps<TEntry, TFeatures>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;

package/dist/components/OnyxDataGrid/features/all.d.ts

@@ -1,2 +1,2 @@
 export * from "./sorting/types";
-export { useDataGridSorting as useSorting } from "./sorting/sorting";
+export { useSorting } from "./sorting/sorting";

package/dist/components/OnyxDataGrid/features/index.d.ts

@@ -51,7 +51,7 @@ export type DataGridFeature<TEntry extends DataGridEntry, TFeatureName extends s
  * });
  * ```
  */
-export declare function createFeature<TFeatureName extends symbol, TArgs extends unknown[]>(featureDefinition: <TEntry extends DataGridEntry>(...args: TArgs) => DataGridFeature<TEntry, TFeatureName>): <TEntry extends DataGridEntry>(...args: TArgs) => DataGridFeature<TEntry, TFeatureName>;
+export declare function createFeature<TEntry extends DataGridEntry, TFeatureName extends symbol, TArgs extends unknown[]>(featureDefinition: (...args: TArgs) => DataGridFeature<TEntry, TFeatureName>): (...args: TArgs) => DataGridFeature<TEntry, TFeatureName>;
 /**
  * Uses the defined datagrid features to provide factory functions.
  * These factories are to be used to map data and configuration to `OnyxDataGridRenderer` properties.

package/dist/components/OnyxDataGrid/features/sorting/TestCase.vue.d.ts

@@ -0,0 +1,9 @@
+import type { DataGridEntry, OnyxDataGridProps } from "../../../..";
+import { DataGridFeatures } from "../../../..";
+type __VLS_Props = Pick<OnyxDataGridProps, "columns" | "data">;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sortChange: (sortState: DataGridFeatures.SortState<DataGridEntry>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSortChange?: ((sortState: DataGridFeatures.SortState<DataGridEntry>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/OnyxDataGrid/features/sorting/sorting.d.ts

@@ -1,6 +1,5 @@
 import type { DataGridEntry } from "../../types";
-import type { SortDirection, SortOptions, SortState } from "./types";
+import type { SortDirection, SortOptions } from "./types";
 export declare const nextSortDirection: (current?: SortDirection) => SortDirection;
-export declare const nextSortState: <TEntry extends DataGridEntry>(column: keyof TEntry, current?: SortState<TEntry>) => SortState<TEntry>;
 export declare const SORTING_FEATURE: unique symbol;
-export declare const useDataGridSorting: <TEntry extends DataGridEntry>(options?: SortOptions<DataGridEntry> | undefined) => import("..").DataGridFeature<TEntry, typeof SORTING_FEATURE>;
+export declare const useSorting: <TEntry extends DataGridEntry>(options?: SortOptions<TEntry> | undefined) => import("..").DataGridFeature<TEntry, typeof SORTING_FEATURE>;

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

@@ -11,7 +11,7 @@ export type Compare<T> = (a: T, b: T) => number;
  * The values by which the data is currently sorted.
  * A `undefined` column or a direction of "none" means no sorting is applied.
  */
-export type SortState<TEntry extends DataGridEntry> = {
+export type SortState<TEntry extends DataGridEntry = DataGridEntry> = {
     /**
      * The column which is used to sort by.
      * `undefined` means no sorting is applied.
@@ -51,5 +51,5 @@ export type SortOptions<TEntry extends DataGridEntry> = {
     /**
      * The options for each column, including whether sorting is enabled and a custom sorting function. If undefined, sorting is enabled for all columns (default).
      */
-    columns?: MaybeRefOrGetter<SortColumnOptions<TEntry>>;
+    columns?: MaybeRefOrGetter<SortColumnOptions<TEntry> | undefined>;
 };

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

@@ -6,6 +6,9 @@ export type DataGridMetadata = Record<string, unknown>;
 export type OnyxDataGridProps<TEntry extends DataGridEntry = DataGridEntry, TFeatures extends DataGridFeature<TEntry, symbol>[] = DataGridFeature<TEntry, symbol>[]> = {
     /**
      * Features that should be applied.
+     * They allow the modification of the behavior and rendering.
+     * Usually you want to use the provided features of the exported `DataGridFeature` namespace.
+     * Check the Storybook examples (e.g. [Sorting](/?path=/story/data-datagrid-features--sorting)) for more details on how the features are used and configured.
      */
     features?: TFeatures;
     /**

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

@@ -24,7 +24,10 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<OnyxTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxTabProps> & Readonly<{}>, {
+    skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
+    disabled: boolean;
+}, {}, {}, {}, 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 & {

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

@@ -1,4 +1,5 @@
 import type { DensityProp } from "../../composables/density";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 export type OnyxTabProps = DensityProp & {
     /**
      * Value of the tab when its selected. Will be the `modelValue` / `v-model` of the `OnyxTabs` component.
@@ -8,4 +9,12 @@ export type OnyxTabProps = DensityProp & {
      * Tab label to display. Alternatively, the `tab` slot can be used.
      */
     label?: string;
+    /**
+     * Whether the tab should be disabled and prevent the user from interacting with it.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show a skeleton tab.
+     */
+    skeleton?: SkeletonInjected;
 };

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

@@ -1,7 +1,9 @@
 import type { createTabs } from "@sit-onyx/headless";
 import type { InjectionKey, Ref } from "vue";
 import type { DensityProp } from "../../composables/density";
-export type OnyxTabsProps<TValue extends PropertyKey = PropertyKey> = DensityProp & {
+import type { SkeletonProvidedProp } from "../../composables/useSkeletonState";
+import type { HeadlineType } from "../OnyxHeadline/types";
+export type OnyxTabsProps<TValue extends PropertyKey = PropertyKey> = DensityProp & Partial<SkeletonProvidedProp> & {
     /**
      * Label of the tabs. Needed for accessibility / screen readers.
      */
@@ -14,6 +16,11 @@ export type OnyxTabsProps<TValue extends PropertyKey = PropertyKey> = DensityPro
      * If `true`, the tabs will be stretched to the full available width.
      */
     stretched?: boolean;
+    /**
+     * Tab font size. Note: This only affects the visual size of the tab font and has NO effect on the semantic meaning.
+     * Size will be aligned with the corresponding `OnyxHeadline` size.
+     */
+    size?: TabSize;
 };
 export type TabsInjectionKey<TValue extends PropertyKey = PropertyKey> = InjectionKey<{
     /**
@@ -25,9 +32,14 @@ export type TabsInjectionKey<TValue extends PropertyKey = PropertyKey> = Injecti
      * to maintain the correct HTML structure.
      */
     panelRef: Ref<HTMLElement | undefined>;
+    /**
+     * Tab size passed down from the parent so it can be set once for all tabs.
+     */
+    size: Ref<TabSize>;
 }>;
 /**
  * Injection key to provide relevant context data from the tabs parent to the
  * individual child tab components.
  */
 export declare const TABS_INJECTION_KEY: TabsInjectionKey;
+export type TabSize = Extract<HeadlineType, "h2" | "h3" | "h4">;

package/dist/components/examples/DataGrid/SortingDataGrid.vue.d.ts

@@ -1,9 +1,26 @@
-import type { DataGridEntry, OnyxDataGridProps } from "../../..";
 import { DataGridFeatures } from "../../..";
-type __VLS_Props = Pick<OnyxDataGridProps, "columns" | "data">;
+import type { SortOptions } from "../../OnyxDataGrid/features/sorting/types";
+type TEntry = (typeof data)[number];
+type __VLS_Props = SortOptions<TEntry>;
+declare const data: {
+    id: number;
+    name: string;
+    rank: number;
+    birthday: Date;
+}[];
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    sortChange: (sortState: DataGridFeatures.SortState<DataGridEntry>) => any;
+    "update:sortState": (data: DataGridFeatures.SortState<{
+        id: number;
+        name: string;
+        rank: number;
+        birthday: Date;
+    }>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSortChange?: ((sortState: DataGridFeatures.SortState<DataGridEntry>) => any) | undefined;
+    "onUpdate:sortState"?: ((data: DataGridFeatures.SortState<{
+        id: number;
+        name: string;
+        rank: number;
+        birthday: Date;
+    }>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/composables/useSkeletonState.d.ts

@@ -4,6 +4,10 @@ import { type ComputedRef, type Reactive } from "vue";
  * It's value is provided, so that it can be used in child components.
  */
 export type SkeletonProvidedProp = {
+    /**
+     * Whether to show all supported child components as skeleton.
+     * Can be overridden on each child component if necessary.
+     */
     skeleton: boolean;
 };
 /**

package/dist/i18n/index.d.ts

@@ -1,4 +1,4 @@
-import { type App, type ComputedRef, type MaybeRef } from "vue";
+import { type App, type ComputedRef, type InjectionKey, type MaybeRef } from "vue";
 import type { FlattenedKeysOf } from "../types/i18n";
 import type { DeepPartial } from "../types/utils";
 import enUS from "./locales/en-US.json";
@@ -63,6 +63,14 @@ export type TranslationFunction = (key: OnyxTranslationKey,
 placeholders?: Record<string, string | number | undefined> & {
     n?: number;
 }) => string;
+export declare const I18N_INJECTION_KEY: InjectionKey<ReturnType<typeof createI18n>>;
+/**
+ * Creates a new i18n instance.
+ */
+declare const createI18n: (options?: ProvideI18nOptions) => {
+    t: ComputedRef<TranslationFunction>;
+    locale: ComputedRef<string>;
+};
 /**
  * Provides a global i18n instance that is used by onyx.
  * Must only be called once in the `App.vue` file of a project that consumes onyx.