selectbox.js 900 B

1234567891011121314151617181920212223242526272829303132333435
  1. const html = require('choo/html');
  2. module.exports = function(selected, options, translate, changed, htmlId) {
  3. function choose(event) {
  4. if (event.target.value != selected) {
  5. console.log(
  6. 'Selected new value from dropdown',
  7. htmlId,
  8. ':',
  9. selected,
  10. '->',
  11. event.target.value
  12. );
  13. changed(event.target.value);
  14. }
  15. }
  16. return html`
  17. <select
  18. id="${htmlId}"
  19. class="appearance-none cursor-pointer border-default rounded-default bg-grey-10 hover:border-primary focus:border-primary pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
  20. data-selected="${selected}"
  21. onchange="${choose}"
  22. >
  23. ${options.map(
  24. value =>
  25. html`
  26. <option value="${value}" ${value == selected ? 'selected' : ''}>
  27. ${translate(value)}
  28. </option>
  29. `
  30. )}
  31. </select>
  32. `;
  33. };