ruby_ui 1.3.0 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41271e83392afeb5499d950f64ea1e5513c3694fac4521c7599f3ac1c281c979
-  data.tar.gz: 5370ed6872556cf2848763b09d6edddecc2b5b822357c3af35e6bbfc1eb07ae0
+  metadata.gz: 2d65c0b25a3f006ce2a97107b84779fb313f55fe0937048f033a8a4477ee5bda
+  data.tar.gz: fccde45b64530b69c9c1b3330f2203da5d4921a2b89a48dbc25ae2d27f8d36fd
 SHA512:
-  metadata.gz: e3694f2acd18f037160228f955f019c20696543b5047f87cb1a3108a272982b69c188bbbec174063add1881c29d3625f0fde34d7fe8d9dfebe9bb29621986831
-  data.tar.gz: f0853192ca6871211535ac8e60e1db1dfae5adcba4fe60e4284f147bfe6296ce0ded60436764ff3829db5d20c874f3efcd7f68a56f47f411900f8c95f8d6dac3
+  metadata.gz: ed144e39bf1a8cdf62f5550a9fdf1426cbc609979dbc7049c33c9c0e6fac737adffad32bbe5f21dd21c6de8b974ffe5c61a9ebd24011001411edac378629b416
+  data.tar.gz: 158aa2d122d94feadfb41ebd67e6e2078cf3b8ef9675fb94f23d228e0d27fcfb3b206e46a6f8bf47c3f8ede71b8c68e32c18db7ff9a8e3188f5a000138142d4e

data/README.md

@@ -55,6 +55,12 @@ You can generate your components using `ruby_ui:component` generator.
 bin/rails g ruby_ui:component Accordion
 ```
 
+You can also generate multiple components at once.
+
+```bash
+bin/rails g ruby_ui:component Button Link Input Textarea
+```
+
 You also can generate all components using `ruby_ui:component:all` generator
 
 ## Documentation 📖

data/lib/generators/ruby_ui/component/all_generator.rb

@@ -10,11 +10,13 @@ module RubyUI
         def generate_components
           say "Generating all components..."
 
-          Dir.children(self.class.source_root).each do |folder_name|
-            next if folder_name.ends_with?(".rb")
-
-            run "bin/rails generate ruby_ui:component #{folder_name} --force #{options["force"]}"
+          # Each component lives in its own directory; select directories only so stray
+          # files (e.g. base.rb or a macOS .DS_Store) are never passed as component names.
+          folder_names = Dir.children(self.class.source_root).select do |entry|
+            File.directory?(File.join(self.class.source_root, entry))
           end
+
+          run "bin/rails generate ruby_ui:component #{folder_names.join(" ")} --force #{options["force"]}"
         end
       end
     end

data/lib/generators/ruby_ui/component_generator.rb

@@ -7,69 +7,89 @@ module RubyUI
       namespace "ruby_ui:component"
 
       source_root File.expand_path("../../ruby_ui", __dir__)
-      argument :component_name, type: :string, required: true
+      argument :component_names, type: :array, required: true, banner: "Button Link Input"
       class_option :force, type: :boolean, default: false
       class_option :with_docs, type: :boolean, default: false
 
-      def generate_component
-        if component_not_found?
-          say "Component not found: #{component_name}", :red
-          exit
+      def generate_components
+        validate_components!
+
+        component_names.each do |component_name|
+          say "Generating #{component_name} files..."
+          copy_related_component_files(component_name)
+          copy_js_files(component_name)
+          install_dependencies(component_name)
         end
 
-        say "Generating #{component_name} files..."
+        update_stimulus_manifest
       end
 
-      def copy_related_component_files
+      private
+
+      def validate_components!
+        missing = component_names.reject { |name| component_exists?(name) }
+        return if missing.empty?
+
+        say "Component(s) not found: #{missing.join(", ")}", :red
+        exit 1
+      end
+
+      def copy_related_component_files(component_name)
         say "Generating components"
 
-        components_file_paths.each do |file_path|
+        components_file_paths(component_name).each do |file_path|
           component_file_name = file_path.split("/").last
-          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name, component_file_name), force: options["force"]
+          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name(component_name), component_file_name), force: options["force"]
         end
       end
 
-      def copy_js_files
-        return if js_controller_file_paths.empty?
+      def copy_js_files(component_name)
+        paths = js_controller_file_paths(component_name)
+        return if paths.empty?
 
         say "Generating Stimulus controllers"
 
-        js_controller_file_paths.each do |file_path|
+        paths.each do |file_path|
           controller_file_name = file_path.split("/").last
           copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name), force: options["force"]
         end
 
+        @stimulus_controllers_added = true
+      end
+
+      def update_stimulus_manifest
+        return unless @stimulus_controllers_added
+
         # Importmap doesn't have controller manifest, instead it uses `eagerLoadControllersFrom("controllers", application)`
-        if !using_importmap?
-          say "Updating Stimulus controllers manifest"
-          run "rake stimulus:manifest:update"
-        end
+        return if using_importmap?
+
+        say "Updating Stimulus controllers manifest"
+        run "rake stimulus:manifest:update"
       end
 
-      def install_dependencies
-        return if dependencies.blank?
+      def install_dependencies(component_name)
+        deps = dependencies(component_name)
+        return if deps.blank?
 
         say "Installing dependencies"
 
-        install_components_dependencies(dependencies["components"])
-        install_gems_dependencies(dependencies["gems"])
-        install_js_packages(dependencies["js_packages"])
+        install_components_dependencies(deps["components"])
+        install_gems_dependencies(deps["gems"])
+        install_js_packages(deps["js_packages"])
       end
 
-      private
-
-      def component_not_found? = !Dir.exist?(component_folder_path)
+      def component_exists?(component_name) = Dir.exist?(component_folder_path(component_name))
 
-      def component_folder_name = component_name.underscore
+      def component_folder_name(component_name) = component_name.underscore
 
-      def component_folder_path = File.join(self.class.source_root, component_folder_name)
+      def component_folder_path(component_name) = File.join(self.class.source_root, component_folder_name(component_name))
 
-      def components_file_paths
-        files = Dir.glob(File.join(component_folder_path, "*.rb"))
+      def components_file_paths(component_name)
+        files = Dir.glob(File.join(component_folder_path(component_name), "*.rb"))
         options["with_docs"] ? files : files.reject { |f| f.end_with?("_docs.rb") }
       end
 
-      def js_controller_file_paths = Dir.glob(File.join(component_folder_path, "*.js"))
+      def js_controller_file_paths(component_name) = Dir.glob(File.join(component_folder_path(component_name), "*.js"))
 
       def install_components_dependencies(components)
         components&.each do |component|
@@ -89,10 +109,10 @@ module RubyUI
         end
       end
 
-      def dependencies
+      def dependencies(component_name)
         @dependencies ||= YAML.load_file(File.join(__dir__, "dependencies.yml")).freeze
 
-        @dependencies[component_folder_name]
+        @dependencies[component_folder_name(component_name)]
       end
     end
   end

data/lib/generators/ruby_ui/dependencies.yml

@@ -40,7 +40,7 @@ command:
 
 context_menu:
   js_packages:
-    - "tippy.js"
+    - "@floating-ui/dom"
 
 date_picker:
   components:
@@ -64,7 +64,7 @@ dropdown_menu:
 
 hover_card:
   js_packages:
-    - "tippy.js"
+    - "@floating-ui/dom"
 
 masked_input:
   components:
@@ -73,6 +73,16 @@ masked_input:
   js_packages:
     - "maska"
 
+message:
+  components:
+    - "Avatar"
+    - "Bubble"
+
+message_scroller:
+  components:
+    - "Message"
+    - "Bubble"
+
 pagination:
   components:
     - "Button"

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -25,8 +25,6 @@ module RubyUI
           pin_motion
         when "tw-animate-css"
           pin_tw_animate_css
-        when "tippy.js"
-          pin_tippy_js
         else
           run "bin/importmap pin #{package}"
         end
@@ -65,17 +63,6 @@ module RubyUI
         RUBY
       end
 
-      def pin_tippy_js
-        say <<~TEXT
-          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
-        TEXT
-
-        inject_into_file rails_root.join("config/importmap.rb"), <<~RUBY
-          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
-          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
-        RUBY
-      end
-
       def rails_root = Rails.root
     end
   end

data/lib/ruby_ui/accordion/accordion_content.rb

@@ -11,10 +11,12 @@ module RubyUI
     def default_attrs
       {
         data: {
-          ruby_ui__accordion_target: "content"
+          ruby_ui__accordion_target: "content",
+          state: "closed"
         },
         class: "overflow-y-hidden",
-        style: "height: 0px;"
+        style: "height: 0px;",
+        hidden: true
       }
     end
   end

data/lib/ruby_ui/accordion/accordion_controller.js

@@ -65,27 +65,49 @@ export default class extends Controller {
 
   // Reveal the accordion content with animation
   revealContent() {
-    const contentHeight = this.contentTarget.scrollHeight;
+    const content = this.contentTarget;
+
+    // Remove hidden so the element participates in layout before measuring
+    content.removeAttribute("hidden");
+    content.dataset.state = "open";
+
+    const contentHeight = content.scrollHeight;
     animate(
-      this.contentTarget,
+      content,
       { height: `${contentHeight}px` },
       {
         duration: this.animationDurationValue,
         easing: this.animationEasingValue,
       },
-    );
+    )
+      .finished.then(() => {
+        if (content.dataset.state === "open") content.style.height = "auto";
+      })
+      .catch(() => {});
   }
 
   // Hide the accordion content with animation
   hideContent() {
+    const content = this.contentTarget;
+    content.dataset.state = "closed";
+
+    const currentHeight = content.getBoundingClientRect().height;
     animate(
-      this.contentTarget,
-      { height: 0 },
+      content,
+      { height: [`${currentHeight}px`, "0px"] },
       {
         duration: this.animationDurationValue,
         easing: this.animationEasingValue,
       },
-    );
+    )
+      .finished.then(() => {
+        // After animation completes, truly hide the element so it is removed
+        // from layout and form focus — prevents trapped validation errors
+        if (content.dataset.state === "closed") {
+          content.setAttribute("hidden", "");
+        }
+      })
+      .catch(() => {});
   }
 
   // Rotate the accordion icon 180deg using animate function

data/lib/ruby_ui/avatar/avatar_image.rb

@@ -16,7 +16,11 @@ module RubyUI
 
     def default_attrs
       {
-        loading: "lazy",
+        # NB: do not set loading: "lazy" here. avatar_controller hides a not-yet-loaded
+        # image with `display:none` (the `hidden` class) so the fallback shows. The
+        # browser never fetches a `loading="lazy"` image that generates no box, so its
+        # `load` event never fires and the image stays hidden forever (#415). shadcn/radix
+        # do not lazy-load the avatar image either.
         data: {
           ruby_ui__avatar_target: "image",
           action: "load->ruby-ui--avatar#showImage error->ruby-ui--avatar#showFallback"

data/lib/ruby_ui/bubble/bubble.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Bubble < Base
+    VARIANTS = {
+      default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+      secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+      muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+      tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+      outline: "*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+      ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none",
+      destructive: "*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+    }
+
+    def initialize(variant: :default, align: :start, **attrs)
+      @variant = variant
+      @align = align
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "bubble", variant: @variant, align: @align},
+        class: [
+          "group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+          VARIANTS[@variant]
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/bubble/bubble_content.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BubbleContent < Base
+    def initialize(as: :div, **attrs)
+      @as = as
+      super(**attrs)
+    end
+
+    def view_template(&)
+      send(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "bubble-content"},
+        class: "w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&:is(button,a)]:text-left [&:is(button,a)]:outline-none [&:is(button,a)]:transition-colors [&:is(button,a):focus-visible]:border-ring [&:is(button,a):focus-visible]:ring-3 [&:is(button,a):focus-visible]:ring-ring/30"
+      }
+    end
+  end
+end

data/lib/ruby_ui/bubble/bubble_docs.rb

@@ -0,0 +1,167 @@
+# frozen_string_literal: true
+
+class Views::Docs::Bubble < Views::Base
+  def view_template
+    component = "Bubble"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Bubble", description: "A chat bubble surface for displaying conversational content, with variants, alignment, grouping, and reactions.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          Bubble(align: :end) do
+            BubbleContent { "Hey there! what's up?" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Conversation", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-8") do
+            Bubble(align: :end) do
+              BubbleContent { "Hey there! what's up?" }
+            end
+            BubbleGroup do
+              Bubble(variant: :muted) do
+                BubbleContent { "Hey! Want to see chat bubbles?" }
+              end
+              Bubble(variant: :muted) do
+                BubbleContent { "I can group messages, switch sides, and keep the whole thread easy to scan." }
+                BubbleReactions(role: "img", aria_label: "Reaction: thumbs up") do
+                  span { "👍" }
+                end
+              end
+            end
+            Bubble(align: :end) do
+              BubbleContent { "Sure. Hit me with your best demo." }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Variants" }
+
+      render Docs::VisualCodeExample.new(title: "Variants", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-4 w-full") do
+            Bubble(variant: :default) { BubbleContent { "Default" } }
+            Bubble(variant: :secondary) { BubbleContent { "Secondary" } }
+            Bubble(variant: :muted) { BubbleContent { "Muted" } }
+            Bubble(variant: :tinted) { BubbleContent { "Tinted" } }
+            Bubble(variant: :outline) { BubbleContent { "Outline" } }
+            Bubble(variant: :ghost) { BubbleContent { "Ghost — unframed, full width for assistant text or markdown." } }
+            Bubble(variant: :destructive) { BubbleContent { "Destructive — something went wrong." } }
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Alignment" }
+
+      render Docs::VisualCodeExample.new(title: "Start and end", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-4 w-full") do
+            Bubble(align: :start, variant: :muted) do
+              BubbleContent { "Aligned to the start (receiver)." }
+            end
+            Bubble(align: :end) do
+              BubbleContent { "Aligned to the end (sender)." }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Reactions" }
+
+      render Docs::VisualCodeExample.new(title: "Reactions", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-10 w-full py-6") do
+            Bubble(variant: :muted) do
+              BubbleContent { "Reactions anchor to the bubble edge." }
+              BubbleReactions(role: "img", aria_label: "Reactions: thumbs up, fire, eyes, and 2 more") do
+                span { "👍" }
+                span { "🔥" }
+                span { "👀" }
+                span { "+2" }
+              end
+            end
+            Bubble(align: :end) do
+              BubbleContent { "Place them on top and to the start too." }
+              BubbleReactions(side: :top, align: :start, role: "img", aria_label: "Reaction: heart") do
+                span { "❤️" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Group" }
+
+      render Docs::VisualCodeExample.new(title: "Bubble group", context: self) do
+        <<~RUBY
+          BubbleGroup do
+            Bubble(variant: :muted) { BubbleContent { "First message in the group." } }
+            Bubble(variant: :muted) { BubbleContent { "Second one, tighter spacing." } }
+            Bubble(variant: :muted) { BubbleContent { "Third, all stacked together." } }
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Link or button bubble" }
+
+      render Docs::VisualCodeExample.new(title: "Interactive content", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-4 w-full") do
+            Bubble(align: :end) do
+              BubbleContent(as: :a, href: "#") { "Tap to open the link →" }
+            end
+            Bubble(variant: :outline) do
+              BubbleContent(as: :button, type: "button") { "Retry sending" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "With Tooltip" }
+
+      render Docs::VisualCodeExample.new(title: "Reveal metadata on hover", context: self) do
+        <<~RUBY
+          Tooltip do
+            TooltipTrigger(class: "w-fit") do
+              Bubble(variant: :muted, class: "max-w-none") do
+                BubbleContent { "Read 9:41 AM" }
+              end
+            end
+            TooltipContent do
+              Text { "Delivered and read" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "With Popover" }
+
+      render Docs::VisualCodeExample.new(title: "Surface details on demand", context: self) do
+        <<~RUBY
+          Popover do
+            PopoverTrigger do
+              Bubble(variant: :destructive, class: "max-w-none") do
+                BubbleContent { "Message failed to send" }
+              end
+            end
+            PopoverContent(class: "w-64") do
+              Text(weight: :semibold) { "Delivery error" }
+              Text(size: :sm, class: "text-muted-foreground") { "The recipient's inbox is full. Try again later." }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      # components
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/bubble/bubble_group.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BubbleGroup < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "bubble-group"},
+        class: "flex min-w-0 flex-col gap-2"
+      }
+    end
+  end
+end

data/lib/ruby_ui/bubble/bubble_reactions.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BubbleReactions < Base
+    SIDES = {
+      top: "top-0 -translate-y-3/4",
+      bottom: "bottom-0 translate-y-3/4"
+    }
+
+    ALIGNS = {
+      start: "left-3",
+      end: "right-3"
+    }
+
+    def initialize(side: :bottom, align: :end, **attrs)
+      @side = side
+      @align = align
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "bubble-reactions", side: @side, align: @align},
+        class: [
+          "absolute z-10 flex w-fit items-center justify-center rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm",
+          SIDES[@side],
+          ALIGNS[@align]
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox.rb

@@ -2,8 +2,9 @@
 
 module RubyUI
   class Combobox < Base
-    def initialize(term: nil, **)
+    def initialize(term: nil, placement: "bottom-start", **)
       @term = term
+      @placement = placement
       super(**)
     end
 
@@ -19,6 +20,7 @@ module RubyUI
         data: {
           controller: "ruby-ui--combobox",
           ruby_ui__combobox_term_value: @term,
+          ruby_ui__combobox_placement_value: @placement,
           action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
         }
       }

data/lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -19,7 +19,14 @@ module RubyUI
         ],
         data: {
           ruby_ui__combobox_target: "input",
-          action: "ruby-ui--combobox#inputChanged"
+          ruby_ui__checkbox_group_target: "checkbox",
+          ruby_ui__form_field_target: "input",
+          action: %w[
+            ruby-ui--combobox#inputChanged
+            change->ruby-ui--checkbox-group#onChange
+            change->ruby-ui--form-field#onInput
+            invalid->ruby-ui--form-field#onInvalid
+          ]
         }
       }
     end

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -5,7 +5,8 @@ import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
 export default class extends Controller {
   static values = {
     term: String,
-    minPopoverWidth: { type: Number, default: 240 }
+    minPopoverWidth: { type: Number, default: 240 },
+    placement: { type: String, default: "bottom-start" }
   }
 
   static targets = [
@@ -175,7 +176,7 @@ export default class extends Controller {
   updatePopoverPosition() {
     this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
       computePosition(this.triggerTarget, this.popoverTarget, {
-        placement: 'bottom-start',
+        placement: this.placementValue,
         middleware: [offset(4), flip()],
       }).then(({ x, y }) => {
         Object.assign(this.popoverTarget.style, {