ariadne_view_components 0.0.59 → 0.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +70 -0
- data/LICENSE.txt +661 -49
- data/README.md +52 -4
- data/app/assets/javascripts/ariadne_view_components.js +98 -7
- data/app/assets/javascripts/ariadne_view_components.js.br +0 -0
- data/app/assets/javascripts/ariadne_view_components.js.gz +0 -0
- data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
- data/app/assets/stylesheets/ariadne_view_components.css +1 -7
- data/app/assets/stylesheets/ariadne_view_components.css.br +0 -0
- data/app/assets/stylesheets/ariadne_view_components.css.gz +0 -0
- data/app/components/ariadne/base_component.rb +79 -27
- data/app/components/ariadne/behaviors/tooltipable.rb +120 -0
- data/app/components/ariadne/conditional_wrapper.rb +21 -0
- data/app/components/ariadne/form/base_component.rb +74 -0
- data/app/components/ariadne/form/base_input_component.rb +60 -0
- data/app/components/ariadne/form/caption/component.html.erb +10 -0
- data/app/components/ariadne/form/caption/component.rb +29 -0
- data/app/components/ariadne/form/form_control/component.html.erb +19 -0
- data/app/components/ariadne/form/form_control/component.rb +27 -0
- data/app/components/ariadne/form/form_reference/component.html.erb +1 -0
- data/app/components/ariadne/form/form_reference/component.rb +18 -0
- data/app/components/ariadne/form/group/component.html.erb +5 -0
- data/app/components/ariadne/form/group/component.rb +27 -0
- data/app/components/ariadne/form/hidden_field/component.html.erb +1 -0
- data/app/components/ariadne/form/hidden_field/component.rb +15 -0
- data/app/components/ariadne/form/separator/component.html.erb +1 -0
- data/app/components/ariadne/form/separator/component.rb +8 -0
- data/app/components/ariadne/form/spacing_wrapper/component.html.erb +3 -0
- data/app/components/ariadne/form/spacing_wrapper/component.rb +8 -0
- data/app/components/ariadne/form/text_field/component.html.erb +25 -0
- data/app/components/ariadne/form/text_field/component.rb +132 -0
- data/app/components/ariadne/form/validation_message/component.html.erb +5 -0
- data/app/components/ariadne/form/validation_message/component.rb +14 -0
- data/app/components/ariadne/layout/narrow/component.html.erb +10 -0
- data/app/components/ariadne/layout/narrow/component.rb +24 -0
- data/app/components/ariadne/layout/nav_bar/component.css +0 -0
- data/app/components/ariadne/layout/nav_bar/component.html.erb +123 -0
- data/app/components/ariadne/layout/nav_bar/component.rb +77 -0
- data/app/components/ariadne/ui/button/component.html.erb +5 -0
- data/app/components/ariadne/ui/button/component.rb +184 -0
- data/app/components/ariadne/ui/clipboard_copy/component.html.erb +8 -0
- data/app/components/ariadne/ui/clipboard_copy/component.rb +102 -0
- data/app/components/ariadne/ui/clipboard_copy/component.ts +54 -0
- data/app/components/ariadne/ui/combobox/component.html.erb +32 -0
- data/app/components/ariadne/ui/combobox/component.rb +83 -0
- data/app/components/ariadne/ui/combobox/component.ts +119 -0
- data/app/components/ariadne/ui/combobox/menu_item/component.html.erb +9 -0
- data/app/components/ariadne/ui/combobox/menu_item/component.rb +53 -0
- data/app/components/ariadne/ui/combobox/option/component.html.erb +11 -0
- data/app/components/ariadne/ui/combobox/option/component.rb +45 -0
- data/app/components/ariadne/ui/heroicon/component.html.erb +3 -0
- data/app/components/ariadne/ui/heroicon/component.rb +141 -0
- data/app/components/ariadne/ui/image/component.rb +69 -0
- data/app/components/ariadne/ui/link/component.html.erb +3 -0
- data/app/components/ariadne/ui/link/component.rb +56 -0
- data/app/components/ariadne/ui/typography/component.html.erb +3 -0
- data/app/components/ariadne/ui/typography/component.rb +41 -0
- data/app/frontend/ariadne/index.ts +14 -0
- data/app/frontend/ariadne/stimulus_app.ts +53 -0
- data/app/frontend/ariadne/theme.ts +8 -0
- data/app/frontend/controllers/tooltip.ts +75 -0
- data/app/frontend/entrypoints/application.ts +1 -0
- data/app/frontend/stylesheets/ariadne_view_components.css +18 -0
- data/app/frontend/stylesheets/scrollbar.css +28 -0
- data/app/frontend/stylesheets/tippy.js/themes/tomato.css +4 -0
- data/app/frontend/stylesheets/typography.css +117 -0
- data/app/frontend/utils/createController.ts +95 -0
- data/app/helpers/ariadne/form_helper.rb +31 -0
- data/app/lib/ariadne/attributes_helper.rb +119 -0
- data/app/lib/ariadne/fetch_or_fallback_helper.rb +1 -1
- data/app/lib/ariadne/form.rb +16 -0
- data/app/lib/ariadne/view_helper.rb +2 -5
- data/app/lib/view_components_contrib/html_attrs.rb +64 -0
- data/app/lib/view_components_contrib/style_variants.rb +14 -0
- data/lib/ariadne/forms/acts_as_component.rb +125 -0
- data/lib/ariadne/forms/base.html.erb +8 -0
- data/lib/ariadne/forms/base.rb +132 -0
- data/lib/ariadne/forms/buffer_rewriter.rb +51 -0
- data/lib/ariadne/forms/builder.rb +88 -0
- data/lib/ariadne/forms/dsl/button_input.rb +33 -0
- data/lib/ariadne/forms/dsl/form_object.rb +26 -0
- data/lib/ariadne/forms/dsl/input.rb +322 -0
- data/lib/ariadne/forms/dsl/input_group.rb +34 -0
- data/lib/ariadne/forms/dsl/input_methods.rb +157 -0
- data/lib/ariadne/forms/dsl/submit_button_input.rb +36 -0
- data/lib/ariadne/forms/dsl/text_field_input.rb +73 -0
- data/lib/ariadne/forms/utils.rb +34 -0
- data/lib/ariadne/generate.rb +11 -0
- data/lib/ariadne/view_components/engine.rb +24 -7
- data/lib/ariadne/view_components/version.rb +1 -1
- data/lib/ariadne/view_components.rb +1 -1
- data/lib/ariadne/yard/backend.rb +24 -0
- data/lib/ariadne/yard/component_manifest.rb +148 -0
- data/lib/ariadne/yard/component_ref.rb +49 -0
- data/lib/ariadne/yard/docs_helper.rb +98 -0
- data/lib/ariadne/yard/info_arch_docs_helper.rb +31 -0
- data/lib/ariadne/yard/lookbook_docs_helper.rb +32 -0
- data/lib/ariadne/yard/lookbook_pages_backend.rb +235 -0
- data/lib/ariadne/yard/registry.rb +136 -0
- data/lib/ariadne/yard/renders_many_handler.rb +23 -0
- data/lib/ariadne/yard/renders_one_handler.rb +23 -0
- data/lib/ariadne/yard.rb +19 -0
- data/static/arguments.yml +141 -48
- data/static/audited_at.json +0 -9
- data/static/classes.yml +210 -209
- data/static/constants.json +2 -209
- data/static/statuses.json +0 -9
- metadata +140 -210
- data/app/assets/builds/ariadne_view_components.css +0 -2202
- data/app/assets/javascripts/components/ariadne/accumulator_controller/accumulator_controller.d.ts +0 -22
- data/app/assets/javascripts/components/ariadne/ariadne-form.d.ts +0 -22
- data/app/assets/javascripts/components/ariadne/ariadne.d.ts +0 -2
- data/app/assets/javascripts/components/ariadne/clipboard_copy_component/clipboard-copy-component.d.ts +0 -4
- data/app/assets/javascripts/components/ariadne/dropdown/menu_component.d.ts +0 -1
- data/app/assets/javascripts/components/ariadne/events_controller/events_controller.d.ts +0 -4
- data/app/assets/javascripts/components/ariadne/options_controller/options_controller.d.ts +0 -39
- data/app/assets/javascripts/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts +0 -42
- data/app/assets/javascripts/components/ariadne/slideover_component/slideover-component.d.ts +0 -9
- data/app/assets/javascripts/components/ariadne/string_match_controller/string_match_controller.d.ts +0 -27
- data/app/assets/javascripts/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts +0 -48
- data/app/assets/javascripts/components/ariadne/tab_container_component/tab-container-component.d.ts +0 -1
- data/app/assets/javascripts/components/ariadne/tab_nav_component/tab-nav-component.d.ts +0 -9
- data/app/assets/javascripts/components/ariadne/time_ago_component/time-ago-component.d.ts +0 -1
- data/app/assets/javascripts/components/ariadne/toggleable_controller/toggleable_controller.d.ts +0 -34
- data/app/assets/javascripts/components/ariadne/tooltip_component/tooltip-component.d.ts +0 -24
- data/app/assets/stylesheets/dropdown.css +0 -46
- data/app/assets/stylesheets/prosemirror.css +0 -323
- data/app/assets/stylesheets/tooltip-component.css +0 -37
- data/app/components/ariadne/accumulator_controller/accumulator_controller.d.ts +0 -22
- data/app/components/ariadne/accumulator_controller/accumulator_controller.js +0 -39
- data/app/components/ariadne/accumulator_controller/accumulator_controller.ts +0 -48
- data/app/components/ariadne/action_card_component.html.erb +0 -13
- data/app/components/ariadne/action_card_component.rb +0 -88
- data/app/components/ariadne/ariadne-form.d.ts +0 -22
- data/app/components/ariadne/ariadne-form.js +0 -85
- data/app/components/ariadne/ariadne.d.ts +0 -2
- data/app/components/ariadne/ariadne.js +0 -24
- data/app/components/ariadne/ariadne.ts +0 -29
- data/app/components/ariadne/avatar_component.rb +0 -81
- data/app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb +0 -12
- data/app/components/ariadne/avatar_stack_component.rb +0 -75
- data/app/components/ariadne/base_button.rb +0 -70
- data/app/components/ariadne/blankslate_component/blankslate_component.html.erb +0 -26
- data/app/components/ariadne/blankslate_component.rb +0 -148
- data/app/components/ariadne/body_component.rb +0 -30
- data/app/components/ariadne/bottom_tab_component.html.erb +0 -4
- data/app/components/ariadne/bottom_tab_component.rb +0 -44
- data/app/components/ariadne/bottom_tab_nav_component.html.erb +0 -5
- data/app/components/ariadne/bottom_tab_nav_component.rb +0 -33
- data/app/components/ariadne/breadcrumbs_component.html.erb +0 -13
- data/app/components/ariadne/breadcrumbs_component.rb +0 -31
- data/app/components/ariadne/button_component/button_component.html.erb +0 -4
- data/app/components/ariadne/button_component.rb +0 -165
- data/app/components/ariadne/checkbox_component.html.erb +0 -5
- data/app/components/ariadne/checkbox_component.rb +0 -43
- data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.d.ts +0 -4
- data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.js +0 -18
- data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts +0 -19
- data/app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb +0 -9
- data/app/components/ariadne/clipboard_copy_component.rb +0 -90
- data/app/components/ariadne/close_button_component.html.erb +0 -4
- data/app/components/ariadne/close_button_component.rb +0 -33
- data/app/components/ariadne/combobox_component.html.erb +0 -14
- data/app/components/ariadne/combobox_component.rb +0 -76
- data/app/components/ariadne/component.rb +0 -127
- data/app/components/ariadne/container_component/container_component.html.erb +0 -3
- data/app/components/ariadne/container_component.rb +0 -25
- data/app/components/ariadne/content.rb +0 -12
- data/app/components/ariadne/counter_component.rb +0 -100
- data/app/components/ariadne/details_component/details_component.html.erb +0 -4
- data/app/components/ariadne/details_component.rb +0 -81
- data/app/components/ariadne/dropdown/menu_component.d.ts +0 -1
- data/app/components/ariadne/dropdown/menu_component.html.erb +0 -20
- data/app/components/ariadne/dropdown/menu_component.js +0 -1
- data/app/components/ariadne/dropdown/menu_component.rb +0 -101
- data/app/components/ariadne/dropdown/menu_component.ts +0 -1
- data/app/components/ariadne/dropdown_component/dropdown_component.html.erb +0 -8
- data/app/components/ariadne/dropdown_component.rb +0 -172
- data/app/components/ariadne/events_controller/events_controller.d.ts +0 -4
- data/app/components/ariadne/events_controller/events_controller.js +0 -6
- data/app/components/ariadne/events_controller/events_controller.ts +0 -7
- data/app/components/ariadne/flash_component/flash_component.html.erb +0 -31
- data/app/components/ariadne/flash_component.rb +0 -128
- data/app/components/ariadne/flex_component/flex_component.html.erb +0 -5
- data/app/components/ariadne/flex_component.rb +0 -56
- data/app/components/ariadne/footer_component/footer_component.html.erb +0 -7
- data/app/components/ariadne/footer_component.rb +0 -23
- data/app/components/ariadne/grid_component/grid_component.html.erb +0 -26
- data/app/components/ariadne/grid_component.rb +0 -67
- data/app/components/ariadne/header_component/header_component.html.erb +0 -29
- data/app/components/ariadne/header_component.rb +0 -111
- data/app/components/ariadne/heading_component.rb +0 -49
- data/app/components/ariadne/heroicon_component/heroicon_component.html.erb +0 -4
- data/app/components/ariadne/heroicon_component.rb +0 -166
- data/app/components/ariadne/image_component.rb +0 -53
- data/app/components/ariadne/inline_flex_component/inline_flex_component.html.erb +0 -6
- data/app/components/ariadne/inline_flex_component.rb +0 -72
- data/app/components/ariadne/layout_component.html.erb +0 -21
- data/app/components/ariadne/layout_component.rb +0 -69
- data/app/components/ariadne/link_component.rb +0 -65
- data/app/components/ariadne/list_component/list_component.html.erb +0 -3
- data/app/components/ariadne/list_component.rb +0 -70
- data/app/components/ariadne/modal_component.html.erb +0 -11
- data/app/components/ariadne/modal_component.rb +0 -88
- data/app/components/ariadne/narrow_container_component/narrow_container_component.html.erb +0 -3
- data/app/components/ariadne/narrow_container_component.rb +0 -30
- data/app/components/ariadne/options_controller/options_controller.d.ts +0 -39
- data/app/components/ariadne/options_controller/options_controller.js +0 -89
- data/app/components/ariadne/options_controller/options_controller.ts +0 -122
- data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts +0 -42
- data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.js +0 -237
- data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.ts +0 -278
- data/app/components/ariadne/panel_bar_component/panel_bar_component.html.erb +0 -20
- data/app/components/ariadne/panel_bar_component.rb +0 -80
- data/app/components/ariadne/pill_component/pill_component.html.erb +0 -3
- data/app/components/ariadne/pill_component.rb +0 -44
- data/app/components/ariadne/popover_component.html.erb +0 -10
- data/app/components/ariadne/popover_component.rb +0 -81
- data/app/components/ariadne/progress_bar_component.html.erb +0 -5
- data/app/components/ariadne/progress_bar_component.rb +0 -63
- data/app/components/ariadne/relative_time_component.html.erb +0 -3
- data/app/components/ariadne/relative_time_component.rb +0 -61
- data/app/components/ariadne/show_more_button_component.html.erb +0 -11
- data/app/components/ariadne/show_more_button_component.rb +0 -47
- data/app/components/ariadne/slideover_component/slideover-component.d.ts +0 -9
- data/app/components/ariadne/slideover_component/slideover-component.js +0 -11
- data/app/components/ariadne/slideover_component/slideover-component.ts +0 -17
- data/app/components/ariadne/slideover_component/slideover_component.html.erb +0 -9
- data/app/components/ariadne/slideover_component.rb +0 -66
- data/app/components/ariadne/spinner_component.html.erb +0 -16
- data/app/components/ariadne/spinner_component.rb +0 -45
- data/app/components/ariadne/string_match_controller/string_match_controller.d.ts +0 -27
- data/app/components/ariadne/string_match_controller/string_match_controller.js +0 -51
- data/app/components/ariadne/string_match_controller/string_match_controller.ts +0 -65
- data/app/components/ariadne/subheader_component.html.erb +0 -11
- data/app/components/ariadne/subheader_component.rb +0 -65
- data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts +0 -48
- data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.js +0 -207
- data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.ts +0 -256
- data/app/components/ariadne/tab_component/tab_component.html.erb +0 -3
- data/app/components/ariadne/tab_component.rb +0 -98
- data/app/components/ariadne/tab_container_component/tab-container-component.d.ts +0 -1
- data/app/components/ariadne/tab_container_component/tab-container-component.js +0 -23
- data/app/components/ariadne/tab_container_component/tab-container-component.ts +0 -24
- data/app/components/ariadne/tab_container_component.erb +0 -10
- data/app/components/ariadne/tab_container_component.rb +0 -68
- data/app/components/ariadne/tab_nav_component/tab-nav-component.d.ts +0 -9
- data/app/components/ariadne/tab_nav_component/tab-nav-component.js +0 -33
- data/app/components/ariadne/tab_nav_component/tab-nav-component.ts +0 -34
- data/app/components/ariadne/tab_nav_component/tab_nav_component.html.erb +0 -7
- data/app/components/ariadne/tab_nav_component.rb +0 -72
- data/app/components/ariadne/table_nav_component/table_nav_component.html.erb +0 -52
- data/app/components/ariadne/table_nav_component.rb +0 -338
- data/app/components/ariadne/text.rb +0 -25
- data/app/components/ariadne/time_ago_component/time-ago-component.d.ts +0 -1
- data/app/components/ariadne/time_ago_component/time-ago-component.js +0 -1
- data/app/components/ariadne/time_ago_component/time-ago-component.ts +0 -1
- data/app/components/ariadne/time_ago_component.rb +0 -56
- data/app/components/ariadne/timeline_component/timeline_component.html.erb +0 -19
- data/app/components/ariadne/timeline_component.rb +0 -34
- data/app/components/ariadne/toggle_component/toggle_component.html.erb +0 -15
- data/app/components/ariadne/toggle_component.rb +0 -95
- data/app/components/ariadne/toggleable_controller/toggleable_controller.d.ts +0 -34
- data/app/components/ariadne/toggleable_controller/toggleable_controller.js +0 -54
- data/app/components/ariadne/toggleable_controller/toggleable_controller.ts +0 -77
- data/app/components/ariadne/tooltip_component/tooltip-component.d.ts +0 -24
- data/app/components/ariadne/tooltip_component/tooltip-component.js +0 -43
- data/app/components/ariadne/tooltip_component/tooltip-component.ts +0 -57
- data/app/components/ariadne/tooltip_component/tooltip_component.html.erb +0 -4
- data/app/components/ariadne/tooltip_component.rb +0 -108
- data/app/lib/ariadne/action_view_extensions/form_helper.rb +0 -30
- data/app/lib/ariadne/audited/dsl.rb +0 -32
- data/app/lib/ariadne/form_builder.rb +0 -80
- data/app/lib/ariadne/status/dsl.rb +0 -41
- data/config/importmap.rb +0 -3
- data/exe/tailwindcss +0 -21
- data/lib/rubocop/cop/ariadne/base_cop.rb +0 -26
- data/tailwind.config.js +0 -70
@@ -1,81 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Displays content in a box that hovers over other content
|
5
|
-
class PopoverComponent < Ariadne::Component
|
6
|
-
DEFAULT_TAG = :div
|
7
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
8
|
-
|
9
|
-
DIRECTIONS = [:top, :right, :bottom, :left]
|
10
|
-
|
11
|
-
# Menu: List of selectable items (ie: navigation)
|
12
|
-
# Dialog: Essentiall a modal
|
13
|
-
# Listbox: Something like a dropdown for a <select> element
|
14
|
-
# Tooltip: plain text
|
15
|
-
ROLES = [:menu, :dialog, :listbox, :tooltip]
|
16
|
-
HORIZONTAL_ALIGNMENTS = [:left, :right, :center]
|
17
|
-
|
18
|
-
DEFAULT_CLASSES = {
|
19
|
-
wrapper: "ariadne-group ariadne-relative ariadne-w-fit",
|
20
|
-
items: "ariadne-w-fit ariadne-absolute ariadne-shadow-lg ariadne-z-10 ariadne-p-2 ariadne-bg-white ariadne-rounded-md",
|
21
|
-
base: "ariadne-inline-block",
|
22
|
-
}
|
23
|
-
|
24
|
-
ITEMS_DIRECITON_CLASSES = "group-data-[popover-direction=top]:ariadne-bottom-full group-data-[popover-direction=top]:-ariadne-translate-y-2 group-data-[popover-direction=bottom]:ariadne-top-full group-data-[popover-direction=bottom]:ariadne-translate-y-2"
|
25
|
-
ITEMS_HORIZONTAL_ALIGNMENT_CLASSES = "group-data-[popover-horizontal-alignment=left]:ariadne-left-0 group-data-[popover-horizontal-alignment=right]:ariadne-right-0 group-data-[popover-horizontal-alignment=center]:ariadne-left-1/2 group-data-[popover-horizontal-alignment=center]:-ariadne-translate-x-1/2"
|
26
|
-
ITEMS_VISIBILITY_CLASSES = "group-data-[popover-visible=false]:ariadne-hidden"
|
27
|
-
|
28
|
-
DEFAULT_ATTRIBUTES = {
|
29
|
-
"data-controller": "toggleable",
|
30
|
-
"data-action": "click->toggleable#toggle",
|
31
|
-
"data-toggleable-synced-attrs-value": '["data-popover-visible"]',
|
32
|
-
}
|
33
|
-
|
34
|
-
renders_one :base
|
35
|
-
|
36
|
-
renders_many :items
|
37
|
-
|
38
|
-
# @example Default
|
39
|
-
#
|
40
|
-
# <%= render(Ariadne::PopoverComponent.new) { "Example" } %>
|
41
|
-
#
|
42
|
-
# @param tag [Symbol, String] The rendered tag name.
|
43
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
44
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
45
|
-
def initialize(
|
46
|
-
tag: DEFAULT_TAG,
|
47
|
-
direction: :bottom,
|
48
|
-
classes: "",
|
49
|
-
role:,
|
50
|
-
attributes: {},
|
51
|
-
horizontal_alignment: :center,
|
52
|
-
initial_visible: false,
|
53
|
-
base_wrapper_classes: "",
|
54
|
-
items_wrapper_classes: ""
|
55
|
-
)
|
56
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
57
|
-
@direction = fetch_or_raise(DIRECTIONS, direction)
|
58
|
-
@horizontal_alignment = fetch_or_raise(HORIZONTAL_ALIGNMENTS, horizontal_alignment)
|
59
|
-
@role = fetch_or_raise(ROLES, role)
|
60
|
-
@classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
|
61
|
-
|
62
|
-
@attributes = DEFAULT_ATTRIBUTES
|
63
|
-
.merge({
|
64
|
-
"data-popover-direction": @direction,
|
65
|
-
"data-popover-horizontal-alignment": @horizontal_alignment,
|
66
|
-
"data-popover-visible": initial_visible,
|
67
|
-
"data-toggleable-close-on-outside-click-value": true,
|
68
|
-
})
|
69
|
-
.merge(attributes)
|
70
|
-
|
71
|
-
@base_classes = merge_class_names(DEFAULT_CLASSES[:base], base_wrapper_classes)
|
72
|
-
@items_wrapper_classes = merge_class_names(
|
73
|
-
DEFAULT_CLASSES[:items],
|
74
|
-
ITEMS_DIRECITON_CLASSES,
|
75
|
-
ITEMS_HORIZONTAL_ALIGNMENT_CLASSES,
|
76
|
-
ITEMS_VISIBILITY_CLASSES,
|
77
|
-
items_wrapper_classes,
|
78
|
-
)
|
79
|
-
end
|
80
|
-
end
|
81
|
-
end
|
@@ -1,63 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Bar used to show a progress in an activity, supports single bars or multiple bars within one component
|
5
|
-
# use aria-labelledby and aria-describedby to describe the progress bar's purpose
|
6
|
-
class ProgressBarComponent < Ariadne::Component
|
7
|
-
DEFAULT_TAGS = {
|
8
|
-
wrapper: :div,
|
9
|
-
item: :div,
|
10
|
-
}
|
11
|
-
|
12
|
-
DEFAULT_CLASSES = {
|
13
|
-
wrapper: "ariadne-flex ariadne-gap-1 ariadne-bg-slate-200 ariadne-rounded-md ariadne-overflow-hidden",
|
14
|
-
item: "",
|
15
|
-
}
|
16
|
-
|
17
|
-
DEFAULT_ATTRIBUTES = {
|
18
|
-
wrapper: {
|
19
|
-
role: "progressbar",
|
20
|
-
"data-controller": "accumulator",
|
21
|
-
"aria-valuenow": 0,
|
22
|
-
},
|
23
|
-
item: { "data-accumulator-target": "sum" },
|
24
|
-
}
|
25
|
-
|
26
|
-
BAR_SIZES = {
|
27
|
-
sm: "ariadne-h-2",
|
28
|
-
md: "ariadne-h-3",
|
29
|
-
lg: "ariadne-h-4",
|
30
|
-
}
|
31
|
-
|
32
|
-
renders_many :items, lambda { |tag: DEFAULT_TAGS[:item], classes: "", value: 0, attributes: {}|
|
33
|
-
Ariadne::BaseComponent.new(
|
34
|
-
tag: check_incoming_tag(DEFAULT_TAGS[:item], tag),
|
35
|
-
classes: merge_class_names(DEFAULT_CLASSES[:item], BAR_SIZES[@size], classes),
|
36
|
-
attributes: DEFAULT_ATTRIBUTES[:item].merge({
|
37
|
-
style: "width: #{(value - @min).to_f / (@max - @min) * 100}%",
|
38
|
-
"data-value": value,
|
39
|
-
}).merge(attributes),
|
40
|
-
)
|
41
|
-
}
|
42
|
-
|
43
|
-
# @example Default
|
44
|
-
#
|
45
|
-
# <%= render(Ariadne::ProgressBarComponent.new) { "Example" } %>
|
46
|
-
#
|
47
|
-
# @param tag [Symbol, String] The rendered tag name.
|
48
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
49
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
50
|
-
def initialize(tag: DEFAULT_TAGS[:wrapper], min: 0, max: 100, classes: "", size: :md, attributes: {})
|
51
|
-
@tag = check_incoming_tag(DEFAULT_TAGS[:wrapper], tag)
|
52
|
-
@classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
|
53
|
-
|
54
|
-
@min = min
|
55
|
-
@max = max
|
56
|
-
@size = size
|
57
|
-
@attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({
|
58
|
-
"aria-valuemin": @min,
|
59
|
-
"aria-valuemax": @max,
|
60
|
-
}).merge(attributes)
|
61
|
-
end
|
62
|
-
end
|
63
|
-
end
|
@@ -1,61 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Converts time into a display-friendly format in a relative time (3d) or absolute date after a default of 30 days
|
5
|
-
class RelativeTimeComponent < Ariadne::Component
|
6
|
-
DEFAULT_TAG = :span
|
7
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
8
|
-
DEFAULT_DATE_FORMAT = "%b %-d, %Y"
|
9
|
-
DEFAULT_DATE_FORMAT_SWITCH = 30 * 24 * 60 * 60
|
10
|
-
|
11
|
-
DEFAULT_CLASSES = ""
|
12
|
-
|
13
|
-
# @example Default
|
14
|
-
#
|
15
|
-
# <%= render(Ariadne::RelativeTimeComponent.new) { "Example" } %>
|
16
|
-
#
|
17
|
-
# @param tag [Symbol, String] The rendered tag name.
|
18
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
19
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
20
|
-
def initialize(
|
21
|
-
tag: DEFAULT_TAG,
|
22
|
-
classes: "",
|
23
|
-
time: nil,
|
24
|
-
format: DEFAULT_DATE_FORMAT,
|
25
|
-
date_format_switch: DEFAULT_DATE_FORMAT_SWITCH,
|
26
|
-
force_relative: false,
|
27
|
-
attributes: {}
|
28
|
-
)
|
29
|
-
raise ArgumentError, "A 'time' argument is required to use the Relative Time component." if time.blank?
|
30
|
-
|
31
|
-
@now = 1.second.ago
|
32
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
33
|
-
@classes = merge_class_names(DEFAULT_CLASSES, classes)
|
34
|
-
@time = time
|
35
|
-
@date_format_switch = date_format_switch
|
36
|
-
@format = format
|
37
|
-
@force_relative = force_relative
|
38
|
-
@attributes = attributes
|
39
|
-
|
40
|
-
@formatted_date = formatted
|
41
|
-
end
|
42
|
-
|
43
|
-
private def formatted_time
|
44
|
-
@time.localtime.strftime(@format)
|
45
|
-
end
|
46
|
-
|
47
|
-
private def time_difference
|
48
|
-
(@now - @time).to_i.abs
|
49
|
-
end
|
50
|
-
|
51
|
-
private def formatted
|
52
|
-
diff = time_difference
|
53
|
-
|
54
|
-
if @force_relative || diff < @date_format_switch
|
55
|
-
time_ago_in_words(@time)
|
56
|
-
else
|
57
|
-
@time.localtime.strftime(@format)
|
58
|
-
end
|
59
|
-
end
|
60
|
-
end
|
61
|
-
end
|
@@ -1,11 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
|
2
|
-
<%= render Ariadne::ButtonComponent.new(classes: @button_classes, attributes: @button_attributes) do |button| %>
|
3
|
-
<%= @button_text %>
|
4
|
-
<% end %>
|
5
|
-
<div
|
6
|
-
class="ariadne-max-h-full aria-hidden:ariadne-max-h-0 ariadne-overflow-hidden ariadne-my-2 ariadne-border-solid ariadne-border-2 aria-selected:ariadne-hidden aria-selected:ariadne-border-green-300 aria-selected:ariadne-border-solid aria-selected:ariadne-border-2 ariadne-border-transparent ariadne-min-w-[21rem] ariadne-whitespace-nowrap ariadne-text-ellipsis" data-controller="toggleable" aria-hidden="true" data-toggleable-anti-attrs-value='["aria-hidden"]' data-toggleable-outlet="<%= @outlet %>">
|
7
|
-
<% hiddens.each do |hidden| %>
|
8
|
-
<%= hidden %>
|
9
|
-
<% end %>
|
10
|
-
</div>
|
11
|
-
<% end %>
|
@@ -1,47 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Add a general description of component here
|
5
|
-
# Add additional usage considerations or best practices that may aid the user to use the component correctly.
|
6
|
-
# @accessibility Add any accessibility considerations
|
7
|
-
class ShowMoreButtonComponent < Ariadne::Component
|
8
|
-
DEFAULT_TAG = :div
|
9
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
10
|
-
|
11
|
-
DEFAULT_CLASSES = { wrapper: "ariadne-group", button: "ariadne-px-2 ariadne-py-0" }
|
12
|
-
|
13
|
-
DEFAULT_ATTRIBUTES = {
|
14
|
-
wrapper: {
|
15
|
-
"data-controller": "toggleable",
|
16
|
-
},
|
17
|
-
button: {
|
18
|
-
"data-action": "click->toggleable#toggle",
|
19
|
-
},
|
20
|
-
}
|
21
|
-
|
22
|
-
renders_many :hiddens
|
23
|
-
|
24
|
-
# @example Default
|
25
|
-
#
|
26
|
-
# <%= render(Ariadne::ShowMoreButtonComponent.new) { "Example" } %>
|
27
|
-
#
|
28
|
-
# @param tag [Symbol, String] The rendered tag name.
|
29
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
30
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
31
|
-
def initialize(tag: DEFAULT_TAG, classes: "", button_text: "...", outlet: nil, attributes: {})
|
32
|
-
raise ArgumentError, "An 'aria-label' attribute is required to use the Show More Button. Include as much detail as you can about the content to be shown to assist screen readers." if attributes.blank? || attributes["aria-label"].blank?
|
33
|
-
raise ArgumentError, "An 'outlet' attribute is required to use the Show More Button. This will ensure controllers can correctly identify states to update." if outlet.blank?
|
34
|
-
|
35
|
-
@outlet = outlet
|
36
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
37
|
-
@classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
|
38
|
-
@attributes = DEFAULT_ATTRIBUTES[:wrapper]
|
39
|
-
.merge({ "data-toggleable-toggleable-outlet": "[data-toggleable-outlet=#{@outlet}]" })
|
40
|
-
.merge(attributes)
|
41
|
-
|
42
|
-
@button_classes = merge_class_names(DEFAULT_CLASSES[:button], classes)
|
43
|
-
@button_attributes = DEFAULT_ATTRIBUTES[:button].merge(attributes)
|
44
|
-
@button_text = button_text
|
45
|
-
end
|
46
|
-
end
|
47
|
-
end
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import { Controller } from '@hotwired/stimulus';
|
2
|
-
export default class SlideoverComponent extends Controller {
|
3
|
-
static targets: string[];
|
4
|
-
readonly expandableTarget: HTMLDivElement;
|
5
|
-
readonly expandWrapperTarget: HTMLDivElement;
|
6
|
-
readonly slidePanelTargets: [HTMLDivElement];
|
7
|
-
readonly buttonWrapperTarget: HTMLDivElement;
|
8
|
-
toggle(): void;
|
9
|
-
}
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import { Controller } from '@hotwired/stimulus';
|
2
|
-
class SlideoverComponent extends Controller {
|
3
|
-
toggle() {
|
4
|
-
this.expandableTarget.classList.toggle('ariadne-hidden');
|
5
|
-
for (const slidePanel of this.slidePanelTargets) {
|
6
|
-
slidePanel.classList.toggle('ariadne-hidden');
|
7
|
-
}
|
8
|
-
}
|
9
|
-
}
|
10
|
-
SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];
|
11
|
-
export default SlideoverComponent;
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import {Controller} from '@hotwired/stimulus'
|
2
|
-
|
3
|
-
export default class SlideoverComponent extends Controller {
|
4
|
-
static targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper']
|
5
|
-
|
6
|
-
declare readonly expandableTarget: HTMLDivElement
|
7
|
-
declare readonly expandWrapperTarget: HTMLDivElement
|
8
|
-
declare readonly slidePanelTargets: [HTMLDivElement]
|
9
|
-
declare readonly buttonWrapperTarget: HTMLDivElement
|
10
|
-
|
11
|
-
toggle() {
|
12
|
-
this.expandableTarget.classList.toggle('ariadne-hidden')
|
13
|
-
for (const slidePanel of this.slidePanelTargets) {
|
14
|
-
slidePanel.classList.toggle('ariadne-hidden')
|
15
|
-
}
|
16
|
-
}
|
17
|
-
}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |slideover| %>
|
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 %>
|
8
|
-
</div>
|
9
|
-
<% end %>
|
@@ -1,66 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Add a general description of component here
|
5
|
-
# Add additional usage considerations or best practices that may aid the user to use the component correctly.
|
6
|
-
# @accessibility Add any accessibility considerations
|
7
|
-
class SlideoverComponent < Ariadne::Component
|
8
|
-
DEFAULT_TAG = :div
|
9
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
10
|
-
|
11
|
-
DIRECTION_Y_DOWN = :yd
|
12
|
-
DIRECTION_X_LEFT = :xl
|
13
|
-
VALID_DIRECTIONS = [DIRECTION_Y_DOWN, DIRECTION_X_LEFT].freeze
|
14
|
-
|
15
|
-
DEFAULT_CLASSES = "ariadne-flex ariadne-flex-col"
|
16
|
-
|
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 { |selected: false, classes: "", attributes: {}|
|
19
|
-
actual_classes = merge_class_names(DEFAULT_BUTTON_CLASSES, classes, selected ? "" : BASE_HIDDEN_CLASS)
|
20
|
-
|
21
|
-
attributes[:id] ||= "btnOpen"
|
22
|
-
attributes[:"data-slideover-component-target"] ||= "slidePanel"
|
23
|
-
attributes[:"data-action"] ||= "click->slideover-component#toggle"
|
24
|
-
attributes[:type] ||= "submit"
|
25
|
-
|
26
|
-
Ariadne::ButtonComponent.new(classes: actual_classes, attributes: attributes)
|
27
|
-
}
|
28
|
-
|
29
|
-
renders_one :close_button, lambda { |selected: false, classes: "", attributes: {}|
|
30
|
-
actual_classes = merge_class_names(DEFAULT_BUTTON_CLASSES, classes, selected ? "" : BASE_HIDDEN_CLASS)
|
31
|
-
|
32
|
-
attributes[:id] ||= "btnClose"
|
33
|
-
attributes[:"data-slideover-component-target"] ||= "slidePanel"
|
34
|
-
attributes[:"data-action"] ||= "click->slideover-component#toggle"
|
35
|
-
attributes[:type] ||= "submit"
|
36
|
-
|
37
|
-
Ariadne::ButtonComponent.new(classes: actual_classes, attributes: attributes)
|
38
|
-
}
|
39
|
-
|
40
|
-
# @example Default
|
41
|
-
#
|
42
|
-
# <%= render(Ariadne::SlideoverComponent.new(direction: Ariadne::SlideoverComponent::DIRECTION_Y_DOWN)) { "Example" } %>
|
43
|
-
#
|
44
|
-
# @param tag [Symbol, String] The rendered tag name.
|
45
|
-
# @param direction [Symbol] <%= one_of(Ariadne::SlideoverComponent::VALID_DIRECTIONS) %>
|
46
|
-
# @param open_text [String] The text to use to open the slideover.
|
47
|
-
# @param close_text [String] The text to use to close the slideover.
|
48
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
49
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
50
|
-
def initialize(tag: DEFAULT_TAG, direction:, open_text: "Open", close_text: "Close", classes: "", attributes: {})
|
51
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
52
|
-
@classes = merge_class_names(
|
53
|
-
DEFAULT_CLASSES,
|
54
|
-
classes,
|
55
|
-
)
|
56
|
-
|
57
|
-
@direction = fetch_or_raise(VALID_DIRECTIONS, direction)
|
58
|
-
|
59
|
-
@open_text = open_text
|
60
|
-
@close_text = close_text
|
61
|
-
@attributes = attributes
|
62
|
-
@attributes[:"data-controller"] = "slideover-component"
|
63
|
-
@attributes[:"data-slideover-component-target"] = "expandWrapper"
|
64
|
-
end
|
65
|
-
end
|
66
|
-
end
|
@@ -1,16 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: :svg, classes: @classes, attributes: @attributes) do |svg| %>
|
2
|
-
<circle
|
3
|
-
cx="8"
|
4
|
-
cy="8"
|
5
|
-
r="7"
|
6
|
-
stroke="currentColor"
|
7
|
-
stroke-opacity="0.25"
|
8
|
-
stroke-width="2"
|
9
|
-
vector-effect="non-scaling-stroke" />
|
10
|
-
<path
|
11
|
-
d="M15 8a7.002 7.002 0 00-7-7"
|
12
|
-
stroke="currentColor"
|
13
|
-
stroke-width="2"
|
14
|
-
stroke-linecap="round"
|
15
|
-
vector-effect="non-scaling-stroke" />
|
16
|
-
<% end %>
|
@@ -1,45 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Renders a spinning wheel to indicate a loading state
|
5
|
-
# Add color using a tailwind text color class
|
6
|
-
class SpinnerComponent < Ariadne::Component
|
7
|
-
DEFAULT_SIZE = :md
|
8
|
-
DEFAULT_CLASSES = "ariadne-animate-spin ariadne-fill-none"
|
9
|
-
DEFAULT_ATTRIBUTES = {
|
10
|
-
fill: "none",
|
11
|
-
viewBox: "0 0 16 16",
|
12
|
-
role: "progressbar",
|
13
|
-
"aria-valuetext": "Loading...",
|
14
|
-
"aria-busy": true,
|
15
|
-
"aria-valuemin": "0",
|
16
|
-
"aria-valuemax": "100",
|
17
|
-
}.freeze
|
18
|
-
|
19
|
-
SIZE_CLASS_MAPPINGS = {
|
20
|
-
xs: "ariadne-h-4 ariadne-w-4",
|
21
|
-
sm: "ariadne-h-6 ariadne-w-6",
|
22
|
-
md: "ariadne-h-8 ariadne-w-8",
|
23
|
-
lg: "ariadne-h-10 ariadne-w-10",
|
24
|
-
xl: "ariadne-h-12 ariadne-w-12",
|
25
|
-
}.freeze
|
26
|
-
|
27
|
-
VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
|
28
|
-
|
29
|
-
# @example Default
|
30
|
-
#
|
31
|
-
# <%= render(Ariadne::SpinnerComponent.new) { } %>
|
32
|
-
#
|
33
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
34
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
35
|
-
def initialize(classes: "", attributes: {}, size: DEFAULT_SIZE)
|
36
|
-
@size = fetch_or_raise(VALID_SIZES, size)
|
37
|
-
@attributes = DEFAULT_ATTRIBUTES.merge(attributes)
|
38
|
-
@classes = merge_class_names(
|
39
|
-
DEFAULT_CLASSES,
|
40
|
-
SIZE_CLASS_MAPPINGS[size],
|
41
|
-
classes,
|
42
|
-
)
|
43
|
-
end
|
44
|
-
end
|
45
|
-
end
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
|
2
|
-
import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
|
3
|
-
export interface StringMatchOutlet extends SyncedBooleanAttributesController<string> {
|
4
|
-
change: (event: Event, updateTo?: TOutletChangeData<string>) => void;
|
5
|
-
}
|
6
|
-
export default class StringMatchController extends SyncedBooleanAttributesController<string> implements StringMatchOutlet {
|
7
|
-
#private;
|
8
|
-
static outlets: string[];
|
9
|
-
static targets: string[];
|
10
|
-
static values: {
|
11
|
-
keyword: StringConstructor;
|
12
|
-
syncedAttrs: ArrayConstructor;
|
13
|
-
antiAttrs: ArrayConstructor;
|
14
|
-
protectAttrs: BooleanConstructor;
|
15
|
-
outletEvents: ArrayConstructor;
|
16
|
-
};
|
17
|
-
readonly matchTargets: Array<HTMLElement>;
|
18
|
-
readonly hasMatchTarget: boolean;
|
19
|
-
readonly emptyTarget: Element;
|
20
|
-
readonly hasEmptyTarget: boolean;
|
21
|
-
keywordValue: string;
|
22
|
-
change(event: Event, updateTo?: TOutletChangeData<string>): void;
|
23
|
-
getElementsToSync(): Element[] | null | undefined;
|
24
|
-
getValueForElement(element: Element): boolean;
|
25
|
-
getState(): string;
|
26
|
-
outletUpdate: (event: Event, updateTo?: TOutletChangeData<string>) => void;
|
27
|
-
}
|
@@ -1,51 +0,0 @@
|
|
1
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
2
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
3
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
4
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
5
|
-
};
|
6
|
-
var _StringMatchController_instances, _StringMatchController_compareKeywordToTargets;
|
7
|
-
import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
|
8
|
-
class StringMatchController extends SyncedBooleanAttributesController {
|
9
|
-
constructor() {
|
10
|
-
super(...arguments);
|
11
|
-
_StringMatchController_instances.add(this);
|
12
|
-
this.outletUpdate = this.change;
|
13
|
-
}
|
14
|
-
change(event, updateTo = {}) {
|
15
|
-
var _a;
|
16
|
-
const value = (_a = updateTo.data) !== null && _a !== void 0 ? _a : event.currentTarget.value;
|
17
|
-
this.keywordValue = value;
|
18
|
-
__classPrivateFieldGet(this, _StringMatchController_instances, "m", _StringMatchController_compareKeywordToTargets).call(this);
|
19
|
-
this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: this.keywordValue }));
|
20
|
-
}
|
21
|
-
getElementsToSync() {
|
22
|
-
return this.matchTargets;
|
23
|
-
}
|
24
|
-
getValueForElement(element) {
|
25
|
-
var _a, _b;
|
26
|
-
return (_b = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.keywordValue.toLowerCase())) !== null && _b !== void 0 ? _b : false;
|
27
|
-
}
|
28
|
-
getState() {
|
29
|
-
return this.keywordValue;
|
30
|
-
}
|
31
|
-
}
|
32
|
-
_StringMatchController_instances = new WeakSet(), _StringMatchController_compareKeywordToTargets = function _StringMatchController_compareKeywordToTargets() {
|
33
|
-
if (this.hasMatchTarget) {
|
34
|
-
let foundMatch = false;
|
35
|
-
for (const index in this.matchTargets) {
|
36
|
-
const target = this.matchTargets[index];
|
37
|
-
const value = this.getValueForElement(target);
|
38
|
-
this.updateAttributesForElement(target, value);
|
39
|
-
if (value) {
|
40
|
-
foundMatch = true;
|
41
|
-
}
|
42
|
-
}
|
43
|
-
if (this.hasEmptyTarget) {
|
44
|
-
this.emptyTarget.setAttribute('aria-hidden', String(foundMatch));
|
45
|
-
}
|
46
|
-
}
|
47
|
-
};
|
48
|
-
StringMatchController.outlets = SyncedBooleanAttributesController.outlets;
|
49
|
-
StringMatchController.targets = ['match', 'empty'];
|
50
|
-
StringMatchController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { keyword: String });
|
51
|
-
export default StringMatchController;
|
@@ -1,65 +0,0 @@
|
|
1
|
-
import {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
|
2
|
-
import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
|
3
|
-
|
4
|
-
export interface StringMatchOutlet extends SyncedBooleanAttributesController<string> {
|
5
|
-
change: (event: Event, updateTo?: TOutletChangeData<string>) => void
|
6
|
-
}
|
7
|
-
|
8
|
-
export default class StringMatchController
|
9
|
-
extends SyncedBooleanAttributesController<string>
|
10
|
-
implements StringMatchOutlet
|
11
|
-
{
|
12
|
-
static outlets = SyncedBooleanAttributesController.outlets
|
13
|
-
static targets = ['match', 'empty']
|
14
|
-
static values = {
|
15
|
-
...SyncedBooleanAttributesController.values,
|
16
|
-
keyword: String,
|
17
|
-
}
|
18
|
-
|
19
|
-
declare readonly matchTargets: Array<HTMLElement>
|
20
|
-
declare readonly hasMatchTarget: boolean
|
21
|
-
|
22
|
-
declare readonly emptyTarget: Element
|
23
|
-
declare readonly hasEmptyTarget: boolean
|
24
|
-
|
25
|
-
declare keywordValue: string
|
26
|
-
|
27
|
-
change(event: Event, updateTo: TOutletChangeData<string> = {}) {
|
28
|
-
const value = updateTo.data ?? (event.currentTarget as HTMLInputElement).value
|
29
|
-
this.keywordValue = value
|
30
|
-
this.#compareKeywordToTargets()
|
31
|
-
this.sendToOutlets(event, {...updateTo, data: this.keywordValue})
|
32
|
-
}
|
33
|
-
|
34
|
-
#compareKeywordToTargets() {
|
35
|
-
if (this.hasMatchTarget) {
|
36
|
-
let foundMatch = false
|
37
|
-
for (const index in this.matchTargets) {
|
38
|
-
const target = this.matchTargets[index]
|
39
|
-
const value = this.getValueForElement(target)
|
40
|
-
this.updateAttributesForElement(target, value)
|
41
|
-
if (value) {
|
42
|
-
foundMatch = true
|
43
|
-
}
|
44
|
-
}
|
45
|
-
|
46
|
-
if (this.hasEmptyTarget) {
|
47
|
-
this.emptyTarget.setAttribute('aria-hidden', String(foundMatch))
|
48
|
-
}
|
49
|
-
}
|
50
|
-
}
|
51
|
-
|
52
|
-
getElementsToSync(): Element[] | null | undefined {
|
53
|
-
return this.matchTargets
|
54
|
-
}
|
55
|
-
|
56
|
-
getValueForElement(element: Element) {
|
57
|
-
return (element as HTMLElement).textContent?.toLowerCase().includes(this.keywordValue.toLowerCase()) ?? false
|
58
|
-
}
|
59
|
-
|
60
|
-
getState() {
|
61
|
-
return this.keywordValue
|
62
|
-
}
|
63
|
-
|
64
|
-
outletUpdate = this.change
|
65
|
-
}
|
@@ -1,11 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
|
2
|
-
<div class="ariadne-flex ariadne-justify-between">
|
3
|
-
<%= header %>
|
4
|
-
<div>
|
5
|
-
<% actions.each do |action| %>
|
6
|
-
<%= action %>
|
7
|
-
<% end %>
|
8
|
-
</div>
|
9
|
-
</div>
|
10
|
-
<%= description %>
|
11
|
-
<% end %>
|