ariadne_view_components 0.0.76 → 0.0.76.1

data/app/components/ariadne/base_component.rb

@@ -4,12 +4,6 @@
 require "dry-initializer"
 
 module Ariadne
-  class << self
-    def generate_id
-      SecureRandom.hex(6)
-    end
-  end
-
   # :nodoc:
   class BaseComponent < ViewComponentContrib::Base
     include ViewComponent::HTMLAttrs

data/app/components/ariadne/ui/dialog/component.ts

@@ -7,9 +7,9 @@ export default class DialogController extends controllerFactory()({
   close() {
     this.dialogTarget.close()
     // reset any child forms
-    for (const form of this.dialogTarget.querySelectorAll('form') ?? []) {
-      form.reset()
-    }
+    // for (const form of this.dialogTarget.querySelectorAll('form') ?? []) {
+    //   form.reset()
+    // }
     enableBodyScroll(this.dialogTarget)
   }
   disconnect() {

data/app/components/ariadne/ui/popover/component.rb

@@ -5,8 +5,17 @@ module Ariadne
   module UI
     module Popover
       class Component < Ariadne::BaseComponent
+        ALIGNMENT_DEFAULT = :center
+        ALIGNMENT_OPTIONS = [:left, :right, ALIGNMENT_DEFAULT]
+
+        POSITION_DEFAULT = :auto
+        POSITION_OPTIONS = [POSITION_DEFAULT, :above, :below]
+
         option :target_id, optional: true
 
+        option :position, default: proc { POSITION_DEFAULT }
+        option :alignment, default: proc { ALIGNMENT_DEFAULT }
+
         renders_one :button, lambda { |**options|
                                options[:html_attrs] ||= {}
                                options[:html_attrs] = {
@@ -29,8 +38,6 @@ module Ariadne
           html_attrs[:id] ||= target_id
           html_attrs[:popover] = ""
 
-          html_attrs[:class] = "#{class_for(:target)} #{html_attrs[:class]}"
-
           # requires CSS Anchor Positioning
           # as a `style` to account for future feature where the popover can be moved
           # html_attrs[:style] = "inset: unset; top: anchor(--popover-#{target_id} bottom); right: anchor(--popover-#{target_id} left, -1rem);"
@@ -41,11 +48,25 @@ module Ariadne
           html_attrs[:data] ||= {}
           html_attrs[:data] = {
             "#{stimulus_name}-target" => ["popover", html_attrs.fetch(:data, {}).fetch(:target, nil)].compact.join(" "),
+            "#{stimulus_name}-placement-value" => popover_placement,
           }.merge(html_attrs[:data])
         end
 
+        def popover_placement
+          placement =
+            case @position
+            when :above then "top"
+            when :below then "bottom"
+            else
+              "bottom"
+            end
+          placement += "-start" if @alignment == :left
+          placement += "-end" if @alignment == :right
+          placement
+        end
+
         def target_id
-          @target_id ||= Ariadne.generate_id
+          @target_id ||= Ariadne::Generator.id
         end
 
         style do

data/app/components/ariadne/ui/popover/component.ts

@@ -1,25 +1,34 @@
 import {controllerFactory} from '@utils/createController'
-import {computePosition} from '@floating-ui/dom'
+import {computePosition, computePosition, autoUpdate, offset, flip, shift} from '@floating-ui/dom'
 
 export default class PopoverController extends controllerFactory()({
   targets: {
     button: HTMLButtonElement,
     popover: HTMLElement,
   },
+  values: {
+    placement: String,
+  },
 }) {
   connect() {
     this.popoverTarget.addEventListener('toggle', (event: ToggleEvent) => {
-      const popover = event.target as HTMLElement
-      const invoker = document.querySelector(`[popovertarget="${popover.getAttribute('id')}"`) as HTMLElement
-
       if (event.newState === 'open') {
-        computePosition(invoker, popover, {placement: 'bottom-start'}).then(({x, y}) => {
-          Object.assign(popover.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-        })
+        this.updatePosition()
       }
     })
   }
+
+  updatePosition() {
+    autoUpdate(this.buttonTarget, this.popoverTarget, () => {
+      computePosition(this.buttonTarget, this.popoverTarget, {
+        placement: this.placementValue,
+        middleware: [offset(5), flip(), shift({padding: 5})],
+      }).then(({x, y}) => {
+        Object.assign(this.target.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        })
+      })
+    })
+  }
 }

data/lib/ariadne/forms/dsl/form_object.rb

@@ -9,7 +9,7 @@ module Ariadne
 
         attr_reader :builder, :form, :id
 
-        def initialize(builder:, form:, id: Ariadne.generate_id)
+        def initialize(builder:, form:, id: Ariadne::Generator.id)
           @builder = builder
           @form = form
           @id = id

data/lib/ariadne/forms/dsl/input.rb

@@ -108,7 +108,7 @@ module Ariadne
 
           @options[:invalid] = "true" if invalid?
 
-          @base_id = Ariadne.generate_id
+          @base_id = Ariadne::Generator.id
 
           @ids = {}.tap do |id_map|
             id_map[:validation] = "validation-#{@base_id}" if supports_validation?

data/lib/ariadne/generator.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module Generator
+    class << self
+      def id
+        SecureRandom.hex(6)
+      end
+    end
+  end
+end

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.76"
+    VERSION = "0.0.76.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.76
+  version: 0.0.76.1
 platform: ruby
 authors:
 - Garen J. Torikian
@@ -268,6 +268,7 @@ files:
 - lib/ariadne/forms/dsl/submit_button_input.rb
 - lib/ariadne/forms/dsl/text_field_input.rb
 - lib/ariadne/forms/utils.rb
+- lib/ariadne/generator.rb
 - lib/ariadne/view_components.rb
 - lib/ariadne/view_components/commands.rb
 - lib/ariadne/view_components/constants.rb