Botyglot Components V0.0.1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="flex justify-center w-full">
  <div data-controller="dropdown" class="elevate-dropdown--global-container">
    <span data-action="click->dropdown#toggleMenu" class="elevate-dropdown--trigger">
      <span class="elevate-icon elevate-icon--scheme--primary elevate-icon--size--xl">
      </span>
    </span>
    <div role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" data-dropdown-target="menu" data-transition-enter="transition ease-out duration-100" data-transition-enter-from="transform opacity-0 scale-90" data-transition-enter-to="transform opacity-100 scale-100" data-transition-leave="transition ease-in duration-75" data-transition-leave-from="transform opacity-100 scale-100" data-transition-leave-to="transform opacity-0 scale-90" class="elevate-dropdown--menu-container hidden">
      <div class="elevate-dropdown--actions-container" role="none">
        <a href="#" class="elevate-link--scheme--primary block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View</a>
        <a href="#" class="elevate-link--scheme--primary block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a>
        <a href="#" class="elevate-link--scheme--primary block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Share</a>
        <a href="#" class="elevate-link--scheme--primary block px-4 py-2 text-sm text-red-700 hover:bg-gray-100">Delete</a>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="flex justify-center w-full">
  <%= render(Elevate::DropdownComponent.new) do |component| %>
    <% component.with_trigger do %>
      <%= elevate_icon(name: 'EllipsisHorizontal', scheme: :primary, size: :xl) %>
    <% end %>
    <% component.with_action do %>
      <%= elevate_link(url: "#", classes: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100") { "View" } %>
    <% end %>
    <% component.with_action do %>
      <%= elevate_link(url: "#", classes: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100") { "Edit" } %>
    <% end %>
    <% component.with_action do %>
      <%= elevate_link(url: "#", classes: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100") { "Share" } %>
    <% end %>
    <% component.with_action do %>
      <%= elevate_link(url: "#", classes: "block px-4 py-2 text-sm text-red-700 hover:bg-gray-100") { "Delete" } %>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.

app/assets/stylesheets/components/dropdown.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.elevate-dropdown--global-container {
  @apply relative inline-block text-left;
}
.elevate-dropdown--actions-container {
  @apply py-1;
}
.elevate-dropdown--menu-container {
  @apply absolute right-0 z-10 mt-2 w-[150px] origin-top-right rounded bg-white shadow-lg ring-1 ring-indigo-500/5 focus:outline-none;
}
.elevate-dropdown--trigger {
  @apply cursor-pointer;
}

app/assets/javascripts/components/dropdown_controller.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { Controller } from "@hotwired/stimulus";
import { transition } from "../helpers/transition";
export default class extends Controller {
  static targets = ["menu"];
  connect() {
    document.addEventListener('click', this.handleOutsideClick);
  }
  disconnect() {
    document.removeEventListener('click', this.handleOutsideClick);
  }
  toggleMenu(event) {
    event.preventDefault();
    event.stopPropagation();
    const dropdownControllers = this.application.controllers.filter(controller => controller instanceof this.constructor);
    dropdownControllers.forEach(controller => {
      if (controller !== this) {
        transition(controller.menuTarget, false)
      }
    });
    if (this.menuTarget.classList.contains('hidden')) {
      transition(this.menuTarget, true)
    } else {
      transition(this.menuTarget, false)
    }
  }
  handleOutsideClick = (event) => {
    if (this.menuTarget && !this.menuTarget.contains(event.target)) {
      transition(this.menuTarget, false)
    }
  }
}