Module: Klods::Components::Form

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

Instance Method Summary collapse

Instance Method Details

#checkbox(props) ⇒ Object 



99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
# File 'lib/klods/components/form.rb', line 99

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”) }



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

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) ⇒ Object 



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

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

#input(props = {}) ⇒ Object 



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

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) ⇒ Object 



89
90
91
92
 
# File 'lib/klods/components/form.rb', line 89

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

#radio(props) ⇒ Object 



118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
# File 'lib/klods/components/form.rb', line 118

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 



137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
# File 'lib/klods/components/form.rb', line 137

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) ⇒ Object 



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

def select(a = nil, b = nil)
  props, children = Core.normalize_args(a, b)
  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 



154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
 
# File 'lib/klods/components/form.rb', line 154

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) ⇒ Object 



94
95
96
97
 
# File 'lib/klods/components/form.rb', line 94

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