whizkydee/dropd

⚡️Zero-dependency minimalistic dropdown component for React and Vue.

dropd's Issues

Add feature to reveal currently selected item

By default, add a selected class name to the currently selected item on the list to enable for styling and extra logic.

Write unit and E2E tests for both packages via Cypress

Add support for slots

Make it possible for the user to completely take control of dropd-list, dropd-item and dropd-toggle via Vue slots and a similar workaround in React, with relevant props bound to them.

⚒ Proposed API

• React

<Dropd {...props}>
  <Dropd.List>
      ...
      <Dropd.Item>
        ...
    </Dropd.Item>
  </Dropd.List>

  <Dropd.Toggle>
    ...
  </Dropd.Toggle>
</Dropd>

• Vue

<dropd {...props}>
  <ul slot="dropd-list">
    ...
    <li slot="dropd-item">
      ...
    </li>
  </ul>

  <button slot="dropd-toggle">
    ...
  </button>
</dropd>

Write unit tests for both packages

Improve overall Accessibility

Right now, a couple of things are missing in terms of accessibility of the elements. These include:

• Proper tab indexing
• Functional focus and blur states... etc

We should fix this.

Add `revealOn` feature

Add a revealOn prop which would accept either mousedown or mouseover values (with default set to mousedown), and would only trigger dropd on that event.

Add `noDuplicates` feature

Add a noDuplicates prop which would ensure that all items in the list prop is unique.

Already started working on it -- was good for an array of strings, but requires extra logic to filter duplicates from an array of objects.

All events are prevented when closeOnBlurFn is triggered from v1.0.2

These lines: react-dropd/index.js#L80-L81 and vue-dropd/index.vue#L149-L50 are totally irrelevant, and they have adverse effects...

For instance, when an <input> is focused, the event is prevented, so focus doesn't actually happen.

Also, it prevent's closeDropd on mousedown for all other dropdowns.

Styling dropdown

Hi @whizkydee, thanks for putting this great library!

I couldn't find any instruction on customizing the style, how do you recommend doing it?