feat(tw): init listbox component #4421

davidruvolo51 · 2024-10-31T15:52:40Z

What are the main changes you did:

created a listbox component as an alternative to select component (see feat(tw): I would a listbox component for advanced customisation and control over how select inputs are rendered #4446).
added e2e tests for the component
added story
integrated component into form components

how to test:

navigate to the story
interact with the component using the mouse and keyboard (see issue feat(tw): I would a listbox component for advanced customisation and control over how select inputs are rendered #4446 for a lists of keyboard events)

todo:

updated docs in case of new feature
added/updated tests
added/updated testplan to include a test for this fix, including ref to bug using # notation
Add support for Objects, booleans, and numbers as input.

apps/tailwind-components/assets/css/main.css

davidruvolo51 · 2024-11-08T10:29:39Z

See issue #4446

davidruvolo51 · 2024-11-12T14:51:37Z

Need to add docs

apps/tailwind-components/assets/css/main.css

apps/tailwind-components/components/input/Listbox.vue

mswertz

I would want to make sure that CheckboxGroup, RadioGroup, Lisstbox share types where they can.

And then the make the 'ref' version of those a wrapper around them as you can see in the RefInput PR #4585

apps/metadata-utils/src/types.ts

apps/tailwind-components/components/form/Field.vue

mswertz · 2025-01-23T08:44:25Z

apps/tailwind-components/components/form/Field.vue

+const refData = ref();
+
+onMounted(async () => {
+  if (["ONTOLOGY", "ONTOLOGY_ARRAY"].includes(props.column.columnType)) {


I don't want this here.

meanwhile I don't mind this here temporarily if we have that mutual understanding.

apps/tailwind-components/components/input/listbox/index.vue

so many chages, need new approval

mswertz · 2025-01-27T10:44:51Z

great, in discussion we concluded:

listbox doesn't need multiple select now, we will address this outside (e.g. using filter wells that user can the remove; every select results in more wells)
search we will do later. We envision a slot for the search for use cases where search need to be in the select. The handling of search events can then handled outside to filter of options.
we will remove the form integration for now and move that to the refinput PR

mswertz

my main requested changes is to approach listbox as part of a family of option select inputs, together with checkboxgroup and radiogroup. So make sure their interface is the same.

In addition I am confused by your use of refs to link state of the list items. I would have expected simply to use emit(update:modelValue) to happen in the list. I think this non-standard approach makes maintenance more complex and has the risk of unforseen side effects as we might bypass the normal vue state/refresh handling.

mswertz · 2025-01-28T08:36:21Z

apps/metadata-utils/src/types.ts

@@ -104,3 +104,10 @@ export type columnValue = string | number | boolean | columnValueObject;
 interface columnValueObject {
  [x: string]: columnValue;
 }
+
+export type IInputValue = string | number | boolean;


I think the IInputValue should be integrated with columnValue types?

primitiveColumValue = string | number | boolean;

columnValue = primitiveColumnValue | columnValueObject | columnValueObject[]

columnValueObject = [x: string]: columnValue

apps/tailwind-components/assets/css/main.css

apps/tailwind-components/components/form/Field.vue

mswertz · 2025-01-28T08:39:55Z

apps/tailwind-components/components/form/Field.vue

+const refData = ref();
+
+onMounted(async () => {
+  if (["ONTOLOGY", "ONTOLOGY_ARRAY"].includes(props.column.columnType)) {


meanwhile I don't mind this here temporarily if we have that mutual understanding.

mswertz · 2025-01-28T08:44:22Z

apps/metadata-utils/src/types.ts

+
+export type IInputValue = string | number | boolean;
+
+export type IInputValueLabel = {


can we please merge this type with the same time for checkboxgroup and radiogroup?

apps/tailwind-components/components/input/listbox/List.vue

apps/tailwind-components/components/input/listbox/ListItem.vue

mswertz · 2025-01-28T08:52:32Z

apps/tailwind-components/types/listbox.ts

+}
+
+export interface IListboxLiRef {
+  li: HTMLLIElement;


I don't understand why we would need this html element management?

mswertz

we discussed that ref are needed for aria behavior and that we will do other refactorings after the merge.

sonarqubecloud · 2025-01-28T10:00:02Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Merging now and will refactor in the next PR

This reverts commit c439a85.

davidruvolo51 added 2 commits October 31, 2024 16:51

feat: added tw classes for listbox

319bba3

initial listbox component

209e2d9

davidruvolo51 added the tailwind label Oct 31, 2024

davidruvolo51 self-assigned this Oct 31, 2024

davidruvolo51 added 3 commits November 1, 2024 15:08

revised listbox classes

4bf9393

feat: separated elements into child components

42d7c8e

temp: reverted to single component

f05673f

connoratrug reviewed Nov 6, 2024

View reviewed changes

apps/tailwind-components/assets/css/main.css Outdated Show resolved Hide resolved

davidruvolo51 added 3 commits November 8, 2024 07:12

finalised structure and added initial interactive events

b09d82a

feat: added more events; reorganised binding of events

be06742

updated example for testing interactivity

97be2b7

davidruvolo51 added 6 commits November 8, 2024 11:49

ran formatter; added missing files

3ddd24a

fix: added missing base style

6751bfd

feat: added/fixed keyboard events

2afd5b5

fix: adjusted element identifier pattern

f2839b6

feat: added e2e test

98f3667

chore: merged master

a3bbef7

davidruvolo51 marked this pull request as ready for review November 12, 2024 14:50

feat: added additional tw styles; added keyboard prevents

b3f5505

davidruvolo51 requested a review from connoratrug November 13, 2024 15:13

davidruvolo51 and others added 5 commits November 18, 2024 09:17

fix: corrected input types

1055d91

chore: finialised story

21010e9

fix: set selected value focus when menu opens

4db42b0

docs: added option to switch data types in story

76c9204

Merge branch 'master' into feat/tw-listbox

809be83

connoratrug reviewed Nov 20, 2024

View reviewed changes

apps/tailwind-components/assets/css/main.css Show resolved Hide resolved

connoratrug reviewed Nov 20, 2024

View reviewed changes

apps/tailwind-components/assets/css/main.css Outdated Show resolved Hide resolved

connoratrug reviewed Nov 20, 2024

View reviewed changes

apps/tailwind-components/components/input/Listbox.vue Outdated Show resolved Hide resolved

davidruvolo51 added 7 commits January 20, 2025 11:07

merged master

3544ea8

feat: isolated elements into components

fa01c1a

created child listbox components

a5b4742

merged listbox v2 branch; changed typing

18a7678

removed file

ea406b8

feat: improved ref handling; simplified typing;

d45100b

ran formatter

90ec103

mswertz reviewed Jan 23, 2025

View reviewed changes

merged master

db46a51

minor revisions to typing; fixed e2e tests

f4107a5

mswertz requested changes Jan 28, 2025

View reviewed changes

fix: removed remaining modelvalue test

d4dea39

mswertz approved these changes Jan 28, 2025

View reviewed changes

davidruvolo51 requested review from chinook25, mswertz and connoratrug and removed request for chinook25, connoratrug and mswertz January 28, 2025 10:17

davidruvolo51 merged commit c439a85 into master Jan 28, 2025
6 of 7 checks passed

davidruvolo51 deleted the feat/tw-listbox branch January 28, 2025 10:30

connoratrug added a commit that referenced this pull request Jan 29, 2025

Revert "feat(tw): added new listbox component (#4421)"

6ceadba

This reverts commit c439a85.

connoratrug mentioned this pull request Jan 29, 2025

Revert "feat(tw): init listbox component" #4645

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tw): init listbox component #4421

feat(tw): init listbox component #4421

davidruvolo51 commented Oct 31, 2024 •

edited

Loading

davidruvolo51 commented Nov 8, 2024

davidruvolo51 commented Nov 12, 2024

mswertz left a comment

mswertz Jan 23, 2025

mswertz Jan 28, 2025

mswertz commented Jan 27, 2025

mswertz left a comment

mswertz Jan 28, 2025

mswertz Jan 28, 2025

mswertz Jan 28, 2025

mswertz Jan 28, 2025

mswertz left a comment

sonarqubecloud bot commented Jan 28, 2025


		export type IInputValue = string \| number \| boolean;

		export type IInputValueLabel = {

feat(tw): init listbox component #4421

feat(tw): init listbox component #4421

Conversation

davidruvolo51 commented Oct 31, 2024 • edited Loading

davidruvolo51 commented Nov 8, 2024

davidruvolo51 commented Nov 12, 2024

mswertz left a comment

Choose a reason for hiding this comment

mswertz Jan 23, 2025

Choose a reason for hiding this comment

mswertz Jan 28, 2025

Choose a reason for hiding this comment

mswertz commented Jan 27, 2025

mswertz left a comment

Choose a reason for hiding this comment

mswertz Jan 28, 2025

Choose a reason for hiding this comment

mswertz Jan 28, 2025

Choose a reason for hiding this comment

mswertz Jan 28, 2025

Choose a reason for hiding this comment

mswertz Jan 28, 2025

Choose a reason for hiding this comment

mswertz left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Jan 28, 2025

Quality Gate passed

davidruvolo51 commented Oct 31, 2024 •

edited

Loading