Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
<form data-controller="form" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="x2wctWrf_CxBvw-kDgHa2myxb60s7joxiZRD6Z8AdS-RVfm0T5KdF-fQTLvczG4r3iJ-SQ5AMsWoIKv4BdoXyg" autocomplete="off" />
  <input placeholder="••••••" autocorrect="off" autocapitalize="none" spellcheck="false" autocomplete="one-time-code" minlength="6" maxlength="6" class="input input--otp" style="--input-otp-size: 18ch" data-action="paste->form#submit" data-1p-ignore="true" size="6" type="text" name="code" id="code" />
</form>
1
2
3
<%= form_with url: nil, data: { controller: "form" } do |form| %>
  <%= form.text_field :code, placeholder: "••••••", autocorrect: "off", autocapitalize: "none", spellcheck: false, autocomplete: "one-time-code", minlength: 6, maxlength: 6, class: "input input--otp", style: "--input-otp-size: 18ch", data: { action: "paste->form#submit", "1p-ignore": true } %>
<% end %>
1
2
3
4
5
6
7
8
.input--otp {
  font-family: ui-monospace, monospace;
  font-weight: var(--font-black);
  inline-size: var(--input-otp-size, auto);
  letter-spacing: 1ch;
  min-inline-size: var(--input-otp-size, auto);
  text-align: center;
}
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
41
42
43
44
45
46
import { Controller } from "@hotwired/stimulus"
import debounce from "https://esm.sh/just-debounce-it@3.2.0?standalone"
export default class extends Controller {
  static targets = [ "cancel", "submit" ]
  initialize() {
    this.debouncedSubmit = debounce(this.submit.bind(this), 300)
  }
  submit({ params: { submitter } }) {
    if (submitter) {
      this.element.requestSubmit(this.#find(submitter))
    } else {
      this.element.requestSubmit()
    }
  }
  reset() {
    this.element.reset()
  }
  cancel() {
    this.cancelTarget?.click()
  }
  preventAttachment(event) {
    event.preventDefault()
  }
  disableSubmitWhenInvalid() {
    if (this.element.checkValidity()) {
      this.submitTarget.removeAttribute("disabled")
    } else {
      this.submitTarget.toggleAttribute("disabled", true)
    }
  }
  #find(id) {
    return document.getElementById(id) || this.#notFound(id)
  }
  #notFound(id) {
    throw new Error(`Submitter with ID "${id}" not found`)
  }
}

No notes provided.