diff --git a/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md b/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md index 54bb00a4c..e4aaf054c 100644 --- a/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md +++ b/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md @@ -36,14 +36,21 @@ this.columnDefinitions = [ ``` ### Editor Options (`MultipleSelectOption` interface) -All the available options that can be provided as `editorOptions` to your column definitions can be found under this [multipleSelectOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/multipleSelectOption.interface.ts) and you should cast your `editorOptions` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as `editorOptions` to your column definitions via the `MultipleSelectOption` interface of the external library and so you should cast your `editorOptions` to that interface to make sure that you use only valid options of the `Multiple-Select-Vanilla` library. ```ts -editor: { - model: Editors.SingleSelect, - editorOptions: { - maxHeight: 400 - } as MultipleSelectOption +import { MultipleSelectOption } from 'multiple-select-vanilla'; + +prepareGrid() { + this.columnDefinitions = [{ + id: 'isActive', name: 'Active', field: 'isActive', + editor: { + model: Editors.singleSelect, + editorOptions: { + maxHeight: 400 + } as MultipleSelectOption + } + }]; } ``` @@ -52,7 +59,7 @@ You could also define certain options as a global level (for the entire grid or ```ts this.gridOptions = { - defaultEditorOptions: { + defaultEditorOptions: { // Note: that `select` combines both multipleSelect & singleSelect select: { minHeight: 350 }, // typed as MultipleSelectOption } diff --git a/docs/column-functionalities/filters/Select-Filter.md b/docs/column-functionalities/filters/Select-Filter.md index a59ff38f9..230374dc4 100644 --- a/docs/column-functionalities/filters/Select-Filter.md +++ b/docs/column-functionalities/filters/Select-Filter.md @@ -554,14 +554,21 @@ this.columnDefinitions = [ ``` ### Filter Options (`MultipleSelectOption` interface) -All the available options that can be provided as `filterOptions` to your column definitions can be found under this [multipleSelectOption interface](/ghiscoding/slickgrid-universal/tree/master/packages/common/src/interfaces/multipleSelectOption.interface.ts) and you should cast your `filterOptions` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as `filterOptions` to your column definitions via the `MultipleSelectOption` interface of the external library and so you should cast your `filterOptions` to that interface to make sure that you use only valid options of the `Multiple-Select-Vanilla` library. ```ts -filter: { - model: Filters.singleSelect, - filterOptions: { - maxHeight: 400 - } as MultipleSelectOption +import { MultipleSelectOption } from 'multiple-select-vanilla'; + +prepareGrid() { + this.columnDefinitions = [{ + id: 'isActive', name: 'Active', field: 'isActive', + filter: { + model: Filters.singleSelect, + filterOptions: { + maxHeight: 400 + } as MultipleSelectOption + } + }]; } ``` @@ -570,7 +577,7 @@ You could also define certain options as a global level (for the entire grid or ```ts this.gridOptions = { - defaultFilterOptions: { + defaultFilterOptions: { // Note: that `select` combines both multipleSelect & singleSelect select: { minHeight: 350 }, // typed as MultipleSelectOption } @@ -598,53 +605,61 @@ Couple of small options were added to suit SlickGrid-Universal needs, which is w ##### Code ```typescript -this.columnDefinitions = [ - { - id: 'isActive', name: 'Is Active', field: 'isActive', - filterable: true, - filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], - model: Filters.singleSelect, - filterOptions: { - // add any multiple-select.js options (from original or custom version) - autoAdjustDropPosition: false, // by default set to True, but you can disable it - position: 'top' - } as MultipleSelectOption +import { MultipleSelectOption } from 'multiple-select-vanilla'; + +prepareGrid() { + this.columnDefinitions = [ + { + id: 'isActive', name: 'Is Active', field: 'isActive', + filterable: true, + filter: { + collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], + model: Filters.singleSelect, + filterOptions: { + // add any multiple-select.js options (from original or custom version) + autoAdjustDropPosition: false, // by default set to True, but you can disable it + position: 'top' + } as MultipleSelectOption + } } - } -]; + ]; +} ``` #### Display shorter selected label text If we find that our text shown as selected text is too wide, we can choose change that by using `optionLabel` in Custom Structure. ```typescript -this.columnDefinitions = [ - { - id: 'isActive', name: 'Is Active', field: 'isActive', - filterable: true, - filter: { - collection: [ - { value: 1, label: '1', suffix: 'day' }, - { value: 2, label: '2', suffix: 'days' }, - { value: 3, label: '3', suffix: 'days' }, - // ... - ], - model: Filters.multipleSelect, - customStructure: { - label: 'label', - labelSuffix: 'suffix', - value: 'value', - optionLabel: 'value', // use value instead to show "1, 2" instead of "1 day, 2 days" - }, - filterOptions: { - // use different label to show as selected text - // please note the Custom Structure with optionLabel defined - // or use "useSelectOptionLabelToHtml" to render HTML - useSelectOptionLabel: true - } as MultipleSelectOption +import { MultipleSelectOption } from 'multiple-select-vanilla'; + +prepareGrid() { + this.columnDefinitions = [ + { + id: 'isActive', name: 'Is Active', field: 'isActive', + filterable: true, + filter: { + collection: [ + { value: 1, label: '1', suffix: 'day' }, + { value: 2, label: '2', suffix: 'days' }, + { value: 3, label: '3', suffix: 'days' }, + // ... + ], + model: Filters.multipleSelect, + customStructure: { + label: 'label', + labelSuffix: 'suffix', + value: 'value', + optionLabel: 'value', // use value instead to show "1, 2" instead of "1 day, 2 days" + }, + filterOptions: { + // use different label to show as selected text + // please note the Custom Structure with optionLabel defined + // or use "useSelectOptionLabelToHtml" to render HTML + useSelectOptionLabel: true + } as MultipleSelectOption + } } - } -]; + ]; +} ``` ### Query against another field property diff --git a/docs/migrations/migration-to-5.x.md b/docs/migrations/migration-to-5.x.md index 4819c2cd1..5c7278701 100644 --- a/docs/migrations/migration-to-5.x.md +++ b/docs/migrations/migration-to-5.x.md @@ -149,3 +149,21 @@ prepareGrid() { > **Note** the `'today'` shortcut currently only exist in `Vanilla-Calendar-Picker` fork, however the rest of the settings should be similar, visit `Vanilla-Calendar-Pro` [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) website for all other options. The hope is to drop the fork whenever the original project receives all missing features. +### Multiple-Select +Please note that in previous version we were re-exporting the `MultipleSelectOption` interface from the `Multiple-Select-Vanilla` library, however re-exporting is typically discouraged by the TypeScript team and so it was removed. The change is quite simple, you simply need to import the `MultipleSelectOption` interface from the `multiple-select-vanilla` external library. + +```diff +- import { MultipleSelectOption } from '@slickgrid-universal/common'; ++ import { MultipleSelectOption } from 'multiple-select-vanilla'; + +prepareGrid() { + this.columnDefinitions = [{ + id: 'isActive', name: 'Active', field: 'isActive', + editor: { + model: Editors.singleSelect, + collection: [ { value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' } ], + editorOptions: { maxHeight: 400 } as MultipleSelectOption + } + }]; +} +``` \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example10.ts b/examples/vite-demo-vanilla-bundle/src/examples/example10.ts index 2760e2401..6563d2dc0 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example10.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example10.ts @@ -7,7 +7,6 @@ import { type GridOption, type GridStateChange, type Metrics, - type MultipleSelectOption, OperatorType, SortDirection, } from '@slickgrid-universal/common'; @@ -15,6 +14,8 @@ import { BindingEventService } from '@slickgrid-universal/binding'; import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi, type GraphqlServiceOption, } from '@slickgrid-universal/graphql'; import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; import moment from 'moment-mini'; +import { type MultipleSelectOption } from 'multiple-select-vanilla'; + import { ExampleGridOptions } from './example-grid-options'; import type { TranslateService } from '../translate.service'; import './example10.scss'; diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts index cc84f13d1..8cdb0ba1d 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts @@ -13,7 +13,6 @@ import { type Formatter, Formatters, type GridOption, - type MultipleSelectOption, OperatorType, SlickGlobalEditorLock, type SliderOption, @@ -29,6 +28,7 @@ import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; import moment from 'moment-mini'; +import { type MultipleSelectOption } from 'multiple-select-vanilla'; import exampleModal from './example11-modal.html?raw'; import Example11Modal from './example11-modal'; diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts index 0c9057a36..f70b3ddf0 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts @@ -11,7 +11,6 @@ import { Formatters, type GridOption, type LongTextEditorOption, - type MultipleSelectOption, type OnCompositeEditorChangeEventArgs, SlickGlobalEditorLock, type SliderOption, @@ -26,6 +25,8 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { type SlickerGridInstance } from '@slickgrid-universal/vanilla-bundle'; import { Slicker, type VanillaForceGridBundle } from '@slickgrid-universal/vanilla-force-bundle'; import { SlickCompositeEditor, SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component'; +import { type MultipleSelectOption } from 'multiple-select-vanilla'; + import { ExampleGridOptions } from './example-grid-options'; import countriesJson from './data/countries.json?raw'; import './example12.scss'; diff --git a/packages/common/src/filters/__tests__/selectFilter.spec.ts b/packages/common/src/filters/__tests__/selectFilter.spec.ts index 050fe7ee2..66584ed63 100644 --- a/packages/common/src/filters/__tests__/selectFilter.spec.ts +++ b/packages/common/src/filters/__tests__/selectFilter.spec.ts @@ -1,5 +1,6 @@ // import 3rd party lib multiple-select for the tests import 'multiple-select-vanilla'; +import type { MultipleSelectOption } from 'multiple-select-vanilla'; import { of, Subject } from 'rxjs'; import { FieldType, OperatorType } from '../../enums/index'; @@ -11,7 +12,6 @@ import { SlickGrid } from '../../core/index'; import { HttpStub } from '../../../../../test/httpClientStub'; import { RxJsResourceStub } from '../../../../../test/rxjsResourceStub'; import { TranslateServiceStub } from '../../../../../test/translateServiceStub'; -import type { MultipleSelectOption } from 'multiple-select-vanilla'; jest.useFakeTimers(); diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index a9e348e4f..d13c1b195 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -42,7 +42,4 @@ export { Enums } from './enums/enums.index'; const Utilities = { ...BackendUtilities, ...Observers, ...ServiceUtilities, ...SortUtilities, ...Utils, deepAssign: Utils.deepMerge }; export { Utilities }; -export { SlickgridConfig } from './slickgrid-config'; - -// re-export MultipleSelectOption to avoid breaking previous code implementation -export type { MultipleSelectOption } from 'multiple-select-vanilla'; +export { SlickgridConfig } from './slickgrid-config'; \ No newline at end of file diff --git a/packages/common/src/interfaces/columnEditor.interface.ts b/packages/common/src/interfaces/columnEditor.interface.ts index 3bf58456a..abcd9b600 100644 --- a/packages/common/src/interfaces/columnEditor.interface.ts +++ b/packages/common/src/interfaces/columnEditor.interface.ts @@ -68,7 +68,8 @@ export interface ColumnEditor { /** * Options that could be provided to the Editor, example: { container: 'body', maxHeight: 250} * - * Please note that if you use options that have existed model interfaces, you should cast with "as X", + * Please note that if you use options that have existed model interfaces, + * you should always cast it with the "as X" (where X is the external lib options interface), * for example { editorOptions: {maxHeight: 250} as MultipleSelectOption } */ editorOptions?: any; diff --git a/packages/common/src/interfaces/columnFilter.interface.ts b/packages/common/src/interfaces/columnFilter.interface.ts index a72c468c9..72f186180 100644 --- a/packages/common/src/interfaces/columnFilter.interface.ts +++ b/packages/common/src/interfaces/columnFilter.interface.ts @@ -88,7 +88,8 @@ export interface ColumnFilter { /** * Options that could be provided to the Filter, example: { container: 'body', maxHeight: 250} * - * Please note that if you use options that have existed model interfaces, you should cast with "as X", + * Please note that if you use options that have existed model interfaces, + * you should always cast it with the "as X" (where X is the external lib options interface), * for example { filterOptions: {maxHeight: 250} as MultipleSelectOption } */ filterOptions?: any; diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts index a2d525844..625f52690 100644 --- a/packages/common/src/interfaces/gridOption.interface.ts +++ b/packages/common/src/interfaces/gridOption.interface.ts @@ -1,4 +1,5 @@ import type { EventNamingStyle } from '@slickgrid-universal/event-pub-sub'; +import type { MultipleSelectOption } from 'multiple-select-vanilla'; import type { AutoResizeOption, @@ -46,7 +47,6 @@ import type { import type { ColumnReorderFunction, OperatorString, OperatorType, } from '../enums/index'; import type { TranslaterService } from '../services/translater.service'; import type { DataViewOption, SlickEditorLock } from '../core/index'; -import type { MultipleSelectOption } from 'multiple-select-vanilla'; export interface CellViewportRange { bottom: number;