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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="h-96 w-full">
<p class="text-gray-500">
  Please press
  <kdb class="mx-1 elevate-kdb">Cmd</kdb>
  +
  <kdb class="mx-1 elevate-kdb">k</kdb> to open the command palette.
</p>
<dialog data-controller="command-palette" data-global-target="commandPalette" data-command-palette-target="dialog" data-command-palette-key-value="k" class="elevate-command-palette">
  <div class="p-4">
    <div>
      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
        <svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
      </div>
      <div class="mt-3 text-center sm:mt-5">
        <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Payment successful</h3>
        <div class="mt-2">
          <p class="text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet
            labore.</p>
        </div>
      </div>
    </div>
    <div class="mt-5 sm:mt-6">
      <button type="button" class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Go
        back to dashboard
      </button>
    </div>
  </div>
</dialog></div>
1
2
3
4
5
6
7
8
9
10
11
12
<div class="h-96 w-full">
  <p class="text-gray-500">
    Please press
    <%= elevate_kdb(classes: 'mx-1') { 'Cmd' } %>
    +
    <%= elevate_kdb(classes: 'mx-1') { key } %> to open the command palette.
  </p>
  <%= render Elevate::CommandPaletteComponent.new(key: key) do %>
    <%= render "products/modal" %>
  <% end %>
</div>

No notes provided.

Param Description Input

key to press to open the command palette

app/assets/stylesheets/components/command_palette.css

1
2
3
4
5
@layer components {
  .elevate-command-palette[open] {
    @apply backdrop:bg-gray-500/75 backdrop:backdrop-blur-md p-2 z-50 bg-white w-full max-w-4xl inset-0 rounded-lg shadow-xl fixed top-1/2 left-1/2 overflow-hidden -translate-x-1/2 -translate-y-1/2;
  }
}

app/assets/javascripts/components/command_palette_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
40
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = ['dialog']
  static values = {
    key: { type: String, default: 'k' },
  }
  connect () {
    // needed because an ESC keydown event does not trigger the close function
    this.dialogTarget.addEventListener("close", this.close.bind(this))
    document.addEventListener('keydown', this.handleKeydown.bind(this))
  }
  disconnect () {
    document.removeEventListener('keydown', this.handleKeydown.bind(this))
    this.dialogTarget.removeEventListener('close', this.close.bind(this))
  }
  handleKeydown (event) {
    if ((event.metaKey || event.ctrlKey) && event.key === this.keyValue) {
      this.toggle();
    }
  }
  toggle () {
    if (this.dialogTarget.open) {
      this.dialogTarget.close()
      document.body.classList.remove("overflow-hidden")
    } else {
      this.dialogTarget.showModal()
      document.body.classList.add("overflow-hidden")
    }
  }
  close () {
    document.body.classList.remove("overflow-hidden");
  }
}