Module: Klods::Components::Modal

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

Instance Method Summary collapse

Instance Method Details



4
5
6
7
8
9
10
11
12
13
14
 
# File 'lib/klods/components/modal.rb', line 4

def modal(a = nil, b = nil, &block)
  props, children = Core.normalize_args(a, b)
  children = klods_capture(&block) if block
  props = props.transform_keys(&:to_s)
  open_attr = props.delete("open")
  extra_class = props.delete("class")
  cls = Core.class_names("klods-modal", Core.resolve_class(extra_class))
  attrs = props.merge("class" => cls.empty? ? nil : cls).compact
  attrs["open"] = true if open_attr
  Core.el("dialog", attrs, children)
end

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



40
41
42
43
44
 
# File 'lib/klods/components/modal.rb', line 40

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

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



34
35
36
37
38
 
# File 'lib/klods/components/modal.rb', line 34

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

#modal_close(attrs = nil) ⇒ Object

Close button — the × icon is provided by CSS via a ::before mask-image. Closes the containing dialog automatically via inline JS.



48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
# File 'lib/klods/components/modal.rb', line 48

def modal_close(attrs = nil)
  attrs = (attrs || {}).transform_keys(&:to_s)
  extra_class = attrs.delete("class")
  cls = Core.class_names("klods-modal__close", Core.resolve_class(extra_class))
  final_attrs = {
    "type" => "button",
    "aria-label" => "Close",
    "onclick" => "this.closest('dialog').close()"
  }
    .merge(attrs)
    .merge("class" => cls.empty? ? nil : cls)
    .compact
  Core.el("button", final_attrs)
end

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

Button that closes the containing <dialog> when clicked. Accepts the same props as button (e.g. variant:).



65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
# File 'lib/klods/components/modal.rb', line 65

def modal_dismiss(a = nil, b = nil, &block)
  props, children = Core.normalize_args(a, b)
  children = klods_capture(&block) if block
  merged = {
    "type" => "button",
    "onclick" => "this.closest('dialog').close()"
  }.merge(props.transform_keys(&:to_s))
  Core.build(
    tag: "button", base: "klods-button",
    modifiers: {
      variant: ->(v) { (v && v.to_s != "default") ? "klods-button--#{v}" : nil }
    },
    props: merged, children: children
  )
end

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



22
23
24
25
26
 
# File 'lib/klods/components/modal.rb', line 22

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

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



16
17
18
19
20
 
# File 'lib/klods/components/modal.rb', line 16

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

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



28
29
30
31
32
 
# File 'lib/klods/components/modal.rb', line 28

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

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

Button that opens the next sibling <dialog> as a modal when clicked. Accepts the same props as button (e.g. variant:).



83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
# File 'lib/klods/components/modal.rb', line 83

def modal_trigger(a = nil, b = nil, &block)
  props, children = Core.normalize_args(a, b)
  children = klods_capture(&block) if block
  merged = {
    "type" => "button",
    "onclick" => "this.nextElementSibling.showModal()"
  }.merge(props.transform_keys(&:to_s))
  Core.build(
    tag: "button", base: "klods-button",
    modifiers: {
      variant: ->(v) { (v && v.to_s != "default") ? "klods-button--#{v}" : nil }
    },
    props: merged, children: children
  )
end