Css Zero Showcase

Previews

No matching results.

Pages

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
<form class="card flex flex-col gap" data-controller="form" data-action="input->form#disableSubmitWhenInvalid" autocomplete="off" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Ob7L_L5m4kuz8uPTkTRSzYNe_Enc4yyR3UuA--xllSY1iSc46hFQpus2nAttMCdL8fdERIjc5Tj7XG2iPDJt-g" autocomplete="off" />
  <div class="flex flex-col">
    <h3 class="font-semibold leading-none mbe-1">Create project</h3>
    <p class="text-sm text-subtle">Deploy your new project in one-click.</p>
  </div>
  <div class="flex flex-col gap mb-2">
    <div class="flex flex-col gap-half">
      <label class="text-sm font-medium leading-none" for="name">Name (required)</label>
      <input placeholder="Name of your project" class="input" required="required" type="text" name="name" id="name" />
    </div>
    <div class="flex flex-col gap-half">
      <label class="text-sm font-medium leading-none" for="framework">Framework</label>
      <select class="input" name="framework" id="framework"><option value="ruby">Ruby on Rails</option>
        <option value="laravel">Laravel</option>
        <option value="next">Next</option></select>
    </div>
  </div>
  <div class="flex items-center">
    <input type="submit" name="commit" value="Create" class="btn btn--primary" disabled="disabled" data-form-target="submit" data-disable-with="Create" />
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%= form_with url: nil, html: { autocomplete: "off" }, class: "card flex flex-col gap", data: { controller: "form", action: "input->form#disableSubmitWhenInvalid" } do |form| %>
  <div class="flex flex-col">
    <h3 class="font-semibold leading-none mbe-1">Create project</h3>
    <p class="text-sm text-subtle">Deploy your new project in one-click.</p>
  </div>
  <div class="flex flex-col gap mb-2">
    <div class="flex flex-col gap-half">
      <%= form.label :name, "Name (required)", class: "text-sm font-medium leading-none" %>
      <%= form.text_field :name, placeholder: "Name of your project", class: "input", required: true %>
    </div>
    <div class="flex flex-col gap-half">
      <%= form.label :framework, class: "text-sm font-medium leading-none" %>
      <%= form.select :framework, [["Ruby on Rails", "ruby"], ["Laravel", "laravel"], ["Next", "next"]], {}, class: "input" %>
    </div>
  </div>
  <div class="flex items-center">
    <%= form.submit "Create", class: "btn btn--primary", disabled: true, data: { form_target: "submit" } %>
  </div>
<% end %>
CSS is not required or multiple files are needed, check the notes.
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
47
48
49
50
51
52
53
54
55
56
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" ]
  static values = { debounceTimeout: { type: Number, default: 300 } }
  initialize() {
    this.debouncedSubmit = debounce(this.debouncedSubmit.bind(this), this.debounceTimeoutValue)
  }
  submit({ params: { submitter } }) {
    if (submitter) {
      this.element.requestSubmit(this.#find(submitter))
    } else {
      this.element.requestSubmit()
    }
  }
  debouncedSubmit(event) {
    this.submit(event)
  }
  submitToTopTarget() {
    this.element.setAttribute("data-turbo-frame", "_top")
    this.submit()
  }
  disableSubmitWhenInvalid() {
    if (this.element.checkValidity()) {
      this.submitTarget.removeAttribute("disabled")
    } else {
      this.submitTarget.toggleAttribute("disabled", true)
    }
  }
  reset() {
    this.element.reset()
  }
  cancel() {
    this.cancelTarget?.click()
  }
  preventAttachment(event) {
    event.preventDefault()
  }
  #find(id) {
    return document.getElementById(id) || this.#notFound(id)
  }
  #notFound(id) {
    throw new Error(`Submitter with ID "${id}" not found`)
  }
}

No notes provided.