@sisense/sdk-ui-vue 1.3.0 → 1.4.1

package/dist/src/components/charts/pivot-table.d.ts

@@ -0,0 +1,41 @@
+import type { PropType } from 'vue';
+/**
+ * TBU
+ * A Vue component that wraps the PivotTable Preact component for use in Vue applications.
+ * It provides a single 'props' prop to pass all the TableProps to the Table Preact component,
+ * enabling the use of the table within Vue's reactivity system.
+ *
+ * @example
+ * Here's how you can use the Table component in a Vue application:
+ * ```vue
+ * <template>
+ *   <Table :props="tableProps" />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import Table from '@sisense/sdk-ui-vue/Table';
+ *
+ * const tableProps = ref({
+ *   // Define your TableProps configuration here
+ * });
+ * </script>
+ * ```
+ *
+ * @alpha
+ */
+export declare const PivotTable: import("vue").DefineComponent<{
+    dataOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDataOptions>;
+    dataSet: PropType<string | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
+    refreshCounter: PropType<number | undefined>;
+    styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableStyleOptions | undefined>;
+}, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dataOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDataOptions>;
+    dataSet: PropType<string | undefined>;
+    filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
+    refreshCounter: PropType<number | undefined>;
+    styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableStyleOptions | undefined>;
+}>>, {}, {}>;

package/dist/src/components/charts/polar-chart.d.ts

@@ -1,24 +1,36 @@
 import { type PropType } from 'vue';
 /**
- * A Vue component that wraps the PolarChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the PolarChart.
+ * A Vue component comparing multiple categories/variables with a spacial perspective in a radial chart.
+ * See [Polar Chart](https://docs.sisense.com/main/SisenseLinux/polar-chart.htm) for more information.
  *
  * @example
  * Here's how you can use the PolarChart component in a Vue application:
  * ```vue
  * <template>
- *   <PolarChart :props="polarChartProps" />
+      <PolarChart
+        :dataOptions="polarChartProps.dataOptions"
+        :dataSet="polarChartProps.dataSet"
+        :filters="polarChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import PolarChart from '@sisense/sdk-ui-vue/PolarChart';
+ * import {PolarChart,type PolarChartProps} from '@sisense/sdk-ui-vue';
  *
- * const polarChartProps = ref({
- *   // Configure your PolarChartProps here
- * });
- * </script>
+const polarChartProps = ref<PolarChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+    breakBy: [],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+ * <img src="media://polar-chart-example-1.png" width="600px" />
+ * @param props - Polar chart properties
+ * @returns Polar Chart component
  */
 export declare const PolarChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CartesianChartDataOptions>;

package/dist/src/components/charts/scatter-chart.d.ts

@@ -1,24 +1,42 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the ScatterChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the ScatterChart.
+ * A Vue component displaying the distribution of two variables on an X-Axis, Y-Axis,
+ * and two additional fields of data that are shown as colored circles scattered across the chart.
+ *
+ * **Point**: A field that for each of its members a scatter point is drawn. The maximum amount of data points is 500.
+ *
+ * **Size**: An optional field represented by the size of the circles.
+ * If omitted, all scatter points are equal in size. If used, the circle sizes are relative to their values.
+ *
+ * See [Scatter Chart](https://docs.sisense.com/main/SisenseLinux/scatter-chart.htm) for more information.
  *
  * @example
  * Here's how you can use the ScatterChart component in a Vue application:
  * ```vue
  * <template>
- *   <ScatterChart :props="scatterChartProps" />
+      <ScatterChart
+        :dataOptions="scatterChartProps.dataOptions"
+        :dataSet="scatterChartProps.dataSet"
+        :filters="scatterChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import ScatterChart from '@sisense/sdk-ui-vue/ScatterChart';
+ * import {ScatterChart, type ScatterChartProps} from '@sisense/sdk-ui-vue';
  *
- * const scatterChartProps = ref({
- *   // Configure your ScatterChartProps here
- * });
- * </script>
+const scatterChartProps = ref<ScatterChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    x: dimProductName,
+    y: measureTotalRevenue,
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+ * <img src="media://scatter-chart-example-1.png" width="800px" />
+ * @param props - Scatter chart properties
+ * @returns Scatter Chart component
  */
 export declare const ScatterChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ScatterChartDataOptions>;

package/dist/src/components/charts/scattermap-chart.d.ts

@@ -7,18 +7,31 @@ import type { PropType } from 'vue';
  * Here's how you can use the ScattermapChart component in a Vue application:
  * ```vue
  * <template>
- *   <ScattermapChart :props="ScattermapChartProps" />
+      <ScattermapChart
+        :dataOptions="scattermapChartProps.dataOptions"
+        :dataSet="scattermapChartProps.dataSet"
+        :filters="scattermapChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import ScattermapChart from '@sisense/sdk-ui-vue/ScattermapChart';
+ * import {ScattermapChart,type ScattermapChartProps} from '@sisense/sdk-ui-vue';
  *
- * const ScattermapChartProps = ref({
- *   // Configure your ScattermapChartProps here
- * });
+const scattermapChartProps = ref<ScattermapChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    geo: [DM.DimCountries.CountryName],
+    size: { column: measureTotalRevenue, title: 'Total Revenue' },
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * </script>
  * ```
+ * <img src="media://scattermap-chart-example-1.png" width="600px" />
+ * @param props - Scattermap chart properties
+ * @returns Scattermap Chart component
+ * @beta
  */
 export declare const ScattermapChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapChartDataOptions>;
@@ -26,6 +39,7 @@ export declare const ScattermapChart: import("vue").DefineComponent<{
     filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapStyleOptions | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
 }, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -34,4 +48,5 @@ export declare const ScattermapChart: import("vue").DefineComponent<{
     filters: PropType<import("@sisense/sdk-data").Filter[] | import("@sisense/sdk-data").FilterRelations | undefined>;
     highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
     styleOptions: PropType<import("@sisense/sdk-ui-preact").ScattermapStyleOptions | undefined>;
+    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").ScattermapDataPointEventHandler | undefined>;
 }>>, {}, {}>;

package/dist/src/components/charts/sunburst-chart.d.ts

@@ -7,17 +7,25 @@ import type { PropType } from 'vue';
  * Here's how you can use the SunburstChart component in a Vue application:
  * ```vue
  * <template>
- *   <SunburstChart :props="sunburstChartProps" />
+    <SunburstChart
+      :dataOptions="sunburstChartProps.dataOptions"
+      :dataSet="sunburstChartProps.dataSet"
+      :filters="sunburstChartProps.filters"
+    />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
- * import SunburstChart from '@sisense/sdk-ui-vue/SunburstChart';
+ * import {SunburstChart,type SunburstChartProps} from '@sisense/sdk-ui-vue';
  *
- * const sunburstChartProps = ref({
- *   // Configure your SunburstChartProps here
- * });
- * </script>
+const sunburstChartProps = ref<SunburstChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
  */
 export declare const SunburstChart: import("vue").DefineComponent<{

package/dist/src/components/charts/table-widget.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { type Prop } from 'vue';
 /**
- * A Vue component that wraps the TableWidget Preact component for use in Vue applications.
- * It uses a single 'props' prop to pass all TableWidgetProps to the TableWidgetPreact component.
+ * The TableWidget component extending the {@link Table} component to support widget style options.
  *
  * @example
  * Here's how you can use the TableWidget component in a Vue application:
@@ -20,6 +19,9 @@ import { type Prop } from 'vue';
  * });
  * </script>
  * ```
+ * @param props - Table Widget properties
+ * @returns Widget component representing a table
+ * @internal
  */
 export declare const TableWidget: import("vue").DefineComponent<{
     bottomSlot: Prop<import("react").ReactNode>;

package/dist/src/components/charts/table.d.ts

@@ -1,8 +1,6 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the Table Preact component for use in Vue applications.
- * It provides a single 'props' prop to pass all the TableProps to the Table Preact component,
- * enabling the use of the table within Vue's reactivity system.
+ * Table with aggregation and pagination.
  *
  * @example
  * Here's how you can use the Table component in a Vue application:
@@ -20,6 +18,9 @@ import type { PropType } from 'vue';
  * });
  * </script>
  * ```
+ * <img src="media://table-example-2.png" width="800px" />
+ * @param props - Table properties
+ * @returns Table component
  */
 export declare const Table: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").TableDataOptions>;

package/dist/src/components/charts/treemap-chart.d.ts

@@ -1,24 +1,36 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the TreemapChart Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the TreemapChart.
+ * A Vue component displaying hierarchical data in the form of nested rectangles.
+ * This type of chart can be used instead of a column chart for comparing a large number of categories and sub-categories.
+ * See [Treemap Chart](https://docs.sisense.com/main/SisenseLinux/treemap.htm) for more information.
  *
  * @example
  * Here's how you can use the TreemapChart component in a Vue application:
  * ```vue
  * <template>
- *   <TreemapChart :props="treemapChartProps" />
+      <TreemapChart
+        :dataOptions="treemapChartProps.dataOptions"
+        :dataSet="treemapChartProps.dataSet"
+        :filters="treemapChartProps.filters"
+      />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
  * import TreemapChart from '@sisense/sdk-ui-vue/TreemapChart';
  *
- * const treemapChartProps = ref({
- *   // Configure your TreemapChartProps here
- * });
- * </script>
+const treemapChartProps = ref<TreemapChartProps>({
+  dataSet: DM.DataSource,
+  dataOptions: {
+    category: [dimProductName],
+    value: [{ column: measureTotalRevenue, sortType: 'sortDesc' }],
+  },
+  filters: [filterFactory.topRanking(dimProductName, measureTotalRevenue, 10)],
+});
  * ```
+ * <img src="media://treemap-chart-example-1.png" width="600px" />
+ * @param props - Treemap chart properties
+ * @returns Treemap Chart component
  */
 export declare const TreemapChart: import("vue").DefineComponent<{
     dataOptions: PropType<import("@sisense/sdk-ui-preact").CategoricalChartDataOptions>;

package/dist/src/components/context-menu.d.ts

@@ -1,4 +1,36 @@
 import type { PropType } from 'vue';
+/**
+ * `ContextMenu` component from the `@sisense/sdk-ui-vue` package.
+ * This component provides a context menu that can be customized with different items and sections.
+ * It allows for flexible positioning and can be easily integrated into Vue applications.
+ *
+ * @example
+ * Here's how to use the `ContextMenu` component:
+ * ```vue
+ * <template>
+ *   <ContextMenu :closeContextMenu="closeMenu" :itemSections="sections" :position="menuPosition">
+ *   </ContextMenu>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue';
+ * import ContextMenu from './ContextMenu.vue';
+ *
+ * export default {
+ *   components: { ContextMenu },
+ *   setup() {
+ *     const sections = ref([...]);
+ *     const menuPosition = ref({ top: 0, left: 0 });
+ *     const closeMenu = () => {};
+ *    }
+ * };
+ * </script>
+ * ```
+ *
+ * @prop {Function} closeContextMenu - Function to close the context menu. It should be a function that sets the visibility of the context menu to false.
+ * @prop {Array} itemSections - An array of sections, each containing an array of items to be rendered in the context menu. Each item can be a string or an object specifying the item's properties.
+ * @prop {Object} position - An object specifying the position of the context menu. It should contain `top` and `left` properties to position the menu on the screen.
+ */
 export declare const ContextMenu: import("vue").DefineComponent<{
     closeContextMenu: PropType<() => void>;
     itemSections: PropType<import("@sisense/sdk-ui-preact").MenuItemSection[] | undefined>;

package/dist/src/components/drilldown-breadcrumbs.d.ts

@@ -1,4 +1,45 @@
 import type { PropType } from 'vue';
+/**
+ * `DrilldownBreadcrumbs` component from the `@sisense/sdk-ui-vue` package.
+ * This component provides a way to display and interact with the drilldown path in data visualization components,
+ * allowing users to navigate through different levels of data drilldowns. It includes functionalities to clear selections
+ * or slice through the drilldown selections for a more intuitive data exploration experience.
+ *
+ * @example
+ * Here's how to use the `DrilldownBreadcrumbs` component:
+ * ```vue
+ * <template>
+ *   <DrilldownBreadcrumbs
+ *     :clearDrilldownSelections="clearSelections"
+ *     :currentDimension="currentDimension"
+ *     :sliceDrilldownSelections="sliceSelections"
+ *     :filtersDisplayValues="filtersDisplayValues"
+ *   />
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue';
+ * import DrilldownBreadcrumbs from './DrilldownBreadcrumbs.vue';
+ *
+ * export default {
+ *   components: { DrilldownBreadcrumbs },
+ *   setup() {
+ *     const clearSelections = () => {};
+ *     const currentDimension = ref({<current dimension object>});
+ *     const sliceSelections = (index) => { <logic to slice selections up to index> };
+ *     const filtersDisplayValues = ref({<object mapping filter values to display values>});
+ *
+ *     return { clearSelections, currentDimension, sliceSelections, filtersDisplayValues };
+ *   }
+ * };
+ * </script>
+ * ```
+ *
+ * @prop {Function} clearDrilldownSelections - Function to clear all drilldown selections made by the user.
+ * @prop {Object} currentDimension - Object representing the current dimension in the drilldown path.
+ * @prop {Function} sliceDrilldownSelections - Function to slice the drilldown selections up to a certain index, allowing the user to navigate back in the drilldown path.
+ * @prop {Object} filtersDisplayValues - Object mapping the internal filter values to human-readable display values, enhancing the usability of the breadcrumbs.
+ */
 export declare const DrilldownBreadcrumbs: import("vue").DefineComponent<{
     clearDrilldownSelections: PropType<() => void>;
     currentDimension: PropType<import("@sisense/sdk-data").Attribute>;

package/dist/src/components/drilldown-widget.d.ts

@@ -0,0 +1,44 @@
+import type { Component, PropType } from 'vue';
+import type { ContextMenuProps } from '@sisense/sdk-ui-preact';
+export type DrilldownWidgetConfig = {
+    isBreadcrumbsDetached?: boolean;
+    breadcrumbsComponent?: Component;
+    contextMenuComponent?: (props: ContextMenuProps) => Component;
+};
+export declare const DrilldownWidgetTs: import("vue").DefineComponent<{
+    config: {
+        type: PropType<DrilldownWidgetConfig>;
+        required: false;
+        default: () => {};
+    };
+    drilldownDimensions: {
+        type: PropType<import("@sisense/sdk-data").Attribute[]>;
+        required: false;
+        default: () => never[];
+    };
+    initialDimension: {
+        type: PropType<import("@sisense/sdk-data").Attribute>;
+        required: false;
+        default: () => {};
+    };
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    config: {
+        type: PropType<DrilldownWidgetConfig>;
+        required: false;
+        default: () => {};
+    };
+    drilldownDimensions: {
+        type: PropType<import("@sisense/sdk-data").Attribute[]>;
+        required: false;
+        default: () => never[];
+    };
+    initialDimension: {
+        type: PropType<import("@sisense/sdk-data").Attribute>;
+        required: false;
+        default: () => {};
+    };
+}>>, {
+    drilldownDimensions: import("@sisense/sdk-data").Attribute[];
+    initialDimension: import("@sisense/sdk-data").Attribute;
+    config: DrilldownWidgetConfig;
+}, {}>;

package/dist/src/components/drilldown-widget.vue.d.ts

@@ -1,46 +1,4 @@
-import type { Component, PropType } from 'vue';
-import type { ContextMenuProps } from '@sisense/sdk-ui-preact';
-import type { Attribute } from '@sisense/sdk-data';
-type DrilldownWidgetConfig = {
-    isBreadcrumbsDetached?: boolean;
-    breadcrumbsComponent?: Component;
-    contextMenuComponent?: (props: ContextMenuProps) => Component;
-};
-declare const _sfc_main: import("vue").DefineComponent<{
-    config: {
-        type: PropType<DrilldownWidgetConfig>;
-        required: false;
-        default: () => {};
-    };
-    drilldownDimensions: {
-        type: PropType<Attribute[]>;
-        required: false;
-        default: () => never[];
-    };
-    initialDimension: {
-        type: PropType<Attribute>;
-        required: false;
-        default: () => {};
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    config: {
-        type: PropType<DrilldownWidgetConfig>;
-        required: false;
-        default: () => {};
-    };
-    drilldownDimensions: {
-        type: PropType<Attribute[]>;
-        required: false;
-        default: () => never[];
-    };
-    initialDimension: {
-        type: PropType<Attribute>;
-        required: false;
-        default: () => {};
-    };
-}>>, {
-    drilldownDimensions: Attribute[];
-    initialDimension: Attribute;
-    config: DrilldownWidgetConfig;
+declare const _sfc_main: import("vue").DefineComponent<any, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<any>, {} | {
+    [x: string]: any;
 }, {}>;
 export default _sfc_main;

package/dist/src/components/filters/basic-member-filter-tile.d.ts

@@ -19,6 +19,7 @@ import type { PropType } from 'vue';
  * });
  * </script>
  * ```
+ * @internal
  */
 export declare const BasicMemberFilterTile: import("vue").DefineComponent<{
     allMembers: PropType<import("@sisense/sdk-ui-preact").Member[]>;

package/dist/src/components/filters/criteria-filter-tile.d.ts

@@ -1,24 +1,39 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the CriteriaFilterTile Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the CriteriaFilterTile.
+ * UI component that allows the user to filter numeric or text attributes according to
+ * a number of built-in operations defined in the {@link NumericFilter}, {@link TextFilter}, or {@link RankingFilter}.
+ *
+ * The arrangement prop determines whether the filter is rendered vertically or horizontally, with the latter intended for toolbar use and omitting title, enable/disable, and collapse/expand functionality.
  *
  * @example
  * Here's how you can use the CriteriaFilterTile component in a Vue application:
  * ```vue
  * <template>
- *   <CriteriaFilterTile :props="criteriaFilterTileProps" />
+ *   <CriteriaFilterTile
+ *     :title="criteriaFilterTileProps.title"
+ *     :filter="criteriaFilterTileProps.filter"
+ *     :onUpdate="onUpdate"
+ *   />
  * </template>
  *
  * <script setup lang="ts">
  * import { ref } from 'vue';
  * import {CriteriaFilterTile} from '@sisense/sdk-ui-vue';
+ * import { filterFactory } from '@sisense/sdk-data';
  *
  * const criteriaFilterTileProps = ref({
- *   // Configure your CriteriaFilterTileProps here
+ *  title: 'Revenue',
+ *  filter: filterFactory.greaterThanOrEqual(DM.Commerce.Revenue, 10000)
  * });
+ *
+ * const onUpdate = (filter: Filter | null) => {
+ *  ...
+ * }
  * </script>
  * ```
+ * <img src="media://criteria-filter-tile-example-1.png" width="300px" />
+ * @param props - Criteria filter tile props
+ * @returns Criteria filter tile component
  */
 export declare const CriteriaFilterTile: import("vue").DefineComponent<{
     arrangement: PropType<import("@sisense/sdk-ui-preact").FilterVariant | undefined>;

package/dist/src/components/filters/date-range-filter-tile.d.ts

@@ -1,13 +1,16 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the DateRangeFilterTile Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the DateRangeFilterTile.
+ * Date Range Filter Tile component for filtering data by date range.
  *
  * @example
- * Here's how you can use the DateRangeFilterTile component in a Vue application:
+ * Vue example of configuring the date min max values and handling onChange event.
  * ```vue
  * <template>
- *   <DateRangeFilterTile :props="dateRangeFilterTileProps" />
+ *   <DateRangeFilterTile
+ *     :title="dateRangeFilterTileProps.title"
+ *     :attribute="dateRangeFilterTileProps.attribute"
+ *     :filter="dateRangeFilterTileProps.filter"
+ *     :onChange="onChange" />
  * </template>
  *
  * <script setup lang="ts">
@@ -15,8 +18,14 @@ import type { PropType } from 'vue';
  * import {CriteriaFilterTile} from '@sisense/sdk-ui-vue';
  *
  * const dateRangeFilterTileProps = ref({
- *   // Configure your dateRangeFilterTileProps
+ *   title: 'Date Range',
+ *   attribute: DM.Commerce.Date.Years,
+ *   filter: filterFactory.dateRange(DM.Commerce.Date.Years),
  * });
+ *
+ * const onChange = (filter: Filter) => {
+ *  ...
+ * }
  * </script>
  * ```
  */

package/dist/src/components/filters/member-filter-tile.d.ts

@@ -1,13 +1,19 @@
 import type { PropType } from 'vue';
 /**
- * A Vue component that wraps the MemberFilterTile Preact component for use in Vue applications.
- * It maintains compatibility with Vue's reactivity system while preserving the functionality of the MemberFilterTile.
+ * UI component that allows the user to select members to include/exclude in a
+ * filter. A query is executed against the provided data source to fetch
+ * all members that are selectable.
  *
  * @example
- * Here's how you can use the MemberFilterTile component in a Vue application:
+ * Below is an example for filtering countries in the `Country` dimension of the `Sample ECommerce` data model.
  * ```vue
  * <template>
- *   <MemberFilterTile :props="memberFilterTileProps" />
+ * <MemberFilterTile
+ *   :title="memberFilterTileProps.title"
+ *   :attribute="memberFilterTileProps.attribute"
+ *   :filter="memberFilterTileProps.filter"
+ *   :onChange={setCountryFilter}
+ * />
  * </template>
  *
  * <script setup lang="ts">
@@ -15,8 +21,13 @@ import type { PropType } from 'vue';
  * import MemberFilterTile from '@sisense/sdk-ui-vue/MemberFilterTile';
  *
  * const memberFilterTileProps = ref({
- *   // Configure your MemberFilterTileProps here
+ *   title: 'Country',
+ *   attribute: DM.Country.Country,
+ *   filter: countryFilter,
  * });
+ *
+ * const setCountryFilter = (filter: Filter | null) => {...}
+ *
  * </script>
  * ```
  */

package/dist/src/composables/index.d.ts

@@ -0,0 +1,6 @@
+export { useExecuteQuery } from './use-execute-query.js';
+export { useExecuteQueryByWidgetId } from './use-execute-query-by-widget-id.js';
+export { useGetDashboardModel } from './use-get-dashboard-model.js';
+export { useGetDashboardModels } from './use-get-dashboard-models.js';
+export { useGetSharedFormula } from './use-get-shared-formula.js';
+export { useGetWidgetModel } from './use-get-widget-model.js';