mirror of
https://github.com/we-promise/sure.git
synced 2026-04-08 06:44:52 +00:00
4f0b2de4ef
* Basic listbox and popover controllers with temporary example * Separate select and menu controllers
17 lines
1.2 KiB
Plaintext
17 lines
1.2 KiB
Plaintext
<%# locals: (value: 'all') -%>
|
|
<% options = [['7D', 'last_7_days'], ['1M', 'last_30_days'], ["1Y", "last_365_days"], ['All', 'all']] %>
|
|
<div data-controller="select" data-select-active-class="bg-alpha-black-50" class="relative">
|
|
<button type="button" data-select-target="button" class="flex items-center gap-1 w-full border border-alpha-black-100 shadow-xs rounded-lg text-sm p-2 cursor-pointer">
|
|
<span data-select-target="buttonText" class="text-gray-900 text-sm"><%= options.find { |option| option[1] == value }[0] %></span>
|
|
<%= lucide_icon("chevron-down", class: "w-5 h-5 text-gray-500") %>
|
|
</button>
|
|
<input type="hidden" name="period" value="<%= value %>" data-select-target="input" data-auto-submit-form-target="auto">
|
|
<ul data-select-target="list" class="hidden absolute z-10 top-10 right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs">
|
|
<% options.each do |label, value| %>
|
|
<li tabindex="0" data-select-target="option" data-action="click->select#selectOption" data-value="<%= value %>" class="text-sm text-gray-900 rounded-lg cursor-pointer hover:bg-alpha-black-50 px-5 py-1">
|
|
<%= label %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|