Module: Klods::Components::Form

Included in:
Builders
Defined in:
lib/klods/components/form.rb

Instance Method Summary collapse

Instance Method Details

#checkbox(props) ⇒ Object 



103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
# File 'lib/klods/components/form.rb', line 103

def checkbox(props)
  props = props.transform_keys(&:to_s)
  label_text = props.delete("label")
  extra_class = props.delete("class")

  input_attrs = {"type" => "checkbox"}
  %w[name value checked disabled required form autofocus].each do |key|
    val = props.delete(key)
    input_attrs[key] = val unless val.nil?
  end

  cls = Core.class_names("klods-checkbox", Core.resolve_class(extra_class))
  Core.el(
    "label",
    props.merge("class" => cls.empty? ? nil : cls).compact,
    [Node.new("input", input_attrs), Core.el("span", {}, label_text)]
  )
end

#field(props, &block) ⇒ Object

field({ label: “Email”, required: true }) { |id| input(id: id, type: “email”) }



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
 
# File 'lib/klods/components/form.rb', line 14

def field(props, &block)
  props = props.transform_keys(&:to_s)
  label_text = props.delete("label")
  explicit_id = props.delete("id")
  help = props.delete("help")
  error = props.delete("error")
  required = props.delete("required")
  invalid = props.delete("invalid")
  extra_class = props.delete("class")

  id = explicit_id || Core.slug_id("klods-field", label_text.to_s)
  help_id = help ? "#{id}-help" : nil
  error_id = error ? "#{id}-error" : nil
  is_invalid = invalid || !!error

  described_by = is_invalid ? error_id : help_id

  aria_attrs = {}
  aria_attrs["aria-describedby"] = described_by if described_by
  aria_attrs["aria-invalid"] = "true" if is_invalid

  input_node = block.call(id)
  patched = _patch_aria_attrs(input_node, aria_attrs)

  field_cls = Core.class_names("klods-field", is_invalid ? "klods-field--invalid" : nil, Core.resolve_class(extra_class))
  label_cls = "klods-label#{" klods-label--required" if required}"

  children = [
    Core.el("label", {"for" => id, "class" => label_cls}, label_text),
    patched
  ]
  children << Core.el("p", {"id" => help_id, "class" => "klods-help"}, help) if help
  children << Core.el("p", {"id" => error_id, "class" => "klods-error", "role" => "alert"}, error) if error

  Core.el("div", props.merge("class" => field_cls.empty? ? nil : field_cls).compact, children)
end

#form(a = nil, b = nil, &block) ⇒ Object 



7
8
9
10
11
 
# File 'lib/klods/components/form.rb', line 7

def form(a = nil, b = nil, &block)
  props, children = Core.normalize_args(a, b)
  children = klods_capture(&block) if block
  Core.build(tag: "form", base: "klods-form", props: props, children: children)
end

#input(props = {}) ⇒ Object 



51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
# File 'lib/klods/components/form.rb', line 51

def input(props = {})
  props = props.transform_keys(&:to_s)
  type = props.delete("type")
  extra_class = props.delete("class")

  id = props["id"] || Core.slug_id(
    "klods-input",
    (props["aria-label"] || props["placeholder"] || type || "field").to_s
  )
  props["id"] = id

  cls = lambda do |extra = ""|
    Core.class_names("klods-input", extra, Core.resolve_class(extra_class)).then { |c| c.empty? ? nil : c }
  end

  case type
  when "range"
    initial = props["value"] || "50"
    Node.new("span", {"class" => cls.call("klods-input--range")}, [
      Node.new("input", props.merge("type" => "range"), nil),
      Core.el("output", {"for" => id}, initial.to_s)
    ])
  when "color"
    initial = props["value"] || "#000000"
    Node.new("span", {"class" => cls.call("klods-input--color")}, [
      Node.new("input", props.merge("type" => "color"), nil),
      Core.el("output", {"for" => id}, initial.to_s)
    ])
  else
    Node.new("input", props.merge("type" => type, "class" => cls.call).compact)
  end
end

#option(a = nil, b = nil, &block) ⇒ Object 



91
92
93
94
95
 
# File 'lib/klods/components/form.rb', line 91

def option(a = nil, b = nil, &block)
  props, children = Core.normalize_args(a, b)
  children = klods_capture(&block) if block
  Core.el("option", props, children)
end

#radio(props) ⇒ Object 



122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
# File 'lib/klods/components/form.rb', line 122

def radio(props)
  props = props.transform_keys(&:to_s)
  label_text = props.delete("label")
  extra_class = props.delete("class")

  input_attrs = {"type" => "radio"}
  %w[name value checked disabled required form autofocus].each do |key|
    val = props.delete(key)
    input_attrs[key] = val unless val.nil?
  end

  cls = Core.class_names("klods-radio", Core.resolve_class(extra_class))
  Core.el(
    "label",
    props.merge("class" => cls.empty? ? nil : cls).compact,
    [Node.new("input", input_attrs), Core.el("span", {}, label_text)]
  )
end

#radio_group(props, children) ⇒ Object 



141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
# File 'lib/klods/components/form.rb', line 141

def radio_group(props, children)
  props = props.transform_keys(&:to_s)
  legend_text = props.delete("legend")
  extra_class = props.delete("class")
  legend_id = legend_text ? Core.slug_id("klods-rg", legend_text) : nil

  cls = Core.class_names("klods-field", Core.resolve_class(extra_class))
  attrs = props.merge("role" => "group", "class" => cls.empty? ? nil : cls).compact
  attrs["aria-labelledby"] = legend_id if legend_id

  group_children = []
  group_children << Core.el("p", {"id" => legend_id, "class" => "klods-label"}, legend_text) if legend_text
  group_children.concat(Array(children))

  Core.el("div", attrs, group_children)
end

#select(a = nil, b = nil, &block) ⇒ Object 



84
85
86
87
88
89
 
# File 'lib/klods/components/form.rb', line 84

def select(a = nil, b = nil, &block)
  props, children = Core.normalize_args(a, b)
  children = klods_capture(&block) if block
  inner = Core.build(tag: "select", base: "klods-select", props: props, children: children)
  Core.el("div", {"class" => "klods-select-wrapper"}, inner)
end

#switch_input(props) ⇒ Object 



158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
 
# File 'lib/klods/components/form.rb', line 158

def switch_input(props)
  props = props.transform_keys(&:to_s)
  label_text = props.delete("label")
  reverse = props.delete("reverse")
  extra_class = props.delete("class")

  input_attrs = {"type" => "checkbox", "class" => "klods-switch__input", "role" => "switch"}
  %w[name value checked disabled].each do |key|
    val = props.delete(key)
    input_attrs[key] = val unless val.nil?
  end

  cls = Core.class_names("klods-switch", reverse ? "klods-switch--reverse" : nil, Core.resolve_class(extra_class))
  Core.el(
    "label",
    props.merge("class" => cls.empty? ? nil : cls).compact,
    [
      Node.new("input", input_attrs),
      Core.el("span", {"class" => "klods-switch__track"}),
      Core.el("span", {"class" => "klods-switch__label"}, label_text)
    ]
  )
end

#textarea(a = nil, b = nil, &block) ⇒ Object 



97
98
99
100
101
 
# File 'lib/klods/components/form.rb', line 97

def textarea(a = nil, b = nil, &block)
  props, children = Core.normalize_args(a, b)
  children = klods_capture(&block) if block
  Core.build(tag: "textarea", base: "klods-textarea", props: props, children: children)
end