Module: Klods::Components::Form

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

Instance Method Summary collapse

Instance Method Details

#checkbox(props) ⇒ Object 



114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
# File 'lib/klods/components/form.rb', line 114

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
83
84
85
86
87
88
89
90
91
92
93
 
# 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"
    user_oninput = props.delete("oninput")
    color_oninput = "var h=this.closest('.klods-input--color').querySelector('.klods-color-hex');if(h)h.value=this.value;"
    color_oninput += user_oninput if user_oninput
    Node.new("span", {"class" => cls.call("klods-input--color")}, [
      Node.new("input", props.merge("type" => "color", "oninput" => color_oninput), nil),
      Node.new("input", {
        "type" => "text",
        "class" => "klods-color-hex",
        "value" => initial.to_s,
        "maxlength" => "7",
        "spellcheck" => "false",
        "aria-label" => "Hex color value",
        "oninput" => "if(/^#[0-9a-fA-F]{6}$/.test(this.value)){var c=this.closest('.klods-input--color').querySelector('[type=color]');if(c)c.value=this.value}"
      }, nil)
    ])
  else
    Node.new("input", props.merge("type" => type, "class" => cls.call).compact)
  end
end

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



102
103
104
105
106
 
# File 'lib/klods/components/form.rb', line 102

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 



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

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 



152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
# File 'lib/klods/components/form.rb', line 152

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 



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

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 



169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
 
# File 'lib/klods/components/form.rb', line 169

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 



108
109
110
111
112
 
# File 'lib/klods/components/form.rb', line 108

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