snazzy_ui 0.1.0 → 0.2.0
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/app/assets/stylesheets/snazzy_ui.css +93 -0
- data/app/components/snazzy/array_input_component.html.erb +26 -0
- data/app/components/snazzy/badge_component.html.erb +5 -0
- data/app/components/snazzy/copy_button_component.html.erb +15 -0
- data/app/components/snazzy/pill_component.html.erb +5 -0
- data/app/components/snazzy/tag_cloud_component.html.erb +5 -0
- data/app/components/snazzy/tags/grey_tag_component.html.erb +6 -0
- data/app/components/snazzy/tooltip_component.html.erb +8 -0
- data/lib/snazzy/engine.rb +4 -0
- data/lib/snazzy/version.rb +1 -1
- metadata +9 -28
- data/app/components/snazzy/array_input_component.html.slim +0 -19
- data/app/components/snazzy/badge_component.slim +0 -3
- data/app/components/snazzy/copy_button_component.slim +0 -10
- data/app/components/snazzy/pill_component.slim +0 -3
- data/app/components/snazzy/tag_cloud_component.slim +0 -3
- data/app/components/snazzy/tags/grey_tag_component.slim +0 -4
- data/app/components/snazzy/tooltip_component.slim +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e33e8b46d7646a67e37da5b622b893e4ba48aa46f432f085567570f0440cc8fd
|
|
4
|
+
data.tar.gz: 243c537031ed248a111dee216b1a4c26965ab388673d6c5b9af6b66d26f61215
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4d2dde751e344441b28e4ac23fe2bb2d4e08ff2ecb279da66a9a5b54bc90a7721d14029767e2e338177f90bb8140612f4bcbcbb99fdab59c45019a1edd3846e9
|
|
7
|
+
data.tar.gz: 25290191e904fa4a9018fc8cbd0ffb64d48f8596157084930c19ee8ddde6dda2cba91b65938f72a16335f842c8329a18841dfa10b0f3d60c2438a6b36b3f0b89
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/* Snazzy UI Components CSS */
|
|
2
|
+
|
|
3
|
+
/* Badge Component */
|
|
4
|
+
.Badge {
|
|
5
|
+
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
6
|
+
@apply bg-gray-100 text-gray-800;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.Badge.red {
|
|
10
|
+
@apply bg-red-100 text-red-800;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.Badge.green {
|
|
14
|
+
@apply bg-green-100 text-green-800;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.Badge.blue {
|
|
18
|
+
@apply bg-blue-100 text-blue-800;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.Badge.yellow {
|
|
22
|
+
@apply bg-yellow-100 text-yellow-800;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.Badge.--small {
|
|
26
|
+
@apply text-xs px-2 py-0.5;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.Badge.--medium {
|
|
30
|
+
@apply text-sm px-3 py-1;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.Badge.--large {
|
|
34
|
+
@apply text-base px-4 py-1.5;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.Badge.--hoverable {
|
|
38
|
+
@apply cursor-pointer hover:opacity-80 transition-opacity;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Pill Component */
|
|
42
|
+
.Pill {
|
|
43
|
+
@apply inline-flex items-center px-3 py-1 rounded-md text-sm font-medium;
|
|
44
|
+
@apply bg-gray-100 text-gray-800;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.Pill.red {
|
|
48
|
+
@apply bg-red-100 text-red-800;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.Pill.green {
|
|
52
|
+
@apply bg-green-100 text-green-800;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.Pill.blue {
|
|
56
|
+
@apply bg-blue-100 text-blue-800;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.Pill.yellow {
|
|
60
|
+
@apply bg-yellow-100 text-yellow-800;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.Pill.--small {
|
|
64
|
+
@apply text-xs px-2 py-0.5;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.Pill.--medium {
|
|
68
|
+
@apply text-sm px-3 py-1;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.Pill.--large {
|
|
72
|
+
@apply text-base px-4 py-1.5;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.Pill.--hoverable {
|
|
76
|
+
@apply cursor-pointer hover:opacity-80 transition-opacity;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Tooltip Component */
|
|
80
|
+
.tooltip-content {
|
|
81
|
+
@apply absolute z-10 px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm;
|
|
82
|
+
@apply max-w-xs break-words;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Tag Cloud Component */
|
|
86
|
+
.TagCloud {
|
|
87
|
+
@apply flex flex-wrap gap-2;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Additional helper classes */
|
|
91
|
+
.hidden {
|
|
92
|
+
display: none !important;
|
|
93
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<% name = "#{@model_name}[#{@field}][]" %>
|
|
2
|
+
|
|
3
|
+
<div class="input-group" data-controller="snazzy--tags" data-snazzy--tags-validations-value="<%= @validations %>">
|
|
4
|
+
<label><%= @label_text %></label>
|
|
5
|
+
<input placeholder="<%= @placeholder %>" data-snazzy--tags-target="input" data-deletable-name="<%= name %>" name="<%= name %>" data-action="keydown->snazzy--tags#handleInput">
|
|
6
|
+
<div class="mt-2">
|
|
7
|
+
Press
|
|
8
|
+
<code class="bg-gray-100 text-red-500 px-2 py-1 border border-solid border-gray-500 rounded-md">Enter</code>
|
|
9
|
+
or
|
|
10
|
+
<code class="bg-gray-100 text-red-500 px-2 py-1 border border-solid border-gray-500 rounded-md">return</code>
|
|
11
|
+
after each <%= @field.to_s.singularize %>.
|
|
12
|
+
</div>
|
|
13
|
+
<div class="border border-solid border-red-300 bg-red-50 text-red-500 px-2 py-1 mt-2 hidden" data-snazzy--tags-target="errorContainer"></div>
|
|
14
|
+
<div class="input-wrapper relative mt-1">
|
|
15
|
+
<div class="TagCloud inline-flex flex-wrap items-center" data-snazzy--tags-target="tagCloud">
|
|
16
|
+
<% @object.send(@field).each do |lab| %>
|
|
17
|
+
<%= render(Snazzy::Tags::GreyTagComponent.new(lab, deletable_name: name)) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div data-snazzy--tags-target="hiddenInputContainer">
|
|
22
|
+
<% @object.send(@field).each do |value| %>
|
|
23
|
+
<%= @form.hidden_field @field.to_sym, value: value, name: name, id: nil %>
|
|
24
|
+
<% end %>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<% if @tooltip %>
|
|
2
|
+
<%= render Snazzy::TooltipComponent.new(@tooltip) do %>
|
|
3
|
+
<%= link_to "", data: { action: "snazzy--clipboard#oneTimeCopy", content: @copyable }, class: "inline-block p-2 hover:bg-yellow-100 rounded-full transition-colors duration-150 #{@css_classes}" do %>
|
|
4
|
+
<% if respond_to?(:inline_svg_tag) %>
|
|
5
|
+
<%= inline_svg_tag @icon, class: "pointer-events-none" %>
|
|
6
|
+
<% else %>
|
|
7
|
+
<span class="pointer-events-none"><%= @icon %></span>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% else %>
|
|
12
|
+
<button class="inline-block ml-2 bg-primary-100 px-2 py-1 rounded-md hover:bg-primary-300 text-white" data-action="snazzy--clipboard#oneTimeCopy" data-content="<%= @copyable %>">
|
|
13
|
+
<%= @label %>
|
|
14
|
+
</button>
|
|
15
|
+
<% end %>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20 mr-2 my-1">
|
|
2
|
+
<%= @label %>
|
|
3
|
+
<% if @deletable_name %>
|
|
4
|
+
<span class="ml-2 cursor-pointer" data-action="click->snazzy--tags#removeTag" data-deletable-name="<%= @deletable_name %>">X</span>
|
|
5
|
+
<% end %>
|
|
6
|
+
</span>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<div data-controller="snazzy--tooltip">
|
|
2
|
+
<div data-action="mouseover->snazzy--tooltip#show mouseout->snazzy--tooltip#hide" data-snazzy--tooltip-target="source">
|
|
3
|
+
<%= content %>
|
|
4
|
+
</div>
|
|
5
|
+
<div class="tooltip-content hidden" data-snazzy--tooltip-target="content">
|
|
6
|
+
<%= @text %>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
data/lib/snazzy/engine.rb
CHANGED
data/lib/snazzy/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: snazzy_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Dan Brown
|
|
@@ -24,26 +24,6 @@ dependencies:
|
|
|
24
24
|
- - ">="
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
26
|
version: '7.1'
|
|
27
|
-
- !ruby/object:Gem::Dependency
|
|
28
|
-
name: slim-rails
|
|
29
|
-
requirement: !ruby/object:Gem::Requirement
|
|
30
|
-
requirements:
|
|
31
|
-
- - "~>"
|
|
32
|
-
- !ruby/object:Gem::Version
|
|
33
|
-
version: '3.6'
|
|
34
|
-
- - ">="
|
|
35
|
-
- !ruby/object:Gem::Version
|
|
36
|
-
version: 3.6.3
|
|
37
|
-
type: :runtime
|
|
38
|
-
prerelease: false
|
|
39
|
-
version_requirements: !ruby/object:Gem::Requirement
|
|
40
|
-
requirements:
|
|
41
|
-
- - "~>"
|
|
42
|
-
- !ruby/object:Gem::Version
|
|
43
|
-
version: '3.6'
|
|
44
|
-
- - ">="
|
|
45
|
-
- !ruby/object:Gem::Version
|
|
46
|
-
version: 3.6.3
|
|
47
27
|
- !ruby/object:Gem::Dependency
|
|
48
28
|
name: view_component
|
|
49
29
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -73,21 +53,22 @@ extensions: []
|
|
|
73
53
|
extra_rdoc_files: []
|
|
74
54
|
files:
|
|
75
55
|
- README.md
|
|
76
|
-
- app/
|
|
56
|
+
- app/assets/stylesheets/snazzy_ui.css
|
|
57
|
+
- app/components/snazzy/array_input_component.html.erb
|
|
77
58
|
- app/components/snazzy/array_input_component.rb
|
|
59
|
+
- app/components/snazzy/badge_component.html.erb
|
|
78
60
|
- app/components/snazzy/badge_component.rb
|
|
79
|
-
- app/components/snazzy/badge_component.slim
|
|
80
61
|
- app/components/snazzy/base_component.rb
|
|
62
|
+
- app/components/snazzy/copy_button_component.html.erb
|
|
81
63
|
- app/components/snazzy/copy_button_component.rb
|
|
82
|
-
- app/components/snazzy/
|
|
64
|
+
- app/components/snazzy/pill_component.html.erb
|
|
83
65
|
- app/components/snazzy/pill_component.rb
|
|
84
|
-
- app/components/snazzy/
|
|
66
|
+
- app/components/snazzy/tag_cloud_component.html.erb
|
|
85
67
|
- app/components/snazzy/tag_cloud_component.rb
|
|
86
|
-
- app/components/snazzy/
|
|
68
|
+
- app/components/snazzy/tags/grey_tag_component.html.erb
|
|
87
69
|
- app/components/snazzy/tags/grey_tag_component.rb
|
|
88
|
-
- app/components/snazzy/
|
|
70
|
+
- app/components/snazzy/tooltip_component.html.erb
|
|
89
71
|
- app/components/snazzy/tooltip_component.rb
|
|
90
|
-
- app/components/snazzy/tooltip_component.slim
|
|
91
72
|
- app/javascript/controllers/snazzy/clipboard_controller.js
|
|
92
73
|
- app/javascript/controllers/snazzy/index.js
|
|
93
74
|
- app/javascript/controllers/snazzy/tags_controller.js
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
- name = "#{@model_name}[#{@field}][]"
|
|
2
|
-
|
|
3
|
-
.input-group data-controller="snazzy--tags" data-snazzy--tags-validations-value=@validations
|
|
4
|
-
label = @label_text
|
|
5
|
-
input placeholder=@placeholder data-snazzy--tags-target="input" data-deletable-name=name name=name data-action="keydown->snazzy--tags#handleInput"
|
|
6
|
-
.mt-2
|
|
7
|
-
= "Press "
|
|
8
|
-
code.bg-gray-100.text-red-500.px-2.py-1.border.border-solid.border-gray-500.rounded-md Enter
|
|
9
|
-
= " or "
|
|
10
|
-
code.bg-gray-100.text-red-500.px-2.py-1.border.border-solid.border-gray-500.rounded-md return
|
|
11
|
-
= " after each #{@field.to_s.singularize}."
|
|
12
|
-
.border.border-solid.border-red-300.bg-red-50.text-red-500.px-2.py-1.mt-2.hidden data-snazzy--tags-target="errorContainer"
|
|
13
|
-
.input-wrapper.relative.mt-1
|
|
14
|
-
.TagCloud.inline-flex.flex-wrap.items-center data-snazzy--tags-target="tagCloud"
|
|
15
|
-
- @object.send(@field).each do |lab|
|
|
16
|
-
= render(Snazzy::Tags::GreyTagComponent.new(lab, deletable_name: name))
|
|
17
|
-
div data-snazzy--tags-target="hiddenInputContainer"
|
|
18
|
-
- @object.send(@field).each do |value|
|
|
19
|
-
= @form.hidden_field @field.to_sym, value: value, name:, id: nil
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
- if @tooltip
|
|
2
|
-
= render Snazzy::TooltipComponent.new(@tooltip) do
|
|
3
|
-
= link_to "", data: { action: "snazzy--clipboard#oneTimeCopy", content: @copyable }, class: "inline-block p-2 hover:bg-yellow-100 rounded-full transition-colors duration-150 #{@css_classes}" do
|
|
4
|
-
- if respond_to?(:inline_svg_tag)
|
|
5
|
-
= inline_svg_tag @icon, class: "pointer-events-none"
|
|
6
|
-
- else
|
|
7
|
-
span.pointer-events-none = @icon
|
|
8
|
-
- else
|
|
9
|
-
button.inline-block.ml-2.bg-primary-100.px-2.py-1.rounded-md.hover:bg-primary-300.text-white data-action="snazzy--clipboard#oneTimeCopy" data-content=@copyable
|
|
10
|
-
= @label
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
span.inline-flex.items-center.rounded-md.bg-gray-50.px-2.py-1.text-xs.font-medium.text-gray-700.ring-1.ring-inset.ring-gray-600/20.mr-2.my-1
|
|
2
|
-
= @label
|
|
3
|
-
- if @deletable_name
|
|
4
|
-
span.ml-2.cursor-pointer data-action="click->snazzy--tags#removeTag" data-deletable-name=@deletable_name X
|