Popup

The popup is a basic component that is used in various other components. Its primary purpose is to position any content in the right place.

The predicate editor, which is used in our filter bar, uses the popup with header. You can read more about it here.

In this case we use the popup to display the dialog menu. For more examples click here.

Usage

The popup component is never used as a standalone component. However, we use it as part of other components, such as the dialog menu or the predicate editor. The popup allows us to make sure that the right component appears in the right place at the right time.

Description

A popup is a kind of hybrid between a popover and a modal. These dialog requests can display compact content such as short info texts, menu items, a few form fields, checkboxes or radio lists.

<div>
  <wui-button id="btn-popup-1" v-w-popup.popup-1>Launch demo popup</wui-button>

  <wui-popup id="popup-1" target="btn-popup-1" title="WuiVue Popup">
    <p class="p-20">Hello from popup!</p>
  </wui-popup>
</div>

<!-- w-popup.vue -->

Overview

<wui-popup> supports close on ESC (enabled by default), close on outside click, and the X close button in the header (enabled by default). ESC or close button may be disabled by setting the props no-close-on-esc or hide-header-close respectively.

You can override the popup title via the prop title or titleHtml, override the header completely via the header slot, and override the footer completely via the footer slot.

Note: when you use the header slot, the default header X close button will not be present.

Popups, when visible, are rendered in a collecting <div id="pane-overlay-container"> container which is appended to the <body> element. The placement of the <wui-popup> component will not affect layout, as it always renders as a placeholder comment node (). You can revert to the behaviour via the use of the static prop. Popups can be rendered in-place in the document (i.e. where the <wui-popup> component is placed in the document) by setting the static prop to true. Note, when in static mode, placement of the <wui-popup> component may affect layout of your document and the popup.

There are several methods that you can employ to toggle the visibility of <wui-popup>.

Using `this.$wvPopup.show()` and `this.$wvPopup.hide()` instance methods

When WuiVue is installed as a plugin, or the WVPopupPlugin plugin is used, WuiVue will inject a $wvPopup object into every Vue instance (components, apps). this.$wvPopup exposes several methods, of which two are for showing and hiding modals:

Method	Description
`this.$wvPopup.show(id)`	Show the popup with the specified `id`
`this.$wvPopup.hide(id)`	Hide the popup with the specified `id`

Both methods return immediately after being called.

<div>
  <wui-button id="show-btn-example-1" @click="$wvPopup.show('wv-popup-example')"
    >Open Popup</wui-button
  >

  <wui-popup target="show-btn-example-1" id="wv-popup-example">
    <template #header> Using <code>$wvPopup</code> Methods </template>
    <p class="p-10">Hello From This Popup!</p>
    <template #footer>
      <wui-button variant="primary" @click="$wvPopup.hide('wv-popup-example')"
        >Close Me</wui-button
      >
    </template>
  </wui-popup>
</div>

<!-- w-popup-wv-popup-hide-show.vue -->

Using `show()`, `hide()`, and `toggle()` component methods

You can access popup using ref attribute and then call the show(), hide() or toggle() methods.

<template>
  <div>
    <wui-button
      id="show-btn-instance-methods"
      class="m-r-10"
      variant="primary"
      @click="showPopup"
      >Open Popup</wui-button
    >
    <wui-button
      id="toggle-btn-instance-methods"
      class="m-r-10"
      variant="primary"
      @click="togglePopup"
      >Toggle Popup</wui-button
    >
    <wui-button id="test-btn-instance-methods">Target button</wui-button>

    <wui-popup
      ref="my-popup"
      target="test-btn-instance-methods"
      title="Using Component Methods"
      :click-outside-include="[
                'show-btn-instance-methods',
                'toggle-btn-instance-methods',
                'test-btn-instance-methods',
              ]"
    >
      <p class="p-10">Hello From My Popup!</p>
      <template #footer>
        <wui-button class="m-r-5" variant="danger" outline @click="hidePopup"
          >Close Me</wui-button
        >
        <wui-button variant="warning" @click="togglePopup"
          >Toggle Me</wui-button
        >
      </template>
    </wui-popup>
  </div>
</template>

<script>
  export default {
    methods: {
      showPopup() {
        this.$refs["my-popup"].show();
      },
      hidePopup() {
        this.$refs["my-popup"].hide();
      },
      togglePopup() {
        // We pass the ID of the button that we want to return focus to
        // when the popup has hidden
        this.$refs["my-popup"].toggle("#toggle-btn");
      },
    },
  };
</script>

<!-- wui-popup-methods.vue -->

The hide() method accepts an optional string trigger argument for defining what triggered the popup to close. See section Prevent Closing below for details.

Note: It is recommended to use the this.$wvPopup.show() and this.$wvPopup.hide() methods (mentioned in the previous section) instead of using $ref methods.

Using `v-model` property

v-model property is always automatically synced with <wui-popup> visible state and you can show/hide using v-model.

<template>
  <div>
    <wui-button
      id="test-btn-popup-v-model"
      variant="primary"
      @click="popupShow = !popupShow"
      >Open Popup</wui-button
    >

    <wui-popup
      target="test-btn-popup-v-model"
      title="Popup using v-model"
      v-model="popupShow"
      ><div class="p-10">Hello From Popup!</div></wui-popup
    >
  </div>
</template>

<script>
  export default {
    data() {
      return {
        popupShow: false,
      };
    },
  };
</script>

<!-- wui-popup-v-model.vue -->

When using the v-model prop, do not use the visible prop at the same time.

Using scoped slot scope methods

Refer to the Custom rendering with slots section on using the various methods passed to scoped slots for closing popups.

Emitting events on $root

You can emit wv::show::popup, wv::hide::popup, and wv::toggle::popup events on $root with the first argument set to the modal's id. An optional second argument can specify the element to return focus to once the modal is closed. The second argument can be a CSS selector, an element reference, or a component reference (the root element of the component will be focused).

<template>
  <div>
    <wui-button
      id="show-btn-popup-root-events"
      variant="primary"
      class="m-r-10"
      @click="showPopup"
      ref="btnShow"
      >Open Popup</wui-button
    >
    <wui-button
      id="toggle-btn-popup-root-events"
      variant="primary"
      class="m-r-10"
      @click="togglePopup"
      ref="btnToggle"
      >Toggle Popup</wui-button
    >
    <wui-button id="target-btn-popup-root-events">Target button</wui-button>

    <wui-popup
      id="popup-test-root-events"
      target="target-btn-popup-root-events"
      title="Popup using root events"
      :click-outside-include="[
                'show-btn-popup-root-events',
                'toggle-btn-popup-root-events',
                'target-btn-popup-root-events',
              ]"
    >
      <div class="p-20">Hello From My Popup!</div>
      <template #footer>
        <wui-button class="m-r-5" variant="default" outline @click="hidePopup"
          >Close Me</wui-button
        >
        <wui-button variant="primary" @click="togglePopup"
          >Toggle Me</wui-button
        >
      </template>
    </wui-popup>
  </div>
</template>

<script>
  export default {
    methods: {
      showPopup() {
        this.$root.$emit(
          "wv::show::popup",
          "popup-test-root-events",
          "#btnShow"
        );
      },
      hidePopup() {
        this.$root.$emit(
          "wv::hide::popup",
          "popup-test-root-events",
          "#btnShow"
        );
      },
      togglePopup() {
        this.$root.$emit(
          "wv::toggle::popup",
          "popup-test-root-events",
          "#btnToggle"
        );
      },
    },
  };
</script>

Note: It is recommended to use the this.$wvPopup.show() and this.$wvPopup.hide() methods (mentioned in a previous section) instead of emitting $root events.

Prevent closing

To prevent <wui-popup> from closing (for example when validation fails), you can call the .preventDefault() method of the event object passed to your close (popup header close button) and hide event handlers. Note that .preventDefault(), when used, must be called synchronously, as async is not supported.

<template>
  <div>
    <wui-button
      id="show-btn-popup-prevent-closing"
      variant="primary"
      v-w-popup.popup-prevent-closing
      >Open Popup</wui-button
    >

    <div class="m-t-15">
      Submitted Names:
      <div v-if="submittedNames.length === 0">--</div>
      <ul v-else class="m-b-0 p-l-15">
        <li v-for="name in submittedNames" :key="name">{ name }</li>
      </ul>
    </div>

    <wui-popup
      id="popup-prevent-closing"
      ref="popup"
      title="Submit Your Name"
      target="show-btn-popup-prevent-closing"
      @show="resetPopup"
      @hidden="resetPopup"
      @ok="handleOk"
    >
      <form ref="form" @submit.stop.prevent="handleSubmit" class="p-10">
        <wui-form-group
          label="Name"
          label-for="name-input"
          invalid-feedback="Name is required"
          :state="nameState"
        >
          <wui-form-input
            id="name-input"
            v-model="name"
            :state="nameState"
            required
          ></wui-form-input>
        </wui-form-group>
      </form>
      <template #footer="{ hide }">
        <wui-button variant="primary" @click="hide('ok')">Submit</wui-button>
      </template>
    </wui-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "",
        nameState: null,
        submittedNames: [],
      };
    },
    methods: {
      checkFormValidity() {
        const valid = this.$refs.form.checkValidity();
        this.nameState = valid;
        return valid;
      },
      resetPopup() {
        this.name = "";
        this.nameState = null;
      },
      handleOk(wvPopupEvent) {
        // Prevent popup from closing
        wvPopupEvent.preventDefault();
        // Trigger submit handler
        this.handleSubmit();
      },
      handleSubmit() {
        // Exit when the form isn't valid
        if (!this.checkFormValidity()) {
          return;
        }
        // Push the name to submitted names
        this.submittedNames.push(this.name);
        // Hide the popup manually
        this.$nextTick(() => {
          this.$wvPopup.hide("popup-prevent-closing");
        });
      },
    },
  };
</script>

<!-- wui-popup-prevent-closing.vue -->

Note: event close is emitted by popup's built in header close (X) button respectively. This event will not be emitted, by default, if you have provided your own buttons. In this case use the hide event to control cancelling of the popup close. Event hide is always emitted, even if close is emitted.

The close and hide event object (wvPopupEvent) contains several properties and methods:

Property or Method	Type	Description
`preventDefault()`	Method	When called prevents the popup from closing
`trigger`	Property	Will be one of: `esc` (if the `Esc` key was pressed), `outside` (if content outside of the popup was clicked), `headerclose` (if the header X button was clicked), the first argument provided to the `hide()` method, or `null` otherwise.
`target`	Property	A reference to the popup element
`vueTarget`	property	A reference to the popup's Vue VM instance
`componentId`	property	The popup's ID

You can set the value of trigger by passing an argument to the component's hide() method for advanced control (i.e. detecting what button or action triggered the popup to hide).

Note: close event will be only emitted when the argument to hide() is strictly ('ok'), 'headerclose' or 'outside' respectively. The argument passed to hide() will be placed into the trigger property of the event object.

Tooltips and popovers

Tooltips and popovers can be placed within popups as needed. When popups are closed, any tooltips and popovers within are also automatically dismissed. Tooltips and popovers are automatically appended to the popup element (to ensure correct z-indexing), although you can override where they are appended by specifying a container ID (refer to tooltip and popover docs for details).

<div>
  <wui-button
    id="test-btn-popup-tooltips"
    variant="primary"
    v-w-popup.popupPopover
    >Show Popup</wui-button
  >

  <wui-popup
    id="popupPopover"
    title="Popup with Popover"
    target="test-btn-popup-tooltips"
  >
    <p class="p-10">
      This
      <wui-button v-w-popover="'Popover inside a popup!'" title="Popover"
        >Button</wui-button
      >
      triggers a popover on click.
    </p>
    <p class="p-10">
      This
      <a href="#" v-w-tooltip title="Tooltip in a popup!">Link</a>
      will show a tooltip on hover.
    </p>
  </wui-popup>
</div>

<!-- wui-popup-popover.vue -->

Lazy loading

By default, popups will not render their content in the document until they are shown (lazily rendered). Popups, when visible, are rendered in a collecting <div id="pane-overlay-container"> container which is appended to the <body> element. The <wui-popup> component will not affect layout, as they render as a placeholder comment node () in the DOM position they are placed. Due to the portalling process, it can take two or more $nextTicks to render changes of the content into the target.

Styling, options, and customization

Variants

Control the header, footer, and body background and text variants by setting the header-bg-variant, header-text-variant, body-bg-variant, body-text-variant, footer-bg-variant, and footer-text-variant props. Use any of the standard WUI variants such as danger, warning, info, success, dark, light, etc.

The variants for the bottom border of the header and top border of the footer can be controlled by the header-border-variant and footer-border-variant props respectively.

<template>
  <div>
    <wui-button
      id="test-btn-popup-variants"
      variant="primary"
      @click="show = true"
      >Show Popup</wui-button
    >

    <wui-popup
      v-model="show"
      title="Popup Variants"
      target="test-btn-popup-variants"
      :header-bg-variant="headerBgVariant"
      :header-text-variant="headerTextVariant"
      :body-bg-variant="bodyBgVariant"
      :body-text-variant="bodyTextVariant"
      :footer-bg-variant="footerBgVariant"
      :footer-text-variant="footerTextVariant"
    >
      <wui-container fluid class="p-10">
        <wui-row class="m-b-10 text-center">
          <wui-col cols="2"></wui-col>
          <wui-col cols="4">Background</wui-col>
          <wui-col cols="4">Text</wui-col>
        </wui-row>

        <wui-row class="m-b-15">
          <wui-col cols="2">Header</wui-col>
          <wui-col cols="5">
            <wui-form-select
              v-model="headerBgVariant"
              :options="variants"
            ></wui-form-select>
          </wui-col>
          <wui-col cols="5">
            <wui-form-select
              v-model="headerTextVariant"
              :options="variants"
            ></wui-form-select>
          </wui-col>
        </wui-row>

        <wui-row class="m-b-15">
          <wui-col cols="2">Body</wui-col>
          <wui-col cols="5">
            <wui-form-select
              v-model="bodyBgVariant"
              :options="variants"
            ></wui-form-select>
          </wui-col>
          <wui-col cols="5">
            <wui-form-select
              v-model="bodyTextVariant"
              :options="variants"
            ></wui-form-select>
          </wui-col>
        </wui-row>

        <wui-row>
          <wui-col cols="2">Footer</wui-col>
          <wui-col cols="5">
            <wui-form-select
              v-model="footerBgVariant"
              :options="variants"
            ></wui-form-select>
          </wui-col>
          <wui-col cols="5">
            <wui-form-select
              v-model="footerTextVariant"
              :options="variants"
            ></wui-form-select>
          </wui-col>
        </wui-row>
      </wui-container>

      <template #footer>
        <div class="display--table w-full">
          <p class="display--table-cell">Popup Footer Content</p>
          <p class="display--table-cell text--right">
            <wui-button variant="primary" size="sm" @click="show = false">
              Close
            </wui-button>
          </p>
        </div>
      </template>
    </wui-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        variants: [
          { label: "active", value: "active" },
          { label: "primary", value: "primary" },
          { label: "secondary", value: "secondary" },
          { label: "success", value: "success" },
          { label: "warning", value: "warning" },
          { label: "danger", value: "danger" },
          { label: "info", value: "info" },
          { label: "light", value: "light" },
          { label: "white", value: "white" },
          { label: "dark", value: "dark" },
        ],
        headerBgVariant: "primary",
        headerTextVariant: "white",
        bodyBgVariant: "white",
        bodyTextVariant: "dark",
        footerBgVariant: "warning",
        footerTextVariant: "dark",
      };
    },
  };
</script>

<!-- wui-popup-variants.vue -->

You can also apply arbitrary classes to the popup dialog container, content (popup window itself), header, body and footer via the popup-class, content-class, header-class, body-class and footer-class props, respectively. The props accept either a string or array of strings.

Custom rendering with slots

<wui-popup> provides several named slots that you can use to customize the content of various sections of the popup.

Slot	Optionally Scoped	Description
`default`	Yes	Main content of the popup
`header`	Yes	Content to place in the header. Replaces the entire header including the close button
`footer`	Yes	Content to place in the footer. Replaces the entire footer including the button(s)

The scope available to the slots that support optional scoping are:

Method or Property	Description
`cancel()`	Closes the popup and fires the `cancel` and `hide` events, with `wvPopupEvent.trigger = 'cancel'`
`close()`	Closes the popup and fires the `close` and `hide` events, with `wvPopupEvent.trigger = 'headerclose'`
`hide()`	Closes the popup and fires the `hide` event, with the wvPopupEvent.trigger = trigger (trigger is optional)
`ok()`	Closes the popup and fires the `ok` and `hide` events, with `wvPopupEvent.trigger = 'ok'`
`visible`	The visibility state of the popup. `true` if the popup is visible and `false` if not visible

<template>
  <wui-button
    id="test-btn-popup-scoped-slots"
    variant="primary"
    @click="$wvPopup.show('popup-scoped')"
    >Open Popup</wui-button
  >

  <wui-popup id="popup-scoped" target="test-btn-popup-scoped-slots">
    <template #header="{ close }">
      <!-- Emulate built in popup header close button action -->
      <wui-button
        size="sm"
        variant="danger"
        outline
        class="m-r-5"
        @click="close()"
      >
        Close Popup
      </wui-button>
      <h5>Popup Header</h5>
    </template>

    <template #default="{ hide }">
      <div class="p-10">
        <p>Popup Body with button</p>
        <wui-button variant="primary" @click="hide()">Hide Modal</wui-button>
      </div>
    </template>

    <template #footer="{ hide }">
      <b class="m-r-5">Custom Footer</b>
      <!-- Button with custom close trigger value -->
      <wui-button size="sm" variant="secondary" outline @click="hide('forget')">
        Forget it
      </wui-button>
    </template>
  </wui-popup>
</template>

<!-- wui-popup-scoped-slots.vue -->

WuiPopup uses @floating-ui under the hood, which provides a toolkit for floating elements of all kinds. WuiPopup supports all placement options of @floating-ui as well as the middleware functions flip, offset and shift. More information about these properties and accepted values can be found on the website of @floating-ui.

<template>
  <wui-button
    id="test-btn-popup-placements"
    variant="primary"
    v-w-popup.popup-placements
    >Open Popup</wui-button
  >

  <wui-popup
    id="popup-placements"
    :placement="selectedPlacement"
    :flip="flip"
    :shift="shift"
    :offset="offset"
    target="test-btn-popup-placements"
  >
    <div class="p-10">
      <label for="placement-example-select">Change the placement</label>
      <wui-form-select
        id="placement-example-select"
        v-model="selectedPlacement"
        name="placement"
        :options="placements"
      ></wui-form-select>
    </div>
  </wui-popup>
</template>

<script>
  export default {
    data() {
      return {
        placements: [
          { value: "top", text: "top" },
          { value: "top-start", text: "top-start" },
          { value: "top-end", text: "top-end" },
          { value: "right", text: "right" },
          { value: "right-start", text: "right-start" },
          { value: "right-end", text: "right-end" },
          { value: "bottom", text: "bottom" },
          { value: "bottom-start", text: "bottom-start" },
          { value: "bottom-end", text: "bottom-end" },
          { value: "left", text: "left" },
          { value: "left-start", text: "left-start" },
          { value: "left-end", text: "left-end" },
        ],
        selectedPlacement: "bottom-start",
        offset: 0,
        flip: true,
        shift: true,
      };
    },
  };
</script>

<!-- wui-popup-placement.vue -->

To listen to any popup opening, use:

export default {
  mounted() {
    this.$root.$on("wv::popup::show", (wvEvent, popupId) => {
      console.log("Popup is about to be shown", wvEvent, popupId);
    });
  },
};

Refer to the Events section of this documentation for the full list of events emitted.

Accessibility

<wui-popup> provides several accessibility features, including auto focus, return focus, keyboard (tab) focus containment, and automated aria-* attributes.

Note: The animation effect of this component is dependent on the prefers-reduced-motion media query.

The aria-labelledby and aria-describedby attributes will appear on the popup automatically in most cases.

The aria-labelledby attribute will not be present if you have the header hidden, or supplied your own header, or have not supplied a popup title. It is recommended to supply a title for your popups (when using the built in header).
The aria-describedby attribute will always point to the popup's body content.
If the aria-label prop is specified with a string value, the aria-labelledby attribute will not be rendered, even if you have a title/header for your popup.

Auto focus on open

<wui-popup> will autofocus the popup container when opened.

You can pre-focus an element within the <wui-popup> by listening to the <wui-popup> shown event, and call the element's focus() method. <wui-popup> will not attempt to autofocus if an element already has focus within the <wui-popup>.

<template>
  <wui-button
    id="test-btn-popup-focus-1"
    variant="primary"
    v-w-popup.popup-focus-1
    >Open popup</wui-button
  >
  <wui-popup
    id="popup-focus-1"
    target="test-btn-popup-focus-1"
    title="Focus a custom element"
    @shown="focusMyElement"
  >
    <div class="p-10">
      <div class="m-b-5">
        <wui-button>I Don't Have Focus</wui-button>
      </div>

      <div class="m-b-5">
        <wui-form-input></wui-form-input>
      </div>

      <div class="m-b-5">
        <!-- Element to gain focus when popup is opened -->
        <wui-form-input
          ref="focusThis"
          placeholder="I should have focus now"
        ></wui-form-input>
      </div>

      <div>
        <wui-form-input></wui-form-input>
      </div>
    </div>
  </wui-popup>
</template>

<script>
  export default {
    methods: {
      focusMyElement() {
        this.$refs.focusThis.focus();
      },
    },
  };
</script>

Alternatively, if using wui-form-* form controls, you can use the autofocus prop to automatically focus a form control when the popup opens.

If you want to auto focus the built-in popup button close in the header, you can set the prop auto-focus-button to 'close' and <wui-popup> will focus the specified button if it exists.

Note: it is not recommended to autofocus an input or control inside of a popup for accessibility reasons, as screen reader users will not know the context of where the input is (the announcement of the popup may not be spoken). It is best to let <wui-popup> focus the popup's container, allowing the popup information to be spoken to the user, and then allow the user to tab into the input.

Returning focus to the triggering element

For accessibility reasons, it is desirable to return focus to the element that triggered the opening of the popup, when the popup closes.

<wui-popup> will try and automatically determine which element had focus before the popup was opened, and will return the focus to that element when the popup has hidden if possible. However, several methods and options are provided to allow you to specify the element to return focus to once the popup has hidden.

Specify return focus element via the `return-focus` prop

You can also specify an element to return focus to, when popup closes, by setting the return-focus prop to one of the following:

A CSS Query Selector string (or an element ID prepended with #)
A component reference (which is mounted on a focusable element, such as <wui-button>)
A reference to a DOM element that is focusable

If the passed in element is not focusable, then the browser will determine what has focus (usually <body>, which is not desirable)

This method for returning focus is handy when you use the <wui-popup> methods show() and hide(), or the v-model prop. Note this property takes precedence over other methods of specifying the return focus element.

Auto return focus

When <wui-popup> is opened via the v-w-popup directive on an element, focus will be returned to this element automatically when <wui-popup> closes, unless an element has been specified via the return-focus prop.

Specify return focus via event

When using the wv::show::popup event (emitted on $root), you can specify a second argument which is the element to return focus to. This argument accepts the same types as the return-focus prop.

this.$root.$emit("wv::show::popup", "popup-1", "#focusThisOnClose");

Tip: if using a click event (or similar) to trigger popup to open, pass the event's target property:

<div>
  <wui-button @click="$root.$emit('wv::show::popup', 'popup-1', $event.target)"
    >Open Popup</wui-button
  >
</div>

Note: If the <wui-popup> has the return-focus prop set, then the element specified via the event will be ignored.

When tabbing through elements within a <wui-popup>, if focus attempts to leave the popup into the document, it will be brought back into the popup.

Avoid setting tabindex on elements within the popup to any value other than 0 or -1. Doing so will make it difficult for people who rely on assistive technology to navigate and operate page content and can make some of your elements unreachable via keyboard navigation.

If some elements outside the popup need to be focusable (i.e. for TinyMCE), you can add them as CSS selectors to the ignore-enforce-focus-selector prop 2.4.0+, e.g.:

<wui-popup
  id="some-popup-id"
  title="Popup with TinyMCE Editor"
  ignore-enforce-focus-selector=".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root"
>
  <!-- Popup content with TinyMCE editor here -->
</wui-popup>

In some circumstances, you may need to disable the enforce focus feature completely. You can do this by setting the prop no-enforce-focus, although this is highly discouraged for accessibility reasons.

`v-w-popup` directive accessibility

Notes on v-w-popup directive accessibility:

If the element is anything other than a <button> (or component that renders a <button>), the ARIA role will be set to button, and a keydown event listeners for Enter and Space will be added, along with a click listener.
If the element is anything other than a <button> or <a> (or a component that renders either), then a tabindex of 0 will be added to the element to ensure accessibility, unless there is already a tabindex set.

Component reference

Properties

Property	Type	Default	Description
`autoFocusButton`	`String`	`null`	Specify which built-in button to focus once the popup opens: 'apply' or 'close'
`bodyBgVariant`	`String`		Applies one of the WUI theme color variants to the body background
`bodyClass`	`Array`, `Object` or `String`		CSS class (or classes) to apply to the '.wui-popup__body' wrapper element
`bodyTextVariant`	`String`		Applies one of the WUI theme color variants to the body text
`clickOutsideInclude`	`Array`	`[]`	HTML elements which will be passed to the `include` property of the `v-click-outside` directive. When clicked on those elements, `v-click-outside` will have no effect and the popup remains open
`flip`	`Boolean`	`false`	Whether or not the `flip` option should be applied to @floating-ui's middleware
`footerBgVariant`	`String`		Applies one of the WUI theme color variants to the footer background
`footerBorderVariant`	`String`		Applies one of the WUI theme color variants to the footer border
`footerClass`	`Array`, `Object` or `String`		CSS class (or classes) to apply to the '.wui-popup__footer' wrapper element
`footerTag`	`String`	`"footer"`	Specify the HTML tag to render instead of the default tag for the footer
`footerTextVariant`	`String`		Applies one of the WUI theme color variants to the footer text
`headerBgVariant`	`String`		Applies one of the WUI theme color variants to the header background
`headerBorderVariant`	`String`		Applies one of the WUI theme color variants to the header border
`headerClass`	`Array`, `Object` or `String`		CSS class (or classes) to apply to the '.wui-popup__header' wrapper element
`headerCloseContent`	`String`	`null`	Content of the header close button
`headerCloseLabel`	`String`	`"Close"`	Value of the 'aria-label' on the header close button
`headerCloseVariant`	`String`		Text theme color variant to apply to the header close button
`headerTag`	`String`	`"header"`	Specify the HTML tag to render instead of the default tag for the footer
`headerTextVariant`	`String`		Applies one of the WUI theme color variants to the header text
`hideHeaderClose`	`Boolean`	`false`	Disables rendering of the modal header's close button
`id`	`String`		Id which will be used to generate unique id's for popup HTML elements
`ignoreEnforceFocusSelector`	`Array` or `String`		Ignore certain elements from the enforce focus routine, specified by css selector(s)
`noEnforceFocus`	`Boolean`	`false`	Disables the enforce focus routine which maintains focus inside the popup
`offset`	`Number` or `String`	`0`	Options for @floating-ui's `offset` middleware
`placement`	`String`	`"bottom-start"`	One of @floating-ui's placement options (see https://floating-ui.com/docs/computePosition#placement)
`popupClass`	`Array`, `Object` or `String`		CSS class (or classes) to apply to the '.wui-popup' wrapper element
`returnFocus`	`HTMLElement`, `Object` or `String`		HTML Element reference, CSS selector, or component reference to return focus to when the popup closes. When not set, will return focus to the element that last had focus before the popup opened
`shift`	`Boolean` or `Object`	`false`	Options for @floating-ui's `shift` middleware
`static`	`Boolean`	`false`	Renders the content of the component in-place in the DOM, rather than portalling it to be appended to the body element
`target`	`HTMLElement`, `SVGElement`, `Function`, `Object` or `String`	`undefined`	Element string ID, or a reference to an element or component, that you want to trigger the popup
`title`	`String`		The title of the popup which will be displayed in the header. Will have no effect when `titleHtml` is used
`titleHtml`	`String`		The HTML for the title if you want to use custom markup. `title` will have no effect when `titleHtml` is used
`titleTag`	`String`	`"span"`	Specify the HTML tag to render instead of the default tag for the title
`visible`	`Boolean`	`false`	The current visibility state of the popup

`v-model`

Property	Event
`visible`	`change`

Slots

Name	Scoped	Description
`default`	Yes	Content to place in the popup body
`footer`	Yes	Content to place in the footer
`header`	Yes	Content to place in the header
`popup-title`	Yes	Content to place in the title tag

Slot scope

Method or Property	Description
`cancel()`	Closes the popup and fires the `cancel` and `hide` events, with `wvPopupEvent.trigger = 'cancel'`
`close()`	Closes the popup and fires the `close` and `hide` events, with `wvPopupEvent.trigger = 'headerclose'`
`hide()`	Closes the popup and fires the `hide` event, with the wvPopupEvent.trigger = trigger (trigger is optional)
`ok()`	Closes the popup and fires the `ok` and `hide` events, with `wvPopupEvent.trigger = 'ok'`
`visible`	The visibility state of the popup. `true` if the popup is visible and `false` if not visible

Events

Event	Arguments	Description
`wv::popup::hidden`	`wvPopupEvent` - WvPopupEvent object `popupId` - Popup ID	Emitted on `$root` when popup is hidden
`wv::popup::hide`	`wvPopupEvent` - WvPopupEvent object. Call `wvPopupEvent.preventDefault()` to cancel hide `popupId` - Popup ID	Emitted on `$root` when popup is about to be hidden. Cancelable (as long as popup wasn't forcibly hidden)
`wv::popup::show`	`wvPopupEvent` - WvPopupEvent object. Call `wvPopupEvent.preventDefault()` to cancel show `popupId` - Popup ID	Emitted on `$root` when popup is about to be shown. Cancelable
`wv::popup::shown`	`wvPopupEvent` - WvPopupEvent object `popupId` - Popup ID	Emitted on `$root` when popup is shown
`cancel`	`wvPopupEvent` - WvPopupEvent object. Call `wvPopupEvent.preventDefault()` to cancel hide	When default CANCEL button pressed, just before popup has hidden. Cancelable
`change`	`isVisible` - The visibility state of the popup. `true` if the popup is visible and `false` if not visible	New popup visibility state. Used to update the v-model
`close`	`wvPopupEvent` - WvPopupEvent object. Call `wvPopupEvent.preventDefault()` to cancel hide	When default header close button pressed, just before popup has hidden. Cancelable
`entering`		Always emits when the ENTER event is triggered by the Vue transition component
`hidden`	`wvPopupEvent` - WvPopupEvent object	Always emits after popup is hidden
`hide`	`wvPopupEvent` - WvPopupEvent object. Inspect `wvPopupEvent.trigger` to find out what action triggered the hide. Call `wvPopupEvent.preventDefault()` to cancel hide	Always emits just before popup has hidden. Cancelable (as long as popup wasn't forcibly hidden)
`leaving`		Always emits when the LEAVE event is triggered by the Vue transition component
`ok`	`wvPopupEvent` - WvPopupEvent object. Call `wvPopupEvent.preventDefault()` to cancel hide	When default OK button pressed, just before popup has hidden. Cancelable
`show`	`wvPopupEvent` - WvPopupEvent object. Call `wvPopupEvent.preventDefault()` to cancel show	Always emits just before popup is shown. Cancelable
`shown`	`wvPopupEvent` - WvPopupEvent object	Always emits when popup is shown

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export
`<wui-popup>`	`WuiPopup`

Example

import { WuiPopup } from "@wui/wui-vue/lib/popup";
Vue.component("wui-popup", WuiPopup);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`PopupPlugin`	`@wui/wui-vue/lib/popup`

Example

import { PopupPlugin } from "@wui/wui-vue/lib/popup";
Vue.use(PopupPlugin);

From WUI and

with

WUI is wescale’s design system

Popup

The popup is a basic component that is used in various other components. Its primary purpose is to position any content in the right place.

Popup with header

Popup with menu items

Usage

Description

Overview

Using this.$wvPopup.show() and this.$wvPopup.hide() instance methods

Using show(), hide(), and toggle() component methods

Using v-model property