cbvirtua 1.0.3 → 1.0.5

package/floating/components/PopperMethods.js

@@ -0,0 +1,17 @@
+// @vue/component
+export default {
+    methods: {
+        show(...args) {
+            return this.$refs.popper.show(...args);
+        },
+        hide(...args) {
+            return this.$refs.popper.hide(...args);
+        },
+        dispose(...args) {
+            return this.$refs.popper.dispose(...args);
+        },
+        onResize(...args) {
+            return this.$refs.popper.onResize(...args);
+        },
+    },
+};

package/floating/components/ThemeClass.js

@@ -0,0 +1,9 @@
+import { getThemeClasses } from '../config';
+// @vue/component
+export default {
+    computed: {
+        themeClass() {
+            return getThemeClasses(this.theme);
+        },
+    },
+};

package/floating/config.js

@@ -0,0 +1,133 @@
+export const config = {
+    // Disable popper components
+    disabled: false,
+    // Default position offset along main axis (px)
+    distance: 5,
+    // Default position offset along cross axis (px)
+    skidding: 0,
+    // Default container where the tooltip will be appended
+    container: 'body',
+    // Element used to compute position and size boundaries
+    boundary: undefined,
+    // Skip delay & CSS transitions when another popper is shown, so that the popper appear to instanly move to the new position.
+    instantMove: false,
+    // Auto destroy tooltip DOM nodes (ms)
+    disposeTimeout: 5000,
+    // Triggers on the popper itself
+    popperTriggers: [],
+    // Positioning strategy
+    strategy: 'absolute',
+    // Prevent overflow
+    preventOverflow: true,
+    // Flip to the opposite placement if needed
+    flip: true,
+    // Shift on the cross axis to prevent the popper from overflowing
+    shift: true,
+    // Overflow padding (px)
+    overflowPadding: 0,
+    // Arrow padding (px)
+    arrowPadding: 0,
+    // Compute arrow overflow (useful to hide it)
+    arrowOverflow: true,
+    // Themes
+    themes: {
+        tooltip: {
+            // Default tooltip placement relative to target element
+            placement: 'top',
+            // Default events that trigger the tooltip
+            triggers: ['hover', 'focus', 'touch'],
+            // Close tooltip on click on tooltip target
+            hideTriggers: events => [...events, 'click'],
+            // Delay (ms)
+            delay: {
+                show: 200,
+                hide: 0,
+            },
+            // Update popper on content resize
+            handleResize: false,
+            // Enable HTML content in directive
+            html: false,
+            // Displayed when tooltip content is loading
+            loadingContent: '...',
+        },
+        dropdown: {
+            // Default dropdown placement relative to target element
+            placement: 'bottom',
+            // Default events that trigger the dropdown
+            triggers: ['click'],
+            // Delay (ms)
+            delay: 0,
+            // Update popper on content resize
+            handleResize: true,
+            // Hide on clock outside
+            autoHide: true,
+        },
+        menu: {
+            $extend: 'dropdown',
+            triggers: ['hover', 'focus'],
+            popperTriggers: ['hover', 'focus'],
+            delay: {
+                show: 0,
+                hide: 400,
+            },
+        },
+    },
+};
+/**
+ * Get default config value depending on theme
+ */
+export function getDefaultConfig(theme, key) {
+    let themeConfig = config.themes[theme] || {};
+    let value;
+    do {
+        value = themeConfig[key];
+        if (typeof value === 'undefined') {
+            // Support theme extend
+            if (themeConfig.$extend) {
+                themeConfig = config.themes[themeConfig.$extend] || {};
+            }
+            else {
+                // Base config
+                themeConfig = null;
+                value = config[key];
+            }
+        }
+        else {
+            themeConfig = null;
+        }
+    } while (themeConfig);
+    return value;
+}
+/**
+ * Theme CSS inheritance
+ */
+export function getThemeClasses(theme) {
+    const result = [theme];
+    let themeConfig = config.themes[theme] || {};
+    do {
+        // Support theme extend
+        if (themeConfig.$extend && !themeConfig.$resetCss) {
+            result.push(themeConfig.$extend);
+            themeConfig = config.themes[themeConfig.$extend] || {};
+        }
+        else {
+            themeConfig = null;
+        }
+    } while (themeConfig);
+    return result.map(c => `v-popper--theme-${c}`);
+}
+export function getAllParentThemes(theme) {
+    const result = [theme];
+    let themeConfig = config.themes[theme] || {};
+    do {
+        // Support theme extend
+        if (themeConfig.$extend) {
+            result.push(themeConfig.$extend);
+            themeConfig = config.themes[themeConfig.$extend] || {};
+        }
+        else {
+            themeConfig = null;
+        }
+    } while (themeConfig);
+    return result;
+}

package/floating/demo/TestDropdown.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="meow">
+    <VDropdown
+      :triggers="['hover']"
+      :popper-triggers="['hover']"
+    >
+      <button>Meow</button>
+
+      <template #popper>
+        Menu
+      </template>
+    </VDropdown>
+  </div>
+</template>
+
+<style scoped>
+.meow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/floating/demo/TestSubMenu.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="example flex justify-center items-center gap-6">
+    <VMenu placement="bottom-start">
+      <button class="border border-gray-300 rounded px-4 py-2">
+        Hover me
+      </button>
+
+      <template #popper>
+        <div class="px-4 py-1">
+          Sub menus:
+        </div>
+
+        <VMenu
+          v-for="n in 5"
+          :key="n"
+          placement="right-start"
+          instant-move
+        >
+          <button class="rounded hover:bg-green-100 px-4 py-2">
+            Sub menu >
+          </button>
+
+          <template #popper>
+            <VMenu
+              v-for="n in 5"
+              :key="n"
+              placement="right-start"
+              instant-move
+            >
+              <button class="rounded hover:bg-green-100 px-4 py-2">
+                Option {{ n }} >
+              </button>
+
+              <template #popper>
+                <div class="px-6 py-2">
+                  Hello
+                </div>
+              </template>
+            </VMenu>
+          </template>
+        </VMenu>
+      </template>
+    </VMenu>
+
+    <VDropdown placement="bottom-start">
+      <button class="border border-gray-300 rounded px-4 py-2">
+        Click me
+      </button>
+
+      <template #popper>
+        <div class="px-4 py-1">
+          Sub menus:
+        </div>
+
+        <VDropdown
+          v-for="n in 5"
+          :key="n"
+          placement="right-start"
+          instant-move
+        >
+          <button class="rounded hover:bg-green-100 px-4 py-2">
+            Sub menu >
+          </button>
+
+          <template #popper>
+            <VDropdown
+              v-for="n in 5"
+              :key="n"
+              placement="right-start"
+              instant-move
+            >
+              <button class="rounded hover:bg-green-100 px-4 py-2">
+                Option {{ n }} >
+              </button>
+
+              <template #popper>
+                <div class="px-6 py-2">
+                  Hello
+                </div>
+              </template>
+            </VDropdown>
+          </template>
+        </VDropdown>
+      </template>
+    </VDropdown>
+  </div>
+</template>

package/floating/demo/TestTooltip.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="meow">
+    <button
+      v-tooltip="{
+        content: 'Tooltip',
+        triggers: ['hover'],
+        popperTriggers: ['hover'],
+      }"
+    >Meow</button>
+  </div>
+</template>
+
+<style scoped>
+.meow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/floating/directives/v-close-popper.js

@@ -0,0 +1,67 @@
+import { supportsPassive } from '../util/env';
+function addListeners(el) {
+    el.addEventListener('click', onClick);
+    el.addEventListener('touchstart', onTouchStart, supportsPassive
+        ? {
+            passive: true,
+        }
+        : false);
+}
+function removeListeners(el) {
+    el.removeEventListener('click', onClick);
+    el.removeEventListener('touchstart', onTouchStart);
+    el.removeEventListener('touchend', onTouchEnd);
+    el.removeEventListener('touchcancel', onTouchCancel);
+}
+function onClick(event) {
+    const el = event.currentTarget;
+    event.closePopover = !el.$_vclosepopover_touch;
+    event.closeAllPopover = el.$_closePopoverModifiers && !!el.$_closePopoverModifiers.all;
+}
+function onTouchStart(event) {
+    if (event.changedTouches.length === 1) {
+        const el = event.currentTarget;
+        el.$_vclosepopover_touch = true;
+        const touch = event.changedTouches[0];
+        el.$_vclosepopover_touchPoint = touch;
+        el.addEventListener('touchend', onTouchEnd);
+        el.addEventListener('touchcancel', onTouchCancel);
+    }
+}
+function onTouchEnd(event) {
+    const el = event.currentTarget;
+    el.$_vclosepopover_touch = false;
+    if (event.changedTouches.length === 1) {
+        const touch = event.changedTouches[0];
+        const firstTouch = el.$_vclosepopover_touchPoint;
+        event.closePopover = (Math.abs(touch.screenY - firstTouch.screenY) < 20 &&
+            Math.abs(touch.screenX - firstTouch.screenX) < 20);
+        event.closeAllPopover = el.$_closePopoverModifiers && !!el.$_closePopoverModifiers.all;
+    }
+}
+function onTouchCancel(event) {
+    const el = event.currentTarget;
+    el.$_vclosepopover_touch = false;
+}
+export default {
+    bind(el, { value, modifiers }) {
+        el.$_closePopoverModifiers = modifiers;
+        if (typeof value === 'undefined' || value) {
+            addListeners(el);
+        }
+    },
+    update(el, { value, oldValue, modifiers }) {
+        el.$_closePopoverModifiers = modifiers;
+        if (value !== oldValue) {
+            if (typeof value === 'undefined' || value) {
+                addListeners(el);
+            }
+            else {
+                removeListeners(el);
+            }
+        }
+    },
+    unbind(el) {
+        removeListeners(el);
+    },
+};

package/floating/directives/v-tooltip.js

@@ -0,0 +1,116 @@
+import Vue from 'vue';
+import TooltipDirective from '../components/TooltipDirective.vue';
+import { getDefaultConfig } from '../config';
+import PopperMethods from '../components/PopperMethods';
+import { placements } from '../util/popper';
+const TARGET_CLASS = 'v-popper--has-tooltip';
+/**
+ * Support placement as directive modifier
+ */
+export function getPlacement(options, modifiers) {
+    let result = options.placement;
+    if (!result && modifiers) {
+        for (const pos of placements) {
+            if (modifiers[pos]) {
+                result = pos;
+            }
+        }
+    }
+    if (!result) {
+        result = getDefaultConfig(options.theme || 'tooltip', 'placement');
+    }
+    return result;
+}
+export function getOptions(el, value, modifiers) {
+    let options;
+    const type = typeof value;
+    if (type === 'string') {
+        options = { content: value };
+    }
+    else if (value && type === 'object') {
+        options = value;
+    }
+    else {
+        options = { content: false };
+    }
+    options.placement = getPlacement(options, modifiers);
+    options.targetNodes = () => [el];
+    options.referenceNode = () => el;
+    return options;
+}
+export function createTooltip(el, value, modifiers) {
+    const options = getOptions(el, value, modifiers);
+    const tooltipApp = el.$_popper = new Vue({
+        mixins: [
+            PopperMethods,
+        ],
+        data() {
+            return {
+                options,
+            };
+        },
+        render(h) {
+            const { theme, html, content, loadingContent, ...otherOptions } = this.options;
+            return h(TooltipDirective, {
+                props: {
+                    theme,
+                    html,
+                    content,
+                    loadingContent,
+                },
+                attrs: otherOptions,
+                ref: 'popper',
+            });
+        },
+        // @ts-expect-error custom option
+        devtools: {
+            hide: true,
+        },
+    });
+    const mountTarget = document.createElement('div');
+    document.body.appendChild(mountTarget);
+    tooltipApp.$mount(mountTarget);
+    // Class on target
+    if (el.classList) {
+        el.classList.add(TARGET_CLASS);
+    }
+    return tooltipApp;
+}
+export function destroyTooltip(el) {
+    if (el.$_popper) {
+        el.$_popper.$destroy();
+        delete el.$_popper;
+        delete el.$_popperOldShown;
+    }
+    if (el.classList) {
+        el.classList.remove(TARGET_CLASS);
+    }
+}
+export function bind(el, { value, oldValue, modifiers }) {
+    const options = getOptions(el, value, modifiers);
+    if (!options.content || getDefaultConfig(options.theme || 'tooltip', 'disabled')) {
+        destroyTooltip(el);
+    }
+    else {
+        let tooltipApp;
+        if (el.$_popper) {
+            tooltipApp = el.$_popper;
+            tooltipApp.options = options;
+        }
+        else {
+            tooltipApp = createTooltip(el, value, modifiers);
+        }
+        // Manual show
+        if (typeof value.shown !== 'undefined' && value.shown !== el.$_popperOldShown) {
+            el.$_popperOldShown = value.shown;
+            value.shown ? tooltipApp.show() : tooltipApp.hide();
+        }
+    }
+}
+export default {
+    bind,
+    update: bind,
+    unbind(el) {
+        destroyTooltip(el);
+    },
+};

package/floating/directives/v-tooltip.spec.js

@@ -0,0 +1,28 @@
+import { describe, test, expect } from '@peeky/test';
+import * as VTooltip from './v-tooltip';
+describe('getPlacement', () => {
+    test('object notation', () => {
+        const value = {
+            placement: 'bottom',
+        };
+        const modifiers = {};
+        const result = VTooltip.getPlacement(value, modifiers);
+        expect(result).toBe('bottom');
+    });
+    test('modifier', () => {
+        const value = {};
+        const modifiers = {
+            'top-end': true,
+        };
+        const result = VTooltip.getPlacement(value, modifiers);
+        expect(result).toBe('top-end');
+    });
+    test('invalid modifier', () => {
+        const value = {};
+        const modifiers = {
+            'left-middle': true,
+        };
+        const result = VTooltip.getPlacement(value, modifiers);
+        expect(result).toBe('top');
+    });
+});

package/floating/index.js

@@ -0,0 +1,74 @@
+import { assign } from './util/assign-deep';
+import { config } from './config';
+import 'vue-resize/dist/vue-resize.css';
+// Components
+import PrivateDropdown from './components/Dropdown.vue';
+import PrivateMenu from './components/Menu.vue';
+import PrivatePopper from './components/Popper';
+import PrivatePopperContent from './components/PopperContent.vue';
+import PrivatePopperMethods from './components/PopperMethods';
+import PrivatePopperWrapper from './components/PopperWrapper.vue';
+import PrivateThemeClass from './components/ThemeClass';
+import PrivateTooltip from './components/Tooltip.vue';
+import PrivateTooltipDirective from './components/TooltipDirective.vue';
+// Directives
+import PrivateVTooltip from './directives/v-tooltip';
+import PrivateVClosePopper from './directives/v-close-popper';
+/* Exports */
+export const options = config;
+// Directive
+export const VTooltip = PrivateVTooltip;
+export { createTooltip, destroyTooltip } from './directives/v-tooltip';
+export const VClosePopper = PrivateVClosePopper;
+// Components
+export const Dropdown = PrivateDropdown;
+export const Menu = PrivateMenu;
+export const Popper = PrivatePopper;
+export const PopperContent = PrivatePopperContent;
+export const PopperMethods = PrivatePopperMethods;
+export const PopperWrapper = PrivatePopperWrapper;
+export const ThemeClass = PrivateThemeClass;
+export const Tooltip = PrivateTooltip;
+export const TooltipDirective = PrivateTooltipDirective;
+// Utils
+export { hideAllPoppers } from './components/Popper';
+export * from './util/events';
+export { placements } from './util/popper';
+/* Vue plugin */
+export function install(app, options = {}) {
+    if (app.$_vTooltipInstalled)
+        return;
+    app.$_vTooltipInstalled = true;
+    assign(config, options);
+    // Directive
+    app.directive('tooltip', PrivateVTooltip);
+    app.directive('close-popper', PrivateVClosePopper);
+    // Components
+    // eslint-disable-next-line vue/component-definition-name-casing
+    app.component('v-tooltip', PrivateTooltip);
+    app.component('VTooltip', PrivateTooltip);
+    // eslint-disable-next-line vue/component-definition-name-casing
+    app.component('v-dropdown', PrivateDropdown);
+    app.component('VDropdown', PrivateDropdown);
+    // eslint-disable-next-line vue/component-definition-name-casing
+    app.component('v-menu', PrivateMenu);
+    app.component('VMenu', PrivateMenu);
+}
+const plugin = {
+    // eslint-disable-next-line no-undef
+    version: VERSION,
+    install,
+    options: config,
+};
+// Auto-install
+let GlobalVue = null;
+if (typeof window !== 'undefined') {
+    GlobalVue = window.Vue;
+}
+else if (typeof global !== 'undefined') {
+    GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+    GlobalVue.use(plugin);
+}
+export default plugin;

package/floating/util/assign-deep.js

@@ -0,0 +1,12 @@
+export function assign(to, from) {
+    for (const key in from) {
+        if (Object.prototype.hasOwnProperty.call(from, key)) {
+            if (typeof from[key] === 'object' && to[key]) {
+                assign(to[key], from[key]);
+            }
+            else {
+                to[key] = from[key];
+            }
+        }
+    }
+}

package/floating/util/env.js

@@ -0,0 +1,18 @@
+export let supportsPassive = false;
+if (typeof window !== 'undefined') {
+    supportsPassive = false;
+    try {
+        const opts = Object.defineProperty({}, 'passive', {
+            get() {
+                supportsPassive = true;
+            },
+        });
+        window.addEventListener('test', null, opts);
+    }
+    catch (e) { }
+}
+export let isIOS = false;
+if (typeof window !== 'undefined' && typeof navigator !== 'undefined') {
+    // @ts-expect-error MSStream is missing in window type
+    isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+}

package/floating/util/events.js

@@ -0,0 +1,12 @@
+export const SHOW_EVENT_MAP = {
+    hover: 'mouseenter',
+    focus: 'focus',
+    click: 'click',
+    touch: 'touchstart',
+};
+export const HIDE_EVENT_MAP = {
+    hover: 'mouseleave',
+    focus: 'blur',
+    click: 'click',
+    touch: 'touchend',
+};

package/floating/util/frame.js

@@ -0,0 +1,5 @@
+export function nextFrame() {
+    return new Promise(resolve => requestAnimationFrame(() => {
+        requestAnimationFrame(resolve);
+    }));
+}

package/floating/util/lang.js

@@ -0,0 +1,6 @@
+export function removeFromArray(array, item) {
+    const index = array.indexOf(item);
+    if (index !== -1) {
+        array.splice(index, 1);
+    }
+}

package/floating/util/popper.js

@@ -0,0 +1,5 @@
+export const placements = ['auto', 'top', 'bottom', 'left', 'right'].reduce((acc, base) => acc.concat([
+    base,
+    `${base}-start`,
+    `${base}-end`,
+]), []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "",
   "main": "index.js",
   "scripts": {