sit-onyx 1.0.0-beta.60 → 1.0.0-beta.62

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

@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
 import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
@@ -35,6 +36,6 @@ export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOpti
     /**
      * If set, the specified number of skeleton radio buttons will be shown.
      */
-    skeleton?: number;
+    skeleton?: SkeletonInjected;
 };
 export type CheckboxGroupOption<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & RequiredMarkerProp & CustomValidityProp & AutofocusProp;

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

@@ -0,0 +1,16 @@
+import { type DataGridEntry, type OnyxDataGridProps } from "../..";
+declare const _default: <TEntry extends DataGridEntry>(__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> & OnyxDataGridProps<TEntry>> & 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

@@ -74,7 +74,7 @@ export type DataGridRendererCellComponentProps<TEntry extends DataGridEntry, TMe
     /**
      * Complete row data.
      */
-    row: TEntry;
+    row: Readonly<TEntry>;
     /**
      * Cell data that is provided to the component via the `metadata` prop.
      */

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

@@ -0,0 +1,28 @@
+declare function __VLS_template(): {
+    slots: Readonly<{
+        actions?(): unknown;
+    }> & {
+        actions?(): unknown;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{
+    /**
+     * label of the column
+     */
+    label: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * label of the column
+     */
+    label: string;
+}> & 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/OnyxDataGrid/features/index.d.ts

@@ -0,0 +1,97 @@
+import { type Component, type WatchSource } from "vue";
+import type { DataGridRendererColumn, DataGridRendererRow } from "../../..";
+import type { DataGridEntry, DataGridMetadata } from "../types";
+export type DataGridFeature<TEntry extends DataGridEntry, TFeatureName extends symbol> = {
+    /**
+     * Unique name and identifier of the datagrid feature
+     */
+    name: TFeatureName;
+    /**
+     * An array of reactive states that should trigger a datagrid re-generation
+     */
+    watch: WatchSource[];
+    /**
+     * Allows modifying the datagrid state as a whole.
+     */
+    mutation?: {
+        func: (state: Readonly<TEntry>[]) => void;
+    };
+    /**
+     * Allows the modification of the headers.
+     */
+    header?: {
+        /**
+         * Adds header icon button(s).
+         * `iconComponent` of an action is shown after the header label.
+         * The components must be ARIA-conform buttons.
+         */
+        actions?: (column: keyof TEntry) => {
+            iconComponent: Component;
+            listComponent?: never;
+        }[];
+    };
+};
+/**
+ * Helper function that infers the generics of the DataGridFeature type.
+ * @example
+ * ```ts
+ *
+ * const MY_FEATURE = Symbol("TABLE_HEADER_BUTTON");
+ * export const useDataGridHeaderButton = createFeature(<TEntry extends DataGridEntry>() => {
+ *   return {
+ *     name: MY_FEATURE,
+ *     header: {
+ *       actions: (column) => [
+ *         {
+ *           iconComponent: h('button', { onClick: (column) => console.log(`Clicked on ${column}`) },),
+ *         },
+ *       ],
+ *     },
+ *   };
+ * });
+ * ```
+ */
+export declare const createFeature: <TFeatureName extends symbol, TArgs extends unknown[]>(featureDefinition: <TEntry extends DataGridEntry>(...args: TArgs) => DataGridFeature<TEntry, TFeatureName>) => <TEntry extends DataGridEntry>(...args: TArgs) => DataGridFeature<TEntry, TFeatureName>;
+type ExtractTEntry<T> = T extends DataGridFeature<infer I, symbol>[] ? I : never;
+/**
+ * Uses the defined datagrid features to provide factory functions.
+ * These factories are to be used to map data and configuration to `OnyxDataGridRenderer` properties.
+ * The properties are then used to render the data grid.
+ *
+ * Make use of the `watchSources` to trigger re-rendering when state changes occur.
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * // ...
+ * // imports, props, emits, etc.
+ * const withHeaderButton = useDataGridHeaderButton<TEntry>();
+ *
+ * const { watchSources, createRendererRows, createRendererColumns } = useDataGridFeatures([withHeaderButton]);
+ *
+ * const renderCols: Ref<DataGridRendererColumn<TEntry, object>[]> = ref([]);
+ * const renderRows: Ref<DataGridRendererRow<TEntry, DataGridMetadata>[]> = ref([]);
+ *
+ * const { columns, data } = toRefs(props);
+ *
+ * watch(
+ *   [columns, data, ...watchSources],
+ *   ([newColumns, newData]) => {
+ *     renderCols.value = createRendererColumns(newColumns);
+ *     renderRows.value = createRendererRows(newData, newColumns);
+ *   },
+ *   { immediate: true },
+ * );
+ * </script>
+ * <template>
+ *   <OnyxDataGridRenderer :columns="renderCols" :rows="renderRows" />
+ * </template>
+ * ```
+ */
+export declare const useDataGridFeatures: <T extends DataGridFeature<TEntry, symbol>[] | [], TEntry extends DataGridEntry = ExtractTEntry<T>>(features: T) => {
+    /** Takes the column definition and maps all, calls mutation func and maps at the end to RendererCell */
+    createRendererRows: (entries: TEntry[], columns: (keyof TEntry)[]) => DataGridRendererRow<TEntry, DataGridMetadata>[];
+    /** Takes the column definition and creates a RenderHeader for each, adds actions from features */
+    createRendererColumns: (columns: (keyof TEntry)[]) => DataGridRendererColumn<TEntry, object>[];
+    watchSources: WatchSource[];
+};
+export {};

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

@@ -0,0 +1,21 @@
+import type { SortDirection } from "./sorting";
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Label of this Column.
+     */
+    columnLabel: string;
+    /**
+     * The current sorting direction, that should be indicated.
+     */
+    sortDirection?: SortDirection;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Label of this Column.
+     */
+    columnLabel: string;
+    /**
+     * The current sorting direction, that should be indicated.
+     */
+    sortDirection?: SortDirection;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,6 @@
+import type { DataGridEntry } from "../../types";
+export type SortDirection = "asc" | "desc" | "none";
+export declare const nextSortDirection: (current?: SortDirection) => SortDirection;
+declare const SORTING_FEATURE: unique symbol;
+export declare const useDataGridSorting: <TEntry extends DataGridEntry>() => import("..").DataGridFeature<TEntry, typeof SORTING_FEATURE>;
+export {};

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

@@ -1,4 +1,17 @@
 export type DataGridMetadata = Record<string, unknown>;
+/**
+ * @experimental The DataGrid is still working in progress and the props will change in the future.
+ */
+export type OnyxDataGridProps<TEntry extends DataGridEntry> = {
+    /**
+     * The order of and which columns should be rendered.
+     */
+    columns: (keyof TEntry)[];
+    /**
+     * The data that should be used to fill the datagrid.
+     */
+    data: TEntry[];
+};
 /**
  * "Raw" user data for a data grid entry/row, e.g. fetched from a backend service.
  */

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

@@ -54,7 +54,7 @@ export type OnyxInputProps = FormInjectedProps & DensityProp & RequiredMarkerPro
     loading?: boolean;
     /**
      * Minimum number of characters that have to to be entered.
-     * Warning: when the value is (pre)set programatically,
+     * Warning: when the value is (pre)set programmatically,
      * the input invalidity will not be detected by the browser, it will only turn invalid
      * as soon as a user interacts with the input (types something).
      */

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

@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
+import type { SkeletonInjected } from "../../composables/useSkeletonState";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
 import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
@@ -30,6 +31,6 @@ export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionV
     /**
      * If set, the specified number of skeleton radio buttons will be shown.
      */
-    skeleton?: number;
+    skeleton?: SkeletonInjected;
 };
 export type RadioButtonOption<TValue extends SelectOptionValue = SelectOptionValue> = Omit<BaseSelectOption<TValue>, "hideLabel"> & AutofocusProp;

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

@@ -1,16 +1,21 @@
 import type { OnyxStepperProps } from "./types";
-declare const _default: import("vue").DefineComponent<OnyxStepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare let __VLS_typeProps: OnyxStepperProps;
+type __VLS_PublicProps = {
+    modelValue?: number;
+} & typeof __VLS_typeProps;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     validityChange: (validity: ValidityState) => any;
-    "update:modelValue": (value?: number | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<OnyxStepperProps> & Readonly<{
+    "update:modelValue": (modelValue: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onValidityChange?: ((validity: ValidityState) => any) | undefined;
-    "onUpdate:modelValue"?: ((value?: number | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((modelValue: number) => any) | undefined;
 }>, {
     skeleton: import("../../composables/useSkeletonState").SkeletonInjected;
     disabled: boolean | symbol;
     showError: boolean | symbol | "touched";
     loading: boolean;
-    step: number;
     readonly: boolean;
+    precision: number;
+    stripStep: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -6,10 +6,6 @@ import type { FormInjectedProps } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 import type { Autocomplete } from "../OnyxInput/types";
 export type OnyxStepperProps = FormInjectedProps & DensityProp & CustomValidityProp & Omit<OnyxFormElementProps, "modelValue" | "errorMessages" | "withCounter" | "maxlength"> & AutofocusProp & {
-    /**
-     * Current value of the input.
-     */
-    modelValue?: number;
     /**
      * Same as the native `name` attribute of `<input>`.
      * Used to reference the input in JavaScript or in submitted form data.
@@ -30,7 +26,24 @@ export type OnyxStepperProps = FormInjectedProps & DensityProp & CustomValidityP
     /**
      * Incremental step.
      */
+    /**
+     * Incremental step.
+     * @deprecated
+     */
     step?: number;
+    /**
+     * The smallest allowed value and rounded precision
+     */
+    precision?: number;
+    /**
+     * The increment number
+     * @default precision is the default stepSize
+     */
+    stepSize?: number;
+    /**
+     * Ensure no wrong number can be inputed
+     */
+    stripStep?: boolean;
     /**
      * Specify how to provide automated assistance in filling out the input.
      * Some autocomplete values might required specific browser permissions to be allowed by the user.

package/dist/composables/useCustomValidity.d.ts

@@ -19,7 +19,7 @@ export type UseCustomValidityOptions = {
         minlength?: number;
         min?: number;
         max?: number;
-        step?: number;
+        precision?: number;
     } & Pick<BaseSelectOption, "hideLabel" | "label">;
     /**
      * Component emit as defined with `const emit = defineEmits()`

package/dist/composables/useSkeletonState.d.ts

@@ -10,7 +10,7 @@ export type SkeletonProvidedProp = {
  * Prop that may be used by the child components.
  */
 type LocalProps = {
-    skeleton: symbol | boolean;
+    skeleton: symbol | boolean | number;
 };
 /**
  * Symbol for the skeleton injected property.
@@ -22,6 +22,9 @@ export type SKELETON_INJECTED = symbol;
  * The prop **MUST** use `SKELETON_INJECTED_SYMBOL` as default value.
  * `useSkeletonContext` is used to access the injected parent property.
  *
+ * NOTE: The number type is used only for OnyxRadioGroup and OnyxCheckboxGroup components.
+ * NOTE: The number type is not intended to be used by other properties with boolean skeleton prop.
+ *
  * @example
  * ```ts
  * const props = withDefaults(defineProps<OnyxComponentProps>(), {
@@ -31,7 +34,7 @@ export type SKELETON_INJECTED = symbol;
  * const skeleton = useSkeletonContext(props);
  * ```
  */
-export type SkeletonInjected = symbol | boolean;
+export type SkeletonInjected = symbol | boolean | number;
 export declare const provideSkeletonContext: (parentElementProps: Reactive<SkeletonProvidedProp> | undefined) => void;
 /**
  * Provides the injected parent property (if available).
@@ -50,5 +53,5 @@ export declare const provideSkeletonContext: (parentElementProps: Reactive<Skele
  * const skeleton = useSkeletonContext(props);
  * ```
  */
-export declare const useSkeletonContext: (props: Reactive<LocalProps>) => ComputedRef<boolean>;
+export declare const useSkeletonContext: (props: Reactive<LocalProps>) => ComputedRef<number | boolean>;
 export {};