ariadne_view_components 0.0.17-arm64-darwin → 0.0.20-arm64-darwin

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,6 @@
1
1
  import { Controller } from '@hotwired/stimulus';
2
2
  export default class RichTextArea extends Controller {
3
+ static targets: string[];
4
+ readonly editorTargets: [HTMLDivElement];
3
5
  connect(): void;
4
6
  }
@@ -19,8 +19,8 @@ module Ariadne
19
19
  }.freeze
20
20
  VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
21
21
 
22
- DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
23
- DEFAULT_NUDE_CLASSES = "ariadne-inline-flex focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
22
+ DEFAULT_CLASSES = "ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
23
+ DEFAULT_NUDE_CLASSES = "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
24
24
 
25
25
  DEFAULT_SIZE = :md
26
26
 
@@ -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">
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">
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 %>
@@ -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
@@ -19,6 +19,10 @@ module Ariadne
19
19
  BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
20
20
  BASE_MAIN_CLASSES = "ariadne-flex-auto"
21
21
 
22
+ # this is defined here for the Tailwind parser to pick up; it can be useful
23
+ # in situations where hiddenness is defined by a kwarg, eg `selected: false`
24
+ BASE_HIDDEN_CLASS = "ariadne-hidden"
25
+
22
26
  INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
23
27
 
24
28
  private def raise_on_invalid_options?
@@ -26,7 +26,7 @@ module Ariadne
26
26
 
27
27
  DEFAULT_TEXT_OPEN_CLASSES = "ariadne-text-state-open"
28
28
  DEFAULT_TEXT_CLOSED_CLASSES = "ariadne-text-state-closed"
29
- DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
29
+ DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
30
30
  renders_one :icon, lambda { |tag: :svg, icon:, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
31
31
  actual_text_classes = class_names(DEFAULT_TEXT_CLASSES, text_classes)
32
32
  Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes, text_classes: actual_text_classes, text_attributes: text_attributes) { content }
@@ -36,7 +36,7 @@ module Ariadne
36
36
  Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
37
37
  }
38
38
 
39
- DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
39
+ DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
40
40
  renders_one :text, lambda { |classes: "", attributes: {}|
41
41
  actual_classes = class_names(DEFAULT_LABEL_CLASSES, classes)
42
42
  Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
@@ -5,7 +5,7 @@
5
5
  <span class="ariadne-px-6 ariadne-py-4 ariadne-flex ariadne-items-center ariadne-text-sm ariadne-font-medium">
6
6
  <%= panel.icon %>
7
7
  <span class="ariadne-ml-4 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"><%= panel.label %></span>
8
- <!-- Arrow separator for lg screens and up -->
8
+ <!-- TODO: fix this -->
9
9
  <% if idx + 1 < panels.size %>
10
10
  <div class="md:ariadne-block ariadne-hidden ariadne-absolute ariadne-top-0 ariadne-right-0 ariadne-h-full ariadne-w-5" aria-hidden="true">
11
11
  <svg class="ariadne-h-full ariadne-w-full ariadne-text-gray-300" viewBox="0 0 22 80" fill="none" preserveAspectRatio="none">
@@ -40,6 +40,7 @@ module Ariadne
40
40
  DEFAULT_ITEM_CLASSES = "ariadne-relative md:ariadne-flex-1 md:ariadne-flex"
41
41
  DEFAULT_WRAPPER_CLASSES = "group ariadne-flex ariadne-items-center ariadne-w-full"
42
42
 
43
+ # TODO: fix this
43
44
  renders_one :icon, lambda { |static_content = nil, &block|
44
45
  next static_content if static_content.present?
45
46
 
@@ -1,30 +1,43 @@
1
1
  import {Controller} from '@hotwired/stimulus'
2
2
 
3
3
  import {Editor} from '@tiptap/core'
4
- import {StarterKit} from '@tiptap/starter-kit'
4
+
5
+ import {Document} from '@tiptap/extension-document'
6
+ import {Paragraph} from '@tiptap/extension-paragraph'
7
+ import {Text} from '@tiptap/extension-text'
8
+
9
+ import DropCursor from '@tiptap/extension-dropcursor'
10
+ import GapCursor from '@tiptap/extension-gapcursor'
11
+ import {History} from '@tiptap/extension-history'
5
12
 
6
13
  export default class RichTextArea extends Controller {
14
+ static targets = ['editor']
15
+
16
+ declare readonly editorTargets: [HTMLDivElement]
17
+
7
18
  connect() {
8
- const editorElements = document.getElementsByClassName('tiptap-editor')
9
- for (const editorElement of editorElements) {
10
- new Editor({
11
- element: editorElement,
12
- extensions: [StarterKit],
19
+ for (const editorElement of this.editorTargets) {
20
+ const pmEditor = new Editor({
21
+ extensions: [DropCursor, GapCursor, History, Document, Paragraph, Text],
13
22
  content: '',
23
+ injectCSS: false,
24
+ element: editorElement,
14
25
  editorProps: {
15
26
  attributes: {
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'
27
+ class: 'ariadne-p-3'
18
28
  }
29
+ },
30
+ parseOptions: {
31
+ preserveWhitespace: true
19
32
  }
20
33
  })
21
34
 
22
- const tiptapValueContainer = document.querySelector('input[data-tiptap-value-container=true]')
35
+ const tiptapValueContainer = editorElement.previousElementSibling
23
36
  if (tiptapValueContainer) {
24
37
  const parentForm = editorElement.closest('form')
25
38
 
26
39
  parentForm?.addEventListener('submit', () => {
27
- tiptapValueContainer.setAttribute('value', editorElement.textContent || '')
40
+ tiptapValueContainer.setAttribute('value', pmEditor.getText() || '')
28
41
  })
29
42
  }
30
43
  }
@@ -2,5 +2,5 @@
2
2
  <% if @has_form %>
3
3
  <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>">
4
4
  <% end %>
5
- <div class="tiptap-editor"></div>
5
+ <div class="tiptap-editor" data-rich-text-area-component-target="editor"></div>
6
6
  <% end %>
@@ -10,17 +10,8 @@ export default class SlideoverComponent extends Controller {
10
10
 
11
11
  toggle() {
12
12
  this.expandableTarget.classList.toggle('ariadne-hidden')
13
- this.expandWrapperTarget.classList.toggle('bg-filter-panel')
14
13
  for (const slidePanel of this.slidePanelTargets) {
15
14
  slidePanel.classList.toggle('ariadne-hidden')
16
15
  }
17
- this.buttonWrapperTarget.classList.toggle('bg-filter-panel')
18
- if (document.getElementById('btnClose')?.classList.contains('ariadne-hidden')) {
19
- const formID = this.buttonWrapperTarget.getAttribute('data-slideover-component-form-id')
20
- if (formID) {
21
- const form = <HTMLFormElement>document.getElementById(formID)
22
- form?.submit()
23
- }
24
- }
25
16
  }
26
17
  }
@@ -1,11 +1,9 @@
1
1
  <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |slideover| %>
2
- <div data-slideover-component-target="expandWrapper" class="ariadne-flex ariadne-flex-col ariadne-z-10">
3
- <div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3 ariadne-pb-4">
4
- <%= content %>
5
- </div>
6
- <div data-slideover-component-target="buttonWrapper" data-slideover-component-form-id="<%= @form_id %>" class="ariadne-relative ariadne-flex ariadne-justify-center">
7
- <%= open_button %>
8
- <%= close_button %>
9
- </div>
2
+ <div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3">
3
+ <%= content %>
4
+ </div>
5
+ <div data-slideover-component-target="buttonWrapper" class="ariadne-relative ariadne-flex ariadne-justify-center">
6
+ <%= open_button %>
7
+ <%= close_button %>
10
8
  </div>
11
9
  <% end %>
@@ -12,43 +12,29 @@ module Ariadne
12
12
  DIRECTION_X_LEFT = :xl
13
13
  VALID_DIRECTIONS = [DIRECTION_Y_DOWN, DIRECTION_X_LEFT].freeze
14
14
 
15
- DEFAULT_CLASSES = ""
15
+ DEFAULT_CLASSES = "ariadne-flex ariadne-flex-col"
16
16
 
17
17
  DEFAULT_BUTTON_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-shadow-sm ariadne-px-4 ariadne-py-1.5 ariadne-pb-2 ariadne-text-sm ariadne-leading-5 ariadne-font-medium ariadne-rounded-full " + Ariadne::ButtonComponent::SCHEME_CLASS_MAPPINGS[:default]
18
- renders_one :open_button, lambda { |label:, classes: "", attributes: {}, text_classes: ""|
19
- actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes)
18
+ renders_one :open_button, lambda { |selected: false, classes: "", attributes: {}|
19
+ actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes, selected ? "" : BASE_HIDDEN_CLASS)
20
20
 
21
21
  attributes[:id] ||= "btnOpen"
22
22
  attributes[:"data-slideover-component-target"] ||= "slidePanel"
23
23
  attributes[:"data-action"] ||= "click->slideover-component#toggle"
24
24
  attributes[:type] ||= "submit"
25
25
 
26
- icon = case @direction
27
- when DIRECTION_Y_DOWN
28
- :"chevron-double-down"
29
- end
30
-
31
- render(Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)) do
32
- render(Ariadne::HeroiconComponent.new(icon: icon, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID, attributes: { "data-slideover-component-target" => "slide-panel" }, text_classes: text_classes)) { label }
33
- end
26
+ Ariadne::ButtonComponent.new(classes: actual_classes, attributes: attributes)
34
27
  }
35
28
 
36
- renders_one :close_button, lambda { |label:, classes: "", attributes: {}, text_classes: ""|
37
- actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes)
29
+ renders_one :close_button, lambda { |selected: false, classes: "", attributes: {}|
30
+ actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes, selected ? "" : BASE_HIDDEN_CLASS)
38
31
 
39
32
  attributes[:id] ||= "btnClose"
40
33
  attributes[:"data-slideover-component-target"] ||= "slidePanel"
41
34
  attributes[:"data-action"] ||= "click->slideover-component#toggle"
42
35
  attributes[:type] ||= "submit"
43
36
 
44
- icon = case @direction
45
- when DIRECTION_Y_DOWN
46
- :"chevron-double-up"
47
- end
48
-
49
- render(Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)) do
50
- render(Ariadne::HeroiconComponent.new(icon: icon, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID, attributes: { "data-slideover-component-target" => "slide-panel" }, text_classes: text_classes)) { label }
51
- end
37
+ Ariadne::ButtonComponent.new(classes: actual_classes, attributes: attributes)
52
38
  }
53
39
 
54
40
  # @example Default
@@ -57,12 +43,11 @@ module Ariadne
57
43
  #
58
44
  # @param tag [Symbol, String] The rendered tag name.
59
45
  # @param direction [Symbol] <%= one_of(Ariadne::SlideoverComponent::VALID_DIRECTIONS) %>
60
- # @param form_id [String] The ID of any `form` tag to submit when the button is clicked.
61
46
  # @param open_text [String] The text to use to open the slideover.
62
47
  # @param close_text [String] The text to use to close the slideover.
63
48
  # @param classes [String] <%= link_to_classes_docs %>
64
49
  # @param attributes [Hash] <%= link_to_attributes_docs %>
65
- def initialize(tag: DEFAULT_TAG, direction:, form_id: nil, open_text: "Open", close_text: "Close", classes: "", attributes: {})
50
+ def initialize(tag: DEFAULT_TAG, direction:, open_text: "Open", close_text: "Close", classes: "", attributes: {})
66
51
  @tag = check_incoming_tag(DEFAULT_TAG, tag)
67
52
  @classes = class_names(
68
53
  DEFAULT_CLASSES,
@@ -70,12 +55,12 @@ module Ariadne
70
55
  )
71
56
 
72
57
  @direction = fetch_or_raise(VALID_DIRECTIONS, direction)
73
- @form_id = form_id
74
58
 
75
59
  @open_text = open_text
76
60
  @close_text = close_text
77
61
  @attributes = attributes
78
62
  @attributes[:"data-controller"] = "slideover-component"
63
+ @attributes[:"data-slideover-component-target"] = "expandWrapper"
79
64
  end
80
65
  end
81
66
  end
@@ -21,7 +21,6 @@ module Ariadne
21
21
  attributes[:id] = @panel_id
22
22
  tag = :div
23
23
  attributes[:role] ||= :tabpanel
24
- attributes[:tabindex] = 0
25
24
  attributes[:hidden] = true unless @selected
26
25
 
27
26
  label_present = aria("label", attributes) || aria("labelledby", attributes)
@@ -1,12 +1,10 @@
1
1
  <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do |component| %>
2
- <div role="tablist">
2
+ <div role="tablist" class="ariadne-bg-neutral-50">
3
3
  <% tabs.each do |tab| %>
4
4
  <%= tab %>
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 %>
@@ -9,7 +9,7 @@ module Ariadne
9
9
 
10
10
  DEFAULT_CLASSES = ""
11
11
 
12
- DEFAULT_SELECTED_CLASSES = "ariadne-border-indigo-500 ariadne-text-indigo-600"
12
+ DEFAULT_SELECTED_CLASSES = "ariadne-bg-white ariadne-border-indigo-500 ariadne-text-indigo-600"
13
13
  DEFAULT_UNSELECTED_CLASSES = "ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300"
14
14
 
15
15
  # Tabs and panels to be rendered.
@@ -20,6 +20,7 @@ module Ariadne
20
20
  # @param attributes [Hash] <%= link_to_attributes_docs %>
21
21
  renders_many :tabs, lambda { |id: "", selected: false, classes: "", attributes: {}|
22
22
  actual_classes = class_names(selected ? DEFAULT_SELECTED_CLASSES : DEFAULT_UNSELECTED_CLASSES, classes)
23
+
23
24
  Ariadne::TabComponent.new(
24
25
  id: id,
25
26
  selected: selected,
@@ -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
@@ -2,6 +2,6 @@
2
2
 
3
3
  module Ariadne
4
4
  module ViewComponents
5
- VERSION = "0.0.17"
5
+ VERSION = "0.0.20"
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
@@ -554,10 +554,6 @@
554
554
  type: Symbol
555
555
  default: N/A
556
556
  description: One of `:xl` and `:yd`.
557
- - name: form_id
558
- type: String
559
- default: "`nil`"
560
- description: The ID of any `form` tag to submit when the button is clicked.
561
557
  - name: open_text
562
558
  type: String
563
559
  default: '`"Open"`'
data/static/classes.yml CHANGED
@@ -12,7 +12,6 @@
12
12
  - ".ariadne-flex"
13
13
  - ".ariadne--space-x-2"
14
14
  - ".ariadne-overflow-hidden"
15
- - ".ariadne-inline-flex"
16
15
  - ".ariadne-items-center"
17
16
  - ".ariadne-border"
18
17
  - ".ariadne-shadow-sm"
@@ -79,6 +78,7 @@
79
78
  - ".focus:ariadne-ring-offset-red-50"
80
79
  - ".focus:ariadne-ring-red-600"
81
80
  - ".ariadne-text-yellow-600"
81
+ - ".ariadne-inline-flex"
82
82
  - ".ariadne-p-1"
83
83
  - ".ariadne-border-transparent"
84
84
  - ".ariadne-invisible"
@@ -99,10 +99,7 @@
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"
102
+ - ".ariadne-bg-neutral-50"
106
103
  - ".ariadne-text-gray-500"
107
104
  - ".hover:ariadne-text-gray-700"
108
105
  - ".hover:ariadne-border-gray-300"
@@ -112,22 +109,17 @@
112
109
  - ".ariadne-border-b-2"
113
110
  - ".ariadne-border-indigo-500"
114
111
  - ".ariadne-text-indigo-600"
115
- - ".ariadne-pt-2"
116
112
  - ".ariadne-space-y-8"
117
- - ".ariadne-divide-y"
118
- - ".ariadne-divide-gray-200"
119
113
  - ".sm:ariadne-space-y-5"
120
- - ".ariadne-border-x"
121
- - ".focus-within:ariadne-border-indigo-500"
122
- - ".focus-within:ariadne-ring-1"
123
- - ".focus-within:ariadne-ring-indigo-500"
124
114
  - ".tiptap-editor"
125
115
  - ".ariadne-mt-2"
126
116
  - ".ariadne-justify-end"
117
+ - ".ariadne__details-reset"
127
118
  - ".ariadne-right-0"
128
119
  - ".ariadne-z-10"
129
120
  - ".ariadne-w-56"
130
121
  - ".ariadne-origin-top-right"
122
+ - ".ariadne-divide-y"
131
123
  - ".ariadne-divide-gray-100"
132
124
  - ".ariadne-shadow-lg"
133
125
  - ".ariadne-ring-1"
@@ -175,8 +167,10 @@
175
167
  - ".md:ariadne-divide-y-0"
176
168
  - ".ariadne-py-0.5"
177
169
  - ".ariadne-text-black"
178
- - ".ariadne-pb-4"
170
+ - ".ariadne-hidden"
179
171
  - ".ariadne-list-none"
172
+ - ".ariadne-divide-gray-200"
173
+ - ".ariadne-pb-4"
180
174
  - ".ariadne-text-lg"
181
175
  - ".ariadne-pt-6"
182
176
  - ".ariadne-flow-root"
@@ -37,8 +37,8 @@
37
37
  ]
38
38
  },
39
39
  "Ariadne::BaseButton": {
40
- "DEFAULT_CLASSES": "ariadne-inline-flex ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2",
41
- "DEFAULT_NUDE_CLASSES": "ariadne-inline-flex focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2",
40
+ "DEFAULT_CLASSES": "ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2",
41
+ "DEFAULT_NUDE_CLASSES": "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2",
42
42
  "DEFAULT_SIZE": "md",
43
43
  "DEFAULT_TAG": "button",
44
44
  "DEFAULT_TYPE": "button",
@@ -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,7 +132,7 @@
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": {
@@ -283,7 +283,7 @@
283
283
  "DEFAULT_ITEM_CLASSES": "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow text-black-700 ariadne-border-black"
284
284
  },
285
285
  "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",
286
+ "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
287
  "DEFAULT_IMAGE_LOGO_CLASSES": "ariadne-h-10 ariadne-w-auto",
288
288
  "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
289
  "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",
@@ -404,9 +404,9 @@
404
404
  },
405
405
  "Ariadne::InlineFlexComponent": {
406
406
  "DEFAULT_CLASSES": "ariadne-inline-flex ariadne-items-baseline",
407
- "DEFAULT_LABEL_CLASSES": "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900",
407
+ "DEFAULT_LABEL_CLASSES": "ariadne-pl-2 ariadne-text-sm ariadne-font-medium",
408
408
  "DEFAULT_TAG": "span",
409
- "DEFAULT_TEXT_CLASSES": "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900",
409
+ "DEFAULT_TEXT_CLASSES": "ariadne-pl-2 ariadne-text-sm ariadne-font-medium",
410
410
  "DEFAULT_TEXT_CLOSED_CLASSES": "ariadne-text-state-closed",
411
411
  "DEFAULT_TEXT_OPEN_CLASSES": "ariadne-text-state-open",
412
412
  "STATE_CLOSED_SVG": "<svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" class=\"ariadne-stroke-state-closed ariadne-fill-state-closed \" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n</svg>\n",
@@ -417,7 +417,7 @@
417
417
  ]
418
418
  },
419
419
  "Ariadne::LinkComponent": {
420
- "DEFAULT_ACTIONABLE_CLASSES": "ariadne-underline ariadne-decoration-double",
420
+ "DEFAULT_ACTIONABLE_CLASSES": "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double",
421
421
  "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
422
  "DEFAULT_TAG": "a",
423
423
  "TAG_OPTIONS": [
@@ -465,7 +465,7 @@
465
465
  },
466
466
  "Ariadne::SlideoverComponent": {
467
467
  "DEFAULT_BUTTON_CLASSES": "ariadne-inline-flex ariadne-items-center ariadne-shadow-sm ariadne-px-4 ariadne-py-1.5 ariadne-pb-2 ariadne-text-sm ariadne-leading-5 ariadne-font-medium ariadne-rounded-full 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",
468
- "DEFAULT_CLASSES": "",
468
+ "DEFAULT_CLASSES": "ariadne-flex ariadne-flex-col",
469
469
  "DEFAULT_TAG": "div",
470
470
  "DIRECTION_X_LEFT": "xl",
471
471
  "DIRECTION_Y_DOWN": "yd",
@@ -487,7 +487,7 @@
487
487
  },
488
488
  "Ariadne::TabContainerComponent": {
489
489
  "DEFAULT_CLASSES": "",
490
- "DEFAULT_SELECTED_CLASSES": "ariadne-border-indigo-500 ariadne-text-indigo-600",
490
+ "DEFAULT_SELECTED_CLASSES": "ariadne-bg-white ariadne-border-indigo-500 ariadne-text-indigo-600",
491
491
  "DEFAULT_TAG": "tab-container",
492
492
  "DEFAULT_UNSELECTED_CLASSES": "ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300"
493
493
  },