@sisense/sdk-ui-vue 2.20.0 → 2.21.0

package/package.json

@@ -11,7 +11,7 @@
     "Sisense",
     "Compose SDK"
   ],
-  "version": "2.20.0",
+  "version": "2.21.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -62,25 +62,35 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --quiet",
     "lint:fix": "run lint --fix",
     "format": "prettier --write .",
-    "format:check": "prettier --check ."
+    "format:check": "prettier --check .",
+    "vitest": "TZ=utc run -T vitest",
+    "test": "run vitest run",
+    "test:stop-on-fail": "run vitest run --bail 1",
+    "test:update": "run vitest -u",
+    "test:watch": "run vitest watch",
+    "test:coverage": "run vitest run --coverage",
+    "clean": "rm -rf ./dist && rm -rf ./coverage && rm -rf tsconfig.tsbuildinfo"
   },
   "dependencies": {
-    "@sisense/sdk-ui-preact": "2.20.0",
+    "@sisense/sdk-ui-preact": "2.21.0",
     "deepmerge": "^4.3.1",
     "lodash-es": "^4.17.21",
     "vue": "^3.3.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
+    "@testing-library/vue": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.14.2",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.1.2",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.40.0",
     "eslint-plugin-vue": "^9.9.0",
+    "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
     "typescript": "~4.8.4",

package/dist/packages/sdk-ui-vue/src/components/filters/relative-date-filter-tile.d.ts

@@ -1,140 +0,0 @@
-import type { RelativeDateFilterTileProps as RelativeDateFilterTilePropsPreact } from '@sisense/sdk-ui-preact';
-import type { PropType } from 'vue';
-/**
- * Props of the {@link @sisense/sdk-ui-vue!RelativeDateFilterTile | `RelativeDateFilterTile`} component.
- */
-export interface RelativeDateFilterTileProps extends RelativeDateFilterTilePropsPreact {
-}
-/**
- * Relative Date Filter Tile component for filtering data by relative date.
- *
- * @example
- * Vue example of configuring the date min max values and handling onUpdate event.
- * ```vue
- * <template>
- *   <RelativeDateFilterTile
- *     :title="relativeDateFilter.title"
- *     :filter="relativeDateFilter.filter"
- *     :arrangement="relativeDateFilter.arrangement"
- *     :onUpdate="relativeDateFilter.onUpdate"
- *   />
- * </template>
- *
- * <script setup lang="ts">
- * import { ref } from 'vue';
- * import { RelativeDateFilterTile, type RelativeDateFilterTileProps } from '@sisense/sdk-ui-vue';
- * import { filterFactory } from '@sisense/sdk-data';
- * import * as DM from '../assets/sample-retail-model';
- *
- * const relativeDateFilterValue = ref<Filter | null>(filterFactory.dateRelativeTo(DM.DimDate.Date.Months, 0, 18));
- *
- * const relativeDateFilter = ref<RelativeDateFilterTileProps>({
- *   title: 'Relative Date Filter Tile',
- *   filter: relativeDateFilterValue.value!,
- *   arrangement: 'vertical',
- *   onUpdate(filter) {
- *     relativeDateFilterValue.value = filter;
- *   },
- * });
- * </script>
- * ```
- * <img src="media://vue-relative-date-filter-tile-example.png" width="225px" />
- * @param props - RelativeDateFilterTile props
- * @returns RelativeDateFilterTile component
- * @group Filter Tiles
- */
-export declare const RelativeDateFilterTile: import("vue").DefineComponent<{
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.title}
-     */
-    title: {
-        type: PropType<string>;
-        required: true;
-    };
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.filter}
-     */
-    filter: {
-        type: PropType<import("@sisense/sdk-data").Filter>;
-        required: true;
-    };
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.arrangement}
-     */
-    arrangement: PropType<import("@sisense/sdk-ui-preact").FilterVariant | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.onUpdate}
-     */
-    onUpdate: {
-        type: PropType<(filter: import("@sisense/sdk-data").Filter) => void>;
-        required: true;
-    };
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.limit}
-     */
-    limit: PropType<{
-        maxDate: string;
-        minDate: string;
-    } | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.tileDesignOptions}
-     * @internal
-     */
-    tileDesignOptions: PropType<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/domains/filters/components/filter-tile-container").FilterTileDesignOptions | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.onDelete}
-     */
-    onDelete: PropType<(() => void) | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.onEdit}
-     */
-    onEdit: PropType<(() => void) | undefined>;
-}, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.title}
-     */
-    title: {
-        type: PropType<string>;
-        required: true;
-    };
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.filter}
-     */
-    filter: {
-        type: PropType<import("@sisense/sdk-data").Filter>;
-        required: true;
-    };
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.arrangement}
-     */
-    arrangement: PropType<import("@sisense/sdk-ui-preact").FilterVariant | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.onUpdate}
-     */
-    onUpdate: {
-        type: PropType<(filter: import("@sisense/sdk-data").Filter) => void>;
-        required: true;
-    };
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.limit}
-     */
-    limit: PropType<{
-        maxDate: string;
-        minDate: string;
-    } | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.tileDesignOptions}
-     * @internal
-     */
-    tileDesignOptions: PropType<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/domains/filters/components/filter-tile-container").FilterTileDesignOptions | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.onDelete}
-     */
-    onDelete: PropType<(() => void) | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!RelativeDateFilterTileProps.onEdit}
-     */
-    onEdit: PropType<(() => void) | undefined>;
-}>>, {}, {}>;

package/dist/packages/sdk-ui-vue/src/components/widgets/pivot-table-widget.d.ts

@@ -1,245 +0,0 @@
-/// <reference types="react" />
-import { type PivotTableWidgetProps } from '@sisense/sdk-ui-preact';
-import type { PropType } from 'vue';
-export { PivotTableWidgetProps };
-/**
- * The PivotTableWidget component extending the {@link PivotTable} component to support widget style options.
- *
- * @example
- * Here's how you can use the PivotTableWidget component in a Vue application:
- * ```vue
- * <template>
- *   <PivotTableWidget
- *      :dataSource="pivotTableWidgetProps.dataSource"
- *      :filters="pivotTableWidgetProps.filters"
- *      :dataOptions="pivotTableWidgetProps.dataOptions"
- *      :styleOptions="pivotTableWidgetProps.styleOptions"
- *      :title="pivotTableWidgetProps.title"
- *   />
- * </template>
- *
- * <script setup lang="ts">
- * import { ref } from 'vue';
- * import { measureFactory } from '@sisense/sdk-data';
- * import { PivotTableWidget, type PivotTableWidgetProps } from '@sisense/sdk-ui-vue';
- * import * as DM from '../assets/sample-ecommerce-model';
- *
- * const pivotTableWidgetProps = ref<PivotTableWidgetProps>({
- *   dataSource: DM.DataSource,
- *   dataOptions: {
- *     rows: [DM.Category.Category],
- *     values: [measureFactory.sum(DM.Commerce.Cost, 'Total Cost')],
- *   },
- *   filters: [],
- *   title: 'Pivot Table Widget Example',
- *   styleOptions: {
- *     spaceAround: 'Medium',
- *     cornerRadius: 'Large',
- *     shadow: 'Light',
- *     border: true,
- *     borderColor: '#e0e0e0',
- *     backgroundColor: '#ffffff',
- *     header: {
- *       hidden: false,
- *       titleTextColor: '#333333',
- *       titleAlignment: 'Center',
- *       dividerLine: true,
- *       dividerLineColor: '#e0e0e0',
- *       backgroundColor: '#f5f5f5',
- *     },
- *   },
- * });
- * </script>
- * ```
- * <img src="media://vue-pivot-table-widget-example.png" width="600px" />
- * @param props - Pivot Table Widget properties
- * @returns Widget component representing a pivot table
- * @group Dashboards
- */
-export declare const PivotTableWidget: import("vue").DefineComponent<{
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.dataOptions}
-     *
-     * @category Chart
-     */
-    dataOptions: {
-        type: PropType<import("@sisense/sdk-ui-preact").PivotTableDataOptions>;
-        required: true;
-    };
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.dataSource}
-     *
-     * @category Data
-     */
-    dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.description}
-     *
-     * @category Widget
-     */
-    description: PropType<string | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.filters}
-     *
-     * @category Data
-     */
-    filters: PropType<import("@sisense/sdk-data").FilterRelations | import("@sisense/sdk-data").Filter[] | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.styleOptions}
-     *
-     * @category Widget
-     */
-    styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableWidgetStyleOptions | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.drilldownOptions}
-     *
-     * @category Widget
-     */
-    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDrilldownOptions | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.title}
-     *
-     * @category Widget
-     */
-    title: PropType<string | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.topSlot}
-     *
-     * @category Widget
-     * @internal
-     */
-    topSlot: PropType<import("react").ReactNode>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.bottomSlot}
-     *
-     * @category Widget
-     * @internal
-     */
-    bottomSlot: PropType<import("react").ReactNode>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.highlights}
-     *
-     * @category Data
-     */
-    highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointClick}
-     *
-     * @category Callbacks
-     */
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointContextMenu}
-     *
-     * @category Callbacks
-     */
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataCellFormat}
-     *
-     * @category Callbacks
-     * @internal
-     */
-    onDataCellFormat: PropType<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/domains/visualizations/components/pivot-table/formatters/types").CustomDataCellFormatter | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onHeaderCellFormat}
-     *
-     * @category Callbacks
-     * @internal
-     */
-    onHeaderCellFormat: PropType<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/domains/visualizations/components/pivot-table/formatters/types").CustomHeaderCellFormatter | undefined>;
-}, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>) | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.dataOptions}
-     *
-     * @category Chart
-     */
-    dataOptions: {
-        type: PropType<import("@sisense/sdk-ui-preact").PivotTableDataOptions>;
-        required: true;
-    };
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.dataSource}
-     *
-     * @category Data
-     */
-    dataSource: PropType<import("@sisense/sdk-data").DataSource | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.description}
-     *
-     * @category Widget
-     */
-    description: PropType<string | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.filters}
-     *
-     * @category Data
-     */
-    filters: PropType<import("@sisense/sdk-data").FilterRelations | import("@sisense/sdk-data").Filter[] | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.styleOptions}
-     *
-     * @category Widget
-     */
-    styleOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableWidgetStyleOptions | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.drilldownOptions}
-     *
-     * @category Widget
-     */
-    drilldownOptions: PropType<import("@sisense/sdk-ui-preact").PivotTableDrilldownOptions | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.title}
-     *
-     * @category Widget
-     */
-    title: PropType<string | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.topSlot}
-     *
-     * @category Widget
-     * @internal
-     */
-    topSlot: PropType<import("react").ReactNode>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.bottomSlot}
-     *
-     * @category Widget
-     * @internal
-     */
-    bottomSlot: PropType<import("react").ReactNode>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.highlights}
-     *
-     * @category Data
-     */
-    highlights: PropType<import("@sisense/sdk-data").Filter[] | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointClick}
-     *
-     * @category Callbacks
-     */
-    onDataPointClick: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataPointContextMenu}
-     *
-     * @category Callbacks
-     */
-    onDataPointContextMenu: PropType<import("@sisense/sdk-ui-preact").PivotTableDataPointEventHandler | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onDataCellFormat}
-     *
-     * @category Callbacks
-     * @internal
-     */
-    onDataCellFormat: PropType<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/domains/visualizations/components/pivot-table/formatters/types").CustomDataCellFormatter | undefined>;
-    /**
-     * {@inheritDoc @sisense/sdk-ui!PivotTableWidgetProps.onHeaderCellFormat}
-     *
-     * @category Callbacks
-     * @internal
-     */
-    onHeaderCellFormat: PropType<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/domains/visualizations/components/pivot-table/formatters/types").CustomHeaderCellFormatter | undefined>;
-}>>, {}, {}>;

package/dist/packages/sdk-ui-vue/src/helpers/dynamic-renderer.d.ts

@@ -1,16 +0,0 @@
-import { type App } from 'vue';
-import type { Component, DefineComponent } from 'vue';
-type AnyObject = Record<string, any>;
-/**
- * Result of rendering a dynamic component
- */
-export interface RenderedComponent {
-    /** The DOM element containing the rendered component */
-    element: HTMLElement;
-    /** Function to properly destroy the component and clean up resources */
-    destroy: () => void;
-    /** Reference to the Vue app instance */
-    app: App<Element>;
-}
-export declare function renderComponent<Props extends AnyObject>(Component: Component<Props> | DefineComponent<Props>, props: Props): RenderedComponent;
-export {};

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

@@ -1,9 +0,0 @@
-import type { CustomSisenseContext } from '@sisense/sdk-ui-preact';
-import type { InjectionKey, Ref } from 'vue';
-export declare const defaultSisenseContext: CustomSisenseContext;
-export declare const sisenseContextKey: InjectionKey<Ref<import("@sisense/sdk-ui/dist/packages/sdk-ui/src/infra/contexts/sisense-context/sisense-context").SisenseContextPayload>>;
-/**
- * Gets sisense context
- * @internal
- */
-export declare const getSisenseContext: () => Ref<CustomSisenseContext>;