@phila/phila-ui-tooltip 0.0.14 → 0.1.0-beta.0

package/README.md

@@ -1,27 +1,81 @@
-## Notes
+# Tooltip Component
 
-The tooltip is positioned according to the space available on the screen. On mobile the tooltip is enabled on tap, and an X is shown to allow users to close it.
+<!-- status-badge-start -->
 
-## Code Samples
+![Status: In Progress](https://img.shields.io/badge/-In%20Progress-yellow)
 
-### Basic tooltip with dark mode enabled (default)
+<!-- status-badge-end -->
 
-```html
-<tooltip message="My tooltip message" />
+A simple, customizable Vue 3. Tooltip component built with TypeScript and Vite.
+Tooltip component for displaying simple or rich content on hover of an element
+
+## Features
+
+- 🎯 TypeScript support with full type definitions
+
+## Installation
+
+```bash
+npm install @phila/phila-ui-tooltip
+# or
+yarn add @phila/phila-ui-tooltip
+# or
+pnpm add @phila/phila-ui-tooltip
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Tooltip } from "@phila/phila-ui-tooltip";
+</script>
+<template>...Add basic component template here...</template>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+
+| ...Add props here...
+
+## Events
+
+| Event | Payload | Description |
+| ----- | ------- | ----------- |
+
+| ...Add events here...
+
+## Examples
+
+...Add examples here...
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
 ```
 
-### Basic tooltip with light mode enabled
+### Run Demo
 
-```html
-<tooltip message="My tooltip message" mode="light" />
+```bash
+pnpm dev
 ```
 
-## Live Examples
+### Build Library
 
-### Basic tooltip with dark mode enabled (default)
+```bash
+pnpm build
+```
 
-<example name="Tooltip1" height="300"></example>
+### Type Check
+
+```bash
+pnpm type-check
+```
 
-### Basic tooltip with light mode enabled
+## License
 
-<example name="Tooltip2" height="300"></example>
+MIT

package/dist/Tooltip.vue.d.ts

@@ -1,36 +1,34 @@
-import { TooltipProps } from './types';
-
+import { TooltipProps, TooltipPlacement } from './index';
 declare function __VLS_template(): {
-    default?(_: {}): any;
-};
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TooltipProps>, {
-    mode: string;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TooltipProps>, {
-    mode: string;
-}>>> & Readonly<{}>, {
-    mode: "light" | "dark";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            tooltipId: string;
+        }): any;
+        body?(_: {}): any;
     };
+    refs: {
+        wrapperEl: HTMLSpanElement;
+        positionerEl: HTMLSpanElement;
+    };
+    rootEl: any;
 };
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<TooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
+    type: import('./index').TooltipType;
+    color: import('./index').TooltipColor;
+    tail: boolean;
+    placement: TooltipPlacement;
+    trigger: import('./index').TooltipTrigger;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    wrapperEl: HTMLSpanElement;
+    positionerEl: HTMLSpanElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+//# sourceMappingURL=Tooltip.vue.d.ts.map

package/dist/Tooltip.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.vue.d.ts","sourceRoot":"","sources":["../src/Tooltip.vue"],"names":[],"mappings":"AA8KA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2F9D,iBAAS,cAAc;WAgFT,OAAO,IAA6B;;;;YAbrB,GAAG;sBACN,GAAG;;;;;;;EAiB5B;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;OAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/TooltipBubble.vue.d.ts

@@ -0,0 +1,33 @@
+import { TooltipBubbleProps } from './index';
+interface BubbleProps extends TooltipBubbleProps {
+    id?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<BubbleProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    dismiss: () => any;
+}, string, import('vue').PublicProps, Readonly<BubbleProps> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+}>, {
+    type: import('./index').TooltipType;
+    color: import('./index').TooltipColor;
+    tail: boolean;
+    placement: import('./index').TooltipPlacement;
+    dismissable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TooltipBubble.vue.d.ts.map

package/dist/TooltipBubble.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipBubble.vue.d.ts","sourceRoot":"","sources":["../src/TooltipBubble.vue"],"names":[],"mappings":"AAsLA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAmCD,iBAAS,cAAc;WAwIT,OAAO,IAA6B;;yBAXrB,GAAG;yBACF,GAAG;;;;EAehC;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;wFASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.css

@@ -0,0 +1 @@
+.tooltip[data-v-0155bbdd]{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;border-radius:var(--border-radius-xs);filter:drop-shadow(0px 1px 2px rgba(0,0,0,.3)) drop-shadow(0px 1px 3px rgba(0,0,0,.15));--tooltip-bg: var(--Schemes-On-Primary);background-color:var(--tooltip-bg);color:var(--Schemes-On-Background)}.tooltip.tooltip--grey[data-v-0155bbdd]{--tooltip-bg: var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-On-Surface)}.tooltip.tooltip--plain[data-v-0155bbdd]{--tail-height: 10px;padding:var(--spacing-2xs) var(--spacing-xs);justify-content:center}.tooltip.tooltip--rich[data-v-0155bbdd]{--tail-height: 12px;padding:var(--spacing-s) var(--spacing-m);width:max-content;min-width:11.25rem;max-width:25rem;gap:var(--spacing-xs)}.tooltip .tooltip__tail[data-v-0155bbdd]{position:absolute;width:20px;height:var(--tail-height);background-color:var(--tooltip-bg)}.tooltip.tooltip--top-left .tooltip__tail[data-v-0155bbdd],.tooltip.tooltip--top-right .tooltip__tail[data-v-0155bbdd],.tooltip.tooltip--top-center .tooltip__tail[data-v-0155bbdd]{clip-path:polygon(0 0,100% 0,50% 100%);bottom:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--bottom-left .tooltip__tail[data-v-0155bbdd],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-0155bbdd],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-0155bbdd]{clip-path:polygon(50% 0,0 100%,100% 100%);top:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--top-left .tooltip__tail[data-v-0155bbdd],.tooltip.tooltip--bottom-left .tooltip__tail[data-v-0155bbdd]{left:8px}.tooltip.tooltip--top-right .tooltip__tail[data-v-0155bbdd],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-0155bbdd]{right:8px}.tooltip.tooltip--top-center .tooltip__tail[data-v-0155bbdd],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-0155bbdd]{left:50%;transform:translate(-50%)}.tooltip__plain-row[data-v-0155bbdd],.tooltip__title-row[data-v-0155bbdd]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-xs);width:100%}.tooltip__title-row h6[data-v-0155bbdd]{flex:1}.tooltip__dismiss[data-v-0155bbdd]{margin-left:auto;flex-shrink:0}.tooltip-trigger[data-v-5dcd06cf]{position:relative;display:inline-block}.tooltip-trigger__positioner[data-v-5dcd06cf]{position:absolute;z-index:1000}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-left[data-v-5dcd06cf]{bottom:100%;left:-8px;padding-bottom:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-right[data-v-5dcd06cf]{bottom:100%;right:-8px;padding-bottom:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-center[data-v-5dcd06cf]{bottom:100%;left:50%;transform:translate(-50%);padding-bottom:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-left[data-v-5dcd06cf]{top:100%;left:-8px;padding-top:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-right[data-v-5dcd06cf]{top:100%;right:-8px;padding-top:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-center[data-v-5dcd06cf]{top:100%;left:50%;transform:translate(-50%);padding-top:var(--positioner-gap)}

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import { BaseProps } from '@phila/phila-ui-core';
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipBubble } from './TooltipBubble.vue';
+export type TooltipType = "plain" | "rich";
+export type TooltipColor = "default" | "grey";
+export type TooltipTrigger = "hover" | "click";
+/** Placement of the bubble relative to the trigger element. Use `"auto"` to detect based on available viewport space. */
+export type TooltipPlacement = "auto" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface TooltipBubbleProps extends BaseProps {
+    /** Plain tooltips show a single line of text. Rich tooltips can include a title, tag, body, and actions. */
+    type?: TooltipType;
+    /** White (default) or grey surface background. */
+    color?: TooltipColor;
+    /** Whether to show the directional tail pointer. */
+    tail?: boolean;
+    /** Where the bubble appears relative to the trigger. Only used when `tail` is true. */
+    placement?: TooltipPlacement;
+    /** Title text shown at the top of a rich tooltip. */
+    title?: string;
+    /** When true, renders an X button that emits `dismiss`. Primarily used with `trigger="click"`. */
+    dismissable?: boolean;
+}
+export interface TooltipProps extends TooltipBubbleProps {
+    /** How the tooltip is triggered. `"hover"` shows on mouseenter/focus; `"click"` toggles on click. */
+    trigger?: TooltipTrigger;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAC/C,yHAAyH;AACzH,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,4GAA4G;IAC5G,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uFAAuF;IACvF,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD,qGAAqG;IACrG,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),d=require("@phila/phila-ui-core"),z=["disabled"],y=e.defineComponent({inheritAttrs:!1,__name:"PhlButton",props:{href:{},to:{},target:{},rel:{},disabled:{type:Boolean,default:!1},clickTarget:{},variant:{default:"primary"},size:{default:"medium"},iconOnly:{type:Boolean,default:!1},iconRight:{type:Boolean},text:{},className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{}},setup(o){const t=o,a=l=>"href"in l&&l.href!==void 0||"to"in l&&l.to!==void 0,i=e.computed(()=>d.cn("phila-button",`phila-button--${t.variant}`,t.size&&`is-${t.size}`,t.iconOnly&&"icon-button",t.iconOnly&&t.variant==="standard"&&"icon-button--standard",t.className)),n=e.computed(()=>a(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:i.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:i.value}:{}),r=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,iconRight:t.iconRight,iconOnly:t.iconOnly,text:t.text,size:t.size}));return(l,m)=>a(t)?(e.openBlock(),e.createBlock(e.unref(d.BaseLink),e.mergeProps({key:0},{...n.value,...l.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(d.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:t.disabled,class:i.value},l.$attrs),[e.createVNode(e.unref(d.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,z))}});var B={prefix:"fas",iconName:"xmark",icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]};const P=["id"],S={key:0,class:"tooltip__tail","aria-hidden":"true"},V={key:1,class:"tooltip__plain-row has-text-body-small"},T={key:0,class:"tooltip__title-row"},D={key:0},L=e.defineComponent({__name:"TooltipBubble",props:{id:{},type:{default:"plain"},color:{default:"default"},tail:{type:Boolean,default:!1},placement:{default:"top-center"},title:{},dismissable:{type:Boolean,default:!1},className:{}},emits:["dismiss"],setup(o){const t=o,a=e.computed(()=>d.cn("tooltip","content","resets-link-colors",`tooltip--${t.type}`,`tooltip--${t.color}`,t.tail&&`tooltip--${t.placement}`,t.className));return(i,n)=>(e.openBlock(),e.createElementBlock("div",{id:o.id,class:e.normalizeClass(a.value),role:"tooltip"},[o.tail?(e.openBlock(),e.createElementBlock("div",S)):e.createCommentVNode("",!0),o.type==="plain"?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(i.$slots,"default",{},void 0,!0),o.dismissable?(e.openBlock(),e.createBlock(e.unref(y),{key:0,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,"icon-definition":e.unref(B),"aria-label":"Dismiss tooltip",onClick:n[0]||(n[0]=r=>i.$emit("dismiss"))},null,8,["icon-definition"])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[o.title||o.dismissable?(e.openBlock(),e.createElementBlock("div",T,[o.title?(e.openBlock(),e.createElementBlock("h6",D,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),o.dismissable?(e.openBlock(),e.createBlock(e.unref(y),{key:1,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,"icon-definition":e.unref(B),"aria-label":"Dismiss tooltip",onClick:n[1]||(n[1]=r=>i.$emit("dismiss"))},null,8,["icon-definition"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default",{},void 0,!0)],64))],10,P))}}),h=(o,t)=>{const a=o.__vccOpts||o;for(const[i,n]of t)a[i]=n;return a},C=h(L,[["__scopeId","data-v-0155bbdd"]]),R=e.defineComponent({__name:"Tooltip",props:{trigger:{default:"hover"},type:{default:"plain"},color:{default:"default"},tail:{type:Boolean,default:!1},placement:{default:"auto"},title:{},dismissable:{type:Boolean},className:{}},setup(o){const t=o,a=e.useId(),i=e.ref(!1),n=e.ref(null),r=e.ref(null),l=e.ref("top-center"),m=()=>{const s=n.value?.getBoundingClientRect();if(!s)return"top-center";const{innerWidth:u,innerHeight:N}=window,k=s.top,_=N-s.bottom,b=r.value?.firstElementChild?.getBoundingClientRect().height??0,w=(b>0?k>=b:k>=_)?"top":"bottom",g=s.left+s.width/2,x=g<u/3?"left":g>u*2/3?"right":"center";return`${w}-${x}`},f=s=>{s.key==="Escape"&&c()},v=s=>{n.value&&!n.value.contains(s.target)&&c()},p=()=>{t.placement==="auto"?l.value=m():l.value=t.placement,i.value=!0,document.addEventListener("keydown",f),t.trigger==="click"&&document.addEventListener("click",v)},c=()=>{i.value=!1,document.removeEventListener("keydown",f),document.removeEventListener("click",v)},$=()=>{i.value?c():p()};e.onUnmounted(c);const E=e.computed(()=>({type:t.type,color:t.color,tail:t.tail,placement:l.value,title:t.title,dismissable:t.dismissable}));return(s,u)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({ref_key:"wrapperEl",ref:n,class:e.unref(d.cn)("tooltip-trigger",t.className)},o.trigger==="click"?{onClick:$}:{onMouseenter:p,onMouseleave:c,onFocusin:p,onFocusout:c}),[e.renderSlot(s.$slots,"default",{tooltipId:e.unref(a)},void 0,!0),e.createElementVNode("span",{ref_key:"positionerEl",ref:r,class:e.normalizeClass(["tooltip-trigger__positioner",`tooltip-trigger__positioner--${l.value}`]),style:e.normalizeStyle({visibility:i.value?"visible":"hidden","--positioner-gap":o.tail?"var(--spacing-l)":"0.5rem"}),onClick:u[0]||(u[0]=e.withModifiers(()=>{},["stop"]))},[e.createVNode(C,e.mergeProps(E.value,{id:e.unref(a),onDismiss:c}),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],6)],16))}}),O=h(R,[["__scopeId","data-v-5dcd06cf"]]);exports.Tooltip=O;exports.TooltipBubble=C;

package/dist/index.mjs

@@ -0,0 +1,237 @@
+import { defineComponent as B, computed as v, createBlock as h, createElementBlock as c, openBlock as n, unref as r, mergeProps as g, withCtx as y, createVNode as $, normalizeProps as R, guardReactiveProps as D, renderSlot as m, createTextVNode as O, toDisplayString as _, normalizeClass as V, createCommentVNode as f, Fragment as X, useId as j, ref as b, onUnmounted as q, createElementVNode as G, withModifiers as J, normalizeStyle as K } from "vue";
+import { cn as C, BaseLink as Q, ActionContent as P } from "@phila/phila-ui-core";
+import './index.css';const Y = ["disabled"], T = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "PhlButton",
+  props: {
+    href: {},
+    to: {},
+    target: {},
+    rel: {},
+    disabled: { type: Boolean, default: !1 },
+    clickTarget: {},
+    variant: { default: "primary" },
+    size: { default: "medium" },
+    iconOnly: { type: Boolean, default: !1 },
+    iconRight: { type: Boolean },
+    text: {},
+    className: {},
+    iconDefinition: {},
+    iconClass: {},
+    src: {},
+    svgRaw: {}
+  },
+  setup(t) {
+    const e = t, a = (o) => "href" in o && o.href !== void 0 || "to" in o && o.to !== void 0, i = v(() => C(
+      "phila-button",
+      `phila-button--${e.variant}`,
+      e.size && `is-${e.size}`,
+      e.iconOnly && "icon-button",
+      e.iconOnly && e.variant === "standard" && "icon-button--standard",
+      e.className
+    )), l = v(() => a(e) ? "to" in e && e.to !== void 0 ? {
+      to: e.to,
+      disabled: e.disabled,
+      className: i.value
+    } : {
+      href: e.href,
+      target: e.target,
+      rel: e.rel,
+      disabled: e.disabled,
+      className: i.value
+    } : {}), d = v(
+      () => ({
+        iconDefinition: e.iconDefinition,
+        iconClass: e.iconClass,
+        src: e.src,
+        iconRight: e.iconRight,
+        iconOnly: e.iconOnly,
+        text: e.text,
+        size: e.size
+      })
+    );
+    return (o, w) => a(e) ? (n(), h(r(Q), g({ key: 0 }, { ...l.value, ...o.$attrs }, { role: "button" }), {
+      default: y(() => [
+        $(r(P), R(D(d.value)), {
+          default: y(() => [
+            m(o.$slots, "default", {}, () => [
+              O(_(e.text), 1)
+            ])
+          ]),
+          _: 3
+        }, 16)
+      ]),
+      _: 3
+    }, 16)) : (n(), c("button", g({
+      key: 1,
+      type: "button",
+      disabled: e.disabled,
+      class: i.value
+    }, o.$attrs), [
+      $(r(P), R(D(d.value)), {
+        default: y(() => [
+          m(o.$slots, "default", {}, () => [
+            O(_(e.text), 1)
+          ])
+        ]),
+        _: 3
+      }, 16)
+    ], 16, Y));
+  }
+});
+var A = {
+  prefix: "fas",
+  iconName: "xmark",
+  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
+};
+const Z = ["id"], ee = {
+  key: 0,
+  class: "tooltip__tail",
+  "aria-hidden": "true"
+}, te = {
+  key: 1,
+  class: "tooltip__plain-row has-text-body-small"
+}, ie = {
+  key: 0,
+  class: "tooltip__title-row"
+}, oe = { key: 0 }, le = /* @__PURE__ */ B({
+  __name: "TooltipBubble",
+  props: {
+    id: {},
+    type: { default: "plain" },
+    color: { default: "default" },
+    tail: { type: Boolean, default: !1 },
+    placement: { default: "top-center" },
+    title: {},
+    dismissable: { type: Boolean, default: !1 },
+    className: {}
+  },
+  emits: ["dismiss"],
+  setup(t) {
+    const e = t, a = v(
+      () => C(
+        "tooltip",
+        "content",
+        "resets-link-colors",
+        `tooltip--${e.type}`,
+        `tooltip--${e.color}`,
+        e.tail && `tooltip--${e.placement}`,
+        e.className
+      )
+    );
+    return (i, l) => (n(), c("div", {
+      id: t.id,
+      class: V(a.value),
+      role: "tooltip"
+    }, [
+      t.tail ? (n(), c("div", ee)) : f("", !0),
+      t.type === "plain" ? (n(), c("div", te, [
+        m(i.$slots, "default", {}, void 0, !0),
+        t.dismissable ? (n(), h(r(T), {
+          key: 0,
+          class: "tooltip__dismiss",
+          variant: "standard",
+          size: "extra-small",
+          "icon-only": !0,
+          "icon-definition": r(A),
+          "aria-label": "Dismiss tooltip",
+          onClick: l[0] || (l[0] = (d) => i.$emit("dismiss"))
+        }, null, 8, ["icon-definition"])) : f("", !0)
+      ])) : (n(), c(X, { key: 2 }, [
+        t.title || t.dismissable ? (n(), c("div", ie, [
+          t.title ? (n(), c("h6", oe, _(t.title), 1)) : f("", !0),
+          t.dismissable ? (n(), h(r(T), {
+            key: 1,
+            class: "tooltip__dismiss",
+            variant: "standard",
+            size: "extra-small",
+            "icon-only": !0,
+            "icon-definition": r(A),
+            "aria-label": "Dismiss tooltip",
+            onClick: l[1] || (l[1] = (d) => i.$emit("dismiss"))
+          }, null, 8, ["icon-definition"])) : f("", !0)
+        ])) : f("", !0),
+        m(i.$slots, "default", {}, void 0, !0)
+      ], 64))
+    ], 10, Z));
+  }
+}), I = (t, e) => {
+  const a = t.__vccOpts || t;
+  for (const [i, l] of e)
+    a[i] = l;
+  return a;
+}, se = /* @__PURE__ */ I(le, [["__scopeId", "data-v-0155bbdd"]]), ne = /* @__PURE__ */ B({
+  __name: "Tooltip",
+  props: {
+    trigger: { default: "hover" },
+    type: { default: "plain" },
+    color: { default: "default" },
+    tail: { type: Boolean, default: !1 },
+    placement: { default: "auto" },
+    title: {},
+    dismissable: { type: Boolean },
+    className: {}
+  },
+  setup(t) {
+    const e = t, a = j(), i = b(!1), l = b(null), d = b(null), o = b("top-center"), w = () => {
+      const s = l.value?.getBoundingClientRect();
+      if (!s) return "top-center";
+      const { innerWidth: p, innerHeight: S } = window, x = s.top, H = S - s.bottom, z = d.value?.firstElementChild?.getBoundingClientRect().height ?? 0, U = (z > 0 ? x >= z : x >= H) ? "top" : "bottom", L = s.left + s.width / 2, W = L < p / 3 ? "left" : L > p * 2 / 3 ? "right" : "center";
+      return `${U}-${W}`;
+    }, E = (s) => {
+      s.key === "Escape" && u();
+    }, N = (s) => {
+      l.value && !l.value.contains(s.target) && u();
+    }, k = () => {
+      e.placement === "auto" ? o.value = w() : o.value = e.placement, i.value = !0, document.addEventListener("keydown", E), e.trigger === "click" && document.addEventListener("click", N);
+    }, u = () => {
+      i.value = !1, document.removeEventListener("keydown", E), document.removeEventListener("click", N);
+    }, M = () => {
+      i.value ? u() : k();
+    };
+    q(u);
+    const F = v(() => ({
+      type: e.type,
+      color: e.color,
+      tail: e.tail,
+      placement: o.value,
+      title: e.title,
+      dismissable: e.dismissable
+    }));
+    return (s, p) => (n(), c("span", g(
+      {
+        ref_key: "wrapperEl",
+        ref: l,
+        class: r(C)("tooltip-trigger", e.className)
+      },
+      t.trigger === "click" ? { onClick: M } : { onMouseenter: k, onMouseleave: u, onFocusin: k, onFocusout: u }
+    ), [
+      m(s.$slots, "default", { tooltipId: r(a) }, void 0, !0),
+      G("span", {
+        ref_key: "positionerEl",
+        ref: d,
+        class: V(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${o.value}`]),
+        style: K({
+          visibility: i.value ? "visible" : "hidden",
+          "--positioner-gap": t.tail ? "var(--spacing-l)" : "0.5rem"
+        }),
+        onClick: p[0] || (p[0] = J(() => {
+        }, ["stop"]))
+      }, [
+        $(se, g(F.value, {
+          id: r(a),
+          onDismiss: u
+        }), {
+          default: y(() => [
+            m(s.$slots, "body", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 16, ["id"])
+      ], 6)
+    ], 16));
+  }
+}), de = /* @__PURE__ */ I(ne, [["__scopeId", "data-v-5dcd06cf"]]);
+export {
+  de as Tooltip,
+  se as TooltipBubble
+};

package/package.json

@@ -1,46 +1,56 @@
 {
   "name": "@phila/phila-ui-tooltip",
-  "private": false,
-  "version": "0.0.14",
+  "version": "0.1.0-beta.0",
   "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/Tooltip.umd.cjs",
-  "module": "./dist/Tooltip.js",
-  "types": "./dist/types.d.ts",
+  "description": "Tooltip component for displaying simple or rich content on hover of an element",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/types.d.ts",
-        "default": "./dist/Tooltip.js"
-      },
-      "require": "./dist/Tooltip.umd.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     }
   },
-  "scripts": {
-    "dev": "vite",
-    "prepublish": "npm i && npm run build",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "tooltip",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "^1.0.24",
-    "vue": "^3.3.8"
+    "@fortawesome/pro-solid-svg-icons": "^7.1.0",
+    "@phila/phila-ui-button": "2.2.3-beta.1",
+    "@phila/phila-ui-core": "2.3.3-beta.1"
   },
   "devDependencies": {
-    "@types/node": "^20.10.3",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "sass": "^1.70.0",
-    "typescript": "^5.8.2",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-lib-inject-css": "^1.3.0",
-    "vue-tsc": "^2.2.8"
+    "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "@phila/phila-ui-tags": "0.0.1-beta.1"
   },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.com/",
-    "access": "public"
-  },
-  "gitHead": "09f2b67c1d3db773c813231e21b62b37e34aefbd"
-}
+  "scripts": {
+    "build": "vite build",
+    "build-win": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.tsx,.vue",
+    "lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}

package/dist/Tooltip.css

@@ -1 +0,0 @@
-@font-face{font-family:Montserrat;src:local("Montserrat Regular"),local("Montserrat-Regular"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:local("Montserrat Bold"),local("Montserrat-Bold"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold Italic"),local("OpenSans-SemiBoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff) format("woff");font-weight:600;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff) format("woff");font-weight:400;font-style:normal}.tooltip{display:inline-block;margin-left:5px;vertical-align:middle}.tooltip button{color:#0f4d90;font-size:25px;border:0;background-color:transparent;box-shadow:none;padding:0;margin:0;cursor:pointer;vertical-align:middle;position:relative;top:-2px}.tooltip-box{display:block;visibility:hidden;z-index:-100;width:auto;max-width:500px;position:fixed;top:0;left:0;opacity:0;transition:opacity .25s ease-in-out;pointer-events:none}.tooltip-box .tooltip-message{line-height:20px;color:#fff;background-color:#444;font-size:12px;padding:10px 8px 8px}@media screen and (max-width: 768px){.tooltip-box .tooltip-message{padding-top:36px}.tooltip-box .tooltip-message:before{display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased;content:"";position:absolute;top:12px;right:16px;font-family:"Font Awesome 5 Pro",sans-serif;font-weight:900;font-size:20px}}@media screen and (max-width: 500px){.tooltip-box{width:auto;max-width:100%}}.tooltip-box .tooltip-arrow{position:fixed;left:0;top:0;border:solid 8px transparent;border-top-color:#444}.tooltip-box .tooltip-arrow.arrow-up{border-top-color:transparent;border-bottom-color:#444}.tooltip-box.light .tooltip-message{color:#444;background-color:#f0f0f0}.tooltip-box.light .tooltip-arrow{border-top-color:#f0f0f0}.tooltip-box.light .tooltip-arrow.arrow-up{border-top-color:transparent;border-bottom-color:#f0f0f0}.tooltip-box.show{visibility:visible;opacity:1;z-index:9999}

package/dist/Tooltip.js

@@ -1,112 +0,0 @@
-import "./Tooltip.css";
-import { defineComponent as p, ref as n, onMounted as h, createElementBlock as a, openBlock as r, renderSlot as d } from "vue";
-class c {
-  constructor(t, o, i, s) {
-    this.htmlBody = document.getElementsByTagName("body")[0], this.tooltip = t, this.tooltipIcon = null, this.tooltipIconClasses = "fas fa-info-circle", this.tooltipArrow = null, this.tooltipBox = null, this.tooltipText = o, this.tooltipBoxClasses = "tooltip-box", this.tooltipMessageClasses = "tooltip-message", this.tooltipArrowClasses = "tooltip-arrow", this.tooltipMode = i || "dark", this.currentTooltipPosition = null, this.initPositionSet = !1, this.tooltipID = s, this.tooltipBtnID = `btn-${s}`, this.padding = 8, this.arrowAttrs = {
-      height: 8,
-      width: 16
-    }, this.clickedToOpen = !1, this.newTooltip();
-  }
-  newTooltip() {
-    this.makeTooltipContainer(), this.setTooltipEvents(), this.setTooltipMsg(), this.setTooltipMode(), this.addTooltip();
-    const t = this;
-    var o = setInterval(function() {
-      const i = document.getElementById(t.tooltipID);
-      i && i.offsetHeight > 0 && (t.addTooltipIcon(), t.setInitTooltipPosition(), t.updateArrowPosition(), clearInterval(o));
-    }, 500);
-  }
-  makeTooltipContainer() {
-    this.tooltipArrow = document.createElement("div"), this.tooltipArrow.className = this.tooltipArrowClasses, this.tooltipBox = document.createElement("div"), this.tooltipBox.className = this.tooltipBoxClasses, this.tooltipBox.setAttribute("id", this.tooltipID), this.tooltipMessage = document.createElement("div"), this.tooltipMessage.className = this.tooltipMessageClasses, this.tooltipIcon = document.createElement("button"), this.tooltipIcon.setAttribute("aria-label", "tooltip"), this.tooltipIcon.className = this.tooltipIconClasses, this.tooltipIcon.setAttribute("id", this.tooltipBtnID);
-  }
-  addTooltipIcon() {
-    this.tooltip.appendChild(this.tooltipIcon);
-  }
-  addTooltip() {
-    this.tooltipBox.appendChild(this.tooltipMessage), this.tooltipBox.appendChild(this.tooltipArrow), this.htmlBody.appendChild(this.tooltipBox);
-  }
-  setTooltipMode() {
-    this.tooltipBox.className = this.tooltipBoxClasses, this.tooltipBox.classList.add(this.tooltipMode);
-  }
-  setTooltipMsg() {
-    this.tooltipMessage.innerText = this.tooltipText;
-  }
-  setTooltipEvents() {
-    const t = this;
-    window.addEventListener("resize", function() {
-      t.updateTooltipPosition();
-    }, !0), this.tooltipIcon.addEventListener("mouseenter", function() {
-      t.updateTooltipPosition(), t.showTooltip();
-    }), window.addEventListener("scroll", function() {
-      t.tooltipBox.classList.contains("show") && t.hideTooltip();
-    }), this.tooltipIcon.addEventListener("focus", function() {
-      t.updateTooltipPosition(), t.showTooltip();
-    }), this.tooltipIcon.addEventListener("mouseleave", function() {
-      t.clickedToOpen || t.hideTooltip();
-    }), this.tooltipIcon.addEventListener("blur", function() {
-      t.hideTooltip();
-    }), this.tooltipIcon.addEventListener("click", function() {
-      t.clickedToOpen = !0, t.updateTooltipPosition(), t.toggleTooltip();
-    }, !1), window.addEventListener("click", function(o) {
-      o.target !== t.tooltipIcon && t.clickedToOpen && (t.hideTooltip(), t.clickedToOpen = !1);
-    });
-  }
-  toggleTooltip() {
-    this.clickedToOpen ? this.showTooltip() : this.hideTooltip();
-  }
-  showTooltip() {
-    this.tooltipBox.classList.add("show"), this.tooltipBox.setAttribute("aria-hidden", !1);
-  }
-  hideTooltip() {
-    this.tooltipBox.classList.remove("show"), this.tooltipBox.setAttribute("aria-hidden", !0);
-  }
-  updateArrowPosition() {
-    const t = this.tooltipIcon.getBoundingClientRect(), o = this.tooltipBox.getBoundingClientRect();
-    this.tooltipArrow.style.left = `${t.left + this.tooltipIcon.offsetWidth / 2 - this.arrowAttrs.width / 2}px`, o.top > t.top ? (this.tooltipArrow.style.top = `${o.top - this.arrowAttrs.height * 2}px`, this.tooltipArrow.classList.add("arrow-up")) : (this.tooltipArrow.style.top = `${o.top + this.tooltipBox.offsetHeight}px`, this.tooltipArrow.classList.remove("arrow-up"));
-  }
-  setInitTooltipPosition() {
-    const t = this.tooltipIcon.getBoundingClientRect();
-    this.tooltipBox.style.left = `${t.left + this.tooltipIcon.offsetWidth / 2 - this.tooltipBox.offsetWidth / 2}px`, this.tooltipBox.style.top = `${t.top - this.tooltipBox.offsetHeight - this.arrowAttrs.height}px`;
-  }
-  updateTooltipPosition(t = !0) {
-    t && this.setInitTooltipPosition();
-    const o = window.innerWidth;
-    let i = o - this.padding * 2;
-    i <= 500 && (this.tooltipBox.style.maxWidth = `${i}px`);
-    const s = this.tooltipIcon.getBoundingClientRect(), e = this.tooltipBox.getBoundingClientRect();
-    if (e.left < this.padding) {
-      this.tooltipBox.style.left = `${this.padding}px`, this.tooltipBox.style.top = `${s.top - this.tooltipBox.offsetHeight - this.arrowAttrs.height}px`, this.updateTooltipPosition(!1);
-      return;
-    } else if (e.left + this.tooltipBox.offsetWidth > o - this.padding) {
-      this.tooltipBox.style.left = `${window.innerWidth - this.padding - this.tooltipBox.offsetWidth}px`, this.tooltipBox.style.top = `${s.top - this.tooltipBox.offsetHeight - this.arrowAttrs.height}px`, this.updateTooltipPosition(!1);
-      return;
-    } else if (e.top < this.padding) {
-      this.tooltipBox.style.left = `${e.left}px`, this.tooltipBox.style.top = `${s.bottom + this.arrowAttrs.height}px`, this.updateTooltipPosition(!1);
-      return;
-    }
-    this.updateArrowPosition();
-  }
-}
-const f = ["aria-describedby"], x = /* @__PURE__ */ p({
-  __name: "Tooltip",
-  props: {
-    mode: { default: "light" },
-    message: {}
-  },
-  setup(l) {
-    const t = l, o = n(Math.floor((1 + Math.random()) * 65536).toString(16).substring(1)), i = n(null);
-    return h(() => {
-      t.message.length >= 250 && console.warn("The tooltip message should be no longer than 250 characters"), new c(i.value, t.message, t.mode, o.value);
-    }), (s, e) => (r(), a("div", {
-      ref_key: "tooltip",
-      ref: i,
-      class: "tooltip",
-      role: "tooltip",
-      "aria-describedby": o.value
-    }, [
-      d(s.$slots, "default")
-    ], 8, f));
-  }
-});
-export {
-  x as default
-};

package/dist/Tooltip.umd.cjs

@@ -1,2 +0,0 @@
-(function(i,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(i=typeof globalThis<"u"?globalThis:i||self,i.Tooltip=l(i.Vue))})(this,function(i){"use strict";var l=document.createElement("style");l.textContent=`@font-face{font-family:Montserrat;src:local("Montserrat Regular"),local("Montserrat-Regular"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:local("Montserrat Bold"),local("Montserrat-Bold"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold Italic"),local("OpenSans-SemiBoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff) format("woff");font-weight:600;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff) format("woff");font-weight:400;font-style:normal}.tooltip{display:inline-block;margin-left:5px;vertical-align:middle}.tooltip button{color:#0f4d90;font-size:25px;border:0;background-color:transparent;box-shadow:none;padding:0;margin:0;cursor:pointer;vertical-align:middle;position:relative;top:-2px}.tooltip-box{display:block;visibility:hidden;z-index:-100;width:auto;max-width:500px;position:fixed;top:0;left:0;opacity:0;transition:opacity .25s ease-in-out;pointer-events:none}.tooltip-box .tooltip-message{line-height:20px;color:#fff;background-color:#444;font-size:12px;padding:10px 8px 8px}@media screen and (max-width: 768px){.tooltip-box .tooltip-message{padding-top:36px}.tooltip-box .tooltip-message:before{display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased;content:"";position:absolute;top:12px;right:16px;font-family:"Font Awesome 5 Pro",sans-serif;font-weight:900;font-size:20px}}@media screen and (max-width: 500px){.tooltip-box{width:auto;max-width:100%}}.tooltip-box .tooltip-arrow{position:fixed;left:0;top:0;border:solid 8px transparent;border-top-color:#444}.tooltip-box .tooltip-arrow.arrow-up{border-top-color:transparent;border-bottom-color:#444}.tooltip-box.light .tooltip-message{color:#444;background-color:#f0f0f0}.tooltip-box.light .tooltip-arrow{border-top-color:#f0f0f0}.tooltip-box.light .tooltip-arrow.arrow-up{border-top-color:transparent;border-bottom-color:#f0f0f0}.tooltip-box.show{visibility:visible;opacity:1;z-index:9999}
-/*$vite$:1*/`,document.head.appendChild(l);class p{constructor(t,o,s,e){this.htmlBody=document.getElementsByTagName("body")[0],this.tooltip=t,this.tooltipIcon=null,this.tooltipIconClasses="fas fa-info-circle",this.tooltipArrow=null,this.tooltipBox=null,this.tooltipText=o,this.tooltipBoxClasses="tooltip-box",this.tooltipMessageClasses="tooltip-message",this.tooltipArrowClasses="tooltip-arrow",this.tooltipMode=s||"dark",this.currentTooltipPosition=null,this.initPositionSet=!1,this.tooltipID=e,this.tooltipBtnID=`btn-${e}`,this.padding=8,this.arrowAttrs={height:8,width:16},this.clickedToOpen=!1,this.newTooltip()}newTooltip(){this.makeTooltipContainer(),this.setTooltipEvents(),this.setTooltipMsg(),this.setTooltipMode(),this.addTooltip();const t=this;var o=setInterval(function(){const s=document.getElementById(t.tooltipID);s&&s.offsetHeight>0&&(t.addTooltipIcon(),t.setInitTooltipPosition(),t.updateArrowPosition(),clearInterval(o))},500)}makeTooltipContainer(){this.tooltipArrow=document.createElement("div"),this.tooltipArrow.className=this.tooltipArrowClasses,this.tooltipBox=document.createElement("div"),this.tooltipBox.className=this.tooltipBoxClasses,this.tooltipBox.setAttribute("id",this.tooltipID),this.tooltipMessage=document.createElement("div"),this.tooltipMessage.className=this.tooltipMessageClasses,this.tooltipIcon=document.createElement("button"),this.tooltipIcon.setAttribute("aria-label","tooltip"),this.tooltipIcon.className=this.tooltipIconClasses,this.tooltipIcon.setAttribute("id",this.tooltipBtnID)}addTooltipIcon(){this.tooltip.appendChild(this.tooltipIcon)}addTooltip(){this.tooltipBox.appendChild(this.tooltipMessage),this.tooltipBox.appendChild(this.tooltipArrow),this.htmlBody.appendChild(this.tooltipBox)}setTooltipMode(){this.tooltipBox.className=this.tooltipBoxClasses,this.tooltipBox.classList.add(this.tooltipMode)}setTooltipMsg(){this.tooltipMessage.innerText=this.tooltipText}setTooltipEvents(){const t=this;window.addEventListener("resize",function(){t.updateTooltipPosition()},!0),this.tooltipIcon.addEventListener("mouseenter",function(){t.updateTooltipPosition(),t.showTooltip()}),window.addEventListener("scroll",function(){t.tooltipBox.classList.contains("show")&&t.hideTooltip()}),this.tooltipIcon.addEventListener("focus",function(){t.updateTooltipPosition(),t.showTooltip()}),this.tooltipIcon.addEventListener("mouseleave",function(){t.clickedToOpen||t.hideTooltip()}),this.tooltipIcon.addEventListener("blur",function(){t.hideTooltip()}),this.tooltipIcon.addEventListener("click",function(){t.clickedToOpen=!0,t.updateTooltipPosition(),t.toggleTooltip()},!1),window.addEventListener("click",function(o){o.target!==t.tooltipIcon&&t.clickedToOpen&&(t.hideTooltip(),t.clickedToOpen=!1)})}toggleTooltip(){this.clickedToOpen?this.showTooltip():this.hideTooltip()}showTooltip(){this.tooltipBox.classList.add("show"),this.tooltipBox.setAttribute("aria-hidden",!1)}hideTooltip(){this.tooltipBox.classList.remove("show"),this.tooltipBox.setAttribute("aria-hidden",!0)}updateArrowPosition(){const t=this.tooltipIcon.getBoundingClientRect(),o=this.tooltipBox.getBoundingClientRect();this.tooltipArrow.style.left=`${t.left+this.tooltipIcon.offsetWidth/2-this.arrowAttrs.width/2}px`,o.top>t.top?(this.tooltipArrow.style.top=`${o.top-this.arrowAttrs.height*2}px`,this.tooltipArrow.classList.add("arrow-up")):(this.tooltipArrow.style.top=`${o.top+this.tooltipBox.offsetHeight}px`,this.tooltipArrow.classList.remove("arrow-up"))}setInitTooltipPosition(){const t=this.tooltipIcon.getBoundingClientRect();this.tooltipBox.style.left=`${t.left+this.tooltipIcon.offsetWidth/2-this.tooltipBox.offsetWidth/2}px`,this.tooltipBox.style.top=`${t.top-this.tooltipBox.offsetHeight-this.arrowAttrs.height}px`}updateTooltipPosition(t=!0){t&&this.setInitTooltipPosition();const o=window.innerWidth;let s=o-this.padding*2;s<=500&&(this.tooltipBox.style.maxWidth=`${s}px`);const e=this.tooltipIcon.getBoundingClientRect(),n=this.tooltipBox.getBoundingClientRect();if(n.left<this.padding){this.tooltipBox.style.left=`${this.padding}px`,this.tooltipBox.style.top=`${e.top-this.tooltipBox.offsetHeight-this.arrowAttrs.height}px`,this.updateTooltipPosition(!1);return}else if(n.left+this.tooltipBox.offsetWidth>o-this.padding){this.tooltipBox.style.left=`${window.innerWidth-this.padding-this.tooltipBox.offsetWidth}px`,this.tooltipBox.style.top=`${e.top-this.tooltipBox.offsetHeight-this.arrowAttrs.height}px`,this.updateTooltipPosition(!1);return}else if(n.top<this.padding){this.tooltipBox.style.left=`${n.left}px`,this.tooltipBox.style.top=`${e.bottom+this.arrowAttrs.height}px`,this.updateTooltipPosition(!1);return}this.updateArrowPosition()}}const r=["aria-describedby"];return i.defineComponent({__name:"Tooltip",props:{mode:{default:"light"},message:{}},setup(a){const t=a,o=i.ref(Math.floor((1+Math.random())*65536).toString(16).substring(1)),s=i.ref(null);return i.onMounted(()=>{t.message.length>=250&&console.warn("The tooltip message should be no longer than 250 characters"),new p(s.value,t.message,t.mode,o.value)}),(e,n)=>(i.openBlock(),i.createElementBlock("div",{ref_key:"tooltip",ref:s,class:"tooltip",role:"tooltip","aria-describedby":o.value},[i.renderSlot(e.$slots,"default")],8,r))}})});

package/dist/types.d.ts

@@ -1,12 +0,0 @@
-import { default as Tooltip } from './Tooltip.vue';
-
-declare module "vue" {
-    interface GlobalComponents {
-        Tooltip: typeof Tooltip;
-    }
-}
-export interface TooltipProps {
-    mode: "light" | "dark";
-    message: string;
-}
-export default Tooltip;