diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts index b749fe89e..d8a64ca5d 100644 --- a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts +++ b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts @@ -141,7 +141,7 @@ export class Example3 { model: Editors.slider, minValue: 0, maxValue: 100, - // params: { hideSliderNumber: true }, + // editorOptions: { hideSliderNumber: true } as SliderOption, }, sortable: true, filterable: true, filter: { model: Filters.slider, operator: '>=' }, diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts index 4feb51354..c0ff71562 100644 --- a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts +++ b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts @@ -20,6 +20,7 @@ import { // utilities deepCopy, formatNumber, + SliderOption, } from '@slickgrid-universal/common'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; @@ -156,7 +157,7 @@ export class Example11 { }, { id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number, minWidth: 80, - editor: { model: Editors.slider, massUpdate: true, minValue: 0, maxValue: 100, params: { hideSliderNumber: true } }, + editor: { model: Editors.slider, massUpdate: true, minValue: 0, maxValue: 100, editorOptions: { hideSliderNumber: true } as SliderOption }, sortable: true, filterable: true, filter: { model: Filters.slider, operator: '>=' }, }, diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts index 1c72b0ff9..1d1d7b322 100644 --- a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts +++ b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts @@ -15,6 +15,7 @@ import { LongTextEditorOption, OnCompositeEditorChangeEventArgs, SlickNamespace, + SliderOption, SortComparers, // utilities @@ -235,7 +236,7 @@ export class Example12 { exportCustomFormatter: Formatters.dateUs, type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc, filterable: true, filter: { model: Filters.compoundDate }, - editor: { model: Editors.date, massUpdate: true, params: { hideClearButton: false } }, + editor: { model: Editors.date, massUpdate: true, editorOptions: { hideClearButton: false } as SliderOption }, }, { id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100, diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts index dd04add9e..181f5012f 100644 --- a/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts +++ b/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts @@ -7,6 +7,7 @@ import { EventNamingStyle, FieldType, Filters, + FlatpickrOption, Formatter, Formatters, GridOption, @@ -211,7 +212,7 @@ export class Example14 { exportCustomFormatter: Formatters.dateUs, type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc, filterable: true, filter: { model: Filters.compoundDate }, - editor: { model: Editors.date, params: { hideClearButton: false } }, + editor: { model: Editors.date, editorOptions: { hideClearButton: false } as FlatpickrOption }, }, { id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100, diff --git a/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts b/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts index 66ad28214..f658a3379 100644 --- a/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts +++ b/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts @@ -1,6 +1,6 @@ import { AutocompleteItem } from 'autocompleter'; -import { AutocompleterOption } from '../interfaces'; +import { AutocompleterOption } from '../interfaces/index'; /** * add loading class ".slick-autocomplete-loading" to the Kraaden Autocomplete input element diff --git a/packages/common/src/editors/__tests__/sliderEditor.spec.ts b/packages/common/src/editors/__tests__/sliderEditor.spec.ts index cc01d3fac..3e330af20 100644 --- a/packages/common/src/editors/__tests__/sliderEditor.spec.ts +++ b/packages/common/src/editors/__tests__/sliderEditor.spec.ts @@ -473,7 +473,7 @@ describe('SliderEditor', () => { const editorElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement; editorElm.dispatchEvent(new Event('change')); - expect(consoleSpy).toHaveBeenCalledWith('[Slickgrid-Universal] All editor.params were moved, and deprecated, to "editorOptions" as SliderOption for better typing support.'); + expect(consoleSpy).toHaveBeenCalledWith('[Slickgrid-Universal] All editor.params are moving to "editorOptions" for better typing support and "params" will be deprecated in future release.'); }); it('should enableSliderTrackColoring and trigger a change event and expect slider track to have background color', () => { diff --git a/packages/common/src/editors/autocompleterEditor.ts b/packages/common/src/editors/autocompleterEditor.ts index ea1616890..7ba436ea0 100644 --- a/packages/common/src/editors/autocompleterEditor.ts +++ b/packages/common/src/editors/autocompleterEditor.ts @@ -25,6 +25,7 @@ import { } from '../interfaces/index'; import { textValidator } from '../editorValidators/textValidator'; import { addAutocompleteLoadingByOverridingFetch } from '../commonEditorFilter'; +import { getEditorOptionByName } from './editorUtilities'; import { createDomElement, sanitizeTextByAvailableSanitizer, } from '../services/domUtilities'; import { findOrDefault, getDescendantProperty, } from '../services/utilities'; import { BindingEventService } from '../services/bindingEvent.service'; @@ -551,7 +552,7 @@ export class AutocompleterEditor implements Ed this._editorInputGroupElm.appendChild(createDomElement('span')); // show clear date button (unless user specifically doesn't want it) - if (!this.columnEditor?.params?.hideClearButton) { + if (!getEditorOptionByName(this.columnEditor, 'hideClearButton')) { closeButtonGroupElm.appendChild(this._clearButtonElm); this._editorInputGroupElm.appendChild(closeButtonGroupElm); this._bindEventService.bind(this._clearButtonElm, 'click', () => this.clear()); diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts index 9a90e7f3d..8eeb013cb 100644 --- a/packages/common/src/editors/dateEditor.ts +++ b/packages/common/src/editors/dateEditor.ts @@ -21,16 +21,9 @@ import { SlickGrid, SlickNamespace, } from './../interfaces/index'; -import { - createDomElement, - destroyObjectDomElementProps, - emptyElement, -} from '../services/domUtilities'; -import { - getDescendantProperty, - mapFlatpickrDateFormatWithFieldType, - mapMomentDateFormatWithFieldType, -} from './../services/utilities'; +import { getEditorOptionByName } from './editorUtilities'; +import { createDomElement, destroyObjectDomElementProps, emptyElement, } from '../services/domUtilities'; +import { getDescendantProperty, mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType, } from './../services/utilities'; import { BindingEventService } from '../services/bindingEvent.service'; import { TranslaterService } from '../services/translater.service'; @@ -170,7 +163,7 @@ export class DateEditor implements Editor { this._editorInputGroupElm.appendChild(this._inputElm); // show clear date button (unless user specifically doesn't want it) - if (!this.columnEditor?.params?.hideClearButton) { + if (!getEditorOptionByName(this.columnEditor, 'hideClearButton')) { closeButtonGroupElm.appendChild(this._clearButtonElm); this._editorInputGroupElm.appendChild(closeButtonGroupElm); this._bindEventService.bind(this._clearButtonElm, 'click', () => this._lastTriggeredByClearDate = true); @@ -237,7 +230,7 @@ export class DateEditor implements Editor { * @param {string} optionName - Flatpickr option name * @param {newValue} newValue - Flatpickr new option value */ - changeEditorOption(optionName: keyof FlatpickrOption, newValue: any) { + changeEditorOption(optionName: keyof FlatpickrBaseOptions, newValue: any) { if (!this.columnEditor.editorOptions) { this.columnEditor.editorOptions = {}; } diff --git a/packages/common/src/editors/editorUtilities.ts b/packages/common/src/editors/editorUtilities.ts new file mode 100644 index 000000000..4181a7a3b --- /dev/null +++ b/packages/common/src/editors/editorUtilities.ts @@ -0,0 +1,18 @@ +// import { InferObjectPropTypeByName } from '../enums/inferObjectPropTypeByName.type'; +import { ColumnEditor } from '../interfaces/index'; + +/** + * Get option from editor.params PR editor.editorOptions + * @deprecated this should be removed when slider editorParams are replaced by editorOptions + */ +export function getEditorOptionByName(columnEditor: ColumnEditor, optionName: K, defaultValue?: any): T[K] | undefined { + let outValue; + + if (columnEditor.editorOptions?.[optionName] !== undefined) { + outValue = (columnEditor.editorOptions as T)[optionName]; + } else if (columnEditor?.params?.[optionName] !== undefined) { + console.warn(`[Slickgrid-Universal] All editor.params are moving to "editorOptions" for better typing support and "params" will be deprecated in future release.`); + outValue = columnEditor?.params?.[optionName]; + } + return outValue ?? defaultValue; +} diff --git a/packages/common/src/editors/sliderEditor.ts b/packages/common/src/editors/sliderEditor.ts index f8e759523..00c21ffa1 100644 --- a/packages/common/src/editors/sliderEditor.ts +++ b/packages/common/src/editors/sliderEditor.ts @@ -1,7 +1,21 @@ import { setDeepValue, toSentenceCase } from '@slickgrid-universal/utils'; import { Constants } from '../constants'; -import { Column, ColumnEditor, CompositeEditorOption, Editor, EditorArguments, EditorValidator, EditorValidationResult, GridOption, SlickGrid, SlickNamespace, SliderOption, CurrentSliderOption } from '../interfaces/index'; +import { + Column, + ColumnEditor, + CompositeEditorOption, + Editor, + EditorArguments, + EditorValidator, + EditorValidationResult, + GridOption, + SlickGrid, + SlickNamespace, + SliderOption, + CurrentSliderOption +} from '../interfaces/index'; +import { getEditorOptionByName } from './editorUtilities'; import { getDescendantProperty } from '../services/utilities'; import { sliderValidator } from '../editorValidators/sliderValidator'; import { BindingEventService } from '../services/bindingEvent.service'; @@ -73,11 +87,6 @@ export class SliderEditor implements Editor { return this.gridOptions.autoCommitEdit ?? false; } - /** @deprecated Getter for the Editor Generic Params */ - protected get editorParams(): any { - return this.columnEditor.params || {}; - } - /** Getter for the current Slider Options */ get sliderOptions(): CurrentSliderOption | undefined { return this._sliderOptions; @@ -308,7 +317,7 @@ export class SliderEditor implements Editor { const minValue = +(this.columnEditor?.minValue ?? Constants.SLIDER_DEFAULT_MIN_VALUE); const maxValue = +(this.columnEditor?.maxValue ?? Constants.SLIDER_DEFAULT_MAX_VALUE); const step = +(this.columnEditor?.valueStep ?? Constants.SLIDER_DEFAULT_STEP); - const defaultValue = this.getEditorOptionByName('sliderStartValue') ?? minValue; + const defaultValue = getEditorOptionByName(this.columnEditor, 'sliderStartValue') ?? minValue; this._defaultValue = +defaultValue; this._sliderTrackElm = createDomElement('div', { className: 'slider-track' }); @@ -326,7 +335,7 @@ export class SliderEditor implements Editor { sliderInputContainerElm.appendChild(inputElm); divContainerElm.appendChild(sliderInputContainerElm); - if (!this.getEditorOptionByName('hideSliderNumber')) { + if (!getEditorOptionByName(this.columnEditor, 'hideSliderNumber')) { divContainerElm.classList.add('input-group'); const divGroupAddonElm = createDomElement('div', { className: 'input-group-addon input-group-append slider-value' }); @@ -350,21 +359,6 @@ export class SliderEditor implements Editor { this.disable(isCellEditable === false); } - /** - * Get option from editor.params PR editor.editorOptions - * @deprecated this should be removed when slider editorParams are replaced by editorOptions - */ - protected getEditorOptionByName(optionName: string, defaultValue?: string | number | boolean): T { - let outValue: string | number | boolean | undefined; - if (this.columnEditor.editorOptions?.[optionName as keyof SliderOption] !== undefined) { - outValue = this.columnEditor.editorOptions[optionName as keyof SliderOption]; - } else if (this.editorParams?.[optionName] !== undefined) { - console.warn('[Slickgrid-Universal] All editor.params were moved, and deprecated, to "editorOptions" as SliderOption for better typing support.'); - outValue = this.editorParams?.[optionName]; - } - return outValue as T ?? defaultValue ?? undefined; - } - protected handleChangeEvent(event: MouseEvent) { this._isValueTouched = true; const compositeEditorOptions = this.args.compositeEditorOptions; @@ -379,7 +373,7 @@ export class SliderEditor implements Editor { protected handleChangeSliderNumber(event: Event) { const value = (event.target)?.value ?? ''; if (value !== '') { - if (!this.getEditorOptionByName('hideSliderNumber') && this._sliderNumberElm) { + if (!getEditorOptionByName(this.columnEditor, 'hideSliderNumber') && this._sliderNumberElm) { this._sliderNumberElm.textContent = value; } this._inputElm.title = value; @@ -426,12 +420,12 @@ export class SliderEditor implements Editor { } protected updateTrackFilledColorWhenEnabled() { - if (this.getEditorOptionByName('enableSliderTrackColoring') && this._inputElm) { + if (getEditorOptionByName(this.columnEditor, 'enableSliderTrackColoring') && this._inputElm) { const percent1 = 0; const percent2 = ((+this.getValue() - +this._inputElm.min) / (this.sliderOptions?.maxValue ?? 0 - +this._inputElm.min)) * 100; const bg = 'linear-gradient(to right, %b %p1, %c %p1, %c %p2, %b %p2)' .replace(/%b/g, '#eee') - .replace(/%c/g, (this.getEditorOptionByName('sliderTrackFilledColor') ?? 'var(--slick-slider-filter-thumb-color, #86bff8)') as string) + .replace(/%c/g, (getEditorOptionByName(this.columnEditor, 'sliderTrackFilledColor') ?? 'var(--slick-slider-filter-thumb-color, #86bff8)') as string) .replace(/%p1/g, `${percent1}%`) .replace(/%p2/g, `${percent2}%`); diff --git a/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts b/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts index d3be177fd..8caec4058 100644 --- a/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts +++ b/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts @@ -246,7 +246,7 @@ describe('SliderRangeFilter', () => { const filterLowestElm = divContainer.querySelector('.lowest-range-duration') as HTMLInputElement; const filterHighestElm = divContainer.querySelector('.highest-range-duration') as HTMLInputElement; - expect(consoleSpy).toHaveBeenCalledWith('[Slickgrid-Universal] All filter.params were moved, and deprecated, to "filterOptions" as SliderOption for better typing support.'); + expect(consoleSpy).toHaveBeenCalledWith('[Slickgrid-Universal] All filter.params are moving to "filterOptions" for better typing support and "params" will be deprecated in future release.'); expect(filterLowestElm.textContent).toBe('4'); expect(filterHighestElm.textContent).toBe('69'); expect(filter.currentValues).toEqual([4, 69]); diff --git a/packages/common/src/filters/filterUtilities.ts b/packages/common/src/filters/filterUtilities.ts index f03c48c9d..f8bf0c298 100644 --- a/packages/common/src/filters/filterUtilities.ts +++ b/packages/common/src/filters/filterUtilities.ts @@ -1,6 +1,6 @@ import { Constants } from '../constants'; -import { OperatorString } from '../enums/operatorString.type'; -import { Column, GridOption, Locale } from '../interfaces/index'; +import { OperatorString } from '../enums/index'; +import { Column, ColumnFilter, GridOption, Locale } from '../interfaces/index'; import { Observable, RxJsFacade, Subject, Subscription } from '../services/rxjsFacade'; import { createDomElement, htmlEncodedStringWithPadding, sanitizeTextByAvailableSanitizer, } from '../services/domUtilities'; import { castObservableToPromise, getDescendantProperty, getTranslationPrefix, } from '../services/utilities'; @@ -26,6 +26,22 @@ export function buildSelectOperator(optionValues: Array<{ operator: OperatorStri return selectElm; } +/** + * Get option from filter.params PR filter.filterOptions + * @deprecated this should be removed when slider filterParams are replaced by filterOptions + */ +export function getFilterOptionByName(columnFilter: ColumnFilter, optionName: K, defaultValue?: any): T[K] | undefined { + let outValue; + + if (columnFilter.filterOptions?.[optionName] !== undefined) { + outValue = (columnFilter.filterOptions as T)[optionName]; + } else if (columnFilter?.params?.[optionName] !== undefined) { + console.warn(`[Slickgrid-Universal] All filter.params are moving to "filterOptions" for better typing support and "params" will be deprecated in future release.`); + outValue = columnFilter?.params?.[optionName]; + } + return outValue ?? defaultValue; +} + /** * When user use a CollectionAsync we will use the returned collection to render the filter DOM element * and reinitialize filter collection with this new collection diff --git a/packages/common/src/filters/sliderFilter.ts b/packages/common/src/filters/sliderFilter.ts index 2f723506c..220f601c9 100644 --- a/packages/common/src/filters/sliderFilter.ts +++ b/packages/common/src/filters/sliderFilter.ts @@ -13,6 +13,7 @@ import { OperatorDetail, SlickGrid, SlickNamespace, + SliderOption, SliderRangeOption, SliderType, } from '../interfaces/index'; @@ -20,7 +21,7 @@ import { BindingEventService } from '../services/bindingEvent.service'; import { createDomElement, emptyElement } from '../services/domUtilities'; import { TranslaterService } from '../services/translater.service'; import { mapOperatorToShorthandDesignation } from '../services/utilities'; -import { buildSelectOperator, compoundOperatorNumeric } from './filterUtilities'; +import { buildSelectOperator, compoundOperatorNumeric, getFilterOptionByName } from './filterUtilities'; declare const Slick: SlickNamespace; const DEFAULT_SLIDER_TRACK_FILLED_COLOR = '#86bff8'; @@ -58,11 +59,6 @@ export class SliderFilter implements Filter { this._bindEventService = new BindingEventService(); } - /** @deprecated Getter for the Filter Generic Params */ - protected get filterParams(): any { - return this.columnDef?.filter?.params ?? {}; - } - /** Getter for the Column Filter */ get columnFilter(): ColumnFilter { return this.columnDef?.filter ?? {}; @@ -133,8 +129,8 @@ export class SliderFilter implements Filter { this._clearFilterTriggered = true; this._shouldTriggerQuery = shouldTriggerQuery; this.searchTerms = []; - const lowestValue = +(this.getFilterOptionByName('sliderStartValue') ?? Constants.SLIDER_DEFAULT_MIN_VALUE) as number; - const highestValue = +(this.getFilterOptionByName('sliderEndValue') ?? Constants.SLIDER_DEFAULT_MAX_VALUE) as number; + const lowestValue = +(getFilterOptionByName(this.columnFilter, 'sliderStartValue') ?? Constants.SLIDER_DEFAULT_MIN_VALUE) as number; + const highestValue = +(getFilterOptionByName(this.columnFilter, 'sliderEndValue') ?? Constants.SLIDER_DEFAULT_MAX_VALUE) as number; if (this.sliderType === 'double') { if (this._sliderLeftElm) { @@ -158,7 +154,7 @@ export class SliderFilter implements Filter { this._sliderRightElm?.dispatchEvent(new Event('change')); } - const hideSliderNumbers = this.getFilterOptionByName('hideSliderNumber') ?? this.getFilterOptionByName('hideSliderNumbers'); + const hideSliderNumbers = getFilterOptionByName(this.columnFilter, 'hideSliderNumber') ?? getFilterOptionByName(this.columnFilter, 'hideSliderNumbers'); if (!hideSliderNumbers) { if (this.sliderType === 'double') { this.renderSliderValues(lowestValue, highestValue); @@ -224,7 +220,7 @@ export class SliderFilter implements Filter { this._sliderRightElm.value = typeof values === 'string' ? values : `${term1}`; this.renderSliderValues(undefined, this._sliderRightElm.value); } else if (Array.isArray(sliderVals) && sliderVals.length === 2) { - if (!this.getFilterOptionByName('hideSliderNumbers')) { + if (!getFilterOptionByName(this.columnFilter, 'hideSliderNumbers')) { const [lowestValue, highestValue] = sliderVals; if (this._sliderLeftElm) { this._sliderLeftElm.value = String(lowestValue ?? Constants.SLIDER_DEFAULT_MIN_VALUE); @@ -269,8 +265,8 @@ export class SliderFilter implements Filter { const step = +(this.columnFilter?.valueStep ?? Constants.SLIDER_DEFAULT_STEP); emptyElement(this._argFilterContainerElm); - const defaultStartValue = +((Array.isArray(searchTerms) && searchTerms?.[0]) ?? this.getFilterOptionByName('sliderStartValue') ?? minValue); - const defaultEndValue = +((Array.isArray(searchTerms) && searchTerms?.[1]) ?? this.getFilterOptionByName('sliderEndValue') ?? maxValue); + const defaultStartValue = +((Array.isArray(searchTerms) && searchTerms?.[0]) ?? getFilterOptionByName(this.columnFilter, 'sliderStartValue') ?? minValue); + const defaultEndValue = +((Array.isArray(searchTerms) && searchTerms?.[1]) ?? getFilterOptionByName(this.columnFilter, 'sliderEndValue') ?? maxValue); this._sliderRangeContainElm = createDomElement('div', { className: `filter-input filter-${columnId} slider-input-container slider-values` }); this._sliderRangeContainElm.title = this.sliderType === 'double' ? `${defaultStartValue} - ${defaultEndValue}` : `${defaultStartValue}`; @@ -306,7 +302,7 @@ export class SliderFilter implements Filter { }); // put all DOM elements together to create the final Slider - const hideSliderNumbers = this.getFilterOptionByName('hideSliderNumber') ?? this.getFilterOptionByName('hideSliderNumbers'); + const hideSliderNumbers = getFilterOptionByName(this.columnFilter, 'hideSliderNumber') ?? getFilterOptionByName(this.columnFilter, 'hideSliderNumbers'); const sliderNumberClass = hideSliderNumbers ? '' : 'input-group'; this._divContainerFilterElm = createDomElement('div', { className: `${sliderNumberClass} search-filter slider-container slider-values filter-${columnId}`.trim() }); @@ -351,7 +347,7 @@ export class SliderFilter implements Filter { this._divContainerFilterElm.classList.add('filled'); this._currentValue = defaultStartValue; } - if (this.getFilterOptionByName('sliderStartValue') !== undefined || this.columnFilter?.minValue !== undefined) { + if (getFilterOptionByName(this.columnFilter, 'sliderStartValue') !== undefined || this.columnFilter?.minValue !== undefined) { this._currentValue = defaultStartValue; } @@ -434,27 +430,12 @@ export class SliderFilter implements Filter { this._sliderRightElm?.classList[addRemoveCmd]('focus'); } - /** - * Get option from filter.params PR filter.filterOptions - * @deprecated this should be removed when slider filterParams are replaced by filterOptions - */ - protected getFilterOptionByName(optionName: string, defaultValue?: string | number | boolean): T { - let outValue: string | number | boolean | undefined; - if (this.columnFilter.filterOptions?.[optionName as keyof SliderRangeOption] !== undefined) { - outValue = this.columnFilter.filterOptions[optionName as keyof SliderRangeOption]; - } else if (this.filterParams?.[optionName] !== undefined) { - console.warn('[Slickgrid-Universal] All filter.params were moved, and deprecated, to "filterOptions" as SliderOption for better typing support.'); - outValue = this.filterParams?.[optionName]; - } - return outValue as T ?? defaultValue ?? undefined; - } - protected slideLeftInputChanged() { const sliderLeftVal = parseInt(this._sliderLeftElm?.value ?? '', 10); const sliderRightVal = parseInt(this._sliderRightElm?.value ?? '', 10); - if (this._sliderLeftElm && sliderRightVal - sliderLeftVal <= this.getFilterOptionByName('stopGapBetweenSliderHandles', GAP_BETWEEN_SLIDER_HANDLES)) { - this._sliderLeftElm.value = String(sliderLeftVal - this.getFilterOptionByName('stopGapBetweenSliderHandles', GAP_BETWEEN_SLIDER_HANDLES)); + if (this._sliderLeftElm && sliderRightVal - sliderLeftVal <= getFilterOptionByName(this.columnFilter, 'stopGapBetweenSliderHandles', GAP_BETWEEN_SLIDER_HANDLES)!) { + this._sliderLeftElm.value = String(sliderLeftVal - getFilterOptionByName(this.columnFilter, 'stopGapBetweenSliderHandles', GAP_BETWEEN_SLIDER_HANDLES)!); } this._sliderRangeContainElm.title = this.sliderType === 'double' ? `${sliderLeftVal} - ${sliderRightVal}` : `${sliderRightVal}`; @@ -474,7 +455,7 @@ export class SliderFilter implements Filter { this.updateTrackFilledColorWhenEnabled(); this.changeBothSliderFocuses(true); - const hideSliderNumbers = this.getFilterOptionByName('hideSliderNumber') ?? this.getFilterOptionByName('hideSliderNumbers'); + const hideSliderNumbers = getFilterOptionByName(this.columnFilter, 'hideSliderNumber') ?? getFilterOptionByName(this.columnFilter, 'hideSliderNumbers'); if (!hideSliderNumbers && this._leftSliderNumberElm?.textContent) { this._leftSliderNumberElm.textContent = this._sliderLeftElm?.value ?? ''; } @@ -484,15 +465,15 @@ export class SliderFilter implements Filter { const sliderLeftVal = parseInt(this._sliderLeftElm?.value ?? '', 10); const sliderRightVal = parseInt(this._sliderRightElm?.value ?? '', 10); - if (this.sliderType === 'double' && this._sliderRightElm && sliderRightVal - sliderLeftVal <= this.getFilterOptionByName('stopGapBetweenSliderHandles', GAP_BETWEEN_SLIDER_HANDLES)) { - this._sliderRightElm.value = String(sliderLeftVal + this.getFilterOptionByName('stopGapBetweenSliderHandles', GAP_BETWEEN_SLIDER_HANDLES)); + if (this.sliderType === 'double' && this._sliderRightElm && sliderRightVal - sliderLeftVal <= getFilterOptionByName(this.columnFilter, 'stopGapBetweenSliderHandles', GAP_BETWEEN_SLIDER_HANDLES)!) { + this._sliderRightElm.value = String(sliderLeftVal + getFilterOptionByName(this.columnFilter, 'stopGapBetweenSliderHandles', GAP_BETWEEN_SLIDER_HANDLES)!); } this.updateTrackFilledColorWhenEnabled(); this.changeBothSliderFocuses(true); this._sliderRangeContainElm.title = this.sliderType === 'double' ? `${sliderLeftVal} - ${sliderRightVal}` : `${sliderRightVal}`; - const hideSliderNumbers = this.getFilterOptionByName('hideSliderNumber') ?? this.getFilterOptionByName('hideSliderNumbers'); + const hideSliderNumbers = getFilterOptionByName(this.columnFilter, 'hideSliderNumber') ?? getFilterOptionByName(this.columnFilter, 'hideSliderNumbers'); if (!hideSliderNumbers && this._rightSliderNumberElm?.textContent) { this._rightSliderNumberElm.textContent = this._sliderRightElm?.value ?? ''; } @@ -524,7 +505,7 @@ export class SliderFilter implements Filter { } protected updateTrackFilledColorWhenEnabled() { - if (this.getFilterOptionByName('enableSliderTrackColoring') && this._sliderRightElm) { + if (getFilterOptionByName(this.columnFilter, 'enableSliderTrackColoring') && this._sliderRightElm) { let percent1 = 0; if (this._sliderLeftElm) { percent1 = ((+this._sliderLeftElm.value - +this._sliderLeftElm.min) / (this.sliderOptions?.maxValue ?? 0 - +this._sliderLeftElm.min)) * 100; @@ -532,7 +513,7 @@ export class SliderFilter implements Filter { const percent2 = ((+this._sliderRightElm.value - +this._sliderRightElm.min) / (this.sliderOptions?.maxValue ?? 0 - +this._sliderRightElm.min)) * 100; const bg = 'linear-gradient(to right, %b %p1, %c %p1, %c %p2, %b %p2)' .replace(/%b/g, '#eee') - .replace(/%c/g, this.getFilterOptionByName('sliderTrackFilledColor') || this._sliderTrackFilledColor || DEFAULT_SLIDER_TRACK_FILLED_COLOR) + .replace(/%c/g, getFilterOptionByName(this.columnFilter, 'sliderTrackFilledColor') || this._sliderTrackFilledColor || DEFAULT_SLIDER_TRACK_FILLED_COLOR) .replace(/%p1/g, `${percent1}%`) .replace(/%p2/g, `${percent2}%`); diff --git a/packages/common/src/interfaces/autocompleterOption.interface.ts b/packages/common/src/interfaces/autocompleterOption.interface.ts index 55a954686..3f055b084 100644 --- a/packages/common/src/interfaces/autocompleterOption.interface.ts +++ b/packages/common/src/interfaces/autocompleterOption.interface.ts @@ -17,6 +17,9 @@ export interface AutocompleterOption extends P /** defaults to false, force the user to start typing a value in the search input */ forceUserInput?: boolean; + /** defaults to false, do we want to hide the clear date button? */ + hideClearButton?: boolean; + /** * renderItem option is to simply provide a Template and decide which custom Layout to use * diff --git a/packages/common/src/interfaces/columnEditor.interface.ts b/packages/common/src/interfaces/columnEditor.interface.ts index b177ab416..a81da5a0a 100644 --- a/packages/common/src/interfaces/columnEditor.interface.ts +++ b/packages/common/src/interfaces/columnEditor.interface.ts @@ -157,7 +157,7 @@ export interface ColumnEditor { * Use "params" to pass any type of arguments to your Custom Editor * or regular Editor like the Editors.float * for example, if we don't want the slider number we could write - * params: { hideSliderNumber: true } + * params: { decimalPlaces: 2 } */ params?: any; } diff --git a/packages/common/src/interfaces/flatpickrOption.interface.ts b/packages/common/src/interfaces/flatpickrOption.interface.ts index 7909e72a8..558b97401 100644 --- a/packages/common/src/interfaces/flatpickrOption.interface.ts +++ b/packages/common/src/interfaces/flatpickrOption.interface.ts @@ -76,6 +76,9 @@ export interface FlatpickrOption { /** Allows using a custom date formatting function instead of the built-in handling for date formats using dateFormat, altFormat, etc. */ formatDate?: (dateObj: Date, format: string, locale: Locale) => string; + /** defaults to false, do we want to hide the clear date button? */ + hideClearButton?: boolean; + /** defaults to 1, adjusts the step for the hour input (incl. scrolling) */ hourIncrement?: number; diff --git a/packages/common/src/interfaces/index.ts b/packages/common/src/interfaces/index.ts index a18fe475a..642fd2568 100644 --- a/packages/common/src/interfaces/index.ts +++ b/packages/common/src/interfaces/index.ts @@ -98,6 +98,7 @@ export * from './headerMenuItems.interface'; export * from './headerMenuOption.interface'; export * from './hideColumnOption.interface'; export * from './htmlElementPosition.interface'; +export * from './inputOption.interface'; export * from './itemMetadata.interface'; export * from './keyTitlePair.interface'; export * from './locale.interface'; diff --git a/packages/common/src/interfaces/inputOption.interface.ts b/packages/common/src/interfaces/inputOption.interface.ts new file mode 100644 index 000000000..88ec3829b --- /dev/null +++ b/packages/common/src/interfaces/inputOption.interface.ts @@ -0,0 +1,23 @@ +export interface InputNumericOption { + /** how many decimal places does the number has? */ + decimalPlaces?: number; + + /** defaults to "." and will be used to separate decimals, ie: $12.55 */ + decimalSeparator?: number; + + /** defaults to false, do we want to display parentheses around negative numbers, ie: ($10.55) */ + displayNegativeNumberWithParentheses?: boolean; + + /** how many minimum decimals to show? */ + minDecimal?: number; + + /** how many maximum decimals to show? */ + maxDecimal?: number; + + /** defaults to "," and represents the separator to use to separate thousand numbers, ie: 1,000,000.00 */ + thousandSeparator?: string; +} + +export interface InputMaskOption { + mask?: string; +} \ No newline at end of file