phlex_ui 0.0.3 → 0.0.4
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/phlex_ui/accordion/content.rb +21 -0
- data/lib/phlex_ui/accordion/default_content.rb +17 -0
- data/lib/phlex_ui/accordion/default_trigger.rb +19 -0
- data/lib/phlex_ui/accordion/icon.rb +38 -0
- data/lib/phlex_ui/accordion/item.rb +28 -0
- data/lib/phlex_ui/accordion/trigger.rb +16 -0
- data/lib/phlex_ui/accordion.rb +28 -0
- data/lib/phlex_ui/attribute_merger.rb +75 -0
- data/lib/phlex_ui/badge.rb +76 -0
- data/lib/phlex_ui/base.rb +24 -0
- data/lib/phlex_ui/button.rb +67 -21
- data/lib/phlex_ui.rb +0 -8
- metadata +12 -37
- data/tasks/install.rake +0 -22
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2e94d694e97786f20a88cc28497e9fbda569229a4b60688745e1faef5bb6a794
|
|
4
|
+
data.tar.gz: 3c06ca211012a28ad741ec3d66db56c7ecde93e637d07b24e2da5f987c759eef
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e45505146ef033bef4bc13725b1abc4dd450ca5f9b0a76981a109570044f50c68523dc4cd48aa69b0e9731e6ce5a7497788a08341012e2ea583ae9eab1fdae2e
|
|
7
|
+
data.tar.gz: 197a7019398397c7cff18c24c5e0a5822f183d98ef9ac6f7852f0ccb782f70653941ac3eda20eeb40015303d34b6291a171b9d1777ac68d8ce32a8e2774cff72
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module PhlexUI
|
|
4
|
+
class Accordion::Content < Base
|
|
5
|
+
def template(&)
|
|
6
|
+
div(**attrs, &)
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
private
|
|
10
|
+
|
|
11
|
+
def default_attrs
|
|
12
|
+
{
|
|
13
|
+
data: {
|
|
14
|
+
accordion_target: "content"
|
|
15
|
+
},
|
|
16
|
+
class: 'overflow-y-hidden',
|
|
17
|
+
style: 'height: 0px;'
|
|
18
|
+
}
|
|
19
|
+
end
|
|
20
|
+
end
|
|
21
|
+
end
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module PhlexUI
|
|
4
|
+
class Accordion::DefaultTrigger < Base
|
|
5
|
+
def template(&)
|
|
6
|
+
div(class: "flex items-center justify-between w-full") do
|
|
7
|
+
p(&)
|
|
8
|
+
render ::PhlexUI::Accordion::Icon.new
|
|
9
|
+
end
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
def default_attrs
|
|
13
|
+
{
|
|
14
|
+
data: { action: "click->accordion#toggle" },
|
|
15
|
+
class: 'w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline'
|
|
16
|
+
}
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
end
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module PhlexUI
|
|
4
|
+
class Accordion::Icon < Base
|
|
5
|
+
def template(&block)
|
|
6
|
+
span(**attrs) do
|
|
7
|
+
if block
|
|
8
|
+
block.call
|
|
9
|
+
else
|
|
10
|
+
icon
|
|
11
|
+
end
|
|
12
|
+
end
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
def icon
|
|
16
|
+
svg(
|
|
17
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
18
|
+
viewbox: "0 0 20 20",
|
|
19
|
+
fill: "currentColor",
|
|
20
|
+
class: "w-4 h-4"
|
|
21
|
+
) do |s|
|
|
22
|
+
s.path(
|
|
23
|
+
fill_rule: "evenodd",
|
|
24
|
+
d:
|
|
25
|
+
"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
|
|
26
|
+
clip_rule: "evenodd"
|
|
27
|
+
)
|
|
28
|
+
end
|
|
29
|
+
end
|
|
30
|
+
|
|
31
|
+
def default_attrs
|
|
32
|
+
{
|
|
33
|
+
class: 'opacity-50',
|
|
34
|
+
data: { accordion_target: "icon" },
|
|
35
|
+
}
|
|
36
|
+
end
|
|
37
|
+
end
|
|
38
|
+
end
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module PhlexUI
|
|
4
|
+
class Accordion::Item < Base
|
|
5
|
+
def initialize(open: false, rotate_icon: 180, **attrs)
|
|
6
|
+
@open = open
|
|
7
|
+
@rotate_icon = rotate_icon
|
|
8
|
+
super(**attrs)
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
def template(&)
|
|
12
|
+
div(**attrs, &)
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
private
|
|
16
|
+
|
|
17
|
+
def default_attrs
|
|
18
|
+
{
|
|
19
|
+
data: {
|
|
20
|
+
controller: "accordion",
|
|
21
|
+
accordion_open_value: @open,
|
|
22
|
+
accordion_rotate_icon_value: @rotate_icon
|
|
23
|
+
},
|
|
24
|
+
class: 'border-b'
|
|
25
|
+
}
|
|
26
|
+
end
|
|
27
|
+
end
|
|
28
|
+
end
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module PhlexUI
|
|
4
|
+
class Accordion::Trigger < Base
|
|
5
|
+
def template(&)
|
|
6
|
+
button(**attrs, &)
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
def default_attrs
|
|
10
|
+
{
|
|
11
|
+
data: { action: "click->accordion#toggle" },
|
|
12
|
+
class: 'w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline'
|
|
13
|
+
}
|
|
14
|
+
end
|
|
15
|
+
end
|
|
16
|
+
end
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module PhlexUI
|
|
4
|
+
class Accordion < Base
|
|
5
|
+
def template(&)
|
|
6
|
+
div(**attrs, &)
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
def add_item(title, content, open: false)
|
|
10
|
+
render Accordion::Item.new(open: open) do
|
|
11
|
+
render PhlexUI::Accordion::Trigger.new do
|
|
12
|
+
render PhlexUI::Accordion::DefaultTrigger.new { title }
|
|
13
|
+
end
|
|
14
|
+
render PhlexUI::Accordion::Content.new do
|
|
15
|
+
render PhlexUI::Accordion::DefaultContent.new { content }
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
private
|
|
21
|
+
|
|
22
|
+
def default_attrs
|
|
23
|
+
{
|
|
24
|
+
class: 'w-full'
|
|
25
|
+
}
|
|
26
|
+
end
|
|
27
|
+
end
|
|
28
|
+
end
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
module PhlexUI
|
|
2
|
+
class AttributeMerger
|
|
3
|
+
attr_reader :default_attrs, :user_attrs
|
|
4
|
+
OVERRIDE_KEY = '!'.freeze
|
|
5
|
+
|
|
6
|
+
def initialize(default_attrs, user_attrs)
|
|
7
|
+
@default_attrs = flatten_hash(default_attrs)
|
|
8
|
+
@user_attrs = flatten_hash(user_attrs)
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
def call
|
|
12
|
+
merged_attrs = merge_hashes(default_attrs, non_override_attrs)
|
|
13
|
+
mix(merged_attrs, override_attrs)
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
private
|
|
17
|
+
|
|
18
|
+
# @return [Hash]
|
|
19
|
+
def mix(*args)
|
|
20
|
+
args.each_with_object({}) do |object, result|
|
|
21
|
+
result.merge!(object) do |_key, old, new|
|
|
22
|
+
case new
|
|
23
|
+
when Hash
|
|
24
|
+
old.is_a?(Hash) ? mix(old, new) : new
|
|
25
|
+
when Array
|
|
26
|
+
old.is_a?(Array) ? (old + new) : new
|
|
27
|
+
when String
|
|
28
|
+
old.is_a?(String) ? "#{old} #{new}" : new
|
|
29
|
+
else
|
|
30
|
+
new
|
|
31
|
+
end
|
|
32
|
+
end
|
|
33
|
+
|
|
34
|
+
result.transform_keys! do |key|
|
|
35
|
+
key.end_with?("!") ? key.name.chop.to_sym : key
|
|
36
|
+
end
|
|
37
|
+
end
|
|
38
|
+
end
|
|
39
|
+
|
|
40
|
+
def override_attrs
|
|
41
|
+
user_attrs.select do |key, value|
|
|
42
|
+
key.to_s.include?(OVERRIDE_KEY)
|
|
43
|
+
end
|
|
44
|
+
end
|
|
45
|
+
|
|
46
|
+
def non_override_attrs
|
|
47
|
+
user_attrs.reject do |key, value|
|
|
48
|
+
key.to_s.include?(OVERRIDE_KEY)
|
|
49
|
+
end
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
def flatten_hash(hash, parent_key = '', result_hash = {})
|
|
53
|
+
hash.each do |key, value|
|
|
54
|
+
new_key = parent_key.empty? ? key : "#{parent_key}_#{key}".to_sym
|
|
55
|
+
if value.is_a? Hash
|
|
56
|
+
flatten_hash(value, new_key, result_hash)
|
|
57
|
+
else
|
|
58
|
+
result_hash[new_key] = value
|
|
59
|
+
end
|
|
60
|
+
end
|
|
61
|
+
result_hash
|
|
62
|
+
end
|
|
63
|
+
|
|
64
|
+
def merge_hashes(hash1, hash2)
|
|
65
|
+
flat_hash1 = flatten_hash(hash1)
|
|
66
|
+
flat_hash2 = flatten_hash(hash2)
|
|
67
|
+
|
|
68
|
+
merged = flat_hash1.merge(flat_hash2) do |key, oldval, newval|
|
|
69
|
+
"#{oldval} #{newval}"
|
|
70
|
+
end
|
|
71
|
+
|
|
72
|
+
merged
|
|
73
|
+
end
|
|
74
|
+
end
|
|
75
|
+
end
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module PhlexUI
|
|
4
|
+
class Badge < Base
|
|
5
|
+
def initialize(variant: :primary, size: :md, **kwargs)
|
|
6
|
+
@variant = variant
|
|
7
|
+
@size = size
|
|
8
|
+
@kwargs = kwargs
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
def template(&)
|
|
12
|
+
case @variant
|
|
13
|
+
when :primary
|
|
14
|
+
div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", size_classes, @kwargs[:class]), &)
|
|
15
|
+
when :secondary
|
|
16
|
+
div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", size_classes, @kwargs[:class]), &)
|
|
17
|
+
when :outline
|
|
18
|
+
div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground", size_classes, @kwargs[:class]), &)
|
|
19
|
+
when :destructive
|
|
20
|
+
div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", size_classes, @kwargs[:class]), &)
|
|
21
|
+
when :slate
|
|
22
|
+
div(class: tokens("inline-flex items-center rounded-md bg-slate-100 font-medium text-slate-600 bg-slate-100/80 dark:bg-slate-400/10 dark:text-slate-400", size_classes, @kwargs[:class]), &)
|
|
23
|
+
when :gray
|
|
24
|
+
div(class: tokens("inline-flex items-center rounded-md bg-gray-100 font-medium text-gray-600 bg-gray-100/80 dark:bg-gray-400/10 dark:text-gray-400", size_classes, @kwargs[:class]), &)
|
|
25
|
+
when :zinc
|
|
26
|
+
div(class: tokens("inline-flex items-center rounded-md bg-zinc-100 font-medium text-zinc-600 bg-zinc-100/80 dark:bg-zinc-400/10 dark:text-zinc-400", size_classes, @kwargs[:class]), &)
|
|
27
|
+
when :neutral
|
|
28
|
+
div(class: tokens("inline-flex items-center rounded-md bg-neutral-100 font-medium text-neutral-600 bg-neutral-100/80 dark:bg-neutral-400/10 dark:text-neutral-400", size_classes, @kwargs[:class]), &)
|
|
29
|
+
when :stone
|
|
30
|
+
div(class: tokens("inline-flex items-center rounded-md bg-stone-100 font-medium text-stone-600 bg-stone-100/80 dark:bg-stone-400/10 dark:text-stone-400", size_classes, @kwargs[:class]), &)
|
|
31
|
+
when :red
|
|
32
|
+
div(class: tokens("inline-flex items-center rounded-md bg-red-100 font-medium text-red-600 bg-red-100/80 dark:bg-red-400/10 dark:text-red-400", size_classes, @kwargs[:class]), &)
|
|
33
|
+
when :orange
|
|
34
|
+
div(class: tokens("inline-flex items-center rounded-md bg-orange-100 font-medium text-orange-600 bg-orange-100/80 dark:bg-orange-400/10 dark:text-orange-400", size_classes, @kwargs[:class]), &)
|
|
35
|
+
when :amber
|
|
36
|
+
div(class: tokens("inline-flex items-center rounded-md bg-amber-100 font-medium text-amber-600 bg-amber-100/80 dark:bg-amber-400/10 dark:text-amber-400", size_classes, @kwargs[:class]), &)
|
|
37
|
+
when :yellow
|
|
38
|
+
div(class: tokens("inline-flex items-center rounded-md bg-yellow-100 font-medium text-yellow-600 bg-yellow-100/80 dark:bg-yellow-400/10 dark:text-yellow-400", size_classes, @kwargs[:class]), &)
|
|
39
|
+
when :lime
|
|
40
|
+
div(class: tokens("inline-flex items-center rounded-md bg-lime-100 font-medium text-lime-600 bg-lime-100/80 dark:bg-lime-400/10 dark:text-lime-400", size_classes, @kwargs[:class]), &)
|
|
41
|
+
when :green
|
|
42
|
+
div(class: tokens("inline-flex items-center rounded-md bg-green-100 font-medium text-green-600 bg-green-100/80 dark:bg-green-400/10 dark:text-green-400", size_classes, @kwargs[:class]), &)
|
|
43
|
+
when :emerald
|
|
44
|
+
div(class: tokens("inline-flex items-center rounded-md bg-emerald-100 font-medium text-emerald-600 bg-emerald-100/80 dark:bg-emerald-400/10 dark:text-emerald-400", size_classes, @kwargs[:class]), &)
|
|
45
|
+
when :teal
|
|
46
|
+
div(class: tokens("inline-flex items-center rounded-md bg-teal-100 font-medium text-teal-600 bg-teal-100/80 dark:bg-teal-400/10 dark:text-teal-400", size_classes, @kwargs[:class]), &)
|
|
47
|
+
when :cyan
|
|
48
|
+
div(class: tokens("inline-flex items-center rounded-md bg-cyan-100 font-medium text-cyan-600 bg-cyan-100/80 dark:bg-cyan-400/10 dark:text-cyan-400", size_classes, @kwargs[:class]), &)
|
|
49
|
+
when :sky
|
|
50
|
+
div(class: tokens("inline-flex items-center rounded-md bg-sky-100 font-medium text-sky-600 bg-sky-100/80 dark:bg-sky-400/10 dark:text-sky-400", size_classes, @kwargs[:class]), &)
|
|
51
|
+
when :blue
|
|
52
|
+
div(class: tokens("inline-flex items-center rounded-md bg-blue-100 font-medium text-blue-600 bg-blue-100/80 dark:bg-blue-400/10 dark:text-blue-400", size_classes, @kwargs[:class]), &)
|
|
53
|
+
when :indigo
|
|
54
|
+
div(class: tokens("inline-flex items-center rounded-md bg-indigo-100 font-medium text-indigo-600 bg-indigo-100/80 dark:bg-indigo-400/10 dark:text-indigo-400", size_classes, @kwargs[:class]), &)
|
|
55
|
+
when :violet
|
|
56
|
+
div(class: tokens("inline-flex items-center rounded-md bg-violet-100 font-medium text-violet-600 bg-violet-100/80 dark:bg-violet-400/10 dark:text-violet-400", size_classes, @kwargs[:class]), &)
|
|
57
|
+
when :purple
|
|
58
|
+
div(class: tokens("inline-flex items-center rounded-md bg-purple-100 font-medium text-purple-600 bg-purple-100/80 dark:bg-purple-400/10 dark:text-purple-400", size_classes, @kwargs[:class]), &)
|
|
59
|
+
when :fuchsia
|
|
60
|
+
div(class: tokens("inline-flex items-center rounded-md bg-fuchsia-100 font-medium text-fuchsia-600 bg-fuchsia-100/80 dark:bg-fuchsia-400/10 dark:text-fuchsia-400", size_classes, @kwargs[:class]), &)
|
|
61
|
+
when :pink
|
|
62
|
+
div(class: tokens("inline-flex items-center rounded-md bg-pink-100 font-medium text-pink-600 bg-pink-100/80 dark:bg-pink-400/10 dark:text-pink-400", size_classes, @kwargs[:class]), &)
|
|
63
|
+
when :rose
|
|
64
|
+
div(class: tokens("inline-flex items-center rounded-md bg-rose-100 font-medium text-rose-600 bg-rose-100/80 dark:bg-rose-400/10 dark:text-rose-400", size_classes, @kwargs[:class]), &)
|
|
65
|
+
end
|
|
66
|
+
end
|
|
67
|
+
|
|
68
|
+
def size_classes
|
|
69
|
+
case @size
|
|
70
|
+
when :sm then "px-1.5 py-0.5 text-xs"
|
|
71
|
+
when :md then "px-2 py-1 text-xs"
|
|
72
|
+
when :lg then "px-3 py-1 text-sm"
|
|
73
|
+
end
|
|
74
|
+
end
|
|
75
|
+
end
|
|
76
|
+
end
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module PhlexUI
|
|
4
|
+
class Base < Phlex::HTML
|
|
5
|
+
attr_reader :attrs
|
|
6
|
+
|
|
7
|
+
def initialize(**user_attrs)
|
|
8
|
+
@attrs = PhlexUI::AttributeMerger.new(default_attrs, user_attrs).call
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
if defined?(Rails) && Rails.env.development?
|
|
12
|
+
def before_template
|
|
13
|
+
comment { "Before #{self.class.name}" }
|
|
14
|
+
super
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
private
|
|
19
|
+
|
|
20
|
+
def default_attrs
|
|
21
|
+
{}
|
|
22
|
+
end
|
|
23
|
+
end
|
|
24
|
+
end
|
data/lib/phlex_ui/button.rb
CHANGED
|
@@ -1,27 +1,73 @@
|
|
|
1
1
|
module PhlexUI
|
|
2
|
-
class Button <
|
|
3
|
-
def
|
|
4
|
-
|
|
2
|
+
class Button < Base
|
|
3
|
+
def initialize(**kwargs)
|
|
4
|
+
@variant = kwargs[:variant]&.to_sym || :primary
|
|
5
|
+
@size = kwargs[:size]
|
|
6
|
+
@kwargs = kwargs
|
|
7
|
+
@kwargs[:type] ||= "button"
|
|
5
8
|
end
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
def template(&)
|
|
11
|
+
case @variant
|
|
12
|
+
when :primary
|
|
13
|
+
button(
|
|
14
|
+
**@kwargs,
|
|
15
|
+
class: tokens(
|
|
16
|
+
"whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary-600 dark:bg-primary-500 text-white shadow hover:bg-primary-700 dark:hover:bg-primary-600 h-9",
|
|
17
|
+
-> { @size == :icon } => "h-9 w-9 justify-center",
|
|
18
|
+
-> { @size.nil? } => "px-4 py-2",
|
|
19
|
+
-> { @kwargs[:class] } => @kwargs[:class]
|
|
20
|
+
),
|
|
21
|
+
&)
|
|
22
|
+
when :link
|
|
23
|
+
button(
|
|
24
|
+
**@kwargs,
|
|
25
|
+
class: tokens(
|
|
26
|
+
"whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary-600 dark:text-primary-400 underline-offset-4 hover:underline h-9 px-4 py-2",
|
|
27
|
+
-> { @kwargs[:class] } => @kwargs[:class]
|
|
28
|
+
),
|
|
29
|
+
&)
|
|
30
|
+
when :secondary
|
|
31
|
+
button(
|
|
32
|
+
**@kwargs,
|
|
33
|
+
class: tokens(
|
|
34
|
+
"whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary-100 dark:bg-accent text-primary-600 dark:text-white shadow-sm hover:bg-primary-200 hover:text-primary-700 dark:hover:bg-opacity-10 h-9",
|
|
35
|
+
-> { @size == :icon } => "h-9 w-9 justify-center",
|
|
36
|
+
-> { @size.nil? } => "px-4 py-2",
|
|
37
|
+
-> { @kwargs[:class] } => @kwargs[:class]
|
|
38
|
+
),
|
|
39
|
+
&)
|
|
40
|
+
when :destructive
|
|
41
|
+
button(
|
|
42
|
+
**@kwargs,
|
|
43
|
+
class: tokens(
|
|
44
|
+
"whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive-600 hover:bg-destructive-700 dark:bg-destructive-500 dark:hover:bg-destructive-600 text-white shadow-sm h-9",
|
|
45
|
+
-> { @size == :icon } => "h-9 w-9 justify-center",
|
|
46
|
+
-> { @size.nil? } => "px-4 py-2",
|
|
47
|
+
-> { @kwargs[:class] } => @kwargs[:class]
|
|
48
|
+
),
|
|
49
|
+
&)
|
|
50
|
+
when :outline
|
|
51
|
+
button(
|
|
52
|
+
**@kwargs,
|
|
53
|
+
class: tokens(
|
|
54
|
+
"whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border bg-transparent shadow-sm hover:bg-accent h-9",
|
|
55
|
+
-> { @size == :icon } => "h-9 w-9 justify-center",
|
|
56
|
+
-> { @size.nil? } => "px-4 py-2",
|
|
57
|
+
-> { @kwargs[:class] } => @kwargs[:class]
|
|
58
|
+
),
|
|
59
|
+
&)
|
|
60
|
+
when :ghost
|
|
61
|
+
button(
|
|
62
|
+
**@kwargs,
|
|
63
|
+
class: tokens(
|
|
64
|
+
"whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent h-9",
|
|
65
|
+
-> { @size == :icon } => "h-9 w-9 justify-center",
|
|
66
|
+
-> { @size.nil? } => "px-4 py-2",
|
|
67
|
+
-> { @kwargs[:class] } => @kwargs[:class]
|
|
68
|
+
),
|
|
69
|
+
&)
|
|
70
|
+
end
|
|
11
71
|
end
|
|
12
|
-
|
|
13
|
-
# def style
|
|
14
|
-
# {
|
|
15
|
-
# 'background-color': 'violet',
|
|
16
|
-
# 'color': 'white',
|
|
17
|
-
# 'font-weight': 'bold',
|
|
18
|
-
# 'padding': '0.5rem 1rem',
|
|
19
|
-
# 'border-radius': '0.25rem',
|
|
20
|
-
# }
|
|
21
|
-
# end
|
|
22
|
-
|
|
23
|
-
# def compile_style
|
|
24
|
-
# style.map { |k, v| "#{k}: #{v};" }.join(' ')
|
|
25
|
-
# end
|
|
26
72
|
end
|
|
27
73
|
end
|
data/lib/phlex_ui.rb
CHANGED
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
require 'phlex'
|
|
2
2
|
require 'zeitwerk'
|
|
3
|
-
require 'rails'
|
|
4
3
|
|
|
5
4
|
loader = Zeitwerk::Loader.for_gem
|
|
6
5
|
loader.inflector.inflect(
|
|
7
6
|
"phlex_ui" => "PhlexUI",
|
|
8
7
|
)
|
|
9
|
-
loader.ignore("#{__dir__}/tasks")
|
|
10
8
|
loader.setup # ready!
|
|
11
9
|
|
|
12
10
|
module PhlexUI
|
|
13
|
-
# If Rails is defined, load the rake tasks
|
|
14
|
-
class Railtie < Rails::Railtie
|
|
15
|
-
rake_tasks do
|
|
16
|
-
load File.join(Gem.loaded_specs['phlex_ui'].full_gem_path, 'tasks', 'install.rake')
|
|
17
|
-
end
|
|
18
|
-
end if defined?(Rails)
|
|
19
11
|
end
|
|
20
12
|
|
|
21
13
|
loader.eager_load
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: phlex_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- George Kettle
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-11-
|
|
11
|
+
date: 2023-11-10 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: phlex
|
|
@@ -38,40 +38,6 @@ dependencies:
|
|
|
38
38
|
- - "~>"
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: '2.6'
|
|
41
|
-
- !ruby/object:Gem::Dependency
|
|
42
|
-
name: rails
|
|
43
|
-
requirement: !ruby/object:Gem::Requirement
|
|
44
|
-
requirements:
|
|
45
|
-
- - ">="
|
|
46
|
-
- !ruby/object:Gem::Version
|
|
47
|
-
version: '6.1'
|
|
48
|
-
- - "<"
|
|
49
|
-
- !ruby/object:Gem::Version
|
|
50
|
-
version: '8'
|
|
51
|
-
type: :runtime
|
|
52
|
-
prerelease: false
|
|
53
|
-
version_requirements: !ruby/object:Gem::Requirement
|
|
54
|
-
requirements:
|
|
55
|
-
- - ">="
|
|
56
|
-
- !ruby/object:Gem::Version
|
|
57
|
-
version: '6.1'
|
|
58
|
-
- - "<"
|
|
59
|
-
- !ruby/object:Gem::Version
|
|
60
|
-
version: '8'
|
|
61
|
-
- !ruby/object:Gem::Dependency
|
|
62
|
-
name: rake
|
|
63
|
-
requirement: !ruby/object:Gem::Requirement
|
|
64
|
-
requirements:
|
|
65
|
-
- - ">="
|
|
66
|
-
- !ruby/object:Gem::Version
|
|
67
|
-
version: '12.0'
|
|
68
|
-
type: :runtime
|
|
69
|
-
prerelease: false
|
|
70
|
-
version_requirements: !ruby/object:Gem::Requirement
|
|
71
|
-
requirements:
|
|
72
|
-
- - ">="
|
|
73
|
-
- !ruby/object:Gem::Version
|
|
74
|
-
version: '12.0'
|
|
75
41
|
description: PhlexUI is a UI Component Library for Ruby developers. Built on top of
|
|
76
42
|
the Phlex Framework.
|
|
77
43
|
email: george.kettle@icloud.com
|
|
@@ -80,8 +46,17 @@ extensions: []
|
|
|
80
46
|
extra_rdoc_files: []
|
|
81
47
|
files:
|
|
82
48
|
- lib/phlex_ui.rb
|
|
49
|
+
- lib/phlex_ui/accordion.rb
|
|
50
|
+
- lib/phlex_ui/accordion/content.rb
|
|
51
|
+
- lib/phlex_ui/accordion/default_content.rb
|
|
52
|
+
- lib/phlex_ui/accordion/default_trigger.rb
|
|
53
|
+
- lib/phlex_ui/accordion/icon.rb
|
|
54
|
+
- lib/phlex_ui/accordion/item.rb
|
|
55
|
+
- lib/phlex_ui/accordion/trigger.rb
|
|
56
|
+
- lib/phlex_ui/attribute_merger.rb
|
|
57
|
+
- lib/phlex_ui/badge.rb
|
|
58
|
+
- lib/phlex_ui/base.rb
|
|
83
59
|
- lib/phlex_ui/button.rb
|
|
84
|
-
- tasks/install.rake
|
|
85
60
|
homepage: https://rubygems.org/gems/phlex_ui
|
|
86
61
|
licenses:
|
|
87
62
|
- MIT
|
data/tasks/install.rake
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
require 'json'
|
|
2
|
-
|
|
3
|
-
namespace :phlex_ui do
|
|
4
|
-
desc "Update tailwind.config.js to include phlex_ui gem path"
|
|
5
|
-
task install: :environment do
|
|
6
|
-
dev_path = Gem.loaded_specs['phlex_ui'].full_gem_path + '/**/*.rb'
|
|
7
|
-
prod_path = '/app/vendor/bundle/ruby/*/gems/phlex_ui-*/**/*.rb'
|
|
8
|
-
|
|
9
|
-
puts "PhlexUI Installation steps:\n\n"
|
|
10
|
-
|
|
11
|
-
puts "1. Add these 2 paths to your tailwind.config.js file:\n\n"
|
|
12
|
-
print "module.exports = "
|
|
13
|
-
puts JSON.pretty_generate({
|
|
14
|
-
"content" => [
|
|
15
|
-
"// Other paths",
|
|
16
|
-
dev_path,
|
|
17
|
-
prod_path
|
|
18
|
-
]
|
|
19
|
-
})
|
|
20
|
-
end
|
|
21
|
-
end
|
|
22
|
-
|