katalyst-kpop 3.0.0.beta.8 → 3.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/katalyst/kpop/_frame.scss +0 -1
- data/app/assets/stylesheets/katalyst/kpop/_modal.scss +53 -46
- data/app/assets/stylesheets/katalyst/kpop/_variables.scss +1 -2
- data/app/components/kpop/frame_component.rb +1 -1
- data/app/components/kpop/modal/footer_component.rb +21 -0
- data/app/components/kpop/modal/header_component.rb +21 -0
- data/app/components/kpop/modal/title_component.rb +1 -1
- data/app/components/kpop/modal_component.html.erb +1 -3
- data/app/components/kpop/modal_component.rb +17 -5
- data/lib/katalyst/kpop.rb +1 -2
- metadata +7 -7
- data/app/components/concerns/kpop/has_html_attributes.rb +0 -78
- data/lib/katalyst/kpop/version.rb +0 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 56bf54429bfb238e72687e0672f8ec6b677c092d1940a593100c3f1afe3676dd
|
4
|
+
data.tar.gz: b64fbdc1cd8e6b5798db53ff13808022dbae2cfa0cd8a682d199efb895934638
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bd797cb4d09e3f8539962e2acd3b4bbb928d9613f3b43b16ef0f457b2318ba345fe087e5af562898025bf744d6a5bd10698ffcf57debca463cbf05702bede267
|
7
|
+
data.tar.gz: 3a6a920b59893419b34ba6bdeff80fc0e976dbb5f91c5bcd3f7f601d31e09b1e04b732cccbe4c41199aed4f0cb439101a530b0ff86c881e3dbfcb96f6bcb04a1
|
@@ -10,69 +10,76 @@
|
|
10
10
|
grid-template-rows: auto auto 1fr auto;
|
11
11
|
|
12
12
|
background-color: white;
|
13
|
-
border: 1px solid black;
|
14
13
|
border-radius: $border-radius;
|
15
14
|
overflow: hidden;
|
16
15
|
max-height: var(--max-height);
|
17
|
-
|
16
|
+
box-shadow: rgb(0 0 0 / 25%) 0 1px 2px, rgb(0 0 0 / 31%) 0 0 5px;
|
18
17
|
|
19
|
-
.kpop-title-bar {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
18
|
+
.kpop-title-bar {
|
19
|
+
grid-area: title-bar;
|
20
|
+
display: grid;
|
21
|
+
grid-template-areas: "close title empty";
|
22
|
+
grid-template-columns: 3.5rem auto 3.5rem;
|
23
|
+
border-bottom: 1px solid $keyline-color;
|
24
|
+
min-height: 3.5rem;
|
25
|
+
align-items: center;
|
26
|
+
}
|
24
27
|
|
25
|
-
.kpop-
|
28
|
+
.kpop-header {
|
29
|
+
grid-area: header;
|
30
|
+
}
|
31
|
+
|
32
|
+
.kpop-content {
|
33
|
+
grid-area: content;
|
34
|
+
display: flex;
|
35
|
+
flex-direction: column;
|
36
|
+
overflow: auto;
|
37
|
+
}
|
38
|
+
|
39
|
+
.kpop-footer {
|
40
|
+
grid-area: footer;
|
41
|
+
border-top: 1px solid $keyline-color;
|
26
42
|
padding: $default-padding;
|
27
|
-
|
43
|
+
}
|
44
|
+
|
45
|
+
.kpop-title {
|
46
|
+
grid-area: title;
|
47
|
+
font-weight: bold;
|
48
|
+
text-align: center;
|
49
|
+
white-space: nowrap;
|
50
|
+
overflow: hidden;
|
51
|
+
text-overflow: ellipsis;
|
52
|
+
line-height: 3.5rem;
|
28
53
|
}
|
29
54
|
|
30
55
|
.kpop-close {
|
56
|
+
grid-area: close;
|
57
|
+
text-align: center;
|
31
58
|
background: none;
|
32
59
|
border: none;
|
33
|
-
color: $title-text-color;
|
34
|
-
cursor: pointer;
|
35
60
|
display: block;
|
36
61
|
font-size: 2rem;
|
37
|
-
font-weight:
|
38
|
-
padding: 0 0.75rem;
|
62
|
+
font-weight: 300;
|
39
63
|
text-decoration: none;
|
64
|
+
line-height: 3.5rem;
|
40
65
|
}
|
41
|
-
}
|
42
|
-
|
43
|
-
.kpop-header {
|
44
|
-
grid-area: header;
|
45
|
-
}
|
46
|
-
|
47
|
-
.kpop-content {
|
48
|
-
grid-area: content;
|
49
|
-
display: flex;
|
50
|
-
flex-direction: column;
|
51
|
-
overflow: auto;
|
52
|
-
}
|
53
66
|
|
54
|
-
.
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
padding: $default-padding;
|
59
|
-
}
|
60
|
-
|
61
|
-
.kpop-buttons {
|
62
|
-
display: flex;
|
63
|
-
gap: 0.5rem;
|
64
|
-
justify-content: space-between;
|
65
|
-
}
|
66
|
-
|
67
|
-
.kpop-modal.iframe {
|
68
|
-
.kpop-content {
|
69
|
-
overflow: unset;
|
67
|
+
.button-set {
|
68
|
+
display: flex;
|
69
|
+
gap: 0.5rem;
|
70
|
+
justify-content: flex-end;
|
70
71
|
}
|
71
72
|
|
72
|
-
iframe {
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
73
|
+
&.iframe {
|
74
|
+
.kpop-content {
|
75
|
+
overflow: unset;
|
76
|
+
}
|
77
|
+
|
78
|
+
iframe {
|
79
|
+
height: var(--max-height);
|
80
|
+
width: var(--max-width);
|
81
|
+
flex-grow: 1;
|
82
|
+
overflow: scroll;
|
83
|
+
}
|
77
84
|
}
|
78
85
|
}
|
@@ -17,9 +17,8 @@ $mobile-height: 400px !default;
|
|
17
17
|
|
18
18
|
// modal variables
|
19
19
|
$border-radius: 0.5rem !default;
|
20
|
-
$title-background-color: #344055 !default;
|
21
|
-
$title-text-color: white !default;
|
22
20
|
$default-padding: 1rem 1.5rem !default;
|
21
|
+
$keyline-color: #e0e0e0 !default;
|
23
22
|
|
24
23
|
// scrim variables
|
25
24
|
$scrim-background: rgba(0, 0, 0, 0.6) !default;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Kpop
|
4
|
+
module Modal
|
5
|
+
class FooterComponent < ViewComponent::Base
|
6
|
+
include Katalyst::HtmlAttributes
|
7
|
+
|
8
|
+
def call
|
9
|
+
tag.div(content, **html_attributes)
|
10
|
+
end
|
11
|
+
|
12
|
+
def inspect
|
13
|
+
"#<#{self.class.name}>"
|
14
|
+
end
|
15
|
+
|
16
|
+
def default_html_attributes
|
17
|
+
{ class: "kpop-footer" }
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Kpop
|
4
|
+
module Modal
|
5
|
+
class HeaderComponent < ViewComponent::Base
|
6
|
+
include Katalyst::HtmlAttributes
|
7
|
+
|
8
|
+
def call
|
9
|
+
tag.div(content, **html_attributes)
|
10
|
+
end
|
11
|
+
|
12
|
+
def inspect
|
13
|
+
"#<#{self.class.name}>"
|
14
|
+
end
|
15
|
+
|
16
|
+
def default_html_attributes
|
17
|
+
{ class: "kpop-header" }
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
@@ -2,14 +2,18 @@
|
|
2
2
|
|
3
3
|
module Kpop
|
4
4
|
class ModalComponent < ViewComponent::Base
|
5
|
-
include
|
5
|
+
include Katalyst::HtmlAttributes
|
6
6
|
|
7
7
|
renders_one :title, "Kpop::Modal::TitleComponent"
|
8
|
-
renders_one :header
|
9
|
-
renders_one :footer
|
8
|
+
renders_one :header, "Kpop::Modal::HeaderComponent"
|
9
|
+
renders_one :footer, "Kpop::Modal::FooterComponent"
|
10
10
|
|
11
|
-
|
12
|
-
|
11
|
+
define_html_attribute_methods :content_attributes
|
12
|
+
|
13
|
+
def initialize(title:, fallback_location: nil, layout: nil, captive: false, **html_attributes)
|
14
|
+
self.content_attributes = html_attributes.delete(:content) if html_attributes.key?(:content)
|
15
|
+
|
16
|
+
super(**html_attributes)
|
13
17
|
|
14
18
|
@fallback_location = fallback_location
|
15
19
|
@layout = layout
|
@@ -18,6 +22,10 @@ module Kpop
|
|
18
22
|
with_title(title:, captive:) if title.present?
|
19
23
|
end
|
20
24
|
|
25
|
+
def with_footer_buttons(**, &)
|
26
|
+
with_footer(class: "button-set", **, &)
|
27
|
+
end
|
28
|
+
|
21
29
|
def inspect
|
22
30
|
"#<#{self.class.name} title: #{title.inspect}>"
|
23
31
|
end
|
@@ -35,5 +43,9 @@ module Kpop
|
|
35
43
|
},
|
36
44
|
}
|
37
45
|
end
|
46
|
+
|
47
|
+
def default_content_attributes
|
48
|
+
{ class: "kpop-content" }
|
49
|
+
end
|
38
50
|
end
|
39
51
|
end
|
data/lib/katalyst/kpop.rb
CHANGED
@@ -1,11 +1,10 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
require "
|
3
|
+
require "katalyst/html_attributes"
|
4
4
|
require "view_component"
|
5
5
|
|
6
6
|
require "katalyst/kpop/engine"
|
7
7
|
require "katalyst/kpop/turbo"
|
8
|
-
require "katalyst/kpop/version"
|
9
8
|
|
10
9
|
module Katalyst
|
11
10
|
module Kpop
|
metadata
CHANGED
@@ -1,17 +1,17 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: katalyst-kpop
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 3.0.
|
4
|
+
version: 3.0.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Katalyst Interactive
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-
|
11
|
+
date: 2023-12-04 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
|
-
name: html-attributes
|
14
|
+
name: katalyst-html-attributes
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
17
|
- - ">="
|
@@ -72,9 +72,10 @@ files:
|
|
72
72
|
- app/assets/stylesheets/katalyst/kpop/_scrim.scss
|
73
73
|
- app/assets/stylesheets/katalyst/kpop/_side_panel.scss
|
74
74
|
- app/assets/stylesheets/katalyst/kpop/_variables.scss
|
75
|
-
- app/components/concerns/kpop/has_html_attributes.rb
|
76
75
|
- app/components/kpop/frame_component.html.erb
|
77
76
|
- app/components/kpop/frame_component.rb
|
77
|
+
- app/components/kpop/modal/footer_component.rb
|
78
|
+
- app/components/kpop/modal/header_component.rb
|
78
79
|
- app/components/kpop/modal/title_component.html.erb
|
79
80
|
- app/components/kpop/modal/title_component.rb
|
80
81
|
- app/components/kpop/modal_component.html.erb
|
@@ -110,7 +111,6 @@ files:
|
|
110
111
|
- lib/katalyst/kpop/matchers/title_finder.rb
|
111
112
|
- lib/katalyst/kpop/matchers/title_matcher.rb
|
112
113
|
- lib/katalyst/kpop/turbo.rb
|
113
|
-
- lib/katalyst/kpop/version.rb
|
114
114
|
homepage: https://github.com/katalyst/kpop
|
115
115
|
licenses:
|
116
116
|
- MIT
|
@@ -127,9 +127,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
127
127
|
version: '3.2'
|
128
128
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
129
129
|
requirements:
|
130
|
-
- - "
|
130
|
+
- - ">="
|
131
131
|
- !ruby/object:Gem::Version
|
132
|
-
version:
|
132
|
+
version: '0'
|
133
133
|
requirements: []
|
134
134
|
rubygems_version: 3.4.20
|
135
135
|
signing_key:
|
@@ -1,78 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
require "html_attributes_utils"
|
4
|
-
|
5
|
-
module Kpop
|
6
|
-
# Adds HTML attributes to a component.
|
7
|
-
# Accepts HTML attributes from the constructor or via `html_attributes=`.
|
8
|
-
# These are merged with the default attributes defined in the component.
|
9
|
-
# Adds support for custom html attributes for other tags, e.g.:
|
10
|
-
# define_html_attribute_methods :table_attributes, default: {}
|
11
|
-
# tag.table(**table_attributes)
|
12
|
-
module HasHtmlAttributes
|
13
|
-
extend ActiveSupport::Concern
|
14
|
-
|
15
|
-
using HTMLAttributesUtils
|
16
|
-
|
17
|
-
MERGEABLE_ATTRIBUTES = [
|
18
|
-
*HTMLAttributesUtils::DEFAULT_MERGEABLE_ATTRIBUTES,
|
19
|
-
%i[data controller],
|
20
|
-
%i[data action],
|
21
|
-
].freeze
|
22
|
-
|
23
|
-
FLATTENABLE_ATTRIBUTES = [
|
24
|
-
%i[data controller],
|
25
|
-
%i[data action],
|
26
|
-
].freeze
|
27
|
-
|
28
|
-
refine NilClass do
|
29
|
-
def flatten_html(*)
|
30
|
-
self
|
31
|
-
end
|
32
|
-
end
|
33
|
-
|
34
|
-
refine Hash do
|
35
|
-
def merge_html(attributes)
|
36
|
-
result = deep_merge_html_attributes(attributes, mergeable_attributes: MERGEABLE_ATTRIBUTES)
|
37
|
-
FLATTENABLE_ATTRIBUTES.each_with_object(result) do |path, flattened|
|
38
|
-
flattened.flatten_html(*path)
|
39
|
-
end
|
40
|
-
end
|
41
|
-
|
42
|
-
def flatten_html(key, *path)
|
43
|
-
if path.empty?
|
44
|
-
self[key] = self[key].join(" ") if self[key].is_a?(Array)
|
45
|
-
else
|
46
|
-
self[key].flatten_html(*path)
|
47
|
-
end
|
48
|
-
end
|
49
|
-
end
|
50
|
-
|
51
|
-
class_methods do
|
52
|
-
using HasHtmlAttributes
|
53
|
-
|
54
|
-
def define_html_attribute_methods(name, default: {})
|
55
|
-
define_method("default_#{name}") { default }
|
56
|
-
private("default_#{name}")
|
57
|
-
|
58
|
-
define_method(name) do
|
59
|
-
send("default_#{name}").merge_html(instance_variable_get("@#{name}") || {})
|
60
|
-
end
|
61
|
-
|
62
|
-
define_method("#{name}=") do |options|
|
63
|
-
instance_variable_set("@#{name}", options.slice(:id, :aria, :class, :data).merge(options.fetch(:html, {})))
|
64
|
-
end
|
65
|
-
end
|
66
|
-
end
|
67
|
-
|
68
|
-
included do
|
69
|
-
define_html_attribute_methods :html_attributes, default: {}
|
70
|
-
end
|
71
|
-
|
72
|
-
def initialize(**options)
|
73
|
-
super(**options.except(:id, :aria, :class, :data, :html))
|
74
|
-
|
75
|
-
self.html_attributes = options
|
76
|
-
end
|
77
|
-
end
|
78
|
-
end
|