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.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +12 -0
  3. data/app/assets/javascripts/ariadne_view_components.js +14 -14
  4. data/app/assets/javascripts/ariadne_view_components.js.br +0 -0
  5. data/app/assets/javascripts/ariadne_view_components.js.gz +0 -0
  6. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  7. data/app/assets/stylesheets/ariadne_view_components.css +1 -1
  8. data/app/assets/stylesheets/ariadne_view_components.css.br +0 -0
  9. data/app/assets/stylesheets/ariadne_view_components.css.gz +0 -0
  10. data/app/components/ariadne/base_component.rb +15 -5
  11. data/app/components/ariadne/form/base_component.rb +1 -1
  12. data/app/components/ariadne/form/checkbox/component.html.erb +1 -1
  13. data/app/components/ariadne/form/checkbox/component.rb +15 -3
  14. data/app/components/ariadne/form/radio_button/component.html.erb +1 -3
  15. data/app/components/ariadne/form/select/component.html.erb +4 -2
  16. data/app/components/ariadne/form/select/component.rb +50 -2
  17. data/app/components/ariadne/form/toggle_group/component.html.erb +7 -0
  18. data/app/components/ariadne/form/toggle_group/component.rb +35 -0
  19. data/app/components/ariadne/form/toggle_group/option/component.html.erb +8 -0
  20. data/app/components/ariadne/form/toggle_group/option/component.rb +46 -0
  21. data/app/components/ariadne/layout/label_block/component.html.erb +12 -0
  22. data/app/components/ariadne/layout/label_block/component.rb +39 -0
  23. data/app/components/ariadne/layout/nav_bar/component.rb +4 -4
  24. data/app/components/ariadne/layout/section_block/component.html.erb +4 -0
  25. data/app/components/ariadne/layout/section_block/component.rb +12 -0
  26. data/app/components/ariadne/layout/section_block/header/component.html.erb +4 -0
  27. data/app/components/ariadne/layout/section_block/header/component.rb +14 -0
  28. data/app/components/ariadne/ui/avatar/component.html.erb +7 -0
  29. data/app/components/ariadne/ui/avatar/component.rb +54 -0
  30. data/app/components/ariadne/ui/badge/component.rb +8 -0
  31. data/app/components/ariadne/ui/card/body/component.html.erb +3 -0
  32. data/app/components/ariadne/ui/card/body/component.rb +25 -0
  33. data/app/components/ariadne/ui/card/component.html.erb +2 -6
  34. data/app/components/ariadne/ui/card/component.rb +1 -0
  35. data/app/components/ariadne/ui/combobox/component.rb +2 -0
  36. data/app/components/ariadne/ui/list/component.html.erb +2 -2
  37. data/app/components/ariadne/ui/list/component.rb +11 -12
  38. data/app/components/ariadne/ui/pagination/component.html.erb +29 -0
  39. data/app/components/ariadne/ui/pagination/component.rb +30 -0
  40. data/app/components/ariadne/ui/stats_panel/component.html.erb +7 -0
  41. data/app/components/ariadne/ui/stats_panel/component.rb +12 -0
  42. data/app/components/ariadne/ui/stats_panel/item/component.html.erb +4 -0
  43. data/app/components/ariadne/ui/stats_panel/item/component.rb +27 -0
  44. data/app/components/ariadne/ui/time_ago/component.html.erb +1 -0
  45. data/app/components/ariadne/ui/time_ago/component.rb +155 -0
  46. data/app/components/ariadne/ui/time_ago/component.ts +8 -0
  47. data/app/components/ariadne/ui/time_ago/en.yml +12 -0
  48. data/app/frontend/ariadne/index.ts +0 -3
  49. data/app/lib/ariadne/fetch_or_fallback_helper.rb +23 -0
  50. data/lib/ariadne/view_components/engine.rb +4 -0
  51. data/lib/ariadne/view_components/version.rb +1 -1
  52. metadata +28 -3
  53. 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-foreground",
36
- "dark:ariadne-bg-background-dark",
37
- "dark:ariadne-border-b",
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,4 @@
1
+ <section class="ariadne-flex ariadne-flex-col ariadne-h-full">
2
+ <%= header %>
3
+ <%= content %>
4
+ </section>
@@ -0,0 +1,12 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module Layout
6
+ module SectionBlock
7
+ class Component < Ariadne::BaseComponent
8
+ renders_one :header, "Ariadne::Layout::SectionBlock::Header::Component"
9
+ end
10
+ end
11
+ end
12
+ end
@@ -0,0 +1,4 @@
1
+ <div class="ariadne-flex ariadne-justify-between ariadne-items-center ariadne-p-1">
2
+ <div class="ariadne-uppercase ariadne-text-muted-foreground dark:ariadne-text-muted-foreground-dark ariadne-text-xs"><%= label %></div>
3
+ <%= content %>
4
+ </div>
@@ -0,0 +1,14 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module Layout
6
+ module SectionBlock
7
+ module Header
8
+ class Component < Ariadne::BaseComponent
9
+ option :label
10
+ end
11
+ end
12
+ end
13
+ end
14
+ end
@@ -0,0 +1,7 @@
1
+ <% if src %>
2
+ <img src="<%= src %>" title="<%= title %>" class="<%= style(size:, circle:, has_src: src.present?) %>">
3
+ <% else %>
4
+ <div title="<%= title %>" class="<%= style(size:, circle:, has_src: src.present?) %>">
5
+ <%= placeholder_text %>
6
+ </div>
7
+ <% 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,3 @@
1
+ <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
2
+ <%= content %>
3
+ </div>
@@ -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
- <div class="ariadne-p-6 ariadne-pt-0">
6
- <%= content %>
7
- </div>
5
+ <%= body %>
8
6
  <%= footer %>
9
7
  <% end %>
10
8
  <% else %>
11
9
  <%= header %>
12
- <div class="ariadne-p-6 ariadne-pt-0">
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
@@ -64,6 +64,8 @@ module Ariadne
64
64
  sm { "ariadne-w-36" }
65
65
  md { "ariadne-w-52" }
66
66
  lg { "ariadne-w-96" }
67
+ full { "ariadne-w-full" }
68
+ none {} # let the child decide how big its menu ought to be
67
69
  end
68
70
  end
69
71
  end
@@ -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] = "search"
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-grow",
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,7 @@
1
+ <dl class="flex flex-wrap space-x-2 divide-x divide-slate-100 dark:divide-slate-800">
2
+ <% stats.each_with_index do |stat, index| %>
3
+ <span class="flex-1 <%= 'pl-2' if index > 0 %>">
4
+ <%= render stat %>
5
+ </span>
6
+ <% end %>
7
+ </dl>
@@ -0,0 +1,12 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module StatsPanel
7
+ class Component < Ariadne::BaseComponent
8
+ renders_many :stats, Item::Component
9
+ end
10
+ end
11
+ end
12
+ end
@@ -0,0 +1,4 @@
1
+ <span class="flex flex-col-reverse">
2
+ <dt class="text-zinc-600 dark:text-zinc-400 text-xs"><%= label %></dt>
3
+ <dd class="<%= style(theme: ) %>"><%= content %></dd>
4
+ </span>
@@ -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
@@ -0,0 +1,8 @@
1
+
2
+ import '@github/relative-time-element'
3
+ import {controllerFactory} from '@utils/createController'
4
+
5
+ export default class TimeAgoController extends controllerFactory<HTMLDetailsElement>()({
6
+ targets: {},
7
+ }) {
8
+ }
@@ -0,0 +1,12 @@
1
+ ---
2
+ en:
3
+ ariadne:
4
+ ui:
5
+ time_ago:
6
+ ago: "%{dt} ago"
7
+ days: "%{count}d"
8
+ full_date_format: "%b %d, %Y %I:%M %p"
9
+ hours: "%{count}h"
10
+ minutes: "%{count}m"
11
+ right_now: right now
12
+ short_date_format: "%b %d, %I:%M %p"
@@ -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