feat(tw): init listbox component #4421
Conversation
|
See issue #4446 |
|
Need to add docs |
davidruvolo51
requested review from
chinook25
and removed request for
chinook25 and
connoratrug
…ing, minor ts revisions
…nts and their inputs
There was a problem hiding this comment.
really nice to be able to test it in the form context
few things i noticed while testing in the form:
- it does not show the required field message
- it does not close the dropdown when i select a other field
- in de default theme the selected item background color is the same a the page background color, as a result popdown feels a bit broken / strange ?
- the dropdown does not close when i click outside the form
- the select value does not right align with the oder field values
as notes in de code comments, i suggest to move the data fetch outside of the form component and preferably triggered from the component that requires the data ( lazy), else we and up with large if else blocks the do al kind of data fetches for different component types.
|
|
| @@ -97,3 +97,10 @@ export type columnValue = string | number | boolean | columnValueObject; | |||
| interface columnValueObject { | |||
| [x: string]: columnValue; | |||
| } | |||
|
|
|||
| export type IInputValue = string | number | boolean; | |||
There was a problem hiding this comment.
can we merge this with the other similar data type, I believe it is called ColumnValue?
This is special subset.
| @@ -35,30 +35,54 @@ function validate(value: columnValue) { | |||
|
|
|||
| formFieldInput.value.validate(value); | |||
| } | |||
|
|
|||
| const refData = ref(); | |||
There was a problem hiding this comment.
I am on the fence if we want to do this here. How will you implement search?
In my opinion it is best to organize the loading (lazily) per input so we can differentiate behaviors.
Which will be different between select, checkbox, and ontology.
| const refData = ref(); | ||
|
|
||
| onMounted(async () => { | ||
| if (["ONTOLOGY", "ONTOLOGY_ARRAY"].includes(props.column.columnType)) { |
| @@ -0,0 +1,369 @@ | |||
| <template> | |||
There was a problem hiding this comment.
So this component will be 'InputListbox'?
I would be happier if we move it to /components/input/Listbox
What are the main changes you did:
how to test:
todo: