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

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.
  */