[detachable] Add ability to flip popover element

src/types/components/WConfirm.ts

@@ -15,6 +15,7 @@ import {
   PublicProps,
   ResolveProps
 } from '../extra-vue-types'
+import { WaveMenuProps } from './WMenu'
 
 // ----------------------------------------------------------------------------
 // Props
@@ -98,10 +99,10 @@ export interface WaveConfirmProps {
 
   /**
    * For more customization, this prop accepts an object of props to pass down to the menu (all the options that the `w-menu` component can handle).
-   * @property {{}} menu - Default: () => ({})
+   * @property {WaveMenuProps} menu - Default: () => ({})
    * @see https://antoniandre.github.io/wave-ui/w-confirm
    */
-  menu?: {}
+  menu?: WaveMenuProps
 
   /**
    * Accept either `false` for no tooltip (by default), a `String` to display as a tooltip on the main button, or an `Object` in order to define `w-tooltip` props to further customize the tooltip (all the options that the `w-tooltip` component can handle).

src/types/components/WMenu.ts

@@ -16,12 +16,14 @@ import {
   ResolveProps
 } from '../extra-vue-types'
 
+import { DetachableProps } from '../mixins/detachable'
+
 // ----------------------------------------------------------------------------
 // Props
 // ----------------------------------------------------------------------------
-export interface WaveMenuProps {
+export interface WaveMenuProps extends DetachableProps {
   /**
-   * ``value` in Vue 2.`
+   * `value` in Vue 2.
    * This prop controls the visibility of the menu. Any truthy value will show the menu whereas any falsy value will hide it.
    * @property {any} modelValue
    * @see https://antoniandre.github.io/wave-ui/w-menu

src/types/components/WSelect.ts

@@ -16,29 +16,31 @@ import {
   ResolveProps
 } from '../extra-vue-types'
 
+import { WaveMenuProps } from './WMenu'
+
 // ----------------------------------------------------------------------------
 // Additional Types
 // ----------------------------------------------------------------------------
 export interface WSelectDropdownItem {
   /**
    * The *default* key to access the label of the item.
-   * This can be overriden using the `item-label-key` property.
+   * This can be overridden using the `item-label-key` property.
    * @property {string} label
    * @see https://antoniandre.github.io/wave-ui/w-select#item-label-key-prop
    */
   label?: string
 
   /**
    * The *default* key to access the color of the item.
-   * This can be overriden using the `item-color-key` property.
+   * This can be overridden using the `item-color-key` property.
    * @property {string} color
    * @see https://antoniandre.github.io/wave-ui/w-select#item-color-key-prop
    */
   color?: string
 
   /**
-   * The *default* key to access the vlue of the item.
-   * This can be overriden using the `item-value-key` property.
+   * The *default* key to access the value of the item.
+   * This can be overridden using the `item-value-key` property.
    * @property {string} value
    * @see https://antoniandre.github.io/wave-ui/w-select#item-value-key-prop
    */
@@ -71,7 +73,7 @@ export interface WaveSelectProps {
   items: Array<WSelectDropdownItem>
 
   /**
-   * ``value` in Vue 2.`
+   * `value` in Vue 2.
    * The current selection of the select field.
    * Gets updated on selection change.
    * @property {any} modelValue
@@ -240,10 +242,10 @@ export interface WaveSelectProps {
 
   /**
    * TODO: Add Description
-   * @property {{}} menuProps
+   * @property {WaveMenuProps} menuProps
    * @see https://antoniandre.github.io/wave-ui/w-select
    */
-  menuProps?: {}
+  menuProps?: WaveMenuProps
 
   /**
    * TODO: Add Description
@@ -481,7 +483,7 @@ export type WaveSelectSlots = SlotsType<{
    * @see https://antoniandre.github.io/wave-ui/w-select
    */
   'item': (_: { item: WSelectDropdownItem, selected: boolean, index: number }) => any
-  
+
   /**
    * The left icon, if the `innerIconLeft` prop is not flexible enough.
    * @see https://antoniandre.github.io/wave-ui/w-input

src/types/components/WTooltip.ts

@@ -16,10 +16,12 @@ import {
   ResolveProps
 } from '../extra-vue-types'
 
+import { DetachableProps } from '../mixins/detachable'
+
 // ----------------------------------------------------------------------------
 // Props
 // ----------------------------------------------------------------------------
-export interface WaveTooltipProps {
+export interface WaveTooltipProps extends DetachableProps {
   /**
    * ``value` in Vue 2.`
    * This prop controls the visibility of the tooltip. Any truthy value will show the tooltip whereas any falsy value will hide it.

src/types/mixins/detachable.ts

@@ -0,0 +1,87 @@
+export interface DetachableProps {
+  /**
+   * Target element to append the detachable component to.
+   * - CSS selector string (e.g. '#my-container', '.some-class')
+   * - DOM node
+   * - 'activator' - appends to the previous sibling element
+   * - true - appends to the default target (.w-app)
+   * - false/undefined - uses default target (.w-app)
+   */
+  appendTo?: string | boolean | object
+
+  /**
+   * Use fixed positioning instead of absolute.
+   * @default false
+   */
+  fixed?: boolean
+
+  /**
+   * Position the detachable element at the top of the activator.
+   * @default false
+   */
+  top?: boolean
+
+  /**
+   * Position the detachable element at the bottom of the activator.
+   * @default false
+   */
+  bottom?: boolean
+
+  /**
+   * Position the detachable element at the left of the activator.
+   * @default false
+   */
+  left?: boolean
+
+  /**
+   * Position the detachable element at the right of the activator.
+   * @default false
+   */
+  right?: boolean
+
+  /**
+   * Align the detachable element to the top when position is left/right.
+   * @default false
+   */
+  alignTop?: boolean
+
+  /**
+   * Align the detachable element to the bottom when position is left/right.
+   * @default false
+   */
+  alignBottom?: boolean
+
+  /**
+   * Align the detachable element to the left when position is top/bottom.
+   * @default false
+   */
+  alignLeft?: boolean
+
+  /**
+   * Align the detachable element to the right when position is top/bottom.
+   * @default false
+   */
+  alignRight?: boolean
+
+  /**
+   * Disable automatic positioning of the detachable element.
+   * @default false
+   */
+  noPosition?: boolean
+
+  /**
+   * Set a custom z-index for the detachable element.
+   */
+  zIndex?: number | string | boolean
+
+  /**
+   * Allow the detachable element to flip position when it would overflow the viewport.
+   * @default true
+   */
+  allowFlip?: boolean
+
+  /**
+   * External activator element. Can be a CSS selector string, Vue ref, or DOM node.
+   */
+  activator?: string | object
+}