@phila/phila-ui-tooltip 0.0.11 → 0.0.15
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/README.md +13 -16
- 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/README.md
CHANGED
|
@@ -1,27 +1,24 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
## Usage
|
|
2
|
+
### Import single component
|
|
3
|
+
```js
|
|
4
|
+
import { Callout } from '@phila/phila-ui';
|
|
5
|
+
|
|
6
|
+
//register it locally...
|
|
7
|
+
components: {
|
|
8
|
+
Callout,
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
//... or register it globally
|
|
12
|
+
Vue.component('callout', Callout);
|
|
13
|
+
```
|
|
4
14
|
|
|
5
15
|
## Code Samples
|
|
6
|
-
|
|
7
16
|
### Basic tooltip with dark mode enabled (default)
|
|
8
17
|
|
|
9
18
|
```html
|
|
10
19
|
<tooltip message="My tooltip message" />
|
|
11
20
|
```
|
|
12
|
-
|
|
13
21
|
### Basic tooltip with light mode enabled
|
|
14
|
-
|
|
15
22
|
```html
|
|
16
23
|
<tooltip message="My tooltip message" mode="light" />
|
|
17
24
|
```
|
|
18
|
-
|
|
19
|
-
## Live Examples
|
|
20
|
-
|
|
21
|
-
### Basic tooltip with dark mode enabled (default)
|
|
22
|
-
|
|
23
|
-
<example name="Tooltip1" height="300"></example>
|
|
24
|
-
|
|
25
|
-
### Basic tooltip with light mode enabled
|
|
26
|
-
|
|
27
|
-
<example name="Tooltip2" height="300"></example>
|
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.15",
|
|
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": "f00518592815b1bf558d88f77fc4b6b3a30296e5"
|
|
46
46
|
}
|