phlexy_ui 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/lib/phlexy_ui/avatar_group.rb +23 -0
- data/lib/phlexy_ui/button.rb +50 -2
- data/lib/phlexy_ui/checkbox.rb +72 -0
- data/lib/phlexy_ui/form_control.rb +19 -0
- data/lib/phlexy_ui/label.rb +23 -0
- data/lib/phlexy_ui/modal.rb +82 -0
- data/lib/phlexy_ui/version.rb +1 -1
- metadata +7 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3e6545417ad6baf0ab1e8b33c1c23ab3513089c787ad274f08fb3094a43d9a44
|
4
|
+
data.tar.gz: 13c7469dac369c048a1f78cebda90e9035457326b072b7ae2d3f6fb4bca8c35f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 870e25f3780ed7cadf59047cfe78330a429ee0f4b0e27c5f635be30df4792165304b0acd9343f341efdd22bcde9aeae5d420ce67b467c16a8bad5613efd2aa17
|
7
|
+
data.tar.gz: 4a3dbfa5b575f9aaa408e216ee635fd9d23a5eae619acf5be7c92e8438683f964ba72cbc94b767e1f32375d2e791bf804916cf33320666da76e2b1ba30faf40e
|
@@ -0,0 +1,23 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module PhlexyUI
|
4
|
+
class AvatarGroup < Base
|
5
|
+
def initialize(*, as: :div, **)
|
6
|
+
super(*, **)
|
7
|
+
@as = as
|
8
|
+
end
|
9
|
+
|
10
|
+
def view_template(&)
|
11
|
+
generate_classes!(
|
12
|
+
component_html_class: :"avatar-group",
|
13
|
+
options:
|
14
|
+
).then do |classes|
|
15
|
+
public_send(as, class: classes, **options, &)
|
16
|
+
end
|
17
|
+
end
|
18
|
+
|
19
|
+
def avatar(*, **, &)
|
20
|
+
render PhlexyUI::Avatar.new(*, **, &)
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
data/lib/phlexy_ui/button.rb
CHANGED
@@ -2,9 +2,10 @@
|
|
2
2
|
|
3
3
|
module PhlexyUI
|
4
4
|
class Button < Base
|
5
|
-
def initialize(*, as: :button, **)
|
5
|
+
def initialize(*, as: :button, modal: nil, **)
|
6
6
|
super(*, **)
|
7
7
|
@as = as
|
8
|
+
@modal = modal
|
8
9
|
end
|
9
10
|
|
10
11
|
def view_template(&)
|
@@ -14,14 +15,61 @@ module PhlexyUI
|
|
14
15
|
base_modifiers:,
|
15
16
|
options:
|
16
17
|
).then do |classes|
|
18
|
+
if modal
|
19
|
+
# TODO: Remove this abomination once Phlex 2.0 is released.
|
20
|
+
#
|
21
|
+
# The cleanest way to do this is with a single:
|
22
|
+
#
|
23
|
+
# onclick: "#{modal}.showModal()"
|
24
|
+
#
|
25
|
+
# However, currently, Phlex does not allow you to use the "onclick"
|
26
|
+
# attribute.
|
27
|
+
#
|
28
|
+
# Once Phlex 2.0 is released, it will add a #safe method
|
29
|
+
# that will allow us to replace this with a single line:
|
30
|
+
#
|
31
|
+
# onclick: safe("#{modal}.showModal()")
|
32
|
+
#
|
33
|
+
# For now, at least this only runs once and uses event delegation
|
34
|
+
# so that it only adds a single event listener to the document.body.
|
35
|
+
#
|
36
|
+
# The downside is a bigger HTML payload.
|
37
|
+
options[:data] ||= {}
|
38
|
+
options[:data][:modal] = modal
|
39
|
+
script do
|
40
|
+
unsafe_raw <<~JS
|
41
|
+
// Will be replaced with a single line on the <button> once Phlex 2.0 is released.
|
42
|
+
(() => {
|
43
|
+
if (window.PhlexyUI && window.PhlexyUI.modalInitialized) {
|
44
|
+
return;
|
45
|
+
}
|
46
|
+
|
47
|
+
document.body.addEventListener("click", (event) => {
|
48
|
+
if (event.target.tagName === 'BUTTON' &&
|
49
|
+
event.target.dataset.modal) {
|
50
|
+
const modal = document.getElementById(event.target.dataset.modal);
|
51
|
+
if (modal) {
|
52
|
+
modal.showModal();
|
53
|
+
}
|
54
|
+
}
|
55
|
+
});
|
56
|
+
|
57
|
+
if (!window.PhlexyUI) window.PhlexyUI = {};
|
58
|
+
window.PhlexyUI.modalInitialized = true;
|
59
|
+
})();
|
60
|
+
JS
|
61
|
+
end
|
62
|
+
end
|
63
|
+
|
17
64
|
public_send(as, class: classes, **options, &)
|
18
65
|
end
|
19
66
|
end
|
20
67
|
|
21
68
|
private
|
22
69
|
|
70
|
+
attr_reader :modal
|
71
|
+
|
23
72
|
register_modifiers(
|
24
|
-
# Modifiers
|
25
73
|
# "sm:no-animation"
|
26
74
|
# "md:no-animation"
|
27
75
|
# "lg:no-animation"
|
@@ -0,0 +1,72 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module PhlexyUI
|
4
|
+
class Checkbox < Base
|
5
|
+
def view_template(&)
|
6
|
+
attributes = generate_attributes(base_modifiers, ATTRIBUTES_MAP)
|
7
|
+
|
8
|
+
generate_classes!(
|
9
|
+
component_html_class: :checkbox,
|
10
|
+
modifiers_map: modifiers,
|
11
|
+
base_modifiers:,
|
12
|
+
options:
|
13
|
+
).then do |classes|
|
14
|
+
input(type: :checkbox, class: classes, **options, **attributes, &)
|
15
|
+
end
|
16
|
+
end
|
17
|
+
|
18
|
+
private
|
19
|
+
|
20
|
+
ATTRIBUTES_MAP = {
|
21
|
+
checked: true,
|
22
|
+
disabled: true
|
23
|
+
}.freeze
|
24
|
+
|
25
|
+
register_modifiers(
|
26
|
+
# "sm:checkbox-primary"
|
27
|
+
# "md:checkbox-primary"
|
28
|
+
# "lg:checkbox-primary"
|
29
|
+
primary: "checkbox-primary",
|
30
|
+
# "sm:checkbox-secondary"
|
31
|
+
# "md:checkbox-secondary"
|
32
|
+
# "lg:checkbox-secondary"
|
33
|
+
secondary: "checkbox-secondary",
|
34
|
+
# "sm:checkbox-accent"
|
35
|
+
# "md:checkbox-accent"
|
36
|
+
# "lg:checkbox-accent"
|
37
|
+
accent: "checkbox-accent",
|
38
|
+
# "sm:checkbox-success"
|
39
|
+
# "md:checkbox-success"
|
40
|
+
# "lg:checkbox-success"
|
41
|
+
success: "checkbox-success",
|
42
|
+
# "sm:checkbox-warning"
|
43
|
+
# "md:checkbox-warning"
|
44
|
+
# "lg:checkbox-warning"
|
45
|
+
warning: "checkbox-warning",
|
46
|
+
# "sm:checkbox-info"
|
47
|
+
# "md:checkbox-info"
|
48
|
+
# "lg:checkbox-info"
|
49
|
+
info: "checkbox-info",
|
50
|
+
# "sm:checkbox-error"
|
51
|
+
# "md:checkbox-error"
|
52
|
+
# "lg:checkbox-error"
|
53
|
+
error: "checkbox-error",
|
54
|
+
# "sm:checkbox-lg"
|
55
|
+
# "md:checkbox-lg"
|
56
|
+
# "lg:checkbox-lg"
|
57
|
+
lg: "checkbox-lg",
|
58
|
+
# "sm:checkbox-md"
|
59
|
+
# "md:checkbox-md"
|
60
|
+
# "lg:checkbox-md"
|
61
|
+
md: "checkbox-md",
|
62
|
+
# "sm:checkbox-sm"
|
63
|
+
# "md:checkbox-sm"
|
64
|
+
# "lg:checkbox-sm"
|
65
|
+
sm: "checkbox-sm",
|
66
|
+
# "sm:checkbox-xs"
|
67
|
+
# "md:checkbox-xs"
|
68
|
+
# "lg:checkbox-xs"
|
69
|
+
xs: "checkbox-xs"
|
70
|
+
)
|
71
|
+
end
|
72
|
+
end
|
@@ -0,0 +1,19 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module PhlexyUI
|
4
|
+
class FormControl < Base
|
5
|
+
def initialize(*, as: :div, **)
|
6
|
+
super(*, **)
|
7
|
+
@as = as
|
8
|
+
end
|
9
|
+
|
10
|
+
def view_template(&)
|
11
|
+
generate_classes!(
|
12
|
+
component_html_class: "form-control",
|
13
|
+
options:
|
14
|
+
).then do |classes|
|
15
|
+
public_send(as, class: classes, **options, &)
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
@@ -0,0 +1,23 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module PhlexyUI
|
4
|
+
class Label < Base
|
5
|
+
def view_template(&)
|
6
|
+
generate_classes!(
|
7
|
+
component_html_class: :label,
|
8
|
+
options:
|
9
|
+
).then do |classes|
|
10
|
+
label(class: classes, **options, &)
|
11
|
+
end
|
12
|
+
end
|
13
|
+
|
14
|
+
def text(as: :span, **options, &)
|
15
|
+
generate_classes!(
|
16
|
+
component_html_class: :"label-text",
|
17
|
+
options:
|
18
|
+
).then do |classes|
|
19
|
+
public_send(as, class: classes, **options, &)
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
@@ -0,0 +1,82 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module PhlexyUI
|
4
|
+
class Modal < Base
|
5
|
+
def initialize(*, id:, **)
|
6
|
+
super(*, **)
|
7
|
+
@id = id
|
8
|
+
end
|
9
|
+
|
10
|
+
def view_template(&)
|
11
|
+
generate_classes!(
|
12
|
+
component_html_class: :modal,
|
13
|
+
modifiers_map: modifiers,
|
14
|
+
base_modifiers:,
|
15
|
+
options:
|
16
|
+
).then do |classes|
|
17
|
+
dialog(id:, class: classes, **options, &)
|
18
|
+
end
|
19
|
+
end
|
20
|
+
|
21
|
+
def body(*, as: :div, **options, &)
|
22
|
+
generate_classes!(
|
23
|
+
component_html_class: :"modal-box",
|
24
|
+
options:
|
25
|
+
).then do |classes|
|
26
|
+
if base_modifiers.include?(:tap_outside_to_close)
|
27
|
+
public_send(as, class: classes, **options, &)
|
28
|
+
backdrop
|
29
|
+
else
|
30
|
+
public_send(as, class: classes, **options, &)
|
31
|
+
end
|
32
|
+
end
|
33
|
+
end
|
34
|
+
|
35
|
+
def action(*, as: :div, **options, &)
|
36
|
+
generate_classes!(
|
37
|
+
component_html_class: :"modal-action",
|
38
|
+
options:
|
39
|
+
).then do |classes|
|
40
|
+
public_send(as, class: classes, **options, &)
|
41
|
+
end
|
42
|
+
end
|
43
|
+
|
44
|
+
def backdrop(*, **options, &)
|
45
|
+
generate_classes!(
|
46
|
+
component_html_class: :"modal-backdrop",
|
47
|
+
options:
|
48
|
+
).then do |classes|
|
49
|
+
form method: :dialog, class: classes, **options do
|
50
|
+
button
|
51
|
+
end
|
52
|
+
end
|
53
|
+
end
|
54
|
+
|
55
|
+
def close_button(*, **, &)
|
56
|
+
form method: :dialog do
|
57
|
+
render PhlexyUI::Button.new(*, **, &)
|
58
|
+
end
|
59
|
+
end
|
60
|
+
|
61
|
+
private
|
62
|
+
|
63
|
+
register_modifiers(
|
64
|
+
# "sm:modal-open"
|
65
|
+
# "md:modal-open"
|
66
|
+
# "lg:modal-open"
|
67
|
+
open: "modal-open",
|
68
|
+
# "sm:modal-top"
|
69
|
+
# "md:modal-top"
|
70
|
+
# "lg:modal-top"
|
71
|
+
top: "modal-top",
|
72
|
+
# "sm:modal-bottom"
|
73
|
+
# "md:modal-bottom"
|
74
|
+
# "lg:modal-bottom"
|
75
|
+
bottom: "modal-bottom",
|
76
|
+
# "sm:modal-middle"
|
77
|
+
# "md:modal-middle"
|
78
|
+
# "lg:modal-middle"
|
79
|
+
middle: "modal-middle"
|
80
|
+
)
|
81
|
+
end
|
82
|
+
end
|
data/lib/phlexy_ui/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: phlexy_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.8
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- David Alejandro Aguilar Ramos
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-09-
|
11
|
+
date: 2024-09-27 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: phlex
|
@@ -95,20 +95,25 @@ files:
|
|
95
95
|
- lib/phlexy_ui.rb
|
96
96
|
- lib/phlexy_ui/attribute_set.rb
|
97
97
|
- lib/phlexy_ui/avatar.rb
|
98
|
+
- lib/phlexy_ui/avatar_group.rb
|
98
99
|
- lib/phlexy_ui/badge.rb
|
99
100
|
- lib/phlexy_ui/base.rb
|
100
101
|
- lib/phlexy_ui/button.rb
|
101
102
|
- lib/phlexy_ui/card.rb
|
103
|
+
- lib/phlexy_ui/checkbox.rb
|
102
104
|
- lib/phlexy_ui/class_list.rb
|
103
105
|
- lib/phlexy_ui/collapsible_sub_menu.rb
|
104
106
|
- lib/phlexy_ui/configurable.rb
|
105
107
|
- lib/phlexy_ui/drawer.rb
|
106
108
|
- lib/phlexy_ui/dropdown.rb
|
109
|
+
- lib/phlexy_ui/form_control.rb
|
110
|
+
- lib/phlexy_ui/label.rb
|
107
111
|
- lib/phlexy_ui/link.rb
|
108
112
|
- lib/phlexy_ui/loading.rb
|
109
113
|
- lib/phlexy_ui/mask.rb
|
110
114
|
- lib/phlexy_ui/menu.rb
|
111
115
|
- lib/phlexy_ui/menu_item.rb
|
116
|
+
- lib/phlexy_ui/modal.rb
|
112
117
|
- lib/phlexy_ui/navbar.rb
|
113
118
|
- lib/phlexy_ui/sub_menu.rb
|
114
119
|
- lib/phlexy_ui/tab.rb
|