@vue-interface/tooltip 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/tooltip",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "A Vue tooltip component.",
   "readme": "README.md",
   "type": "module",
@@ -45,6 +45,7 @@
     "@floating-ui/dom": "^1.7.2"
   },
   "files": [
+    "src",
     "dist",
     "index.css",
     "README.md",

package/src/Tooltip.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import { arrow, autoUpdate, flip as flipFn, FlipOptions, MaybeElement, offset as offsetFn, OffsetOptions, ReferenceElement, useFloating, UseFloatingOptions } from '@floating-ui/vue';
+import { computed, isRef, onUnmounted, Ref, ref, shallowReadonly, ShallowRef, useTemplateRef, watchEffect } from 'vue';
+
+export type TooltipProps = {
+    title?: string;
+    show?: boolean;
+    target?: Ref<MaybeElement<ReferenceElement>> | ReferenceElement;
+    placement?: UseFloatingOptions['placement'];
+    strategy?: UseFloatingOptions['strategy'];
+    middleware?: (arrow: Readonly<ShallowRef<HTMLDivElement | null>>) => UseFloatingOptions['middleware'];
+    flip?: FlipOptions;
+    offset?: OffsetOptions;
+};
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+    title: undefined,
+    target: undefined,
+    placement: 'top',
+    middleware: undefined,
+    strategy: undefined,
+    flip: undefined,
+    offset: undefined,
+});
+
+defineSlots<{
+    default: () => void
+}>();
+
+const tooltipEl = useTemplateRef<HTMLDivElement>('tooltipEl');
+const arrowEl = useTemplateRef<HTMLDivElement>('arrowEl');
+const isShowing = ref(false);
+const hash = Math.random().toString(36).slice(2, 12);
+
+const targetEl = isRef(props.target)
+    ? props.target
+    : shallowReadonly(ref(props.target));
+
+const id = computed(() => {
+    if(!(targetEl.value instanceof Element)) {
+        return;
+    }
+
+    return targetEl.value.getAttribute('data-tooltip-id');
+});
+
+
+watchEffect(() => {
+    if(!targetEl.value || id.value) {
+        return;
+    }
+
+    if(targetEl.value instanceof Element) {
+        targetEl.value.setAttribute('data-tooltip-id', hash);
+        targetEl.value.addEventListener('mouseover', open);
+        targetEl.value.addEventListener('mouseout', close);
+    }
+});
+
+watchEffect(() => {
+    isShowing.value = props.show;
+});
+
+const dynamicOffset = computed<OffsetOptions>(() => {
+    if(props.offset) {
+        return props.offset;
+    }
+
+    return () => {
+        const { height } = arrowEl.value ? getComputedStyle(arrowEl.value) : { height: '0px' };
+
+        return {
+            mainAxis: parseInt(height.replace('px', '')),
+        };
+    };
+});
+
+const { floatingStyles, middlewareData, placement } = useFloating(targetEl, tooltipEl, {
+    placement: props.placement,
+    middleware: props.middleware?.(arrowEl) ?? [
+        flipFn(props.flip),
+        offsetFn(dynamicOffset.value),
+        arrow({
+            element: arrowEl
+        }),
+    ],
+    whileElementsMounted: autoUpdate
+});
+
+const tooltipClasses = computed(() => {
+    return {
+        show: isShowing.value
+    };
+});
+
+type Side = 'bottom' | 'left' | 'top' | 'right';
+
+const side = computed(() => placement.value.split('-')[0] as Side);
+
+const arrowPosition = computed(() => {
+    return {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+    }[side.value] as Side;
+});
+
+const arrowRotation = computed<Record<Side,string>>(() => ({
+    top: 'rotate(225deg)',
+    right: 'rotate(-45deg)',
+    bottom: 'rotate(45deg)',
+    left: 'rotate(135deg)',
+}));
+
+function open() {
+    isShowing.value = true;
+}
+
+function close() {
+    isShowing.value = false;
+}
+
+onUnmounted(() => {
+    if(targetEl.value instanceof Element) {
+        targetEl.value.removeAttribute('data-tooltip-id');
+    }
+});
+
+defineExpose({
+    open,
+    close,
+    tooltipEl,
+    arrowEl,
+    isShowing,
+    hash,
+});
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            ref="tooltipEl"
+            class="tooltip"
+            role="tooltip"
+            :data-tooltip-id="hash"
+            :class="tooltipClasses"
+            :style="floatingStyles">
+            <div
+                ref="arrowEl"
+                class="tooltip-arrow"
+                :style="{
+                    transform: arrowRotation[arrowPosition],
+                    ...Object.assign({
+                        left:
+                            middlewareData.arrow?.x != null
+                                ? `${middlewareData.arrow.x}px`
+                                : '',
+                        top:
+                            middlewareData.arrow?.y != null
+                                ? `${middlewareData.arrow.y}px`
+                                : ''
+                    }, {
+                        [arrowPosition]: `calc(${-(arrowEl?.offsetWidth ?? 0) / 2}px)`
+                    })
+                }" />
+            <div
+                ref="inner"
+                class="tooltip-inner">
+                <slot>{{ title }}</slot>
+            </div>
+        </div>
+    </Teleport>
+</template>

package/src/TooltipPlugin.ts

@@ -0,0 +1,137 @@
+import { h, render, type App, type Directive } from 'vue';
+import Tooltip, { type TooltipProps } from './Tooltip.vue';
+
+const prefix = 'data-tooltip';
+const prefixRegExp = new RegExp(`^${prefix}\-`);
+
+function getAttributes(el: Element): Record<string,string> {
+    return Array.from(el.attributes)
+        .map(a => [a.name, a.value])
+        .filter(([key]) => key === 'title' || key.match(prefixRegExp))
+        .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])
+        .reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});
+}
+
+function createTooltip(target: Element, props?: TooltipProps) {
+    const container = document.createElement('template');
+    
+    const vnode = h(Tooltip, Object.assign({
+        target
+    }, getAttributes(target), props));
+
+    render(vnode, container);
+
+    const title = target.getAttribute('title');
+
+    if(title) {
+        target.setAttribute(`${prefix}-og-title`, title);
+        target.removeAttribute('title');
+    }
+
+    return () => {
+        if(vnode.component) {
+            vnode.component.exposed?.tooltipEl.value?.remove();
+        }
+    };
+}
+
+function destroyTooltip(target: Element) {
+    const tooltips = document.querySelectorAll(
+        `[${prefix}-id="${target.getAttribute(`${prefix}-id`)}"]`
+    );
+
+    for(const tooltip of tooltips) {
+        tooltip.remove();
+    }
+
+    target.removeAttribute(`${prefix}-id`);
+
+    const title = target.getAttribute(`${prefix}-og-title`);
+
+    if(title) {
+        target.setAttribute('title', title);
+    }
+}
+
+function shouldCreateTooltip(target: Node): target is Element {
+    if(!(target instanceof Element)) {
+        return false;
+    }
+
+    const attrs = getAttributes(target);
+
+    return !attrs.id && !!attrs.title;
+}
+
+function shouldRemoveTooltip(target: Node): target is Element {
+    if(!(target instanceof Element)) {
+        return false;
+    }
+
+    return target.hasAttribute(`${prefix}-id`);
+}
+
+export const TooltipDirective: Directive<Element, string|TooltipProps> =  {
+    beforeMount(target, binding) {
+        createTooltip(target, typeof binding.value === 'string' ? {
+            title: binding.value
+        }: binding.value);
+    },
+    beforeUnmount(target) {
+        destroyTooltip(target);
+    }
+};
+
+export function TooltipPlugin(app: App<Element>) {
+    app.mixin({
+        beforeMount() {
+            const observer = new MutationObserver((mutations) => {
+                for(const { addedNodes, removedNodes } of mutations) {
+                    addedNodes.forEach((node) => {
+                        if(shouldCreateTooltip(node)) {
+                            createTooltip(node);
+                        }
+                    });
+
+                    removedNodes.forEach((node) => {
+                        if(shouldRemoveTooltip(node)) {
+                            destroyTooltip(node);
+                        }
+                    });
+                }
+            });
+      
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        },
+        mounted() {
+            let el = this.$el;
+
+            if(this.$el instanceof Text) {
+                el = this.$el.parentNode;
+            }
+
+            const walker = document.createTreeWalker(
+                el,
+                NodeFilter.SHOW_ALL,
+                (node: Node) => {
+                    if(!(node instanceof Element)) {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                    
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+            );
+
+            while(walker.nextNode()) {
+                if(shouldCreateTooltip(walker.currentNode)) {
+                    createTooltip(walker.currentNode);
+                }
+            }
+        }
+    });
+
+    app.directive<Element, string|TooltipProps>('tooltip', TooltipDirective);
+}