ariadne_view_components 0.0.85 → 0.0.86.1
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/CHANGELOG.md +12 -0
- data/app/assets/javascripts/ariadne_view_components.js +14 -14
- data/app/assets/javascripts/ariadne_view_components.js.br +0 -0
- data/app/assets/javascripts/ariadne_view_components.js.gz +0 -0
- data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
- data/app/assets/stylesheets/ariadne_view_components.css +1 -1
- data/app/assets/stylesheets/ariadne_view_components.css.br +0 -0
- data/app/assets/stylesheets/ariadne_view_components.css.gz +0 -0
- data/app/components/ariadne/base_component.rb +15 -5
- data/app/components/ariadne/form/base_component.rb +1 -1
- data/app/components/ariadne/form/checkbox/component.html.erb +1 -1
- data/app/components/ariadne/form/checkbox/component.rb +15 -3
- data/app/components/ariadne/form/radio_button/component.html.erb +1 -3
- data/app/components/ariadne/form/select/component.html.erb +4 -2
- data/app/components/ariadne/form/select/component.rb +50 -2
- data/app/components/ariadne/form/toggle_group/component.html.erb +7 -0
- data/app/components/ariadne/form/toggle_group/component.rb +35 -0
- data/app/components/ariadne/form/toggle_group/option/component.html.erb +8 -0
- data/app/components/ariadne/form/toggle_group/option/component.rb +46 -0
- data/app/components/ariadne/layout/label_block/component.html.erb +12 -0
- data/app/components/ariadne/layout/label_block/component.rb +39 -0
- data/app/components/ariadne/layout/nav_bar/component.rb +4 -4
- data/app/components/ariadne/layout/section_block/component.html.erb +4 -0
- data/app/components/ariadne/layout/section_block/component.rb +12 -0
- data/app/components/ariadne/layout/section_block/header/component.html.erb +4 -0
- data/app/components/ariadne/layout/section_block/header/component.rb +14 -0
- data/app/components/ariadne/ui/avatar/component.html.erb +7 -0
- data/app/components/ariadne/ui/avatar/component.rb +54 -0
- data/app/components/ariadne/ui/badge/component.rb +8 -0
- data/app/components/ariadne/ui/card/body/component.html.erb +3 -0
- data/app/components/ariadne/ui/card/body/component.rb +25 -0
- data/app/components/ariadne/ui/card/component.html.erb +2 -6
- data/app/components/ariadne/ui/card/component.rb +1 -0
- data/app/components/ariadne/ui/combobox/component.rb +2 -0
- data/app/components/ariadne/ui/list/component.html.erb +2 -2
- data/app/components/ariadne/ui/list/component.rb +11 -12
- data/app/components/ariadne/ui/pagination/component.html.erb +29 -0
- data/app/components/ariadne/ui/pagination/component.rb +30 -0
- data/app/components/ariadne/ui/stats_panel/component.html.erb +7 -0
- data/app/components/ariadne/ui/stats_panel/component.rb +12 -0
- data/app/components/ariadne/ui/stats_panel/item/component.html.erb +4 -0
- data/app/components/ariadne/ui/stats_panel/item/component.rb +27 -0
- data/app/components/ariadne/ui/time_ago/component.html.erb +1 -0
- data/app/components/ariadne/ui/time_ago/component.rb +155 -0
- data/app/components/ariadne/ui/time_ago/component.ts +8 -0
- data/app/components/ariadne/ui/time_ago/en.yml +12 -0
- data/app/frontend/ariadne/index.ts +0 -3
- data/app/lib/ariadne/fetch_or_fallback_helper.rb +23 -0
- data/lib/ariadne/view_components/engine.rb +4 -0
- data/lib/ariadne/view_components/version.rb +1 -1
- metadata +28 -3
- data/static/audited_at.json +0 -58
@@ -0,0 +1,12 @@
|
|
1
|
+
<div>
|
2
|
+
<div class='ariadne-py-1 ariadne-mb-1 text-h5-caps ariadne-text-zinc-600 dark:ariadne-text-zinc-400'>
|
3
|
+
<div class="aridne--ml-px aridne-flex aridne-flex-1">
|
4
|
+
<%= label %>
|
5
|
+
<% if trailing_visual? %>
|
6
|
+
<%= trailing_visual %>
|
7
|
+
<% end %>
|
8
|
+
</a>
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
<%= content %>
|
12
|
+
</div>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module Layout
|
6
|
+
module LabelBlock
|
7
|
+
class Component < Ariadne::BaseComponent
|
8
|
+
option :label
|
9
|
+
|
10
|
+
# Trailing visuals appear to the right of the label text.
|
11
|
+
#
|
12
|
+
# Use:
|
13
|
+
#
|
14
|
+
# - `trailing_visual_button` for a <%= link_to_component(Ariadne::UI::Button::Component) %>.
|
15
|
+
renders_one :trailing_visual, types: {
|
16
|
+
button: lambda { |**options|
|
17
|
+
options[:size] ||= :xs
|
18
|
+
options[:theme] ||= :none
|
19
|
+
options[:html_attrs] ||= {}
|
20
|
+
|
21
|
+
options[:html_attrs][:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:trailing_visual), options[:html_attrs][:class] || ""].join(" "))
|
22
|
+
|
23
|
+
Ariadne::UI::Button::Component.new(**options)
|
24
|
+
},
|
25
|
+
}
|
26
|
+
|
27
|
+
style(:trailing_visual) do
|
28
|
+
base do
|
29
|
+
[
|
30
|
+
"araidne-pl-2",
|
31
|
+
"ariadne-text-gray-400",
|
32
|
+
"hover:ariadne-text-gray-500",
|
33
|
+
]
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|
@@ -32,13 +32,13 @@ module Ariadne
|
|
32
32
|
style do
|
33
33
|
base do
|
34
34
|
[
|
35
|
-
"ariadne-bg-
|
36
|
-
"dark:ariadne-bg-
|
37
|
-
"
|
35
|
+
"ariadne-bg-panel",
|
36
|
+
"dark:ariadne-bg-panel-dark",
|
37
|
+
"ariadne-border-b",
|
38
|
+
"ariadne-border-zinc-100",
|
38
39
|
"dark:ariadne-border-zinc-900",
|
39
40
|
"ariadne-z-50",
|
40
41
|
"ariadne-overflow-hidden",
|
41
|
-
"ariadne-border-zinc-100",
|
42
42
|
]
|
43
43
|
end
|
44
44
|
end
|
@@ -0,0 +1,54 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module UI
|
6
|
+
module Avatar
|
7
|
+
class Component < Ariadne::BaseComponent
|
8
|
+
option :title, default: proc { "" }
|
9
|
+
option :src, optional: true
|
10
|
+
option :size, default: proc { :base }
|
11
|
+
option :circle, default: proc { false }
|
12
|
+
|
13
|
+
attr_reader :placeholder_text
|
14
|
+
|
15
|
+
style do
|
16
|
+
base do
|
17
|
+
"select-none object-cover"
|
18
|
+
end
|
19
|
+
|
20
|
+
variants do
|
21
|
+
size do
|
22
|
+
xs { ["ariadne-size-4", "ariadne-rounded"] }
|
23
|
+
sm { ["ariadne-size-5", "ariadne-rounded-md"] }
|
24
|
+
md { ["ariadne-size-8", "ariadne-rounded-lg"] }
|
25
|
+
lg { ["ariadne-size-10", "ariadne-rounded-xl"] }
|
26
|
+
xl { ["ariadne-size-12", "ariadne-rounded-2xl"] }
|
27
|
+
end
|
28
|
+
circle do
|
29
|
+
yes { "!ariadne-rounded-full" }
|
30
|
+
end
|
31
|
+
has_src do
|
32
|
+
no do
|
33
|
+
[
|
34
|
+
"ariadne-inline-flex",
|
35
|
+
"ariadne-items-center",
|
36
|
+
"ariadne-justify-center",
|
37
|
+
"ariadne-bg-violet-200",
|
38
|
+
"dark:ariadne-bg-violet-800",
|
39
|
+
"ariadne-text-violet-600",
|
40
|
+
"dark:ariadne-text-violet-400",
|
41
|
+
]
|
42
|
+
end
|
43
|
+
end
|
44
|
+
end
|
45
|
+
end
|
46
|
+
|
47
|
+
def before_render
|
48
|
+
len = [:xs, :sm, :md].include?(size) ? 0 : 1
|
49
|
+
@placeholder_text = (title || "").strip.split[0..len].map { |word| word.capitalize[0] }.join
|
50
|
+
end
|
51
|
+
end
|
52
|
+
end
|
53
|
+
end
|
54
|
+
end
|
@@ -44,6 +44,14 @@ module Ariadne
|
|
44
44
|
"dark:ariadne-border-white/10",
|
45
45
|
"ariadne-text-content",
|
46
46
|
"dark:ariadne-text-content-dark",
|
47
|
+
"ariadne-outline-none",
|
48
|
+
"ariadne-ring-offset-0",
|
49
|
+
"focus-visible:ariadne-ring-2",
|
50
|
+
"ariadne-ring-blue-400",
|
51
|
+
"dark:ariadne-ring-blue-600",
|
52
|
+
"ariadne-py-1",
|
53
|
+
"ariadne-px-1.5",
|
54
|
+
"ariadne-rounded-md",
|
47
55
|
]
|
48
56
|
end
|
49
57
|
|
@@ -0,0 +1,25 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module UI
|
6
|
+
module Card
|
7
|
+
module Body
|
8
|
+
class Component < Ariadne::BaseComponent
|
9
|
+
accepts_html_attributes do |html_attrs|
|
10
|
+
html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
|
11
|
+
end
|
12
|
+
|
13
|
+
style do
|
14
|
+
base do
|
15
|
+
[
|
16
|
+
"ariadne-p-6",
|
17
|
+
"ariadne-pt-0",
|
18
|
+
]
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
24
|
+
end
|
25
|
+
end
|
@@ -2,16 +2,12 @@
|
|
2
2
|
<% if href.present? %>
|
3
3
|
<%= render(Ariadne::UI::Link::Component.new(href: href, theme: :none, html_attrs: { class: "w-full h-full"})) do %>
|
4
4
|
<%= header %>
|
5
|
-
|
6
|
-
<%= content %>
|
7
|
-
</div>
|
5
|
+
<%= body %>
|
8
6
|
<%= footer %>
|
9
7
|
<% end %>
|
10
8
|
<% else %>
|
11
9
|
<%= header %>
|
12
|
-
|
13
|
-
<%= content %>
|
14
|
-
</div>
|
10
|
+
<%= body %>
|
15
11
|
<%= footer %>
|
16
12
|
</div>
|
17
13
|
<% end %>
|
@@ -13,6 +13,7 @@ module Ariadne
|
|
13
13
|
html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(link: href.present? ? :yes : :no), html_attrs[:class]].join(" "))
|
14
14
|
end
|
15
15
|
|
16
|
+
renders_one :body, Ariadne::UI::Card::Body::Component
|
16
17
|
renders_one :footer, Ariadne::UI::Card::Footer::Component
|
17
18
|
|
18
19
|
style do
|
@@ -12,7 +12,7 @@
|
|
12
12
|
<div
|
13
13
|
class="<%= style(:item) %>"
|
14
14
|
data-<%= stimulus_name %>-target="searchString">
|
15
|
-
<div class="ariadne-truncate" role="menuitemcheckbox"><%= checkbox %></div>
|
15
|
+
<div class="ariadne-truncate ariadne-w-full" role="menuitemcheckbox"><%= checkbox %></div>
|
16
16
|
</div>
|
17
17
|
<% end %>
|
18
18
|
<% radio_buttons.each do |radio_button| %>
|
@@ -27,7 +27,7 @@
|
|
27
27
|
<%= 'role="menuitem"' if as_menu %>
|
28
28
|
class="<%= style(:item) %>"
|
29
29
|
data-<%= stimulus_name %>-target="searchString">
|
30
|
-
<div class="ariadne-relative ariadne-flex "><%= item %></div>
|
30
|
+
<div class="ariadne-relative ariadne-flex ariadne-w-full"><%= item %></div>
|
31
31
|
</div>
|
32
32
|
<% end %>
|
33
33
|
<div class="ariadne-text-center ariadne-hidden" data-<%= stimulus_name %>-target="emptyRoot">
|
@@ -15,9 +15,8 @@ module Ariadne
|
|
15
15
|
@empty_placeholder = options.delete(:empty_placeholder)
|
16
16
|
|
17
17
|
options.delete(:size)
|
18
|
-
options[:theme] = :nude
|
19
18
|
options[:width] = :full
|
20
|
-
options[:name] = "
|
19
|
+
options[:name] = ""
|
21
20
|
options[:label] = ""
|
22
21
|
|
23
22
|
options[:html_attrs] ||= {}
|
@@ -52,11 +51,8 @@ module Ariadne
|
|
52
51
|
"ariadne-pe-1",
|
53
52
|
"ariadne-rounded",
|
54
53
|
"!ariadne-ring-0",
|
55
|
-
"hover:ariadne-bg-zinc-100",
|
56
|
-
"hover:dark:ariadne-bg-zinc-800",
|
57
|
-
"focus-within:ariadne-bg-zinc-100",
|
58
|
-
"focus-within:dark:ariadne-bg-zinc-800",
|
59
54
|
"ariadne-cursor-pointer",
|
55
|
+
SHARED_BACKGROUND_COLORS,
|
60
56
|
options[:html_attrs][:class],
|
61
57
|
]
|
62
58
|
|
@@ -76,6 +72,7 @@ module Ariadne
|
|
76
72
|
base do
|
77
73
|
[
|
78
74
|
"ariadne-overflow-y-auto",
|
75
|
+
"ariadne-grow",
|
79
76
|
]
|
80
77
|
end
|
81
78
|
|
@@ -94,11 +91,17 @@ module Ariadne
|
|
94
91
|
[
|
95
92
|
"ariadne-flex",
|
96
93
|
"ariadne-flex-col",
|
97
|
-
"ariadne-
|
94
|
+
"ariadne-gap-1",
|
98
95
|
]
|
99
96
|
end
|
100
97
|
end
|
101
98
|
|
99
|
+
SHARED_BACKGROUND_COLORS = [
|
100
|
+
"hover:ariadne-bg-blue-100",
|
101
|
+
"hover:dark:ariadne-bg-blue-800",
|
102
|
+
"focus-within:ariadne-bg-blue-100",
|
103
|
+
"focus-within:dark:ariadne-bg-blue-800",
|
104
|
+
]
|
102
105
|
style :item do
|
103
106
|
base do
|
104
107
|
[
|
@@ -106,10 +109,6 @@ module Ariadne
|
|
106
109
|
"ariadne-items-center",
|
107
110
|
"ariadne-rounded",
|
108
111
|
"!ariadne-ring-0",
|
109
|
-
"hover:ariadne-bg-zinc-100",
|
110
|
-
"hover:dark:ariadne-bg-zinc-800",
|
111
|
-
"focus-within:ariadne-bg-zinc-100",
|
112
|
-
"focus-within:dark:ariadne-bg-zinc-800",
|
113
112
|
"ariadne-cursor-default",
|
114
113
|
"ariadne-select-none",
|
115
114
|
"ariadne-items-center",
|
@@ -121,7 +120,7 @@ module Ariadne
|
|
121
120
|
"ariadne-transition-colors",
|
122
121
|
"disabled:ariadne-pointer-events-none",
|
123
122
|
"disabled:ariadne-opacity-50",
|
124
|
-
]
|
123
|
+
].concat(SHARED_BACKGROUND_COLORS)
|
125
124
|
end
|
126
125
|
end
|
127
126
|
end
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<nav
|
2
|
+
role="navigation"
|
3
|
+
aria-label="<%= label %>">
|
4
|
+
<div class="[grid-area:pages] flex justify-center">
|
5
|
+
<ul class="inline-flex items-baseline justify-start gap-2">
|
6
|
+
<% page_links.each do |page| %>
|
7
|
+
<li>
|
8
|
+
<% if page.nil? %>
|
9
|
+
<span aria-hidden>…</span>
|
10
|
+
<% else %>
|
11
|
+
<%= render UI::Button::Component.new(
|
12
|
+
as: :link,
|
13
|
+
theme: :ghost,
|
14
|
+
state: page == current_page ? 'active' : '',
|
15
|
+
href: callback_page_url.call(page),
|
16
|
+
html_attrs: {
|
17
|
+
"aria-current": page == current_page ? 'true' : 'false',
|
18
|
+
"aria-label": goto_label,
|
19
|
+
data: { turbo: false },
|
20
|
+
}
|
21
|
+
) do %>
|
22
|
+
<%= page %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
25
|
+
</li>
|
26
|
+
<% end %>
|
27
|
+
</ul>
|
28
|
+
</div>
|
29
|
+
</nav>
|
@@ -0,0 +1,30 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module UI
|
6
|
+
module Pagination
|
7
|
+
class Component < Ariadne::BaseComponent
|
8
|
+
option :label
|
9
|
+
option :goto_label
|
10
|
+
|
11
|
+
option :current_page
|
12
|
+
option :pages_count
|
13
|
+
|
14
|
+
option :callback_page_url
|
15
|
+
|
16
|
+
option :page_size_options, default: proc { [10, 25, 50, 100] }
|
17
|
+
|
18
|
+
def page_links
|
19
|
+
(1..pages_count).each_with_object([]) do |page, list|
|
20
|
+
if [1, pages_count].include?(page) || page.between?(current_page - 2, current_page + 2)
|
21
|
+
list << page
|
22
|
+
elsif list.last
|
23
|
+
list << nil
|
24
|
+
end
|
25
|
+
end
|
26
|
+
end
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
@@ -0,0 +1,27 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module UI
|
6
|
+
module StatsPanel
|
7
|
+
module Item
|
8
|
+
class Component < Ariadne::BaseComponent
|
9
|
+
option :theme, default: proc { :default }
|
10
|
+
option :label
|
11
|
+
|
12
|
+
style do
|
13
|
+
base { ["text-number-lg-smb"] }
|
14
|
+
|
15
|
+
variants do
|
16
|
+
theme do
|
17
|
+
default { [] }
|
18
|
+
success { ["ariadne-text-emerald-600", "dark:ariadne-text-emerald-400"] }
|
19
|
+
danger { ["ariadne-text-red-600", "dark:ariadne-text-red-400"] }
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
24
|
+
end
|
25
|
+
end
|
26
|
+
end
|
27
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
<relative-time <%= html_attributes %>></relative-time>
|
@@ -0,0 +1,155 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module UI
|
6
|
+
module TimeAgo
|
7
|
+
# Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
|
8
|
+
class Component < Ariadne::BaseComponent
|
9
|
+
include FetchOrFallbackHelper
|
10
|
+
|
11
|
+
TENSE_DEFAULT = :auto
|
12
|
+
TENSE_OPTIONS = [TENSE_DEFAULT, :past, :future].freeze
|
13
|
+
|
14
|
+
FORMAT_DEFAULT = :auto
|
15
|
+
FORMAT_OPTIONS = [FORMAT_DEFAULT, :micro, :elapsed].freeze
|
16
|
+
|
17
|
+
FORMAT_STYLE_DEFAULT = nil
|
18
|
+
FORMAT_STYLE_OPTIONS = [FORMAT_STYLE_DEFAULT, :long, :short, :narrow].freeze
|
19
|
+
|
20
|
+
SECOND_DEFAULT = nil
|
21
|
+
SECOND_MAPPINGS = {
|
22
|
+
SECOND_DEFAULT => nil,
|
23
|
+
:numeric => "numeric",
|
24
|
+
:two_digit => "2-digit",
|
25
|
+
}.freeze
|
26
|
+
SECOND_OPTIONS = SECOND_MAPPINGS.keys
|
27
|
+
|
28
|
+
MINUTE_DEFAULT = nil
|
29
|
+
MINUTE_MAPPINGS = {
|
30
|
+
MINUTE_DEFAULT => nil,
|
31
|
+
:numeric => "numeric",
|
32
|
+
:two_digit => "2-digit",
|
33
|
+
}.freeze
|
34
|
+
MINUTE_OPTIONS = MINUTE_MAPPINGS.keys
|
35
|
+
|
36
|
+
HOUR_DEFAULT = nil
|
37
|
+
HOUR_MAPPINGS = {
|
38
|
+
HOUR_DEFAULT => nil,
|
39
|
+
:numeric => "numeric",
|
40
|
+
:two_digit => "2-digit",
|
41
|
+
}.freeze
|
42
|
+
HOUR_OPTIONS = HOUR_MAPPINGS.keys
|
43
|
+
|
44
|
+
WEEKDAY_DEFAULT = nil
|
45
|
+
WEEKDAY_OPTIONS = [WEEKDAY_DEFAULT, :long, :short, :narrow].freeze
|
46
|
+
|
47
|
+
DAY_DEFAULT = nil
|
48
|
+
DAY_MAPPINGS = {
|
49
|
+
DAY_DEFAULT => nil,
|
50
|
+
:numeric => "numeric",
|
51
|
+
:two_digit => "2-digit",
|
52
|
+
}.freeze
|
53
|
+
DAY_OPTIONS = DAY_MAPPINGS.keys
|
54
|
+
|
55
|
+
MONTH_DEFAULT = nil
|
56
|
+
MONTH_MAPPINGS = {
|
57
|
+
MONTH_DEFAULT => nil,
|
58
|
+
:numeric => "numeric",
|
59
|
+
:two_digit => "2-digit",
|
60
|
+
:short => "short",
|
61
|
+
:long => "long",
|
62
|
+
:narrow => "narrow",
|
63
|
+
}.freeze
|
64
|
+
MONTH_OPTIONS = MONTH_MAPPINGS.keys
|
65
|
+
|
66
|
+
YEAR_DEFAULT = nil
|
67
|
+
YEAR_MAPPINGS = {
|
68
|
+
YEAR_DEFAULT => nil,
|
69
|
+
:numeric => "numeric",
|
70
|
+
:two_digit => "2-digit",
|
71
|
+
}.freeze
|
72
|
+
YEAR_OPTIONS = YEAR_MAPPINGS.keys
|
73
|
+
|
74
|
+
TIMEZONENAME_DEFAULT = nil
|
75
|
+
TIMEZONE_MAPPINGS = {
|
76
|
+
TIMEZONENAME_DEFAULT => nil,
|
77
|
+
:long => "long",
|
78
|
+
:short => "short",
|
79
|
+
:short_offset => "shortOffset",
|
80
|
+
:long_offset => "longOffset",
|
81
|
+
:short_generic => "shortGeneric",
|
82
|
+
:long_generic => "longGeneric",
|
83
|
+
}.freeze
|
84
|
+
TIMEZONENAME_OPTIONS = TIMEZONE_MAPPINGS.keys
|
85
|
+
|
86
|
+
PRECISION_DEFAULT = nil
|
87
|
+
PRECISION_OPTIONS = [PRECISION_DEFAULT, :second, :minute, :hour, :day, :month, :year].freeze
|
88
|
+
|
89
|
+
# @param datetime [Time] The time to be formatted.
|
90
|
+
option :datetime
|
91
|
+
# @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
|
92
|
+
option :tense, default: -> { TENSE_DEFAULT }
|
93
|
+
# @param prefix [sring] What to prefix the relative time display with.
|
94
|
+
option :prefix, default: -> { nil }
|
95
|
+
# @param second [Symbol] What format seconds should take. <%= one_of(Primer::Beta::RelativeTime::SECOND_OPTIONS) %>
|
96
|
+
option :second, default: -> { SECOND_DEFAULT }
|
97
|
+
# @param minute [Symbol] What format minues should take. <%= one_of(Primer::Beta::RelativeTime::MINUTE_OPTIONS) %>
|
98
|
+
option :minute, default: -> { MINUTE_DEFAULT }
|
99
|
+
# @param hour [Symbol] What format hours should take. <%= one_of(Primer::Beta::RelativeTime::HOUR_OPTIONS) %>
|
100
|
+
option :hour, default: -> { HOUR_DEFAULT }
|
101
|
+
# @param weekday [Symbol] What format weekdays should take. <%= one_of(Primer::Beta::RelativeTime::WEEKDAY_OPTIONS) %>
|
102
|
+
option :weekday, default: -> { WEEKDAY_DEFAULT }
|
103
|
+
# @param day [Symbol] What format days should take. <%= one_of(Primer::Beta::RelativeTime::DAY_OPTIONS) %>
|
104
|
+
option :day, default: -> { DAY_DEFAULT }
|
105
|
+
# @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
|
106
|
+
option :month, default: -> { MONTH_DEFAULT }
|
107
|
+
# @param year [Symbol] What format years should take. <%= one_of(Primer::Beta::RelativeTime::YEAR_OPTIONS) %>
|
108
|
+
option :year, default: -> { YEAR_DEFAULT }
|
109
|
+
# @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Primer::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
|
110
|
+
option :time_zone_name, default: -> { TIMEZONENAME_DEFAULT }
|
111
|
+
# @param threshold [String] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
|
112
|
+
option :threshold, default: -> { nil }
|
113
|
+
# @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
|
114
|
+
option :precision, default: -> { PRECISION_DEFAULT }
|
115
|
+
# @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
|
116
|
+
option :format, default: -> { FORMAT_DEFAULT }
|
117
|
+
# @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
|
118
|
+
option :format_style, default: -> { FORMAT_STYLE_DEFAULT }
|
119
|
+
# @param lang [String] The language to use.
|
120
|
+
option :lang, default: -> { nil }
|
121
|
+
# @param title [String] Provide a custom title to the element.
|
122
|
+
option :title, default: -> { nil }
|
123
|
+
# @param no_title [Boolean] Removes the `title` attribute provided on the element by default.
|
124
|
+
option :no_title, default: -> { false }
|
125
|
+
|
126
|
+
accepts_html_attributes do |html_attrs|
|
127
|
+
html_attrs[:tense] = tense if tense.present?
|
128
|
+
html_attrs[:prefix] = prefix if prefix.present?
|
129
|
+
html_attrs[:second] = fetch_or_fallback(SECOND_OPTIONS, second, SECOND_DEFAULT) if second.present?
|
130
|
+
html_attrs[:minute] = fetch_or_fallback(MINUTE_OPTIONS, minute, MINUTE_DEFAULT) if minute.present?
|
131
|
+
html_attrs[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
|
132
|
+
html_attrs[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
|
133
|
+
html_attrs[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
|
134
|
+
html_attrs[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
|
135
|
+
html_attrs[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
|
136
|
+
html_attrs[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
|
137
|
+
html_attrs[:threshold] = threshold if threshold.present?
|
138
|
+
html_attrs[:precision] = precision if precision.present?
|
139
|
+
html_attrs[:title] = title if title.present?
|
140
|
+
html_attrs[:"no-title"] = no_title if no_title
|
141
|
+
html_attrs[:lang] = lang if lang.present?
|
142
|
+
html_attrs[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
|
143
|
+
html_attrs[:"format-style"] = format_style if format_style.present?
|
144
|
+
if datetime.respond_to?(:iso8601)
|
145
|
+
@datetime = datetime
|
146
|
+
html_attrs[:datetime] = datetime.iso8601
|
147
|
+
elsif datetime.present?
|
148
|
+
@datetime = Time.iso8601(datetime)
|
149
|
+
html_attrs[:datetime] = @datetime
|
150
|
+
end
|
151
|
+
end
|
152
|
+
end
|
153
|
+
end
|
154
|
+
end
|
155
|
+
end
|
@@ -1,10 +1,7 @@
|
|
1
|
-
import '@github/auto-check-element'
|
2
1
|
import '@github/auto-complete-element'
|
3
2
|
import '@github/details-menu-element'
|
4
3
|
import '@github/image-crop-element'
|
5
|
-
import '@github/include-fragment-element'
|
6
4
|
import '@github/markdown-toolbar-element'
|
7
|
-
import '@github/relative-time-element'
|
8
5
|
|
9
6
|
import '~/stylesheets/ariadne_view_components.css'
|
10
7
|
|