ariadne_view_components 0.0.16-x86_64-linux → 0.0.18-x86_64-linux

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 (15) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ariadne_view_components.js +1 -1
  3. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  4. data/app/components/ariadne/comment_component.html.erb +31 -37
  5. data/app/components/ariadne/comment_component.rb +9 -7
  6. data/app/components/ariadne/details_component.rb +1 -1
  7. data/app/components/ariadne/rich-text-area-component.ts +2 -2
  8. data/app/components/ariadne/tab_container_component.erb +1 -3
  9. data/app/lib/ariadne/action_view_extensions/form_helper.rb +1 -1
  10. data/lib/ariadne/view_components/version.rb +1 -1
  11. data/static/arguments.yml +2 -2
  12. data/static/classes.yml +4 -8
  13. data/static/constants.json +6 -5
  14. metadata +2 -3
  15. data/app/components/ariadne/comment-component.ts +0 -37
data/app/components/ariadne/comment_component.html.erb CHANGED
@@ -1,40 +1,34 @@
1
1
  <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
2
- <div class="ariadne-bg-white" data-comment-component-target="commentComponent">
3
- <div class="ariadne-hidden sm:ariadne-block">
4
- <div class="ariadne-border-b ariadne-border-gray-200">
5
- <%= render(Ariadne::TabContainerComponent.new(sr_label: @sr_label)) do |tab_container| %>
6
- <%= tab_container.tab(id: public_tab.id, selected: public_tab.selected, classes: public_tab.classes, attributes: public_tab.attributes) do |tab| %>
7
- <% tab.text { @public_tab_text } %>
8
- <% tab.panel do %>
9
- <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
10
- <div class="ariadne-overflow-hidden ariadne-border-x ariadne-border-b ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
11
- <%= hidden_field_tag 'message_public', true %>
12
- <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
13
- <% comment_box.submit { @submit } %>
14
- </div>
15
- <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
16
- <%= submit %>
17
- </div>
18
- <% end %>
19
- <% end %>
20
- <% end %>
21
- <%= tab_container.tab(id: internal_tab.id, selected: internal_tab.selected, classes: internal_tab.classes, attributes: internal_tab.attributes) do |tab| %>
22
- <% tab.text { @internal_tab_text } %>
23
- <% tab.panel do %>
24
- <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
25
- <div class="ariadne-overflow-hidden ariadne-border-x ariadne-border-b ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
26
- <%= hidden_field_tag 'message_public', false %>
27
- <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
28
- <% comment_box.submit { @submit } %>
29
- </div>
30
- <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
31
- <%= submit %>
32
- </div>
33
- <% end %>
34
- <% end %>
35
- <% end %>
2
+ <%= render(Ariadne::TabContainerComponent.new(sr_label: @sr_label)) do |tab_container| %>
3
+ <%= tab_container.tab(id: public_tab.id, selected: public_tab.selected, classes: public_tab.classes, attributes: public_tab.attributes) do |tab| %>
4
+ <% tab.text { @public_tab_text } %>
5
+ <% tab.panel(attributes: {:"data-public" => true}) do %>
6
+ <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
7
+ <div class="ariadne-overflow-hidden ariadne-border ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
8
+ <%= hidden_field_tag 'message_public', true %>
9
+ <%= render(Ariadne::RichTextAreaComponent.new(name: :public_bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
10
+ <% comment_box.submit { @submit } %>
11
+ </div>
12
+ <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
13
+ <%= public_submit %>
14
+ </div>
36
15
  <% end %>
37
- </div>
38
- </div>
39
- </div>
16
+ <% end %>
17
+ <% end %>
18
+ <%= tab_container.tab(id: internal_tab.id, selected: internal_tab.selected, classes: internal_tab.classes, attributes: internal_tab.attributes) do |tab| %>
19
+ <% tab.text { @internal_tab_text } %>
20
+ <% tab.panel do %>
21
+ <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
22
+ <div class="ariadne-overflow-hidden ariadne-border ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
23
+ <%= hidden_field_tag 'message_public', false %>
24
+ <%= render(Ariadne::RichTextAreaComponent.new(name: :internal_bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
25
+ <% comment_box.submit { @submit } %>
26
+ </div>
27
+ <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
28
+ <%= internal_submit %>
29
+ </div>
30
+ <% end %>
31
+ <% end %>
32
+ <% end %>
33
+ <% end %>
40
34
  <% end %>
data/app/components/ariadne/comment_component.rb CHANGED
@@ -15,7 +15,6 @@ module Ariadne
15
15
  DEFAULT_CLASSES = "ariadne-bg-white ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md "
16
16
 
17
17
  renders_one :public_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
18
- attributes[:"data-comment-component-target"] ||= "tab"
19
18
  attributes[:"data-public"] = true
20
19
  @tab_idx += 1
21
20
  id = attributes.fetch(:id, "public-tab-#{@tab_idx}")
@@ -24,8 +23,12 @@ module Ariadne
24
23
  Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
25
24
  }
26
25
 
26
+ renders_one :public_submit, lambda { |classes: "", attributes: {}|
27
+ Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, scheme: Ariadne::ButtonComponent::DEFAULT_SCHEME, classes: classes, attributes: attributes)
28
+ }
29
+
27
30
  renders_one :internal_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
28
- attributes[:"data-comment-component-target"] ||= "tab"
31
+ attributes[:"data-public"] = false
29
32
  @tab_idx += 1
30
33
  id = attributes.fetch(:id, "internal-tab-#{@tab_idx}")
31
34
  @internal_tab_text = text
@@ -33,7 +36,7 @@ module Ariadne
33
36
  Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
34
37
  }
35
38
 
36
- renders_one :submit, lambda { |classes: "", attributes: {}|
39
+ renders_one :internal_submit, lambda { |classes: "", attributes: {}|
37
40
  Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, scheme: Ariadne::ButtonComponent::DEFAULT_SCHEME, classes: classes, attributes: attributes)
38
41
  }
39
42
 
@@ -41,8 +44,9 @@ module Ariadne
41
44
  #
42
45
  # <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) do |comment| %>
43
46
  # <% comment.public_tab(selected: true, text: "Reply to sender") %>
47
+ # <% comment.public_submit { "Send" } %>
44
48
  # <% comment.internal_tab(text: "Internal comment") %>
45
- # <% comment.submit { "Send" } %>
49
+ # <% comment.internal_submit { "Send" } %>
46
50
  # <% end %>
47
51
  #
48
52
  # @param url [String] The URL to take action against.
@@ -50,7 +54,7 @@ module Ariadne
50
54
  # @param sr_label [String] A label to introduce these tabs for screen readers.
51
55
  # @param classes [String] <%= link_to_classes_docs %>
52
56
  # @param attributes [Hash] <%= link_to_attributes_docs %>
53
- def initialize(url:, method:, sr_label:, classes: "", attributes: {})
57
+ def initialize(url:, method: :post, sr_label:, classes: "", attributes: {})
54
58
  @tag = DEFAULT_TAG
55
59
  @classes = class_names(
56
60
  DEFAULT_CLASSES,
@@ -62,8 +66,6 @@ module Ariadne
62
66
 
63
67
  @tab_idx = -1
64
68
  @attributes = attributes
65
- @attributes[:"data-controller"] = "comment-component"
66
- attributes[:"data-comment-component-target"] = "commentComponent"
67
69
  end
68
70
  end
69
71
  end
data/app/components/ariadne/details_component.rb CHANGED
@@ -58,7 +58,7 @@ module Ariadne
58
58
  # @param reset [Boolean] If set to true, it will remove the default caret and remove style from the summary element
59
59
  # @param classes [String] <%= link_to_classes_docs %>
60
60
  # @param attributes [Hash] <%= link_to_attributes_docs %>
61
- def initialize(overlay: NO_OVERLAY, reset: false, classes: "", attributes: {})
61
+ def initialize(overlay: NO_OVERLAY, reset: true, classes: "", attributes: {})
62
62
  @tag = DEFAULT_TAG
63
63
  @reset = reset
64
64
 
data/app/components/ariadne/rich-text-area-component.ts CHANGED
@@ -14,12 +14,12 @@ export default class RichTextArea extends Controller {
14
14
  editorProps: {
15
15
  attributes: {
16
16
  class:
17
- 'ariadne-m-5 focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
17
+ 'focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
18
18
  }
19
19
  }
20
20
  })
21
21
 
22
- const tiptapValueContainer = document.querySelector('input[data-tiptap-value-container=true]')
22
+ const tiptapValueContainer = editorElement.previousElementSibling
23
23
  if (tiptapValueContainer) {
24
24
  const parentForm = editorElement.closest('form')
25
25
 
data/app/components/ariadne/tab_container_component.erb CHANGED
@@ -5,8 +5,6 @@
5
5
  <% end %>
6
6
  </div>
7
7
  <% tabs.each do |tab| %>
8
- <div class="ariadne-pt-2">
9
- <%= tab.panel %>
10
- </div>
8
+ <%= tab.panel %>
11
9
  <% end %>
12
10
  <% end %>
data/app/lib/ariadne/action_view_extensions/form_helper.rb CHANGED
@@ -6,7 +6,7 @@ module Ariadne
6
6
  module FormHelper
7
7
  include ClassNameHelper
8
8
 
9
- DEFAULT_FORM_CLASSES = "ariadne-space-y-8 ariadne-divide-y ariadne-divide-gray-200 sm:ariadne-space-y-5"
9
+ DEFAULT_FORM_CLASSES = "ariadne-space-y-8 sm:ariadne-space-y-5"
10
10
  def ariadne_form_with(model: nil, scope: nil, url: nil, format: nil, classes: "", attributes: {}, **options, &block)
11
11
  options[:class] = class_names(DEFAULT_FORM_CLASSES, options[:class])
12
12
  options[:builder] ||= Ariadne::FormBuilder
data/lib/ariadne/view_components/version.rb CHANGED
@@ -2,6 +2,6 @@
2
2
 
3
3
  module Ariadne
4
4
  module ViewComponents
5
- VERSION = "0.0.16"
5
+ VERSION = "0.0.18"
6
6
  end
7
7
  end
data/static/arguments.yml CHANGED
@@ -168,7 +168,7 @@
168
168
  description: The URL to take action against.
169
169
  - name: method
170
170
  type: String
171
- default: N/A
171
+ default: "`:post`"
172
172
  description: The method to use when submitting the form.
173
173
  - name: sr_label
174
174
  type: String
@@ -240,7 +240,7 @@
240
240
  `:none`.
241
241
  - name: reset
242
242
  type: Boolean
243
- default: "`false`"
243
+ default: "`true`"
244
244
  description: If set to true, it will remove the default caret and remove style
245
245
  from the summary element
246
246
  - name: classes
data/static/classes.yml CHANGED
@@ -99,10 +99,6 @@
99
99
  - ".ariadne-shadow"
100
100
  - ".ariadne-py-5"
101
101
  - ".ariadne-px-5"
102
- - ".ariadne-hidden"
103
- - ".sm:ariadne-block"
104
- - ".ariadne-border-b"
105
- - ".ariadne-border-gray-200"
106
102
  - ".ariadne-text-gray-500"
107
103
  - ".hover:ariadne-text-gray-700"
108
104
  - ".hover:ariadne-border-gray-300"
@@ -112,22 +108,20 @@
112
108
  - ".ariadne-border-b-2"
113
109
  - ".ariadne-border-indigo-500"
114
110
  - ".ariadne-text-indigo-600"
115
- - ".ariadne-pt-2"
116
111
  - ".ariadne-space-y-8"
117
- - ".ariadne-divide-y"
118
- - ".ariadne-divide-gray-200"
119
112
  - ".sm:ariadne-space-y-5"
120
- - ".ariadne-border-x"
121
113
  - ".focus-within:ariadne-border-indigo-500"
122
114
  - ".focus-within:ariadne-ring-1"
123
115
  - ".focus-within:ariadne-ring-indigo-500"
124
116
  - ".tiptap-editor"
125
117
  - ".ariadne-mt-2"
126
118
  - ".ariadne-justify-end"
119
+ - ".ariadne__details-reset"
127
120
  - ".ariadne-right-0"
128
121
  - ".ariadne-z-10"
129
122
  - ".ariadne-w-56"
130
123
  - ".ariadne-origin-top-right"
124
+ - ".ariadne-divide-y"
131
125
  - ".ariadne-divide-gray-100"
132
126
  - ".ariadne-shadow-lg"
133
127
  - ".ariadne-ring-1"
@@ -175,8 +169,10 @@
175
169
  - ".md:ariadne-divide-y-0"
176
170
  - ".ariadne-py-0.5"
177
171
  - ".ariadne-text-black"
172
+ - ".ariadne-hidden"
178
173
  - ".ariadne-pb-4"
179
174
  - ".ariadne-list-none"
175
+ - ".ariadne-divide-gray-200"
180
176
  - ".ariadne-text-lg"
181
177
  - ".ariadne-pt-6"
182
178
  - ".ariadne-flow-root"
data/static/constants.json CHANGED
@@ -102,7 +102,7 @@
102
102
  "DEFAULT_SCHEME": "default",
103
103
  "LINK_SCHEME": "link",
104
104
  "SCHEME_CLASS_MAPPINGS": {
105
- "link": "ariadne-underline ariadne-decoration-double",
105
+ "link": "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double",
106
106
  "none": "",
107
107
  "default": "ariadne-text-purple-800 ariadne-bg-purple-50 hover:ariadne-bg-purple-100 ariadne-border-purple-300 focus:ariadne-ring-offset-purple-50 focus:ariadne-ring-purple-600",
108
108
  "info": "ariadne-text-blue-800 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 ariadne-border-blue-300 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
@@ -132,11 +132,12 @@
132
132
  "data-action": "click->clipboard-copy-component#copy mouseover->tooltip-component#show mouseout->tooltip-component#hide",
133
133
  "data-tooltip-component-target": "trigger"
134
134
  },
135
- "DEFAULT_CLASSES": "ariadne-underline ariadne-decoration-double",
135
+ "DEFAULT_CLASSES": "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double",
136
136
  "DEFAULT_TAG": "clipboard-copy"
137
137
  },
138
138
  "Ariadne::CommentComponent": {
139
- "DEFAULT_CLASSES": "ariadne-bg-white ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md ",
139
+ "DEFAULT_CLASSES": "ariadne-bg-internal-message ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md ",
140
+ "DEFAULT_INTERNAL_CLASSES": "ariadne-bg-internal-message",
140
141
  "DEFAULT_TAG": "div",
141
142
  "TAG_OPTIONS": [
142
143
  "div"
@@ -283,7 +284,7 @@
283
284
  "DEFAULT_ITEM_CLASSES": "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow text-black-700 ariadne-border-black"
284
285
  },
285
286
  "Ariadne::HeaderComponent": {
286
- "DEFAULT_CLASSES": "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-h-16 ariadne-bg-white ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500",
287
+ "DEFAULT_CLASSES": "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-pt-4 ariadne-h-16 ariadne-bg-white ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500",
287
288
  "DEFAULT_IMAGE_LOGO_CLASSES": "ariadne-h-10 ariadne-w-auto",
288
289
  "DEFAULT_NAV_LINK_CLASSES": "ariadne-inline-block ariadne-rounded-lg ariadne-py-1 ariadne-px-2 ariadne-text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900",
289
290
  "DEFAULT_PROFILE_LINK_CLASSES": "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:ariadne-outline-2 focus-visible:outline-offset-2",
@@ -417,7 +418,7 @@
417
418
  ]
418
419
  },
419
420
  "Ariadne::LinkComponent": {
420
- "DEFAULT_ACTIONABLE_CLASSES": "ariadne-underline ariadne-decoration-double",
421
+ "DEFAULT_ACTIONABLE_CLASSES": "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double",
421
422
  "DEFAULT_CLASSES": "ariadne-cursor-pointer hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500",
422
423
  "DEFAULT_TAG": "a",
423
424
  "TAG_OPTIONS": [
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ariadne_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.16
4
+ version: 0.0.18
5
5
  platform: x86_64-linux
6
6
  authors:
7
7
  - Garen J. Torikian
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2022-10-04 00:00:00.000000000 Z
11
+ date: 2022-10-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: tailwind_merge
@@ -142,7 +142,6 @@ files:
142
142
  - app/components/ariadne/clipboard-copy-component.ts
143
143
  - app/components/ariadne/clipboard_copy_component.html.erb
144
144
  - app/components/ariadne/clipboard_copy_component.rb
145
- - app/components/ariadne/comment-component.ts
146
145
  - app/components/ariadne/comment_component.html.erb
147
146
  - app/components/ariadne/comment_component.rb
148
147
  - app/components/ariadne/component.rb
data/app/components/ariadne/comment-component.ts DELETED
@@ -1,37 +0,0 @@
1
- // import {Controller} from '@hotwired/stimulus'
2
-
3
- // export default class CommentComponent extends Controller {
4
- // static targets = ['tab', 'tabBarComponent']
5
-
6
- // declare readonly commentComponentTarget: HTMLDivElement
7
- // declare readonly tabBarComponentTarget: HTMLElement // technically a `nav but typescript can't find it?
8
- // declare readonly tabTargets: [HTMLButtonElement]
9
-
10
- // // keep in sync with comment_component.rb
11
- // SELECTED_TAB_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
12
- // PUBLIC_BACKGROUND_COLOR = 'ariadne-bg-white'
13
- // INTERNAL_BACKGROUND_COLOR = 'ariadne-bg-internal-message'
14
-
15
- // toggleTab() {
16
- // for (const tab of this.tabTargets) {
17
- // if (tab.hasAttribute('aria-selected')) {
18
- // tab.classList.remove(...this.SELECTED_TAB_CLASSES)
19
- // this.toggleBackgrounds(tab, false)
20
- // tab.removeAttribute('aria-selected')
21
- // } else {
22
- // tab.setAttribute('aria-selected', 'true')
23
- // tab.classList.add(...this.SELECTED_TAB_CLASSES)
24
- // this.toggleBackgrounds(tab, true)
25
- // }
26
- // }
27
- // }
28
- // toggleBackgrounds(tab: HTMLButtonElement, publicComment: boolean) {
29
- // if (publicComment) {
30
- // this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
31
- // this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
32
-
33
- // this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
34
- // this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
35
- // }
36
- // }
37
- // }