cbvirtua 1.0.5 → 1.0.6

package/v2/components/TooltipDirective.vue

@@ -0,0 +1,171 @@
+<template>
+  <Popper
+    ref="popper"
+    v-slot="{
+      popperId,
+      isShown,
+      shouldMountContent,
+      skipTransition,
+      autoHide,
+      hide,
+      handleResize,
+      onResize,
+      classes,
+      result,
+    }"
+    v-bind="$attrs"
+    :theme="theme"
+    :popper-node="() => $refs.popperContent.$el"
+    v-on="$listeners"
+    @apply-show="onShow"
+    @apply-hide="onHide"
+  >
+    <PopperContent
+      ref="popperContent"
+      :class="{
+        'v-popper--tooltip-loading': loading,
+      }"
+      :popper-id="popperId"
+      :theme="theme"
+      :shown="isShown"
+      :mounted="shouldMountContent"
+      :skip-transition="skipTransition"
+      :auto-hide="autoHide"
+      :handle-resize="handleResize"
+      :classes="classes"
+      :result="result"
+      @hide="hide"
+      @resize="onResize"
+    >
+      <div
+        v-if="html"
+        v-html="finalContent"
+      />
+      <div
+        v-else
+        v-text="finalContent"
+      />
+    </PopperContent>
+  </Popper>
+</template>
+
+<script lang="ts">
+import Popper from './Popper'
+import PopperContent from './PopperContent.vue'
+import { getDefaultConfig } from '../config'
+import PopperMethods from './PopperMethods'
+
+export default {
+  name: 'VTooltipDirective',
+
+  components: {
+    Popper: Popper(),
+    PopperContent,
+  },
+
+  mixins: [
+    PopperMethods,
+  ],
+
+  inheritAttrs: false,
+
+  props: {
+    theme: {
+      type: String,
+      default: 'tooltip',
+    },
+
+    html: {
+      type: Boolean,
+      default () {
+        return getDefaultConfig(this.theme, 'html')
+      },
+    },
+
+    content: {
+      type: [String, Number, Function],
+      default: null,
+    },
+
+    loadingContent: {
+      type: String,
+      default () {
+        return getDefaultConfig(this.theme, 'loadingContent')
+      },
+    },
+  },
+
+  data () {
+    return {
+      asyncContent: null,
+    }
+  },
+
+  computed: {
+    isContentAsync () {
+      return typeof this.content === 'function'
+    },
+
+    loading () {
+      return this.isContentAsync && this.asyncContent == null
+    },
+
+    finalContent () {
+      if (this.isContentAsync) {
+        return this.loading ? this.loadingContent : this.asyncContent
+      }
+      return this.content
+    },
+  },
+
+  watch: {
+    content: {
+      handler () {
+        this.fetchContent(true)
+      },
+      immediate: true,
+    },
+
+    async finalContent (value) {
+      await this.$nextTick()
+      this.$refs.popper.onResize()
+    },
+  },
+
+  created () {
+    this.$_fetchId = 0
+  },
+
+  methods: {
+    fetchContent (force) {
+      if (typeof this.content === 'function' && this.$_isShown &&
+        (force || (!this.$_loading && this.asyncContent == null))) {
+        this.asyncContent = null
+        this.$_loading = true
+        const fetchId = ++this.$_fetchId
+        const result = this.content(this)
+        if (result.then) {
+          result.then(res => this.onResult(fetchId, res))
+        } else {
+          this.onResult(fetchId, result)
+        }
+      }
+    },
+
+    onResult (fetchId, result) {
+      if (fetchId !== this.$_fetchId) return
+      this.$_loading = false
+      this.asyncContent = result
+    },
+
+    onShow () {
+      this.$_isShown = true
+      this.fetchContent()
+    },
+
+    onHide () {
+      this.$_isShown = false
+    },
+  },
+}
+</script>

package/v2/floating-ui/core/computeCoordsFromPlacement.js

@@ -0,0 +1,39 @@
+import { getBasePlacement } from './utils/getBasePlacement';
+import { getAlignment } from './utils/getAlignment';
+import { getMainAxisFromPlacement } from './utils/getMainAxisFromPlacement';
+import { getLengthFromAxis } from './utils/getLengthFromAxis';
+export function computeCoordsFromPlacement({ reference, floating, placement, }) {
+    const commonX = reference.x + reference.width / 2 - floating.width / 2;
+    const commonY = reference.y + reference.height / 2 - floating.height / 2;
+    let coords;
+    switch (getBasePlacement(placement)) {
+        case 'top':
+            coords = { x: commonX, y: reference.y - floating.height };
+            break;
+        case 'bottom':
+            coords = { x: commonX, y: reference.y + reference.height };
+            break;
+        case 'right':
+            coords = { x: reference.x + reference.width, y: commonY };
+            break;
+        case 'left':
+            coords = { x: reference.x - floating.width, y: commonY };
+            break;
+        default:
+            coords = { x: reference.x, y: reference.y };
+    }
+    const mainAxis = getMainAxisFromPlacement(placement);
+    const length = getLengthFromAxis(mainAxis);
+    switch (getAlignment(placement)) {
+        case 'start':
+            coords[mainAxis] =
+                coords[mainAxis] - (reference[length] / 2 - floating[length] / 2);
+            break;
+        case 'end':
+            coords[mainAxis] =
+                coords[mainAxis] + (reference[length] / 2 - floating[length] / 2);
+            break;
+        default:
+    }
+    return coords;
+}

package/v2/floating-ui/core/computePosition.js

@@ -0,0 +1,52 @@
+import { computeCoordsFromPlacement } from './computeCoordsFromPlacement';
+export const computePosition = async (reference, floating, config) => {
+    const { placement = 'bottom', strategy = 'absolute', middleware = [], platform, } = config;
+    let rects = await platform.getElementRects({ reference, floating, strategy });
+    let { x, y } = computeCoordsFromPlacement({ ...rects, placement });
+    let statefulPlacement = placement;
+    let middlewareData = {};
+    let _debug_loop_count_ = 0;
+    for (let i = 0; i < middleware.length; i++) {
+        const { name, fn } = middleware[i];
+        const { x: nextX, y: nextY, data, reset, } = await fn({
+            x,
+            y,
+            initialPlacement: placement,
+            placement: statefulPlacement,
+            strategy,
+            middlewareData,
+            rects,
+            platform,
+            elements: { reference, floating },
+        });
+        x = nextX !== null && nextX !== void 0 ? nextX : x;
+        y = nextY !== null && nextY !== void 0 ? nextY : y;
+        middlewareData = { ...middlewareData, [name]: data !== null && data !== void 0 ? data : {} };
+        if (reset) {
+            if (typeof reset === 'object') {
+                if (reset.placement) {
+                    statefulPlacement = reset.placement;
+                }
+                if (reset.rects) {
+                    rects =
+                        reset.rects === true
+                            ? await platform.getElementRects({ reference, floating, strategy })
+                            : reset.rects;
+                }
+                ({ x, y } = computeCoordsFromPlacement({
+                    ...rects,
+                    placement: statefulPlacement,
+                }));
+            }
+            i = -1;
+            continue;
+        }
+    }
+    return {
+        x,
+        y,
+        placement: statefulPlacement,
+        strategy,
+        middlewareData,
+    };
+};

package/v2/floating-ui/core/detectOverflow.js

@@ -0,0 +1,36 @@
+import { getSideObjectFromPadding } from './utils/getPaddingObject';
+import { rectToClientRect } from './utils/rectToClientRect';
+export async function detectOverflow(middlewareArguments, options = {}) {
+    const { x, y, platform, rects, elements, strategy } = middlewareArguments;
+    const { boundary = 'clippingParents', rootBoundary = 'viewport', elementContext = 'floating', altBoundary = false, padding = 0, } = options;
+    const paddingObject = getSideObjectFromPadding(padding);
+    const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+    const element = elements[altBoundary ? altContext : elementContext];
+    const clippingClientRect = await platform.getClippingClientRect({
+        element: (await platform.isElement(element))
+            ? element
+            : element.contextElement ||
+                (await platform.getDocumentElement({ element: elements.floating })),
+        boundary,
+        rootBoundary,
+    });
+    const elementClientRect = rectToClientRect(await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+        rect: elementContext === 'floating'
+            ? { ...rects.floating, x, y }
+            : rects.reference,
+        offsetParent: await platform.getOffsetParent({
+            element: elements.floating,
+        }),
+        strategy,
+    }));
+    // positive = overflowing the clipping rect
+    // 0 or negative = within the clipping rect
+    return {
+        top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
+        bottom: elementClientRect.bottom -
+            clippingClientRect.bottom +
+            paddingObject.bottom,
+        left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
+        right: elementClientRect.right - clippingClientRect.right + paddingObject.right,
+    };
+}

package/v2/floating-ui/core/enums.js

@@ -0,0 +1,7 @@
+export const basePlacements = [
+    'top',
+    'right',
+    'bottom',
+    'left',
+];
+export const allPlacements = basePlacements.reduce((acc, basePlacement) => acc.concat(basePlacement, `${basePlacement}-start`, `${basePlacement}-end`), []);

package/v2/floating-ui/core/index.js

@@ -0,0 +1,11 @@
+export { computePosition } from './computePosition';
+export { detectOverflow } from './detectOverflow';
+export { arrow } from './middleware/arrow';
+export { autoPlacement } from './middleware/autoPlacement';
+export { flip } from './middleware/flip';
+export { hide } from './middleware/hide';
+export { offset } from './middleware/offset';
+export { shift, limitShift } from './middleware/shift';
+export { size } from './middleware/size';
+export { inline } from './middleware/inline';
+export { rectToClientRect } from './utils/rectToClientRect';

package/v2/floating-ui/core/middleware/arrow.js

@@ -0,0 +1,52 @@
+import { getBasePlacement } from '../utils/getBasePlacement';
+import { getLengthFromAxis } from '../utils/getLengthFromAxis';
+import { getMainAxisFromPlacement } from '../utils/getMainAxisFromPlacement';
+import { getSideObjectFromPadding } from '../utils/getPaddingObject';
+import { within } from '../utils/within';
+export const arrow = (options) => ({
+    name: 'arrow',
+    options,
+    async fn(middlewareArguments) {
+        // Since `element` is required, we don't Partial<> the type
+        const { element, padding = 0 } = options !== null && options !== void 0 ? options : {};
+        const { x, y, placement, rects, platform } = middlewareArguments;
+        if (element == null) {
+            if (__DEV__) {
+                console.warn('Floating UI: No `element` was passed to the `arrow` middleware.');
+            }
+            return {};
+        }
+        const paddingObject = getSideObjectFromPadding(padding);
+        const coords = { x, y };
+        const basePlacement = getBasePlacement(placement);
+        const axis = getMainAxisFromPlacement(basePlacement);
+        const length = getLengthFromAxis(axis);
+        const arrowDimensions = await platform.getDimensions({ element });
+        const minProp = axis === 'y' ? 'top' : 'left';
+        const maxProp = axis === 'y' ? 'bottom' : 'right';
+        const endDiff = rects.reference[length] +
+            rects.reference[axis] -
+            coords[axis] -
+            rects.floating[length];
+        const startDiff = coords[axis] - rects.reference[axis];
+        const arrowOffsetParent = await platform.getOffsetParent({ element });
+        const clientSize = arrowOffsetParent
+            ? axis === 'y'
+                ? arrowOffsetParent.clientHeight || 0
+                : arrowOffsetParent.clientWidth || 0
+            : 0;
+        const centerToReference = endDiff / 2 - startDiff / 2;
+        // Make sure the arrow doesn't overflow the floating element if the center
+        // point is outside of the floating element's bounds
+        const min = paddingObject[minProp];
+        const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
+        const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+        const offset = within(min, center, max);
+        return {
+            data: {
+                [axis]: offset,
+                centerOffset: center - offset,
+            },
+        };
+    },
+});

package/v2/floating-ui/core/middleware/autoPlacement.js

@@ -0,0 +1,84 @@
+import { detectOverflow, } from '../detectOverflow';
+import { getBasePlacement } from '../utils/getBasePlacement';
+import { getAlignment } from '../utils/getAlignment';
+import { getAlignmentSides } from '../utils/getAlignmentSides';
+import { getOppositeAlignmentPlacement } from '../utils/getOppositeAlignmentPlacement';
+import { allPlacements } from '../enums';
+export function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+    const allowedPlacementsSortedByAlignment = alignment
+        ? [
+            ...allowedPlacements.filter((placement) => getAlignment(placement) === alignment),
+            ...allowedPlacements.filter((placement) => getAlignment(placement) !== alignment),
+        ]
+        : allowedPlacements.filter((placement) => getBasePlacement(placement) === placement);
+    return allowedPlacementsSortedByAlignment.filter((placement) => {
+        if (alignment) {
+            return (getAlignment(placement) === alignment ||
+                (autoAlignment
+                    ? getOppositeAlignmentPlacement(placement) !== placement
+                    : false));
+        }
+        return true;
+    });
+}
+export const autoPlacement = (options = {}) => ({
+    name: 'autoPlacement',
+    options,
+    async fn(middlewareArguments) {
+        var _a, _b, _c, _d, _e, _f;
+        const { x, y, rects, middlewareData, placement } = middlewareArguments;
+        const { alignment = null, allowedPlacements = allPlacements, autoAlignment = true, ...detectOverflowOptions } = options;
+        if ((_a = middlewareData.autoPlacement) === null || _a === void 0 ? void 0 : _a.skip) {
+            return {};
+        }
+        const placements = getPlacementList(alignment, autoAlignment, allowedPlacements);
+        const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+        const currentIndex = (_c = (_b = middlewareData.autoPlacement) === null || _b === void 0 ? void 0 : _b.index) !== null && _c !== void 0 ? _c : 0;
+        const currentPlacement = placements[currentIndex];
+        const { main, cross } = getAlignmentSides(currentPlacement, rects);
+        // Make `computeCoords` start from the right place
+        if (placement !== currentPlacement) {
+            return {
+                x,
+                y,
+                reset: {
+                    placement: placements[0],
+                },
+            };
+        }
+        const currentOverflows = [
+            overflow[getBasePlacement(currentPlacement)],
+            overflow[main],
+            overflow[cross],
+        ];
+        const allOverflows = [
+            ...((_e = (_d = middlewareData.autoPlacement) === null || _d === void 0 ? void 0 : _d.overflows) !== null && _e !== void 0 ? _e : []),
+            { placement: currentPlacement, overflows: currentOverflows },
+        ];
+        const nextPlacement = placements[currentIndex + 1];
+        // There are more placements to check
+        if (nextPlacement) {
+            return {
+                data: {
+                    index: currentIndex + 1,
+                    overflows: allOverflows,
+                },
+                reset: {
+                    placement: nextPlacement,
+                },
+            };
+        }
+        const placementsSortedByLeastOverflow = allOverflows
+            .slice()
+            .sort((a, b) => a.overflows[0] - b.overflows[0]);
+        const placementThatFitsOnAllSides = (_f = placementsSortedByLeastOverflow.find(({ overflows }) => overflows.every((overflow) => overflow <= 0))) === null || _f === void 0 ? void 0 : _f.placement;
+        return {
+            data: {
+                skip: true,
+            },
+            reset: {
+                placement: placementThatFitsOnAllSides !== null && placementThatFitsOnAllSides !== void 0 ? placementThatFitsOnAllSides : placementsSortedByLeastOverflow[0].placement,
+            },
+        };
+    },
+});

package/v2/floating-ui/core/middleware/flip.js

@@ -0,0 +1,82 @@
+import { getOppositePlacement } from '../utils/getOppositePlacement';
+import { getBasePlacement } from '../utils/getBasePlacement';
+import { detectOverflow, } from '../detectOverflow';
+import { getAlignmentSides } from '../utils/getAlignmentSides';
+import { getExpandedPlacements } from '../utils/getExpandedPlacements';
+export const flip = (options = {}) => ({
+    name: 'flip',
+    options,
+    async fn(middlewareArguments) {
+        var _a, _b, _c, _d, _e;
+        const { placement, middlewareData, rects, initialPlacement } = middlewareArguments;
+        if ((_a = middlewareData.flip) === null || _a === void 0 ? void 0 : _a.skip) {
+            return {};
+        }
+        const { mainAxis: checkMainAxis = true, crossAxis: checkCrossAxis = true, fallbackPlacements: specifiedFallbackPlacements, fallbackStrategy = 'bestFit', flipAlignment = true, ...detectOverflowOptions } = options;
+        const basePlacement = getBasePlacement(placement);
+        const isBasePlacement = basePlacement === initialPlacement;
+        const fallbackPlacements = specifiedFallbackPlacements ||
+            (isBasePlacement || !flipAlignment
+                ? [getOppositePlacement(initialPlacement)]
+                : getExpandedPlacements(initialPlacement));
+        const placements = [initialPlacement, ...fallbackPlacements];
+        const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+        const overflows = [];
+        let overflowsData = ((_b = middlewareData.flip) === null || _b === void 0 ? void 0 : _b.overflows) || [];
+        if (checkMainAxis) {
+            overflows.push(overflow[basePlacement]);
+        }
+        if (checkCrossAxis) {
+            const { main, cross } = getAlignmentSides(placement, rects);
+            overflows.push(overflow[main], overflow[cross]);
+        }
+        overflowsData = [...overflowsData, { placement, overflows }];
+        // One or more sides is overflowing
+        if (!overflows.every((side) => side <= 0)) {
+            const nextIndex = ((_d = (_c = middlewareData.flip) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : 0) + 1;
+            const nextPlacement = placements[nextIndex];
+            if (nextPlacement) {
+                // Try next placement and re-run the lifecycle
+                return {
+                    data: {
+                        index: nextIndex,
+                        overflows: overflowsData,
+                    },
+                    reset: {
+                        placement: nextPlacement,
+                    },
+                };
+            }
+            let resetPlacement = 'bottom';
+            switch (fallbackStrategy) {
+                case 'bestFit': {
+                    const placement = (_e = overflowsData
+                        .slice()
+                        .sort((a, b) => a.overflows
+                        .filter((overflow) => overflow > 0)
+                        .reduce((acc, overflow) => acc + overflow, 0) -
+                        b.overflows
+                            .filter((overflow) => overflow > 0)
+                            .reduce((acc, overflow) => acc + overflow, 0))[0]) === null || _e === void 0 ? void 0 : _e.placement;
+                    if (placement) {
+                        resetPlacement = placement;
+                    }
+                    break;
+                }
+                case 'initialPlacement':
+                    resetPlacement = initialPlacement;
+                    break;
+                default:
+            }
+            return {
+                data: {
+                    skip: true,
+                },
+                reset: {
+                    placement: resetPlacement,
+                },
+            };
+        }
+        return {};
+    },
+});

package/v2/floating-ui/core/middleware/hide.js

@@ -0,0 +1,36 @@
+import { basePlacements } from '../enums';
+import { detectOverflow } from '../detectOverflow';
+function getSideOffsets(overflow, rect) {
+    return {
+        top: overflow.top - rect.height,
+        right: overflow.right - rect.width,
+        bottom: overflow.bottom - rect.height,
+        left: overflow.left - rect.width,
+    };
+}
+function isAnySideFullyClipped(overflow) {
+    return basePlacements.some((side) => overflow[side] >= 0);
+}
+export const hide = () => ({
+    name: 'hide',
+    async fn(modifierArguments) {
+        const referenceOverflow = await detectOverflow(modifierArguments, {
+            elementContext: 'reference',
+        });
+        const floatingAltOverflow = await detectOverflow(modifierArguments, {
+            altBoundary: true,
+        });
+        const referenceHiddenOffsets = getSideOffsets(referenceOverflow, modifierArguments.rects.reference);
+        const escapedOffsets = getSideOffsets(floatingAltOverflow, modifierArguments.rects.floating);
+        const referenceHidden = isAnySideFullyClipped(referenceHiddenOffsets);
+        const escaped = isAnySideFullyClipped(escapedOffsets);
+        return {
+            data: {
+                referenceHidden,
+                referenceHiddenOffsets,
+                escaped,
+                escapedOffsets,
+            },
+        };
+    },
+});

package/v2/floating-ui/core/middleware/inline.js

@@ -0,0 +1,100 @@
+import { getBasePlacement } from '../utils/getBasePlacement';
+import { getMainAxisFromPlacement } from '../utils/getMainAxisFromPlacement';
+import { getSideObjectFromPadding } from '../utils/getPaddingObject';
+import { max, min } from '../utils/math';
+import { rectToClientRect } from '../utils/rectToClientRect';
+export const inline = (options = {}) => ({
+    name: 'inline',
+    options,
+    async fn(middlewareArguments) {
+        var _a, _b, _c;
+        const { placement, elements, rects, platform, strategy, middlewareData } = middlewareArguments;
+        // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
+        // ClientRect's bounds, despite the event listener being triggered. A
+        // padding of 2 seems to handle this issue.
+        const { padding = 2, x, y } = options;
+        if ((_a = middlewareData.inline) === null || _a === void 0 ? void 0 : _a.skip) {
+            return {};
+        }
+        const fallback = rectToClientRect(await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+            rect: rects.reference,
+            offsetParent: await platform.getOffsetParent({
+                element: elements.floating,
+            }),
+            strategy,
+        }));
+        const clientRects = Array.from((_c = (await ((_b = platform.getClientRects) === null || _b === void 0 ? void 0 : _b.call(platform, { element: elements.reference })))) !== null && _c !== void 0 ? _c : []);
+        const paddingObject = getSideObjectFromPadding(padding);
+        function getBoundingClientRect() {
+            var _a;
+            // There are two rects and they are disjoined
+            if (clientRects.length === 2 &&
+                clientRects[0].left > clientRects[1].right &&
+                x != null &&
+                y != null) {
+                // Find the first rect in which the point is fully inside
+                return ((_a = clientRects.find((rect) => x > rect.left - paddingObject.left &&
+                    x < rect.right + paddingObject.right &&
+                    y > rect.top - paddingObject.top &&
+                    y < rect.bottom + paddingObject.bottom)) !== null && _a !== void 0 ? _a : fallback);
+            }
+            // There are 2 or more connected rects
+            if (clientRects.length >= 2) {
+                if (getMainAxisFromPlacement(placement) === 'x') {
+                    const firstRect = clientRects[0];
+                    const lastRect = clientRects[clientRects.length - 1];
+                    const isTop = getBasePlacement(placement) === 'top';
+                    const top = firstRect.top;
+                    const bottom = lastRect.bottom;
+                    const left = isTop ? firstRect.left : lastRect.left;
+                    const right = isTop ? firstRect.right : lastRect.right;
+                    const width = right - left;
+                    const height = bottom - top;
+                    return {
+                        top,
+                        bottom,
+                        left,
+                        right,
+                        width,
+                        height,
+                        x: left,
+                        y: top,
+                    };
+                }
+                const isLeftPlacement = getBasePlacement(placement) === 'left';
+                const maxRight = max(...clientRects.map((rect) => rect.right));
+                const minLeft = min(...clientRects.map((rect) => rect.left));
+                const measureRects = clientRects.filter((rect) => isLeftPlacement ? rect.left === minLeft : rect.right === maxRight);
+                const top = measureRects[0].top;
+                const bottom = measureRects[measureRects.length - 1].bottom;
+                const left = minLeft;
+                const right = maxRight;
+                const width = right - left;
+                const height = bottom - top;
+                return {
+                    top,
+                    bottom,
+                    left,
+                    right,
+                    width,
+                    height,
+                    x: left,
+                    y: top,
+                };
+            }
+            return fallback;
+        }
+        return {
+            data: {
+                skip: true,
+            },
+            reset: {
+                rects: await platform.getElementRects({
+                    reference: { getBoundingClientRect },
+                    floating: elements.floating,
+                    strategy,
+                }),
+            },
+        };
+    },
+});