@phila/phila-ui-tooltip 0.0.11 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Tooltip.js +2 -2
- package/dist/Tooltip.umd.cjs +1 -1
- package/dist/Tooltip.vue.d.ts +9 -7
- package/package.json +5 -5
package/dist/Tooltip.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "./Tooltip.css";
|
|
2
|
-
import { defineComponent as p, ref as n, onMounted as h,
|
|
2
|
+
import { defineComponent as p, ref as n, onMounted as h, createElementBlock as a, openBlock as r, renderSlot as d } from "vue";
|
|
3
3
|
class c {
|
|
4
4
|
constructor(t, o, i, s) {
|
|
5
5
|
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 = {
|
|
@@ -96,7 +96,7 @@ const f = ["aria-describedby"], x = /* @__PURE__ */ p({
|
|
|
96
96
|
const t = l, o = n(Math.floor((1 + Math.random()) * 65536).toString(16).substring(1)), i = n(null);
|
|
97
97
|
return h(() => {
|
|
98
98
|
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);
|
|
99
|
-
}), (s, e) => (
|
|
99
|
+
}), (s, e) => (r(), a("div", {
|
|
100
100
|
ref_key: "tooltip",
|
|
101
101
|
ref: i,
|
|
102
102
|
class: "tooltip",
|
package/dist/Tooltip.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
(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}
|
|
2
|
-
|
|
2
|
+
/*$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/Tooltip.vue.d.ts
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { TooltipProps } from './types';
|
|
2
2
|
|
|
3
|
-
declare
|
|
3
|
+
declare function __VLS_template(): {
|
|
4
|
+
default?(_: {}): any;
|
|
5
|
+
};
|
|
6
|
+
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TooltipProps>, {
|
|
4
7
|
mode: string;
|
|
5
|
-
}
|
|
8
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TooltipProps>, {
|
|
6
9
|
mode: string;
|
|
7
|
-
}
|
|
8
|
-
mode: "
|
|
9
|
-
}, {}
|
|
10
|
-
|
|
11
|
-
}>;
|
|
10
|
+
}>>> & Readonly<{}>, {
|
|
11
|
+
mode: "light" | "dark";
|
|
12
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
13
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
12
14
|
export default _default;
|
|
13
15
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
14
16
|
type __VLS_TypePropsToRuntimeProps<T> = {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-tooltip",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.14",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
@@ -25,22 +25,22 @@
|
|
|
25
25
|
"preview": "vite preview"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@phila/phila-ui-core": "^1.0.
|
|
28
|
+
"@phila/phila-ui-core": "^1.0.24",
|
|
29
29
|
"vue": "^3.3.8"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@types/node": "^20.10.3",
|
|
33
33
|
"@vitejs/plugin-vue": "^4.5.0",
|
|
34
34
|
"sass": "^1.70.0",
|
|
35
|
-
"typescript": "^5.
|
|
35
|
+
"typescript": "^5.8.2",
|
|
36
36
|
"vite": "^5.0.0",
|
|
37
37
|
"vite-plugin-dts": "^3.6.4",
|
|
38
38
|
"vite-plugin-lib-inject-css": "^1.3.0",
|
|
39
|
-
"vue-tsc": "^
|
|
39
|
+
"vue-tsc": "^2.2.8"
|
|
40
40
|
},
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"registry": "https://registry.npmjs.com/",
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "09f2b67c1d3db773c813231e21b62b37e34aefbd"
|
|
46
46
|
}
|