ariadne_view_components 0.0.39-aarch64-linux → 0.0.41-aarch64-linux
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -0
- data/lib/ariadne/view_components/upstream.rb +0 -1
- data/lib/ariadne/view_components/version.rb +1 -1
- metadata +2 -90
- data/app/assets/config/manifest.js +0 -2
- data/app/components/ariadne/ariadne-form.ts +0 -96
- data/app/components/ariadne/ariadne.ts +0 -21
- 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/base_component.rb +0 -37
- 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/button_component/button_component.html.erb +0 -4
- data/app/components/ariadne/button_component.rb +0 -165
- 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/comment_component/comment_component.html.erb +0 -37
- data/app/components/ariadne/comment_component.rb +0 -71
- 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.html.erb +0 -20
- 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/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/link_component.rb +0 -65
- data/app/components/ariadne/list_component/list_component.html.erb +0 -6
- data/app/components/ariadne/list_component.rb +0 -70
- 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/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/rich_text_area_component/rich-text-area-component.ts +0 -47
- data/app/components/ariadne/rich_text_area_component/rich_text_area_component.html.erb +0 -6
- data/app/components/ariadne/rich_text_area_component.rb +0 -35
- 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/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.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.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.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/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/class_name_helper.rb +0 -22
- data/app/lib/ariadne/fetch_or_fallback_helper.rb +0 -110
- data/app/lib/ariadne/form_builder.rb +0 -74
- data/app/lib/ariadne/icon_helper.rb +0 -51
- data/app/lib/ariadne/logger_helper.rb +0 -23
- data/app/lib/ariadne/status/dsl.rb +0 -41
- data/app/lib/ariadne/view_helper.rb +0 -22
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 9cba9074e7d31b82198b4237431de85c25cf1dbb5d05396a5ff110485bccf9f7
|
4
|
+
data.tar.gz: bb74b8983323273814e78200937af72b985d1a3a8acb07278274e2d5421b34da
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 29aa89e12208bb418480ccfe97eb29b97a581da05146e789d25e1a3e3d020f3b6f7358a58ca6cea031824b8d80328a55e7ced8db063b68ad71fa4df325941be5
|
7
|
+
data.tar.gz: 47a8002bbae33d58fe621fd4f2b6e1a3f794aa1497f07169b89c706637cf3e8649c3eb7bd6b7710c14385f6b93aaeda0f8188ea9aa24bf5f23d7e8bb4d005677
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,13 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
+
## [v0.0.40](https://github.com/yettoapp/ariadne/tree/v0.0.40) (2023-05-01)
|
4
|
+
|
5
|
+
[Full Changelog](https://github.com/yettoapp/ariadne/compare/v0.0.39...v0.0.40)
|
6
|
+
|
7
|
+
## [v0.0.39](https://github.com/yettoapp/ariadne/tree/v0.0.39) (2023-04-28)
|
8
|
+
|
9
|
+
[Full Changelog](https://github.com/yettoapp/ariadne/compare/v0.0.38...v0.0.39)
|
10
|
+
|
3
11
|
## [v0.0.38](https://github.com/yettoapp/ariadne/tree/v0.0.38) (2023-04-28)
|
4
12
|
|
5
13
|
[Full Changelog](https://github.com/yettoapp/ariadne/compare/v0.0.37...v0.0.38)
|
@@ -9,7 +9,6 @@ module Ariadne
|
|
9
9
|
# rubygems platform name => upstream release filename
|
10
10
|
NATIVE_PLATFORMS = {
|
11
11
|
"arm64-darwin" => "tailwindcss-macos-arm64",
|
12
|
-
"x64-mingw32" => "tailwindcss-windows-x64.exe",
|
13
12
|
"x64-mingw-ucrt" => "tailwindcss-windows-x64.exe",
|
14
13
|
"x86_64-darwin" => "tailwindcss-macos-x64",
|
15
14
|
"x86_64-linux" => "tailwindcss-linux-x64",
|
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.
|
4
|
+
version: 0.0.41
|
5
5
|
platform: aarch64-linux
|
6
6
|
authors:
|
7
7
|
- Garen J. Torikian
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-
|
11
|
+
date: 2023-05-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: tailwind_merge
|
@@ -111,98 +111,10 @@ files:
|
|
111
111
|
- CHANGELOG.md
|
112
112
|
- LICENSE.txt
|
113
113
|
- README.md
|
114
|
-
- app/assets/config/manifest.js
|
115
114
|
- app/assets/stylesheets/ariadne_view_components.css
|
116
115
|
- app/assets/stylesheets/dropdown.css
|
117
116
|
- app/assets/stylesheets/prosemirror.css
|
118
117
|
- app/assets/stylesheets/tooltip-component.css
|
119
|
-
- app/components/ariadne/ariadne-form.ts
|
120
|
-
- app/components/ariadne/ariadne.ts
|
121
|
-
- app/components/ariadne/avatar_component.rb
|
122
|
-
- app/components/ariadne/avatar_stack_component.rb
|
123
|
-
- app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb
|
124
|
-
- app/components/ariadne/base_button.rb
|
125
|
-
- app/components/ariadne/base_component.rb
|
126
|
-
- app/components/ariadne/blankslate_component.rb
|
127
|
-
- app/components/ariadne/blankslate_component/blankslate_component.html.erb
|
128
|
-
- app/components/ariadne/body_component.rb
|
129
|
-
- app/components/ariadne/button_component.rb
|
130
|
-
- app/components/ariadne/button_component/button_component.html.erb
|
131
|
-
- app/components/ariadne/clipboard_copy_component.rb
|
132
|
-
- app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts
|
133
|
-
- app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb
|
134
|
-
- app/components/ariadne/comment_component.rb
|
135
|
-
- app/components/ariadne/comment_component/comment_component.html.erb
|
136
|
-
- app/components/ariadne/component.rb
|
137
|
-
- app/components/ariadne/container_component.rb
|
138
|
-
- app/components/ariadne/container_component/container_component.html.erb
|
139
|
-
- app/components/ariadne/content.rb
|
140
|
-
- app/components/ariadne/counter_component.rb
|
141
|
-
- app/components/ariadne/details_component.rb
|
142
|
-
- app/components/ariadne/details_component/details_component.html.erb
|
143
|
-
- app/components/ariadne/dropdown/menu_component.html.erb
|
144
|
-
- app/components/ariadne/dropdown/menu_component.rb
|
145
|
-
- app/components/ariadne/dropdown/menu_component.ts
|
146
|
-
- app/components/ariadne/dropdown_component.rb
|
147
|
-
- app/components/ariadne/dropdown_component/dropdown_component.html.erb
|
148
|
-
- app/components/ariadne/flash_component.rb
|
149
|
-
- app/components/ariadne/flash_component/flash_component.html.erb
|
150
|
-
- app/components/ariadne/flex_component.rb
|
151
|
-
- app/components/ariadne/flex_component/flex_component.html.erb
|
152
|
-
- app/components/ariadne/footer_component.rb
|
153
|
-
- app/components/ariadne/footer_component/footer_component.html.erb
|
154
|
-
- app/components/ariadne/grid_component.rb
|
155
|
-
- app/components/ariadne/grid_component/grid_component.html.erb
|
156
|
-
- app/components/ariadne/header_component.rb
|
157
|
-
- app/components/ariadne/header_component/header_component.html.erb
|
158
|
-
- app/components/ariadne/heading_component.rb
|
159
|
-
- app/components/ariadne/heroicon_component.rb
|
160
|
-
- app/components/ariadne/heroicon_component/heroicon_component.html.erb
|
161
|
-
- app/components/ariadne/image_component.rb
|
162
|
-
- app/components/ariadne/inline_flex_component.rb
|
163
|
-
- app/components/ariadne/inline_flex_component/inline_flex_component.html.erb
|
164
|
-
- app/components/ariadne/link_component.rb
|
165
|
-
- app/components/ariadne/list_component.rb
|
166
|
-
- app/components/ariadne/list_component/list_component.html.erb
|
167
|
-
- app/components/ariadne/narrow_container_component.rb
|
168
|
-
- app/components/ariadne/narrow_container_component/narrow_container_component.html.erb
|
169
|
-
- app/components/ariadne/panel_bar_component.rb
|
170
|
-
- app/components/ariadne/panel_bar_component/panel_bar_component.html.erb
|
171
|
-
- app/components/ariadne/pill_component.rb
|
172
|
-
- app/components/ariadne/pill_component/pill_component.html.erb
|
173
|
-
- app/components/ariadne/rich_text_area_component.rb
|
174
|
-
- app/components/ariadne/rich_text_area_component/rich-text-area-component.ts
|
175
|
-
- app/components/ariadne/rich_text_area_component/rich_text_area_component.html.erb
|
176
|
-
- app/components/ariadne/slideover_component.rb
|
177
|
-
- app/components/ariadne/slideover_component/slideover-component.ts
|
178
|
-
- app/components/ariadne/slideover_component/slideover_component.html.erb
|
179
|
-
- app/components/ariadne/tab_component.rb
|
180
|
-
- app/components/ariadne/tab_component/tab_component.html.erb
|
181
|
-
- app/components/ariadne/tab_container_component.erb
|
182
|
-
- app/components/ariadne/tab_container_component.rb
|
183
|
-
- app/components/ariadne/tab_container_component/tab-container-component.ts
|
184
|
-
- app/components/ariadne/tab_nav_component.rb
|
185
|
-
- app/components/ariadne/tab_nav_component/tab-nav-component.ts
|
186
|
-
- app/components/ariadne/tab_nav_component/tab_nav_component.html.erb
|
187
|
-
- app/components/ariadne/table_nav_component.rb
|
188
|
-
- app/components/ariadne/table_nav_component/table_nav_component.html.erb
|
189
|
-
- app/components/ariadne/text.rb
|
190
|
-
- app/components/ariadne/time_ago_component.rb
|
191
|
-
- app/components/ariadne/time_ago_component/time-ago-component.ts
|
192
|
-
- app/components/ariadne/timeline_component.rb
|
193
|
-
- app/components/ariadne/timeline_component/timeline_component.html.erb
|
194
|
-
- app/components/ariadne/tooltip_component.rb
|
195
|
-
- app/components/ariadne/tooltip_component/tooltip-component.ts
|
196
|
-
- app/components/ariadne/tooltip_component/tooltip_component.html.erb
|
197
|
-
- app/lib/ariadne/action_view_extensions/form_helper.rb
|
198
|
-
- app/lib/ariadne/audited/dsl.rb
|
199
|
-
- app/lib/ariadne/class_name_helper.rb
|
200
|
-
- app/lib/ariadne/fetch_or_fallback_helper.rb
|
201
|
-
- app/lib/ariadne/form_builder.rb
|
202
|
-
- app/lib/ariadne/icon_helper.rb
|
203
|
-
- app/lib/ariadne/logger_helper.rb
|
204
|
-
- app/lib/ariadne/status/dsl.rb
|
205
|
-
- app/lib/ariadne/view_helper.rb
|
206
118
|
- config/importmap.rb
|
207
119
|
- exe/aarch64-linux/tailwindcss
|
208
120
|
- exe/tailwindcss
|
@@ -1,96 +0,0 @@
|
|
1
|
-
import {Controller} from '@hotwired/stimulus'
|
2
|
-
import {html} from 'lit-html'
|
3
|
-
import type {TemplateResult} from 'lit-html'
|
4
|
-
|
5
|
-
type HTMLFormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
6
|
-
|
7
|
-
export default class AriadneFormWith extends Controller {
|
8
|
-
static targets = ['formField']
|
9
|
-
declare readonly formFieldTargets: [HTMLFormField]
|
10
|
-
|
11
|
-
connect() {
|
12
|
-
this.element.setAttribute('novalidate', 'true')
|
13
|
-
this.element.addEventListener('blur', this.onBlur, true)
|
14
|
-
this.element.addEventListener('submit', this.onSubmit)
|
15
|
-
this.element.addEventListener('ajax:beforeSend', this.onSubmit)
|
16
|
-
}
|
17
|
-
|
18
|
-
disconnect() {
|
19
|
-
this.element.removeEventListener('blur', this.onBlur)
|
20
|
-
this.element.removeEventListener('submit', this.onSubmit)
|
21
|
-
this.element.removeEventListener('ajax:beforeSend', this.onSubmit)
|
22
|
-
}
|
23
|
-
|
24
|
-
onBlur = (event: Event) => {
|
25
|
-
this.validateField(event.target as HTMLFormField)
|
26
|
-
}
|
27
|
-
|
28
|
-
onSubmit = (event: Event) => {
|
29
|
-
if (!this.validateForm()) {
|
30
|
-
event.preventDefault()
|
31
|
-
this.firstInvalidField?.focus()
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
validateForm() {
|
36
|
-
let isValid = true
|
37
|
-
// Not using `find` because we want to validate all the fields
|
38
|
-
for (const field of this.formFields) {
|
39
|
-
if (this.shouldValidateField(field) && !this.validateField(field)) isValid = false
|
40
|
-
}
|
41
|
-
return isValid
|
42
|
-
}
|
43
|
-
|
44
|
-
validateField(field: HTMLFormField) {
|
45
|
-
if (!this.shouldValidateField(field)) return true
|
46
|
-
const isValid = field.checkValidity()
|
47
|
-
field.classList.toggle('invalid', !isValid)
|
48
|
-
this.refreshErrorForInvalidField(field, isValid)
|
49
|
-
return isValid
|
50
|
-
}
|
51
|
-
|
52
|
-
shouldValidateField(field: HTMLFormField) {
|
53
|
-
return (
|
54
|
-
!field.disabled &&
|
55
|
-
!field.classList.contains('ProseMirror') &&
|
56
|
-
!['file', 'reset', 'submit', 'button'].includes(field.type)
|
57
|
-
)
|
58
|
-
}
|
59
|
-
|
60
|
-
refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean) {
|
61
|
-
this.removeExistingErrorMessage(field)
|
62
|
-
if (!isValid) this.showErrorForInvalidField(field)
|
63
|
-
}
|
64
|
-
|
65
|
-
removeExistingErrorMessage(field: HTMLFormField) {
|
66
|
-
const fieldContainer = field.closest('.field')
|
67
|
-
if (!fieldContainer) return
|
68
|
-
const existingErrorMessageElement = fieldContainer.querySelector('.error')
|
69
|
-
if (existingErrorMessageElement) {
|
70
|
-
existingErrorMessageElement?.parentNode?.removeChild(existingErrorMessageElement)
|
71
|
-
}
|
72
|
-
}
|
73
|
-
|
74
|
-
showErrorForInvalidField(field: HTMLFormField) {
|
75
|
-
field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field))
|
76
|
-
}
|
77
|
-
|
78
|
-
buildFieldErrorHtml(field: HTMLFormField) {
|
79
|
-
const data = html`<p class="error">${field.validationMessage}</p>`
|
80
|
-
return this.getRenderString(data)
|
81
|
-
}
|
82
|
-
|
83
|
-
get formFields(): HTMLFormField[] {
|
84
|
-
return Array.from(this.formFieldTargets)
|
85
|
-
}
|
86
|
-
|
87
|
-
get firstInvalidField() {
|
88
|
-
return this.formFields.find(field => !field.checkValidity())
|
89
|
-
}
|
90
|
-
|
91
|
-
getRenderString = (data: TemplateResult): string => {
|
92
|
-
const {strings, values} = data
|
93
|
-
const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e as TemplateResult) : e))
|
94
|
-
return strings.reduce((acc, s, i) => acc + s + v[i], '')
|
95
|
-
}
|
96
|
-
}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import {Application} from '@hotwired/stimulus'
|
2
|
-
|
3
|
-
import AriadneForm from './ariadne-form'
|
4
|
-
|
5
|
-
import ClipboardCopyComponent from './clipboard_copy_component/clipboard-copy-component'
|
6
|
-
import RichTextAreaComponent from './rich_text_area_component/rich-text-area-component'
|
7
|
-
import SlideoverComponent from './slideover_component/slideover-component'
|
8
|
-
import TabNavComponent from './tab_nav_component/tab-nav-component'
|
9
|
-
import TooltipComponent from './tooltip_component/tooltip-component'
|
10
|
-
|
11
|
-
import './tab_container_component/tab-container-component'
|
12
|
-
import './time_ago_component/time-ago-component'
|
13
|
-
|
14
|
-
const application = Application.start()
|
15
|
-
|
16
|
-
application.register('clipboard-copy-component', ClipboardCopyComponent)
|
17
|
-
application.register('ariadne-form', AriadneForm)
|
18
|
-
application.register('rich-text-area-component', RichTextAreaComponent)
|
19
|
-
application.register('slideover-component', SlideoverComponent)
|
20
|
-
application.register('tab-nav-component', TabNavComponent)
|
21
|
-
application.register('tooltip-component', TooltipComponent)
|
@@ -1,81 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# `Avatar` can be used to represent users.
|
5
|
-
#
|
6
|
-
# - Use the default circle avatar for users, and the square shape
|
7
|
-
# for or any other non-human avatars.
|
8
|
-
# - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
|
9
|
-
# - Set `size` to update the height and width of the `Avatar` in pixels.
|
10
|
-
# - To stack multiple avatars together, use <%= link_to_component(Ariadne::AvatarStackComponent) %>.
|
11
|
-
#
|
12
|
-
# @accessibility
|
13
|
-
# Images should have text alternatives that describe the information or function represented.
|
14
|
-
# If the avatar functions as a link, provide alt text that helps convey the function. For instance,
|
15
|
-
# if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
|
16
|
-
# rather than `@kittenuser`.
|
17
|
-
# [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
|
18
|
-
class AvatarComponent < Ariadne::Component
|
19
|
-
DEFAULT_SIZE = 20
|
20
|
-
SMALL_THRESHOLD = 24
|
21
|
-
|
22
|
-
DEFAULT_SHAPE = :circle
|
23
|
-
SHAPE_OPTIONS = [DEFAULT_SHAPE, :square].freeze
|
24
|
-
|
25
|
-
SIZE_OPTIONS = [16, DEFAULT_SIZE, SMALL_THRESHOLD, 32, 40, 48, 80].freeze
|
26
|
-
|
27
|
-
DEFAULT_CLASSES = "ariadne-inline-block ariadne-rounded-full ariadne-ring-2 ariadne-ring-white"
|
28
|
-
|
29
|
-
# @example Default
|
30
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
|
31
|
-
#
|
32
|
-
# @example Square
|
33
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", shape: :square)) %>
|
34
|
-
#
|
35
|
-
# @example Link
|
36
|
-
# <%= render(Ariadne::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
|
37
|
-
#
|
38
|
-
# @example With size
|
39
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
|
40
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
|
41
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
|
42
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
|
43
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 40)) %>
|
44
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 48)) %>
|
45
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 80)) %>
|
46
|
-
#
|
47
|
-
# @param src [String] The source url of the avatar image.
|
48
|
-
# @param alt [String] Passed through to alt on img tag.
|
49
|
-
# @param size [Integer] <%= one_of(Ariadne::AvatarComponent::SIZE_OPTIONS) %>
|
50
|
-
# @param shape [Symbol] Shape of the avatar. <%= one_of(Ariadne::AvatarComponent::SHAPE_OPTIONS) %>
|
51
|
-
# @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
|
52
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
53
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
54
|
-
def initialize(src:, alt:, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, classes: "", attributes: {})
|
55
|
-
@tag = :img
|
56
|
-
@href = href
|
57
|
-
|
58
|
-
@classes = merge_class_names(
|
59
|
-
DEFAULT_CLASSES,
|
60
|
-
classes,
|
61
|
-
)
|
62
|
-
|
63
|
-
@attributes = attributes
|
64
|
-
@attributes[:src] = src
|
65
|
-
@attributes[:alt] = alt
|
66
|
-
@attributes[:size] = fetch_or_raise(SIZE_OPTIONS, size)
|
67
|
-
@attributes[:height] = @attributes[:size]
|
68
|
-
@attributes[:width] = @attributes[:size]
|
69
|
-
end
|
70
|
-
|
71
|
-
def call
|
72
|
-
if @href
|
73
|
-
render(Ariadne::LinkComponent.new(href: @href, classes: @classes, attributes: @attributes)) do
|
74
|
-
render(Ariadne::BaseComponent.new(tag: @tag)) { content }
|
75
|
-
end
|
76
|
-
else
|
77
|
-
render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
|
78
|
-
end
|
79
|
-
end
|
80
|
-
end
|
81
|
-
end
|
@@ -1,12 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
|
2
|
-
<% if tooltipped? %>
|
3
|
-
<%= tooltip.to_s %>
|
4
|
-
<% avatars.each_with_index do |avatar, i| %>
|
5
|
-
<%= avatar %>
|
6
|
-
<% end %>
|
7
|
-
<% else %>
|
8
|
-
<% avatars.each_with_index do |avatar, i| %>
|
9
|
-
<%= avatar %>
|
10
|
-
<% end %>
|
11
|
-
<% end %>
|
12
|
-
<% end %>
|
@@ -1,75 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Use `AvatarStack` to stack multiple avatars together.
|
5
|
-
class AvatarStackComponent < Ariadne::Component
|
6
|
-
ALIGN_DEFAULT = :left
|
7
|
-
ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
|
8
|
-
|
9
|
-
DEFAULT_TAG = :div
|
10
|
-
TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
|
11
|
-
|
12
|
-
DEFAULT_BODY_TAG = :div
|
13
|
-
BODY_TAG_OPTIONS = [DEFAULT_BODY_TAG, :span].freeze
|
14
|
-
|
15
|
-
# `Tooltip` that appears on mouse hover or keyboard focus over the stack.
|
16
|
-
#
|
17
|
-
# @param tag [Symbol, String] The rendered tag name
|
18
|
-
# @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
|
19
|
-
# @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
|
20
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
21
|
-
# @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::TooltipComponent) %>.
|
22
|
-
renders_one :tooltip, lambda { |tag: Ariadne::TooltipComponent::DEFAULT_TAG, text:, direction: Ariadne::TooltipComponent::DEFAULT_PLACEMENT, classes: "", attributes: {}|
|
23
|
-
raise ArgumentError, "Avatar stacks with a tooltip must have a unique `id` set." if @id.blank?
|
24
|
-
|
25
|
-
Ariadne::TooltipComponent.new(for_id: @id, tag: tag, text: text, direction: direction, type: :label, classes: classes, attributes: attributes)
|
26
|
-
}
|
27
|
-
|
28
|
-
# Required list of stacked avatars.
|
29
|
-
#
|
30
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
31
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
32
|
-
renders_many :avatars, "Ariadne::AvatarComponent"
|
33
|
-
|
34
|
-
DEFAULT_CLASSES = "ariadne-flex ariadne--space-x-2 ariadne-overflow-hidden"
|
35
|
-
|
36
|
-
# @example Default
|
37
|
-
# <%= render(Ariadne::AvatarStackComponent.new) do |c| %>
|
38
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
39
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
40
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
41
|
-
# <% end %>
|
42
|
-
#
|
43
|
-
# @example Align right
|
44
|
-
# <%= render(Ariadne::AvatarStackComponent.new(align: :right)) do |c| %>
|
45
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
46
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
47
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
48
|
-
# <% end %>
|
49
|
-
#
|
50
|
-
# @param tag [Symbol] <%= one_of(Ariadne::AvatarStackComponent::TAG_OPTIONS) %>
|
51
|
-
# @param align [Symbol] <%= one_of(Ariadne::AvatarStackComponent::ALIGN_OPTIONS) %>
|
52
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
53
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
54
|
-
def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, classes: "", attributes: {})
|
55
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
56
|
-
@align = fetch_or_raise(ALIGN_OPTIONS, align)
|
57
|
-
@classes = merge_class_names(
|
58
|
-
DEFAULT_CLASSES,
|
59
|
-
classes,
|
60
|
-
)
|
61
|
-
|
62
|
-
@attributes = attributes
|
63
|
-
@attributes[:id] ||= "avatar-stack-#{SecureRandom.hex(4)}"
|
64
|
-
@id = @attributes[:id]
|
65
|
-
end
|
66
|
-
|
67
|
-
def render?
|
68
|
-
avatars.any?
|
69
|
-
end
|
70
|
-
|
71
|
-
def tooltipped?
|
72
|
-
tooltip.present?
|
73
|
-
end
|
74
|
-
end
|
75
|
-
end
|
@@ -1,70 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
|
5
|
-
class BaseButton < Ariadne::Component
|
6
|
-
DEFAULT_TAG = :button
|
7
|
-
TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
|
8
|
-
|
9
|
-
DEFAULT_TYPE = :button
|
10
|
-
TYPE_SUBMIT = :submit
|
11
|
-
VALID_TYPES = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
|
12
|
-
|
13
|
-
SIZE_CLASS_MAPPINGS = {
|
14
|
-
xs: "ariadne-px-2.5 ariadne-py-1.5 ariadne-text-xs ariadne-font-medium ariadne-rounded",
|
15
|
-
sm: "ariadne-px-3 ariadne-py-2 ariadne-text-sm ariadne-leading-4 ariadne-font-medium ariadne-rounded-m",
|
16
|
-
md: "ariadne-px-4 ariadne-py-2 ariadne-text-sm ariadne-font-medium ariadne-rounded-md",
|
17
|
-
lg: "ariadne-px-4 ariadne-py-2 ariadne-text-base ariadne-font-medium ariadne-rounded-md",
|
18
|
-
xl: "ariadne-px-6 ariadne-py-3 ariadne-text-base ariadne-font-medium ariadne-rounded-md",
|
19
|
-
}.freeze
|
20
|
-
VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
|
21
|
-
|
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
|
-
|
25
|
-
DEFAULT_SIZE = :md
|
26
|
-
|
27
|
-
# @example Setting the size
|
28
|
-
# <%= render(Ariadne::BaseButton.new(size: :xs)) { "I am an extra small button!" } %>
|
29
|
-
# <%= render(Ariadne::BaseButton.new(size: :sm)) { "I am a small button!" } %>
|
30
|
-
# <%= render(Ariadne::BaseButton.new(size: :md)) { "I am a medium button!" } %>
|
31
|
-
# <%= render(Ariadne::BaseButton.new(size: :lg)) { "I am a large button!" } %>
|
32
|
-
# <%= render(Ariadne::BaseButton.new(size: :xl)) { "I am an extra large button!" } %>
|
33
|
-
#
|
34
|
-
# @param tag [Symbol] <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
|
35
|
-
# @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
|
36
|
-
# @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
|
37
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
38
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
39
|
-
def initialize(
|
40
|
-
tag: DEFAULT_TAG,
|
41
|
-
type: DEFAULT_TYPE,
|
42
|
-
size: DEFAULT_SIZE,
|
43
|
-
classes: "",
|
44
|
-
attributes: {}
|
45
|
-
)
|
46
|
-
@attributes = attributes
|
47
|
-
@tag = fetch_or_raise(TAG_OPTIONS, tag)
|
48
|
-
@size = fetch_or_raise(VALID_SIZES, size)
|
49
|
-
|
50
|
-
if button?
|
51
|
-
@attributes[:type] = fetch_or_raise(VALID_TYPES, type)
|
52
|
-
@classes = merge_class_names(DEFAULT_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
|
53
|
-
else
|
54
|
-
@classes = merge_class_names(DEFAULT_NUDE_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
|
55
|
-
end
|
56
|
-
end
|
57
|
-
|
58
|
-
def call
|
59
|
-
render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
|
60
|
-
end
|
61
|
-
|
62
|
-
private def link?(type)
|
63
|
-
type == :link
|
64
|
-
end
|
65
|
-
|
66
|
-
private def button?
|
67
|
-
@tag == :button
|
68
|
-
end
|
69
|
-
end
|
70
|
-
end
|
@@ -1,37 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# All Ariadne ViewComponents accept a standard set of options: classes, which match Tailwind CSS classes, and attributes, which match HTML attributes..
|
5
|
-
#
|
6
|
-
# Under the hood, any-non class attributes is passed to Rails' [`tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag)
|
7
|
-
# (for self-closing tags) or [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
|
8
|
-
class BaseComponent < Ariadne::Component
|
9
|
-
SELF_CLOSING_TAGS = [:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
|
10
|
-
|
11
|
-
def initialize(tag:, classes: "", attributes: {})
|
12
|
-
@tag = tag
|
13
|
-
|
14
|
-
@attributes = validate_attributes(tag: tag, attributes: attributes) || {}
|
15
|
-
@attributes[:"data-ariadne-view-component"] = true
|
16
|
-
|
17
|
-
classes = @attributes.fetch(:classes, "") if classes.blank?
|
18
|
-
@classes = validate_merge_class_names(classes) || {}
|
19
|
-
@content_tag_args = {}
|
20
|
-
end
|
21
|
-
|
22
|
-
def call
|
23
|
-
options = @attributes.merge(@classes)
|
24
|
-
if SELF_CLOSING_TAGS.include?(@tag)
|
25
|
-
tag(@tag, options)
|
26
|
-
else
|
27
|
-
content_tag(@tag, content, options)
|
28
|
-
end
|
29
|
-
end
|
30
|
-
|
31
|
-
private def validate_merge_class_names(classes)
|
32
|
-
return if classes.blank?
|
33
|
-
|
34
|
-
{ class: Ariadne::ViewComponents.tailwind_merger.merge(classes) }
|
35
|
-
end
|
36
|
-
end
|
37
|
-
end
|
@@ -1,26 +0,0 @@
|
|
1
|
-
<%= render Ariadne::NarrowContainerComponent.new do %>
|
2
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
|
3
|
-
<% if icon.present? %>
|
4
|
-
<%= icon %>
|
5
|
-
<% elsif image.present? %>
|
6
|
-
<%= image %>
|
7
|
-
<% end %>
|
8
|
-
<%= heading %>
|
9
|
-
<% if description.present? %>
|
10
|
-
<%= description %>
|
11
|
-
<% end %>
|
12
|
-
<%= content %>
|
13
|
-
<div class="ariadne-mt-8 ariadne-flex ariadne-justify-center">
|
14
|
-
<% if primary_action.present? %>
|
15
|
-
<div class="ariadne-inline-flex ariadne-rounded-md shadow">
|
16
|
-
<%= primary_action %>
|
17
|
-
</div>
|
18
|
-
<% end %>
|
19
|
-
<% if secondary_action.present? %>
|
20
|
-
<div class="ariadne-ml-3 ariadne-inline-flex">
|
21
|
-
<%= secondary_action %>
|
22
|
-
</div>
|
23
|
-
<% end %>
|
24
|
-
</div>
|
25
|
-
<% end %>
|
26
|
-
<% end %>
|