Mrc 4808 Add Base Select #4
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## mrc-4811 #4 +/- ##
==========================================
Coverage 100.00% 100.00%
==========================================
Files 2 6 +4
Lines 25 88 +63
Branches 7 25 +18
==========================================
+ Hits 25 88 +63 ☔ View full report in Codecov by Sentry. |
src/mixins/useBaseSelect.ts
Outdated
| expandOptions(flatOptions.value, optionPath); | ||
| }; | ||
|
|
||
| const collapse = (optionPath: string[]) => { |
There was a problem hiding this comment.
| const collapse = (optionPath: string[]) => { | |
| const collapse = (optionPath: string[]) => { |
vite.config.ts
Outdated
| @@ -10,7 +10,7 @@ export default defineConfig({ | |||
| css: true, | |||
| coverage: { | |||
| provider: "istanbul", | |||
| include: ["src/components"], | |||
| include: ["src/components", "src/utils.ts"], | |||
There was a problem hiding this comment.
mixins dir too? Is there an easier way to do to this, maybe include all src but exclude the files we don't want to test?
There was a problem hiding this comment.
Agreed, feels safer to include everything be default, then exclude selectively, otherwise to easy to forget to include new code.
There was a problem hiding this comment.
done, am just including src now
| @@ -0,0 +1,123 @@ | |||
| <template> | |||
| <div> | |||
| <c-dropdown auto-close="outside" | |||
There was a problem hiding this comment.
Do you want this for the base select? I thought clicking inside for a single select should close the dropdown?
With this set what is the behaviour when you select an item from the drop down?
There was a problem hiding this comment.
Looking at this in the single select PR looks like this isn't an issue. When we click within the single select it is closing nicely, where that closing is handled by SingleSelect. Is this set to outside here to that when you click an arrow in the hierarchy it does not close the dropdown?
There was a problem hiding this comment.
exactly, this is there so the dropdown doesnt automatically close when we click the chevrons!
Just seen this in the next PR! |
Still won't be able to see anything in the demo yet, but we are very close. This is the base for both the single select and the multi select.
Thanks @EmmaLRussell for the suggestion to use mixins in #2. It uses a simple mixin to extract out the expand, collapse and flattenOptions logic. The structure of it is very similar to the single select component you guys reviews in #1 however note the slot in the
c-dropdown-toggle, that will come in handy for when we have to display the tags for the multiselect! The other difference is that thedropdown-itemcomponent is now also given this conditionalcheckedprop. Otherwise I believe everything in the template is the same as the single select so hopefully shouldnt be too bad to review.