feat: add function support for optionLabel and optionInfo#625
Open
lukasmatta wants to merge 5 commits into
Open
Conversation
…for-optionlabeloptionvalueoptioninfo-in-cpsselect
Coverage report for library
Test suite run success761 tests passing in 29 suites. Report generated by 🧪jest coverage report action from 601b9c2 |
Playwright test results
Details
|
lukasmatta
changed the title
…for-optionlabeloptionvalueoptioninfo-in-cpsselect
lukasmatta
requested review from
TerranceKhumalo-absa and
korel-san
as code owners
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds function-based option key support to select, autocomplete, and tree dropdown components so labels, values, and info text can be derived from option objects.
Changes:
- Introduces a shared
OptionKeyutility and uses it in internal pipes/components. - Updates select/autocomplete/tree dropdown rendering and selection logic to resolve string or function option keys.
- Adds autocomplete tests and composition examples demonstrating function-based option labels.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
projects/cps-ui-kit/src/public-api.ts |
Exports the new option key type. |
projects/cps-ui-kit/src/lib/utils/internal/option-utils.ts |
Adds shared option key resolution helper. |
projects/cps-ui-kit/src/lib/pipes/internal/label-by-value.pipe.ts |
Supports function-based value/label keys. |
projects/cps-ui-kit/src/lib/pipes/internal/combine-labels.pipe.ts |
Supports function-based keys for combined labels. |
projects/cps-ui-kit/src/lib/pipes/internal/check-option-selected.pipe.ts |
Supports function-based option values. |
projects/cps-ui-kit/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts |
Supports function-based tree labels/info. |
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts |
Resolves option values via string or function keys. |
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html |
Renders select labels/info via the new helper. |
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts |
Resolves labels, values, filtering, and selection with function keys. |
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.spec.ts |
Adds tests for function-based autocomplete keys. |
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html |
Renders autocomplete labels/info via the new helper. |
projects/composition/src/app/pages/tree-select-page/tree-select-page.component.ts |
Adds demo label function. |
projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html |
Adds tree select example using function labels. |
projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts |
Adds demo label function. |
projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html |
Adds tree autocomplete example using function labels. |
projects/composition/src/app/pages/select-page/select-page.component.ts |
Adds demo nested code resolver. |
projects/composition/src/app/pages/select-page/select-page.component.html |
Adds select example using function labels. |
projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts |
Adds code sample for function-based autocomplete labels. |
projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.ts |
Adds demo nested code resolver. |
projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html |
Adds autocomplete example using function labels. |
Comment on lines
+1
to
+3
| export type OptionKey = string | ((option: any) => any); | ||
|
|
||
| export function getOptionProp(option: any, key: OptionKey): any { |
Comment on lines
+198
to
+201
| * Name of the label field of an option, or a function that receives the option and returns the label. | ||
| * @group Props | ||
| */ | ||
| @Input() optionLabel = 'label'; | ||
| @Input() optionLabel: OptionKey = 'label'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds support for function-based option keys (
optionLabel,optionValue, andoptionInfo) to thecps-autocomplete,cps-select,cps-tree-autocomplete, andcps-tree-selectcomponents. This allows developers to specify a function to compute the display label, value, or info text for options, enabling more flexible and powerful customization (such as accessing nested properties or generating computed labels). The change is demonstrated through new examples and is thoroughly tested.The most important changes are:
Core component enhancements:
CpsAutocompleteComponentto accept a function or string foroptionLabel,optionValue, andoptionInfo, and to use a new utility functiongetOptionPropfor property access throughout the component. This enables function-based option keys for labels, values, and info fields. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]cps-autocompleteandcps-selectto usegetPropfor rendering option labels and info, ensuring that function-based option keys are supported in the UI. [1] [2] [3] [4] [5] [6]Documentation and examples:
autocomplete-page,select-page,tree-autocomplete-page,tree-select-page) to showcase function-based option keys, including examples using nested properties and computed labels. [1] [2] [3] [4] [5] [6] [7] [8]Testing:
CpsAutocompleteComponentto ensure correct behavior with function-based option keys, including rendering, filtering, selection, and chip display.These changes make the UI components more flexible and developer-friendly, allowing for advanced use cases such as dynamic labels and values derived from complex or nested option data.
Release notes: