ariadne_view_components 0.0.17-x86_64-linux → 0.0.18-x86_64-linux

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) 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/rich-text-area-component.ts +2 -2
  7. data/app/components/ariadne/tab_container_component.erb +1 -3
  8. data/app/lib/ariadne/action_view_extensions/form_helper.rb +1 -1
  9. data/lib/ariadne/view_components/version.rb +1 -1
  10. data/static/arguments.yml +2 -2
  11. data/static/classes.yml +4 -8
  12. data/static/constants.json +6 -5
  13. metadata +2 -3
  14. 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/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.17"
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.17
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-05 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
- // }