ariadne_view_components 0.0.76 → 0.0.76.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +2 -0
- data/app/assets/javascripts/ariadne_view_components.js +10 -10
- 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/components/ariadne/base_component.rb +0 -6
- data/app/components/ariadne/ui/dialog/component.ts +3 -3
- data/app/components/ariadne/ui/popover/component.rb +24 -3
- data/app/components/ariadne/ui/popover/component.ts +19 -10
- data/lib/ariadne/forms/dsl/form_object.rb +1 -1
- data/lib/ariadne/forms/dsl/input.rb +1 -1
- data/lib/ariadne/generator.rb +11 -0
- data/lib/ariadne/view_components/version.rb +1 -1
- metadata +2 -1
@@ -7,9 +7,9 @@ export default class DialogController extends controllerFactory()({
|
|
7
7
|
close() {
|
8
8
|
this.dialogTarget.close()
|
9
9
|
// reset any child forms
|
10
|
-
for (const form of this.dialogTarget.querySelectorAll('form') ?? []) {
|
11
|
-
|
12
|
-
}
|
10
|
+
// for (const form of this.dialogTarget.querySelectorAll('form') ?? []) {
|
11
|
+
// form.reset()
|
12
|
+
// }
|
13
13
|
enableBodyScroll(this.dialogTarget)
|
14
14
|
}
|
15
15
|
disconnect() {
|
@@ -5,8 +5,17 @@ module Ariadne
|
|
5
5
|
module UI
|
6
6
|
module Popover
|
7
7
|
class Component < Ariadne::BaseComponent
|
8
|
+
ALIGNMENT_DEFAULT = :center
|
9
|
+
ALIGNMENT_OPTIONS = [:left, :right, ALIGNMENT_DEFAULT]
|
10
|
+
|
11
|
+
POSITION_DEFAULT = :auto
|
12
|
+
POSITION_OPTIONS = [POSITION_DEFAULT, :above, :below]
|
13
|
+
|
8
14
|
option :target_id, optional: true
|
9
15
|
|
16
|
+
option :position, default: proc { POSITION_DEFAULT }
|
17
|
+
option :alignment, default: proc { ALIGNMENT_DEFAULT }
|
18
|
+
|
10
19
|
renders_one :button, lambda { |**options|
|
11
20
|
options[:html_attrs] ||= {}
|
12
21
|
options[:html_attrs] = {
|
@@ -29,8 +38,6 @@ module Ariadne
|
|
29
38
|
html_attrs[:id] ||= target_id
|
30
39
|
html_attrs[:popover] = ""
|
31
40
|
|
32
|
-
html_attrs[:class] = "#{class_for(:target)} #{html_attrs[:class]}"
|
33
|
-
|
34
41
|
# requires CSS Anchor Positioning
|
35
42
|
# as a `style` to account for future feature where the popover can be moved
|
36
43
|
# html_attrs[:style] = "inset: unset; top: anchor(--popover-#{target_id} bottom); right: anchor(--popover-#{target_id} left, -1rem);"
|
@@ -41,11 +48,25 @@ module Ariadne
|
|
41
48
|
html_attrs[:data] ||= {}
|
42
49
|
html_attrs[:data] = {
|
43
50
|
"#{stimulus_name}-target" => ["popover", html_attrs.fetch(:data, {}).fetch(:target, nil)].compact.join(" "),
|
51
|
+
"#{stimulus_name}-placement-value" => popover_placement,
|
44
52
|
}.merge(html_attrs[:data])
|
45
53
|
end
|
46
54
|
|
55
|
+
def popover_placement
|
56
|
+
placement =
|
57
|
+
case @position
|
58
|
+
when :above then "top"
|
59
|
+
when :below then "bottom"
|
60
|
+
else
|
61
|
+
"bottom"
|
62
|
+
end
|
63
|
+
placement += "-start" if @alignment == :left
|
64
|
+
placement += "-end" if @alignment == :right
|
65
|
+
placement
|
66
|
+
end
|
67
|
+
|
47
68
|
def target_id
|
48
|
-
@target_id ||= Ariadne.
|
69
|
+
@target_id ||= Ariadne::Generator.id
|
49
70
|
end
|
50
71
|
|
51
72
|
style do
|
@@ -1,25 +1,34 @@
|
|
1
1
|
import {controllerFactory} from '@utils/createController'
|
2
|
-
import {computePosition} from '@floating-ui/dom'
|
2
|
+
import {computePosition, computePosition, autoUpdate, offset, flip, shift} from '@floating-ui/dom'
|
3
3
|
|
4
4
|
export default class PopoverController extends controllerFactory()({
|
5
5
|
targets: {
|
6
6
|
button: HTMLButtonElement,
|
7
7
|
popover: HTMLElement,
|
8
8
|
},
|
9
|
+
values: {
|
10
|
+
placement: String,
|
11
|
+
},
|
9
12
|
}) {
|
10
13
|
connect() {
|
11
14
|
this.popoverTarget.addEventListener('toggle', (event: ToggleEvent) => {
|
12
|
-
const popover = event.target as HTMLElement
|
13
|
-
const invoker = document.querySelector(`[popovertarget="${popover.getAttribute('id')}"`) as HTMLElement
|
14
|
-
|
15
15
|
if (event.newState === 'open') {
|
16
|
-
|
17
|
-
Object.assign(popover.style, {
|
18
|
-
left: `${x}px`,
|
19
|
-
top: `${y}px`,
|
20
|
-
})
|
21
|
-
})
|
16
|
+
this.updatePosition()
|
22
17
|
}
|
23
18
|
})
|
24
19
|
}
|
20
|
+
|
21
|
+
updatePosition() {
|
22
|
+
autoUpdate(this.buttonTarget, this.popoverTarget, () => {
|
23
|
+
computePosition(this.buttonTarget, this.popoverTarget, {
|
24
|
+
placement: this.placementValue,
|
25
|
+
middleware: [offset(5), flip(), shift({padding: 5})],
|
26
|
+
}).then(({x, y}) => {
|
27
|
+
Object.assign(this.target.style, {
|
28
|
+
left: `${x}px`,
|
29
|
+
top: `${y}px`,
|
30
|
+
})
|
31
|
+
})
|
32
|
+
})
|
33
|
+
}
|
25
34
|
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ariadne_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.76
|
4
|
+
version: 0.0.76.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Garen J. Torikian
|
@@ -268,6 +268,7 @@ files:
|
|
268
268
|
- lib/ariadne/forms/dsl/submit_button_input.rb
|
269
269
|
- lib/ariadne/forms/dsl/text_field_input.rb
|
270
270
|
- lib/ariadne/forms/utils.rb
|
271
|
+
- lib/ariadne/generator.rb
|
271
272
|
- lib/ariadne/view_components.rb
|
272
273
|
- lib/ariadne/view_components/commands.rb
|
273
274
|
- lib/ariadne/view_components/constants.rb
|