Popover

<script setup lang="ts">
import { ref } from "vue";
import MtPopover from "@shopware-ag/meteor-component-library/MtPopover";
import MtPopoverItem from "@shopware-ag/meteor-component-library/MtPopoverItem";
import MtButton from "@shopware-ag/meteor-component-library/MtButton";

const showStripes = ref(false);
const showOutlines = ref(false);
const numberedColumn = ref(false);
</script>

<template>
  <mt-popover title="Table settings">
    <template #trigger="{ toggleFloatingUi }">
      <mt-button variant="secondary" @click.stop="toggleFloatingUi">
        Toggle popover
      </mt-button>
    </template>

    <template #popover-items__base>
      <mt-popover-item
        label="Numbered column"
        icon="solid-hashtag"
        show-switch
        :switch-value="numberedColumn"
        @change-switch="(value) => (numberedColumn = value)"
      />

      <mt-popover-item
        label="Show stripes"
        icon="solid-bars"
        show-switch
        :switch-value="showStripes"
        @change-switch="(value) => (showStripes = value)"
      />

      <mt-popover-item
        label="Show outlines"
        icon="solid-grip-lines"
        show-switch
        :switch-value="showOutlines"
        @change-switch="(value) => (showOutlines = value)"
      />

      <mt-popover-item
        type="critical"
        label="Reset all changes"
        icon="solid-undo"
        border-top
      />
    </template>
  </mt-popover>
</template>

Usage

Popover is an experimental floating surface that reveals contextual settings and nested option views from a trigger. Prefer Action Menu when you need a standard menu of actions or options, or Floating UI when you need a custom floating surface with your own layout, content, or interaction behavior, and reach for Popover only when neither already fits the use case.

import {
  MtPopover,
  MtPopoverItem,
  MtPopoverItemResult,
} from "@shopware-ag/meteor-component-library";

Anatomy

Popover is built from a small set of companion exports that work together:

• mt-popover renders the floating surface, its header, and the view transitions, and exposes the trigger and item slots.
• mt-popover-item renders a single row inside a view, with optional icon, switch, checkbox, options affordance, or nested view trigger.
• mt-popover-item-result renders a grouped, draggable list of options, such as a column visibility and ordering editor.

These parts are exported together so the pattern can be composed in one place.

API reference

Props

Events

Exposed

Best practices

Behavior

• The #trigger slot exposes toggleFloatingUi, which opens and closes the surface. Stop click propagation on the trigger so the open click does not immediately close it.
• Items render inside named view slots such as #popover-items__base. Additional views are declared through childViews and rendered in matching #popover-items__<name> slots.
• The view slots expose changeView, which navigates to a named view. The header shows a back button automatically for any view other than base.
• disableFloat renders the content inline as a plain container instead of a floating surface, which is useful for embedding the panel without a trigger.
• width accepts dynamic, small, medium, or large to constrain the surface width.

Accessibility

• Provide a clear accessible name on the trigger so users understand what the surface contains.
• Item labels should stay understandable without depending only on icons or color.
• The surface uses a dialog role, so keep focus behavior predictable when it opens and closes.

Related components

• Action Menu: when you need a short, scannable list of actions or options.
• Floating UI: when you need a custom floating surface with your own layout, content, or interaction behavior.