@sisense/sdk-ui-vue 1.32.0 → 1.33.0

package/dist/packages/sdk-ui-vue/src/composables/use-tracking.d.ts

@@ -1,40 +1,40 @@
 /**
- * A Vue composable function `useTracking` designed to track the usage of hooks within Vue applications
- * using the Sisense SDK. It sends tracking information to the server whenever a specified hook is used,
+ * A Vue composable function `useTracking` designed to track the usage of composables within Vue applications
+ * using the Sisense SDK. It sends tracking information to the server whenever a specified composable is used,
  * helping in the analysis and optimization of application performance and usage patterns. This composable
- * is intended for internal use and aids in monitoring the integration and efficiency of Sisense SDK hooks.
+ * is intended for internal use and aids in monitoring the integration and efficiency of Sisense SDK composables.
  *
- * @param {string} hookName - The name of the hook being tracked. This identifier is used to log the hook
- * event uniquely, facilitating the collection of usage data for specific hooks within the application.
+ * @param {string} composableName - The name of the composable being tracked. This identifier is used to log the composable
+ * event uniquely, facilitating the collection of usage data for specific composables within the application.
  *
  * @example
- * How to use `useTracking` to track the usage of a custom hook:
+ * How to use `useTracking` to track the usage of a custom composable:
  * ```javascript
  * import { useTracking } from '@sisense/sdk-ui-vue';
  *
- * // Example hook that utilizes useTracking for monitoring its usage
- * export const useCustomHook = () => {
- *   const { hasTrackedRef } = useTracking('useCustomHook');
+ * // Example composable that utilizes useTracking for monitoring its usage
+ * export const useCustomComposable = () => {
+ *   const { hasTrackedRef } = useTracking('useCustomComposable');
  *
- *   // Hook implementation...
+ *   // composable implementation...
  *
  *   return {
- *     // Return values of your custom hook
+ *     // Return values of your custom composable
  *   };
  * };
  * ```
  *
  * The composable returns an object containing:
- * - `hasTrackedRef`: A Vue ref that indicates whether the tracking for the hook has been successfully
+ * - `hasTrackedRef`: A Vue ref that indicates whether the tracking for the composable has been successfully
  *   sent to the server. It starts as `false` and is set to `true` once tracking is completed, preventing
  *   duplicate tracking events.
  *
- * This internal utility composable is essential for maintaining insights into the usage of custom hooks
+ * This internal utility composable is essential for maintaining insights into the usage of custom composables
  * within applications leveraging the Sisense SDK, enabling developers and analysts to understand and optimize
- * hook interactions and performance.
+ * composable interactions and performance.
  *
  * @internal
  */
-export declare const useTracking: (hookName: string) => {
+export declare const useTracking: (composableName: string) => {
     hasTrackedRef: import("vue").Ref<boolean>;
 };

package/dist/packages/sdk-ui-vue/src/lib.d.ts

@@ -10,3 +10,4 @@ export { type DrilldownWidgetProps } from './components/drilldown-widget';
 export * from './sdk-ui-core-exports';
 export * from './components/widgets';
 export * from './components/dashboard';
+export * from './utilities';

package/dist/packages/sdk-ui-vue/src/providers/plugins-provider.d.ts

@@ -16,8 +16,12 @@ export declare const getPluginsContext: () => Ref<{
  * @group Contexts
  * @internal
  */
-export declare const createPluginsContextConnector: (context: CustomPluginsContext) => {
-    prepareContext(): Promise<CustomPluginsContext>;
+export declare const createPluginsContextConnector: () => {
+    prepareContext(): Promise<{
+        pluginMap: Map<string, import("@sisense/sdk-ui-preact").PluginComponent<import("@sisense/sdk-ui-preact").PluginComponentProps<import("@sisense/sdk-ui-preact").GenericDataOptions, any>>> & Omit<Map<string, import("@sisense/sdk-ui-preact").PluginComponent<import("@sisense/sdk-ui-preact").PluginComponentProps<import("@sisense/sdk-ui-preact").GenericDataOptions, any>>>, keyof Map<any, any>>;
+        registerPlugin: (pluginType: string, plugin: import("@sisense/sdk-ui-preact").PluginComponent<import("@sisense/sdk-ui-preact").PluginComponentProps<import("@sisense/sdk-ui-preact").GenericDataOptions, any>>) => void;
+        getPlugin: (pluginType: string) => import("@sisense/sdk-ui-preact").PluginComponent<import("@sisense/sdk-ui-preact").PluginComponentProps<import("@sisense/sdk-ui-preact").GenericDataOptions, any>> | undefined;
+    }>;
     renderContextProvider: (contextData: CustomPluginsContext<any>, children: import("preact").VNode<{}>, error?: Error | undefined) => import("preact").VNode<{}>;
 };
 /**

package/dist/packages/sdk-ui-vue/src/providers/sisense-context-provider.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, Ref } from 'vue';
-import type { SisenseContextProviderProps as SisenseContextProviderPropsPreact } from '@sisense/sdk-ui-preact';
+import type { ContextConnector, SisenseContextProviderProps as SisenseContextProviderPropsPreact } from '@sisense/sdk-ui-preact';
 import { type CustomSisenseContext } from '@sisense/sdk-ui-preact';
 /**
  * Configurations and authentication for Sisense Context.
@@ -21,10 +21,7 @@ export declare const getSisenseContext: () => Ref<import("@sisense/sdk-ui/dist/p
  * Creates Sisense context connector
  * @internal
  */
-export declare const createSisenseContextConnector: (context: CustomSisenseContext) => {
-    prepareContext(): Promise<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/sisense-context/sisense-context").SisenseContextPayload>;
-    renderContextProvider: (contextData: import("@sisense/sdk-ui/dist/packages/sdk-ui/src/sisense-context/sisense-context").SisenseContextPayload | undefined, children: import("preact").VNode<{}>, error?: Error | undefined) => import("preact").VNode<{}>;
-};
+export declare const createSisenseContextConnector: () => ContextConnector<CustomSisenseContext>;
 /**
  * Sisense Context Provider Component allowing you to connect to
  * a Sisense instance and provide that context

package/dist/packages/sdk-ui-vue/src/providers/theme-provider.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, Ref } from 'vue';
-import type { CompleteThemeSettings, ThemeProviderProps as ThemeProviderPropsPreact } from '@sisense/sdk-ui-preact';
+import type { CompleteThemeSettings, ContextConnector, CustomThemeProviderProps, ThemeProviderProps as ThemeProviderPropsPreact } from '@sisense/sdk-ui-preact';
 /**
  * {@inheritDoc @sisense/sdk-ui!ThemeProviderProps}
  */
@@ -13,16 +13,7 @@ export declare const getThemeContext: () => Ref<CompleteThemeSettings> | undefin
  * Creates theme context connector
  * @internal
  */
-export declare const createThemeContextConnector: (themeSettings?: CompleteThemeSettings) => {
-    prepareContext(): Promise<{
-        themeSettings: CompleteThemeSettings;
-        skipTracking: boolean;
-    }>;
-    renderContextProvider: (contextData: {
-        themeSettings: CompleteThemeSettings;
-        skipTracking?: boolean | undefined;
-    }, children: import("preact").VNode<{}>, error?: Error | undefined) => import("preact").VNode<{}>;
-};
+export declare const createThemeContextConnector: () => ContextConnector<CustomThemeProviderProps['context']>;
 /**
  * Theme provider, which allows you to adjust the look and feel of child components.
  *

package/dist/packages/sdk-ui-vue/src/sdk-ui-core-exports.d.ts

@@ -1,2 +1,2 @@
-export { boxWhiskerProcessResult, widgetModelTranslator, dashboardModelTranslator, dashboardHelpers, } from '@sisense/sdk-ui-preact';
-export type { ChartType, CartesianChartType, CategoricalChartType, ScatterChartType, IndicatorChartType, BoxplotChartType, ScattermapChartType, AreamapChartType, TableType, AreaSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype, BoxplotSubtype, WidgetType, CartesianWidgetType, CategoricalWidgetType, TabularWidgetType, CommonWidgetProps, WidgetProps, ExecuteQueryByWidgetIdParams, ExecuteQueryParams, GetWidgetModelParams, GetSharedFormulaParams, GetDashboardModelParams, UseGetSharedFormulaParams, GetDashboardModelsParams, GetHierarchyModelsParams, ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ScatterChartDataOptions, IndicatorChartDataOptions, BoxplotChartDataOptions, BoxplotChartCustomDataOptions, ScattermapChartDataOptions, AreamapChartDataOptions, TableDataOptions, PivotTableDataOptions, WidgetDataOptions, NumberFormatConfig, DecimalScale, DataColorCondition, ConditionalDataColorOptions, DataColorOptions, RangeDataColorOptions, UniformDataColorOptions, ValueToColorMap, MultiColumnValueToColorMap, SortDirection, BoxWhiskerType, ScattermapLocationLevel, StyledColumn, StyledMeasureColumn, PivotRowsSort, ChartStyleOptions, LineStyleOptions, AreaStyleOptions, StackableStyleOptions, PieStyleOptions, FunnelStyleOptions, PolarStyleOptions, IndicatorStyleOptions, NumericSimpleIndicatorStyleOptions, NumericBarIndicatorStyleOptions, GaugeIndicatorStyleOptions, ScatterStyleOptions, TreemapStyleOptions, SunburstStyleOptions, BoxplotStyleOptions, ScattermapStyleOptions, AreamapStyleOptions, ChartWidgetStyleOptions, WidgetStyleOptions, DashboardWidgetStyleOptions, WidgetByIdStyleOptions, TableStyleOptions, PivotTableStyleOptions, AreaRangeStyleOptions, DataLimits, Legend, Markers, Labels, IndicatorComponents, ScatterMarkerSize, LineWidth, AxisLabel, Convolution, SeriesLabels, X2Title, ScattermapMarkers, WidgetModel, DashboardModel, BeforeRenderHandler, DataPoint, ScatterDataPoint, HighchartsOptions, BoxplotDataPoint, IndicatorBeforeRenderHandler, IndicatorRenderOptions, DashboardLayoutOptions, DashboardConfig, WidgetsPanelLayout, WidgetsPanelColumnLayout, WidgetId, WidgetsOptions, AppConfig, DateConfig, MenuItemSection, MonthOfYear, DayOfWeek, DateLevel, ThemeOid, GetDashboardModelOptions, GetDashboardModelsOptions, SeriesChartType, MenuPosition, ThemeSettings, Color, ColorPaletteTheme, Navigator, DrilldownOptions, DrilldownSelection, Member, FilterVariant, CriteriaFilterType, } from '@sisense/sdk-ui-preact';
+export { boxWhiskerProcessResult } from '@sisense/sdk-ui-preact';
+export type { ChartType, CartesianChartType, CategoricalChartType, ScatterChartType, IndicatorChartType, BoxplotChartType, ScattermapChartType, AreamapChartType, TableType, AreaSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype, BoxplotSubtype, WidgetType, CartesianWidgetType, CategoricalWidgetType, TabularWidgetType, CommonWidgetProps, WidgetProps, ExecuteQueryByWidgetIdParams, ExecuteQueryParams, GetWidgetModelParams, GetSharedFormulaParams, GetDashboardModelParams, UseGetSharedFormulaParams, GetDashboardModelsParams, GetHierarchyModelsParams, ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ScatterChartDataOptions, IndicatorChartDataOptions, BoxplotChartDataOptions, BoxplotChartCustomDataOptions, ScattermapChartDataOptions, AreamapChartDataOptions, TableDataOptions, PivotTableDataOptions, WidgetDataOptions, NumberFormatConfig, DecimalScale, DataColorCondition, ConditionalDataColorOptions, DataColorOptions, RangeDataColorOptions, UniformDataColorOptions, ValueToColorMap, MultiColumnValueToColorMap, SortDirection, BoxWhiskerType, ScattermapLocationLevel, StyledColumn, StyledMeasureColumn, PivotRowsSort, ChartStyleOptions, LineStyleOptions, AreaStyleOptions, StackableStyleOptions, PieStyleOptions, FunnelStyleOptions, PolarStyleOptions, IndicatorStyleOptions, NumericSimpleIndicatorStyleOptions, NumericBarIndicatorStyleOptions, GaugeIndicatorStyleOptions, ScatterStyleOptions, TreemapStyleOptions, SunburstStyleOptions, BoxplotStyleOptions, ScattermapStyleOptions, AreamapStyleOptions, ChartWidgetStyleOptions, WidgetStyleOptions, DashboardWidgetStyleOptions, WidgetByIdStyleOptions, TableStyleOptions, PivotTableStyleOptions, AreaRangeStyleOptions, DataLimits, Legend, Markers, Labels, IndicatorComponents, ScatterMarkerSize, LineWidth, AxisLabel, Convolution, SeriesLabels, X2Title, ScattermapMarkers, WidgetModel, DashboardModel, BeforeRenderHandler, DataPoint, ScatterDataPoint, HighchartsOptions, BoxplotDataPoint, IndicatorBeforeRenderHandler, IndicatorRenderOptions, DashboardLayoutOptions, WidgetsPanelLayout, WidgetsPanelColumnLayout, WidgetId, WidgetsOptions, AppConfig, DateConfig, MenuItemSection, MonthOfYear, DayOfWeek, DateLevel, ThemeOid, GetDashboardModelOptions, GetDashboardModelsOptions, SeriesChartType, MenuPosition, ThemeSettings, Color, ColorPaletteTheme, Navigator, DrilldownOptions, DrilldownSelection, Member, FilterVariant, CriteriaFilterType, } from '@sisense/sdk-ui-preact';

package/dist/packages/sdk-ui-vue/src/setup-helper.d.ts

@@ -1,4 +1,16 @@
 import { type Slots } from 'vue';
+import { type ContextConnector } from '@sisense/sdk-ui-preact';
+export declare function createDefaultContextConnectors(): (ContextConnector<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/sisense-context/sisense-context").SisenseContextPayload> | ContextConnector<{
+    themeSettings: import("@sisense/sdk-ui-preact").CompleteThemeSettings;
+    skipTracking?: boolean | undefined;
+}> | {
+    prepareContext(): Promise<{
+        pluginMap: Map<string, import("@sisense/sdk-ui-preact").PluginComponent<import("@sisense/sdk-ui-preact").PluginComponentProps<import("@sisense/sdk-ui-preact").GenericDataOptions, any>>> & Omit<Map<string, import("@sisense/sdk-ui-preact").PluginComponent<import("@sisense/sdk-ui-preact").PluginComponentProps<import("@sisense/sdk-ui-preact").GenericDataOptions, any>>>, keyof Map<any, any>>;
+        registerPlugin: (pluginType: string, plugin: import("@sisense/sdk-ui-preact").PluginComponent<import("@sisense/sdk-ui-preact").PluginComponentProps<import("@sisense/sdk-ui-preact").GenericDataOptions, any>>) => void;
+        getPlugin: (pluginType: string) => import("@sisense/sdk-ui-preact").PluginComponent<import("@sisense/sdk-ui-preact").PluginComponentProps<import("@sisense/sdk-ui-preact").GenericDataOptions, any>> | undefined;
+    }>;
+    renderContextProvider: (contextData: import("@sisense/sdk-ui-preact").CustomPluginsContext<any>, children: import("preact").VNode<{}>, error?: Error | undefined) => import("preact").VNode<{}>;
+})[];
 export declare function getRawData<T>(data: T): T;
 export declare function toDeepRaw<T>(data: T): T;
 /**
@@ -6,7 +18,7 @@ export declare function toDeepRaw<T>(data: T): T;
  *
  * @internal
  */
-export declare const setupHelper: <P, C>(component: C, props: P) => (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+export declare const setupHelper: <P, C>(component: C, props: P, createContextConnectorsFn?: () => ContextConnector<any>[]) => (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>) | null;
 /**

package/dist/packages/sdk-ui-vue/src/types/dashboard-config.d.ts

@@ -0,0 +1,24 @@
+import type { DashboardConfig as DashboardConfigPreact, DashboardByIdConfig as DashboardByIdConfigPreact, DashboardFiltersPanelConfig as DashboardFiltersPanelConfigPreact } from '@sisense/sdk-ui-preact';
+/**
+ * {@inheritDoc @sisense/sdk-ui!DashboardFiltersPanelConfig}
+ */
+export interface DashboardFiltersPanelConfig extends Omit<DashboardFiltersPanelConfigPreact, 'actions'> {
+}
+/**
+ * {@inheritDoc @sisense/sdk-ui!DashboardConfig}
+ */
+export interface DashboardConfig extends Omit<DashboardConfigPreact, 'filtersPanel'> {
+    /**
+     * {@inheritDoc @sisense/sdk-ui!DashboardConfig.filtersPanel}
+     */
+    filtersPanel?: DashboardFiltersPanelConfig;
+}
+/**
+ * {@inheritDoc @sisense/sdk-ui!DashboardByIdConfig}
+ */
+export interface DashboardByIdConfig extends Omit<DashboardByIdConfigPreact, 'filtersPanel'> {
+    /**
+     * {@inheritDoc @sisense/sdk-ui!DashboardByIdConfig.filtersPanel}
+     */
+    filtersPanel?: DashboardFiltersPanelConfig;
+}

package/dist/packages/sdk-ui-vue/src/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './maybe-ref';
+export * from './dashboard-config';

package/dist/packages/sdk-ui-vue/src/types/maybe-ref.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+export type MaybeRef<T> = Ref<T> | T;
+export type MaybeWithRefs<T extends object> = {
+    [Property in keyof T]: MaybeRef<T[Property]>;
+};
+export type MaybeRefOrWithRefs<T extends Object> = MaybeRef<T> | MaybeWithRefs<T>;
+/**
+ * Converts all non-function properties of `T` into Vue refs while keeping function properties specified by `Fns` unchanged.
+ *
+ * @internal
+ */
+export type ToRefsExceptFns<T, Fns extends keyof T> = {
+    [K in keyof Omit<T, Fns>]: Ref<T[K]>;
+} & Pick<T, Fns>;

package/dist/packages/sdk-ui-vue/src/utilities/dashboard-helpers.d.ts

@@ -0,0 +1,105 @@
+import type { Filter, FilterRelations } from '@sisense/sdk-data';
+import type { DashboardProps } from '../components/dashboard';
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.replaceFilters}
+ *
+ * @example
+ * Replace all filters on a dashboard with a new set of filters.
+ * ```ts
+ * const existingDashboard: DashboardProps = {...}
+ * const newFilters: Filter[] = [{...}, {...}, ...];
+ * const updatedDashboard = dashboardHelpers.replaceFilters(existingDashboard, newFilters);
+ * ```
+ * @param dashboard - The original dashboard (`DashboardProps`) whose filters are to be replaced.
+ * @param newFilters - An array of new filters or filter relations to set on the dashboard.
+ * @returns A new dashboard instance with the updated filters.
+ */
+export declare const replaceFilters: (dashboard: DashboardProps, newFilters: Filter[] | FilterRelations) => DashboardProps;
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.addFilter}
+ *
+ * @example
+ * Add a new filter to a dashboard.
+ * ```ts
+ * const existingDashboard: DashboardProps = {...};
+ * const newFilter: Filter = {...};
+ * const updatedDashboard = dashboardHelpers.addFilter(existingDashboard, newFilter);
+ * ```
+ * @param dashboard - The original dashboard (`DashboardProps`) to which the filter will be added.
+ * @param newFilter - The filter to add to the dashboard.
+ * @returns A new dashboard instance with the new filter added.
+ */
+export declare const addFilter: (dashboard: DashboardProps, newFilter: Filter) => DashboardProps;
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.addFilters}
+ *
+ * @example
+ * Add multiple new filters to a dashboard.
+ * ```ts
+ * const existingDashboard: DashboardProps = {...};
+ * const newFilters: Filter[] = [{...}, {...}, ...];
+ * const updatedDashboard = dashboardHelpers.addFilters(existingDashboard, newFilters);
+ * ```
+ * @param dashboard - The original dashboard (`DashboardProps`) to which the filters will be added.
+ * @param newFilters - An array of filters to add to the dashboard.
+ * @returns A new dashboard instance with the new filters added.
+ */
+export declare const addFilters: (dashboard: DashboardProps, newFilters: Filter[]) => DashboardProps;
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.replaceFilter}
+ *
+ * @example
+ * Replace a filter in a dashboard.
+ * ```ts
+ * const existingDashboard: DashboardProps = {...};
+ * const filterToReplace: Filter = {...};
+ * const newFilter: Filter = {...};
+ * const updatedDashboard = dashboardHelpers.replaceFilter(existingDashboard, filterToReplace, newFilter);
+ * ```
+ * @param dashboard - The original dashboard (`DashboardProps`) containing the filter to be replaced.
+ * @param filterToReplace - The existing filter to be replaced.
+ * @param newFilter - The new filter to replace the existing one.
+ * @returns A new dashboard instance with the specified filter replaced.
+ */
+export declare const replaceFilter: (dashboard: DashboardProps, filterToReplace: Filter, newFilter: Filter) => DashboardProps;
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.modifyFilter}
+ *
+ * @deprecated Use {@link replaceFilter} instead
+ *
+ * @param dashboard - The original dashboard (`DashboardProps`) containing the filter to modify.
+ * @param filterToModify - The existing filter to be modified.
+ * @param newFilter - The new filter to replace the existing one.
+ * @returns A new dashboard instance with the specified filter modified.
+ */
+export declare const modifyFilter: (dashboard: DashboardProps, filterToModify: Filter, newFilter: Filter) => DashboardProps;
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.removeFilter}
+ *
+ * @example
+ * Remove a filter from a dashboard.
+ * ```ts
+ * const existingDashboard: DashboardProps = {...};
+ * const filterToRemove: Filter = {...};
+ * const updatedDashboard = dashboardHelpers.removeFilter(existingDashboard, filterToRemove);
+ * ```
+ * @param dashboard - The original dashboard (`DashboardProps`) from which to remove the filter.
+ * @param filterToRemove - The filter to be removed.
+ * @returns A new dashboard instance with the specified filter removed.
+ */
+export declare const removeFilter: (dashboard: DashboardProps, filterToRemove: Filter) => DashboardProps;
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardHelpers.removeFilters}
+ *
+ * @example
+ * Remove multiple filters from a dashboard.
+ * ```ts
+ * const existingDashboard: DashboardProps = {...};
+ * const filtersToRemove: Filter[] = [{...}, {...}, ...];
+ * const updatedDashboard = dashboardHelpers.removeFilters(existingDashboard, filtersToRemove);
+ * ```
+ * @param dashboard - The original dashboard (`DashboardProps`) from which the specified filters are removed.
+ * @param filtersToRemove - An array of filters to remove.
+ * @returns A new dashboard instance with the specified filters removed.
+ */
+export declare const removeFilters: (dashboard: DashboardProps, filtersToRemove: Filter[]) => DashboardProps;

package/dist/packages/sdk-ui-vue/src/utilities/dashboard-model-translator.d.ts

@@ -0,0 +1,37 @@
+import { type DashboardModel } from '@sisense/sdk-ui-preact';
+import type { DashboardProps } from '../components/dashboard';
+/**
+ * Translates {@link DashboardModel} to {@link DashboardProps}.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { dashboardModelTranslator, useGetDashboardModel, Dashboard } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { dashboard } = useGetDashboardModel({
+  dashboardOid: 'your-dashboard-oid',
+  includeWidgets: true,
+  includeFilters: true,
+});
+
+const dashboardProps = computed(() =>
+  dashboard.value ? dashboardModelTranslator.toDashboardProps(dashboard.value) : null,
+);
+</script>
+
+<template>
+  <Dashboard
+    v-if="dashboardProps"
+    :title="dashboardProps.title"
+    :layoutOptions="dashboardProps.layoutOptions"
+    :widgets="dashboardProps.widgets"
+    :filters="dashboardProps.filters"
+    :defaultDataSource="dashboardProps.defaultDataSource"
+    :widgetsOptions="dashboardProps.widgetsOptions"
+    :styleOptions="dashboardProps.styleOptions"
+  />
+</template>
+ * ```
+ */
+export declare function toDashboardProps(dashboardModel: DashboardModel): DashboardProps;

package/dist/packages/sdk-ui-vue/src/utilities/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardModelTranslator}
+ *
+ * @group Fusion Assets
+ * @fusionEmbed
+ * @shortDescription Utility functions to translate a Fusion dashboard model from and to other dashboard data structures
+ */
+export * as dashboardModelTranslator from './dashboard-model-translator';
+/**
+ * {@inheritDoc @sisense/sdk-ui!dashboardHelpers}
+ *
+ * @group Dashboards
+ * @shortDescription Utility functions to manipulate dashboard elements
+ */
+export * as dashboardHelpers from './dashboard-helpers';
+/**
+ * {@inheritDoc @sisense/sdk-ui!widgetModelTranslator}
+ *
+ * @group Fusion Assets
+ * @fusionEmbed
+ * @shortDescription Utility functions to translate a Fusion widget model from and to other widget data structures
+ */
+export * as widgetModelTranslator from './widget-model-translator';

package/dist/packages/sdk-ui-vue/src/utilities/widget-model-translator.d.ts

@@ -0,0 +1,247 @@
+import { type WidgetModel, type TextWidgetProps, type ExecutePivotQueryParams, type ExecuteQueryParams, type PivotTableWidgetProps } from '@sisense/sdk-ui-preact';
+import type { ChartProps, PivotTableProps, TableProps } from '../components/charts';
+import type { ChartWidgetProps } from '../components/widgets';
+/**
+ * Translates a {@link WidgetModel} to the parameters for executing a query for the widget.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { widgetModelTranslator, useGetWidgetModel, useExecuteQuery } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { data: widgetModel } = useGetWidgetModel({
+  dashboardOid: 'your-dashboard-oid',
+  widgetOid: 'your-widget-oid',
+});
+
+const executeQueryParams = computed(() =>
+  widgetModel.value
+    ? widgetModelTranslator.toExecuteQueryParams(widgetModel.value)
+    : { enabled: false },
+);
+
+const { data, isLoading, isError } = useExecuteQuery(executeQueryParams);
+</script>
+ * ```
+ *
+ * Note: this method is not supported for getting pivot query.
+ * Use {@link toExecutePivotQueryParams} instead for getting query parameters for the pivot widget.
+ */
+export declare const toExecuteQueryParams: (widgetModel: WidgetModel) => ExecuteQueryParams;
+/**
+ * Translates a {@link WidgetModel} to the parameters for executing a query for the pivot widget.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { widgetModelTranslator, useGetWidgetModel, useExecuteQuery } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { data: widgetModel } = useGetWidgetModel({
+  dashboardOid: 'your-dashboard-oid',
+  widgetOid: 'your-widget-oid',
+});
+
+const executePivotQueryParams = computed(() =>
+  widgetModel.value ? widgetModelTranslator.toExecutePivotQueryParams(widgetModel.value): { enabled: false },
+);
+
+const { data, isLoading, isError } = useExecutePivotQuery(executePivotQueryParams);
+</script>
+ * ```
+ *
+ * Note: this method is supported only for getting pivot query.
+ * Use {@link toExecuteQueryParams} instead for getting query parameters for non-pivot widgets.
+ */
+export declare const toExecutePivotQueryParams: (widgetModel: WidgetModel) => ExecutePivotQueryParams;
+/**
+ * Translates a {@link WidgetModel} to the props for rendering a chart.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { widgetModelTranslator, useGetWidgetModel, Chart } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { data: widgetModel } = useGetWidgetModel({
+  dashboardOid: 'your-dashboard-oid',
+  widgetOid: 'your-widget-oid',
+});
+
+const chartProps = computed(() =>
+  widgetModel.value ? widgetModelTranslator.toChartProps(widgetModel.value) : null,
+);
+</script>
+
+<template>
+  <Chart
+    v-if="chartProps"
+    :chartType="chartProps.chartType"
+    :dataSet="chartProps.dataSet"
+    :dataOptions="chartProps.dataOptions"
+    :filters="chartProps.filters"
+    :highlights="chartProps.highlights"
+    :styleOptions="chartProps.styleOptions"
+  />
+</template>
+ * ```
+ *
+ * Note: this method is not supported for pivot widgets.
+ * Use {@link toPivotTableProps} instead for getting props for the {@link PivotTable}.
+ */
+export declare function toChartProps(widgetModel: WidgetModel): ChartProps;
+/**
+ * Translates a {@link WidgetModel} to the props for rendering a table.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { widgetModelTranslator, useGetWidgetModel, Table } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { data: widgetModel } = useGetWidgetModel({
+  dashboardOid: 'your-dashboard-oid',
+  widgetOid: 'your-widget-oid',
+});
+
+const tableProps = computed(() =>
+  widgetModel.value ? widgetModelTranslator.toTableProps(widgetModel.value) : null,
+);
+</script>
+
+<template>
+  <Table
+    v-if="tableProps"
+    :dataSet="tableProps.dataSet"
+    :dataOptions="tableProps.dataOptions"
+    :filters="tableProps.filters"
+    :styleOptions="tableProps.styleOptions"
+  />
+</template>
+ * ```
+ *
+ * Note: this method is not supported for chart and pivot widgets.
+ * Use {@link toChartProps} instead for getting props for the {@link Chart}.
+ * Use {@link toPivotTableProps} instead for getting props for the {@link PivotTable}.
+ */
+export declare function toTableProps(widgetModel: WidgetModel): TableProps;
+/**
+ * Translates a {@link WidgetModel} to the props for rendering a pivot table.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { widgetModelTranslator, useGetWidgetModel, PivotTable } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { data: widgetModel } = useGetWidgetModel({
+  dashboardOid: 'your-dashboard-oid',
+  widgetOid: 'your-widget-oid',
+});
+
+const pivotTableProps = computed(() =>
+  widgetModel.value ? widgetModelTranslator.toPivotTableProps(widgetModel.value) : null,
+);
+</script>
+
+<template>
+  <PivotTable
+    v-if="pivotTableProps"
+    :dataSet="pivotTableProps.dataSet"
+    :dataOptions="pivotTableProps.dataOptions"
+    :filters="pivotTableProps.filters"
+    :styleOptions="pivotTableProps.styleOptions"
+  />
+</template>
+ * ```
+ *
+ * Note: this method is not supported for chart or table widgets.
+ * Use {@link toChartProps} instead for getting props for the {@link Chart}.
+ * Use {@link toTableProps} instead for getting props for the {@link Table}.
+ */
+export declare function toPivotTableProps(widgetModel: WidgetModel): PivotTableProps;
+/**
+ * Translates a {@link WidgetModel} to the props for rendering a chart widget.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { widgetModelTranslator, useGetWidgetModel, ChartWidget } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { data: widgetModel } = useGetWidgetModel({
+  dashboardOid: 'your-dashboard-oid',
+  widgetOid: 'your-widget-oid',
+});
+
+const chartWidgetProps = computed(() =>
+  widgetModel.value ? widgetModelTranslator.toChartWidgetProps(widgetModel.value) : null,
+);
+</script>
+
+<template>
+  <ChartWidget
+    v-if="chartWidgetProps"
+    :chartType="chartWidgetProps.chartType"
+    :dataSource="chartWidgetProps.dataSource"
+    :dataOptions="chartWidgetProps.dataOptions"
+    :filters="chartWidgetProps.filters"
+    :highlights="chartWidgetProps.highlights"
+    :styleOptions="chartWidgetProps.styleOptions"
+  />
+</template>
+ * ```
+ *
+ * Note: this method is not supported for pivot widgets.
+ */
+export declare function toChartWidgetProps(widgetModel: WidgetModel): ChartWidgetProps;
+/**
+ * Translates a {@link WidgetModel} to the props for rendering a pivot table widget.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { widgetModelTranslator, useGetWidgetModel } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { data: widgetModel } = useGetWidgetModel({
+  dashboardOid: 'your-dashboard-oid',
+  widgetOid: 'your-widget-oid',
+});
+
+const pivotTableWidgetProps = computed(() =>
+  widgetModel.value ? widgetModelTranslator.toPivotTableWidgetProps(widgetModel.value) : null,
+);
+</script>
+ * ```
+ *
+ * Note: this method is not supported for chart or table widgets.
+ * Use {@link toChartWidgetProps} instead for getting props for the {@link ChartWidget}.
+ */
+export declare function toPivotTableWidgetProps(widgetModel: WidgetModel): PivotTableWidgetProps;
+/**
+ * Translates a {@link WidgetModel} to the props for rendering a text widget.
+ *
+ * @example
+ * ```vue
+<script setup lang="ts">
+import { widgetModelTranslator, useGetWidgetModel } from '@sisense/sdk-ui-vue';
+import { computed } from 'vue';
+
+const { data: widgetModel } = useGetWidgetModel({
+  dashboardOid: 'your-dashboard-oid',
+  widgetOid: 'your-widget-oid',
+});
+
+const textWidgetProps = computed(() =>
+  widgetModel.value ? widgetModelTranslator.toTextWidgetProps(widgetModel.value) : null,
+);
+</script>
+ * ```
+ *
+ * Note: this method is not supported for chart or pivot widgets.
+ * Use {@link toChartWidgetProps} instead for getting props for the {@link ChartWidget}.
+ * Use {@link toPivotTableWidgetProps} instead for getting props for the pivot table widget.
+ */
+export declare function toTextWidgetProps(widgetModel: WidgetModel): TextWidgetProps;