@phila/phila-ui-tooltip 0.1.0-beta.1 → 0.1.0-beta.3
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.vue.d.ts +5 -1
- package/dist/Tooltip.vue.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +109 -98
- package/package.json +3 -3
package/dist/Tooltip.vue.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ declare function __VLS_template(): {
|
|
|
4
4
|
slots: {
|
|
5
5
|
default?(_: {
|
|
6
6
|
tooltipId: string;
|
|
7
|
+
isOpen: boolean;
|
|
7
8
|
}): any;
|
|
8
9
|
body?(_: {}): any;
|
|
9
10
|
};
|
|
@@ -14,7 +15,10 @@ declare function __VLS_template(): {
|
|
|
14
15
|
rootEl: any;
|
|
15
16
|
};
|
|
16
17
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
17
|
-
declare const __VLS_component: import('vue').DefineComponent<TooltipProps, {
|
|
18
|
+
declare const __VLS_component: import('vue').DefineComponent<TooltipProps, {
|
|
19
|
+
show: () => Promise<void>;
|
|
20
|
+
hide: () => void;
|
|
21
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
|
|
18
22
|
type: import('./index').TooltipType;
|
|
19
23
|
color: import('./index').TooltipColor;
|
|
20
24
|
tail: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.vue.d.ts","sourceRoot":"","sources":["../src/Tooltip.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.vue.d.ts","sourceRoot":"","sources":["../src/Tooltip.vue"],"names":[],"mappings":"AAoMA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA6G9D,iBAAS,cAAc;WAkFT,OAAO,IAA6B;;;;;YAbrB,GAAG;sBACN,GAAG;;;;;;;EAiB5B;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;OASnB,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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.tooltip[data-v-
|
|
1
|
+
.tooltip[data-v-7ccd7c7d]{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-7ccd7c7d]{--tooltip-bg: var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-On-Surface)}.tooltip.tooltip--plain[data-v-7ccd7c7d]{--tail-height: 10px;padding:var(--spacing-2xs) var(--spacing-xs);justify-content:center}.tooltip.tooltip--rich[data-v-7ccd7c7d]{--tail-height: 12px;padding:var(--spacing-s) var(--spacing-m);width:max-content;min-width:11.25rem;max-width:min(25rem,calc(100vw - 3rem));gap:var(--spacing-xs)}.tooltip .tooltip__tail[data-v-7ccd7c7d]{position:absolute;width:20px;height:var(--tail-height);background-color:var(--tooltip-bg)}.tooltip.tooltip--top-left .tooltip__tail[data-v-7ccd7c7d],.tooltip.tooltip--top-right .tooltip__tail[data-v-7ccd7c7d],.tooltip.tooltip--top-center .tooltip__tail[data-v-7ccd7c7d]{clip-path:polygon(0 0,100% 0,50% 100%);bottom:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--bottom-left .tooltip__tail[data-v-7ccd7c7d],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-7ccd7c7d],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-7ccd7c7d]{clip-path:polygon(50% 0,0 100%,100% 100%);top:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--top-left .tooltip__tail[data-v-7ccd7c7d],.tooltip.tooltip--bottom-left .tooltip__tail[data-v-7ccd7c7d]{left:8px}.tooltip.tooltip--top-right .tooltip__tail[data-v-7ccd7c7d],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-7ccd7c7d]{right:8px}.tooltip.tooltip--top-center .tooltip__tail[data-v-7ccd7c7d],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-7ccd7c7d]{left:50%;transform:translate(-50%)}.tooltip__plain-row[data-v-7ccd7c7d],.tooltip__title-row[data-v-7ccd7c7d]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-xs);width:100%}.tooltip__title-row h6[data-v-7ccd7c7d]{flex:1}.tooltip__dismiss[data-v-7ccd7c7d]{margin-left:auto;flex-shrink:0}.tooltip-trigger[data-v-b3f93b8c]{position:relative;display:inline-block}.tooltip-trigger__positioner[data-v-b3f93b8c]{position:absolute;z-index:1000}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-left[data-v-b3f93b8c]{bottom:100%;left:-8px;padding-bottom:var(--positioner-gap);transform:translate(var(--adjust-x, 0px))}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-right[data-v-b3f93b8c]{bottom:100%;right:-8px;padding-bottom:var(--positioner-gap);transform:translate(var(--adjust-x, 0px))}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-center[data-v-b3f93b8c]{bottom:100%;left:50%;transform:translate(calc(-50% + var(--adjust-x, 0px)));padding-bottom:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-left[data-v-b3f93b8c]{top:100%;left:-8px;padding-top:var(--positioner-gap);transform:translate(var(--adjust-x, 0px))}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-right[data-v-b3f93b8c]{top:100%;right:-8px;padding-top:var(--positioner-gap);transform:translate(var(--adjust-x, 0px))}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-center[data-v-b3f93b8c]{top:100%;left:50%;transform:translate(calc(-50% + var(--adjust-x, 0px)));padding-top:var(--positioner-gap)}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),u=require("@phila/phila-ui-core"),S=["disabled"],B=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,n=a=>"href"in a&&a.href!==void 0||"to"in a&&a.to!==void 0,s=e.computed(()=>u.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)),l=e.computed(()=>n(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:s.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:s.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(a,p)=>n(t)?(e.openBlock(),e.createBlock(e.unref(u.BaseLink),e.mergeProps({key:0},{...l.value,...a.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(a.$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:s.value},a.$attrs),[e.createVNode(e.unref(u.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,S))}});var C={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 T=["id"],O={key:0,class:"tooltip__tail","aria-hidden":"true"},L={key:1,class:"tooltip__plain-row has-text-body-small"},R={key:0,class:"tooltip__title-row"},D={key:0},A=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,n=e.computed(()=>u.cn("tooltip","content","resets-link-colors",`tooltip--${t.type}`,`tooltip--${t.color}`,t.tail&&`tooltip--${t.placement}`,t.className));return(s,l)=>(e.openBlock(),e.createElementBlock("div",{id:o.id,class:e.normalizeClass(n.value),role:"tooltip"},[o.tail?(e.openBlock(),e.createElementBlock("div",O)):e.createCommentVNode("",!0),o.type==="plain"?(e.openBlock(),e.createElementBlock("div",L,[e.renderSlot(s.$slots,"default",{},void 0,!0),o.dismissable?(e.openBlock(),e.createBlock(e.unref(B),{key:0,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,"icon-definition":e.unref(C),"aria-label":"Dismiss tooltip",onClick:l[0]||(l[0]=r=>s.$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",R,[o.title?(e.openBlock(),e.createElementBlock("h6",D,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),o.dismissable?(e.openBlock(),e.createBlock(e.unref(B),{key:1,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,"icon-definition":e.unref(C),"aria-label":"Dismiss tooltip",onClick:l[1]||(l[1]=r=>s.$emit("dismiss"))},null,8,["icon-definition"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"default",{},void 0,!0)],64))],10,T))}}),w=(o,t)=>{const n=o.__vccOpts||o;for(const[s,l]of t)n[s]=l;return n},$=w(A,[["__scopeId","data-v-7ccd7c7d"]]),M=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,{expose:t}){const n=o,s=e.useId(),l=e.ref(!1),r=e.ref(null),a=e.ref(null),p=e.ref("top-center"),v=e.ref(0),E=()=>{const i=r.value?.getBoundingClientRect();if(!i)return"top-center";const{innerWidth:d,innerHeight:g}=window,f=i.top,z=g-i.bottom,y=a.value?.firstElementChild?.getBoundingClientRect().height??0,P=(y>0?f>=y:f>=z)?"top":"bottom",h=i.left+i.width/2,V=h<d/3?"left":h>d*2/3?"right":"center";return`${P}-${V}`},k=i=>{i.key==="Escape"&&c()},b=i=>{r.value&&!r.value.contains(i.target)&&c()};function N(){const i=a.value?.firstElementChild?.getBoundingClientRect();if(!i)return;const d=8,g=i.right-(window.innerWidth-d),f=d-i.left;g<=0&&f<=0||(v.value=window.innerWidth/2-(i.left+i.width/2))}const m=async()=>{n.placement==="auto"?p.value=E():p.value=n.placement,v.value=0,l.value=!0,document.addEventListener("keydown",k),n.trigger==="click"&&document.addEventListener("click",b),await e.nextTick(),N()},c=()=>{l.value=!1,document.removeEventListener("keydown",k),document.removeEventListener("click",b)},x=()=>{l.value?c():m()};e.onUnmounted(c),t({show:m,hide:c});const _=e.computed(()=>({type:n.type,color:n.color,tail:n.tail,placement:p.value,title:n.title,dismissable:n.dismissable}));return(i,d)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({ref_key:"wrapperEl",ref:r,class:e.unref(u.cn)("tooltip-trigger",n.className)},o.trigger==="click"?{onClick:x}:{onMouseenter:m,onMouseleave:c,onFocusin:m,onFocusout:c}),[e.renderSlot(i.$slots,"default",{tooltipId:e.unref(s),isOpen:l.value},void 0,!0),e.createElementVNode("span",{ref_key:"positionerEl",ref:a,class:e.normalizeClass(["tooltip-trigger__positioner",`tooltip-trigger__positioner--${p.value}`]),style:e.normalizeStyle({visibility:l.value?"visible":"hidden","--positioner-gap":o.tail?"var(--spacing-l)":"0.5rem","--adjust-x":`${v.value}px`}),onClick:d[0]||(d[0]=e.withModifiers(()=>{},["stop"]))},[e.createVNode($,e.mergeProps(_.value,{id:e.unref(s),onDismiss:c}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],6)],16))}}),I=w(M,[["__scopeId","data-v-b3f93b8c"]]);exports.Tooltip=I;exports.TooltipBubble=$;
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { cn as
|
|
3
|
-
import './index.css';const
|
|
1
|
+
import { defineComponent as E, computed as g, createBlock as C, createElementBlock as f, openBlock as a, unref as r, mergeProps as w, withCtx as k, createVNode as _, normalizeProps as T, guardReactiveProps as D, renderSlot as p, createTextVNode as P, toDisplayString as x, normalizeClass as M, createCommentVNode as v, Fragment as G, useId as J, ref as b, onUnmounted as K, createElementVNode as Q, withModifiers as Y, normalizeStyle as Z, nextTick as ee } from "vue";
|
|
2
|
+
import { cn as N, BaseLink as te, ActionContent as V } from "@phila/phila-ui-core";
|
|
3
|
+
import './index.css';const ie = ["disabled"], A = /* @__PURE__ */ E({
|
|
4
4
|
inheritAttrs: !1,
|
|
5
5
|
__name: "PhlButton",
|
|
6
6
|
props: {
|
|
@@ -22,24 +22,24 @@ import './index.css';const Y = ["disabled"], T = /* @__PURE__ */ B({
|
|
|
22
22
|
svgRaw: {}
|
|
23
23
|
},
|
|
24
24
|
setup(t) {
|
|
25
|
-
const e = t,
|
|
25
|
+
const e = t, o = (n) => "href" in n && n.href !== void 0 || "to" in n && n.to !== void 0, s = g(() => N(
|
|
26
26
|
"phila-button",
|
|
27
27
|
`phila-button--${e.variant}`,
|
|
28
28
|
e.size && `is-${e.size}`,
|
|
29
29
|
e.iconOnly && "icon-button",
|
|
30
30
|
e.iconOnly && e.variant === "standard" && "icon-button--standard",
|
|
31
31
|
e.className
|
|
32
|
-
)), l =
|
|
32
|
+
)), l = g(() => o(e) ? "to" in e && e.to !== void 0 ? {
|
|
33
33
|
to: e.to,
|
|
34
34
|
disabled: e.disabled,
|
|
35
|
-
className:
|
|
35
|
+
className: s.value
|
|
36
36
|
} : {
|
|
37
37
|
href: e.href,
|
|
38
38
|
target: e.target,
|
|
39
39
|
rel: e.rel,
|
|
40
40
|
disabled: e.disabled,
|
|
41
|
-
className:
|
|
42
|
-
} : {}),
|
|
41
|
+
className: s.value
|
|
42
|
+
} : {}), c = g(
|
|
43
43
|
() => ({
|
|
44
44
|
iconDefinition: e.iconDefinition,
|
|
45
45
|
iconClass: e.iconClass,
|
|
@@ -50,51 +50,51 @@ import './index.css';const Y = ["disabled"], T = /* @__PURE__ */ B({
|
|
|
50
50
|
size: e.size
|
|
51
51
|
})
|
|
52
52
|
);
|
|
53
|
-
return (
|
|
54
|
-
default:
|
|
55
|
-
|
|
56
|
-
default:
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
return (n, m) => o(e) ? (a(), C(r(te), w({ key: 0 }, { ...l.value, ...n.$attrs }, { role: "button" }), {
|
|
54
|
+
default: k(() => [
|
|
55
|
+
_(r(V), T(D(c.value)), {
|
|
56
|
+
default: k(() => [
|
|
57
|
+
p(n.$slots, "default", {}, () => [
|
|
58
|
+
P(x(e.text), 1)
|
|
59
59
|
])
|
|
60
60
|
]),
|
|
61
61
|
_: 3
|
|
62
62
|
}, 16)
|
|
63
63
|
]),
|
|
64
64
|
_: 3
|
|
65
|
-
}, 16)) : (
|
|
65
|
+
}, 16)) : (a(), f("button", w({
|
|
66
66
|
key: 1,
|
|
67
67
|
type: "button",
|
|
68
68
|
disabled: e.disabled,
|
|
69
|
-
class:
|
|
70
|
-
},
|
|
71
|
-
|
|
72
|
-
default:
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
class: s.value
|
|
70
|
+
}, n.$attrs), [
|
|
71
|
+
_(r(V), T(D(c.value)), {
|
|
72
|
+
default: k(() => [
|
|
73
|
+
p(n.$slots, "default", {}, () => [
|
|
74
|
+
P(x(e.text), 1)
|
|
75
75
|
])
|
|
76
76
|
]),
|
|
77
77
|
_: 3
|
|
78
78
|
}, 16)
|
|
79
|
-
], 16,
|
|
79
|
+
], 16, ie));
|
|
80
80
|
}
|
|
81
81
|
});
|
|
82
|
-
var
|
|
82
|
+
var I = {
|
|
83
83
|
prefix: "fas",
|
|
84
84
|
iconName: "xmark",
|
|
85
85
|
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"]
|
|
86
86
|
};
|
|
87
|
-
const
|
|
87
|
+
const oe = ["id"], le = {
|
|
88
88
|
key: 0,
|
|
89
89
|
class: "tooltip__tail",
|
|
90
90
|
"aria-hidden": "true"
|
|
91
|
-
},
|
|
91
|
+
}, se = {
|
|
92
92
|
key: 1,
|
|
93
93
|
class: "tooltip__plain-row has-text-body-small"
|
|
94
|
-
},
|
|
94
|
+
}, ne = {
|
|
95
95
|
key: 0,
|
|
96
96
|
class: "tooltip__title-row"
|
|
97
|
-
},
|
|
97
|
+
}, ae = { key: 0 }, re = /* @__PURE__ */ E({
|
|
98
98
|
__name: "TooltipBubble",
|
|
99
99
|
props: {
|
|
100
100
|
id: {},
|
|
@@ -108,8 +108,8 @@ const Z = ["id"], ee = {
|
|
|
108
108
|
},
|
|
109
109
|
emits: ["dismiss"],
|
|
110
110
|
setup(t) {
|
|
111
|
-
const e = t,
|
|
112
|
-
() =>
|
|
111
|
+
const e = t, o = g(
|
|
112
|
+
() => N(
|
|
113
113
|
"tooltip",
|
|
114
114
|
"content",
|
|
115
115
|
"resets-link-colors",
|
|
@@ -119,48 +119,48 @@ const Z = ["id"], ee = {
|
|
|
119
119
|
e.className
|
|
120
120
|
)
|
|
121
121
|
);
|
|
122
|
-
return (
|
|
122
|
+
return (s, l) => (a(), f("div", {
|
|
123
123
|
id: t.id,
|
|
124
|
-
class:
|
|
124
|
+
class: M(o.value),
|
|
125
125
|
role: "tooltip"
|
|
126
126
|
}, [
|
|
127
|
-
t.tail ? (
|
|
128
|
-
t.type === "plain" ? (
|
|
129
|
-
|
|
130
|
-
t.dismissable ? (
|
|
127
|
+
t.tail ? (a(), f("div", le)) : v("", !0),
|
|
128
|
+
t.type === "plain" ? (a(), f("div", se, [
|
|
129
|
+
p(s.$slots, "default", {}, void 0, !0),
|
|
130
|
+
t.dismissable ? (a(), C(r(A), {
|
|
131
131
|
key: 0,
|
|
132
132
|
class: "tooltip__dismiss",
|
|
133
133
|
variant: "standard",
|
|
134
134
|
size: "extra-small",
|
|
135
135
|
"icon-only": !0,
|
|
136
|
-
"icon-definition": r(
|
|
136
|
+
"icon-definition": r(I),
|
|
137
137
|
"aria-label": "Dismiss tooltip",
|
|
138
|
-
onClick: l[0] || (l[0] = (
|
|
139
|
-
}, null, 8, ["icon-definition"])) :
|
|
140
|
-
])) : (
|
|
141
|
-
t.title || t.dismissable ? (
|
|
142
|
-
t.title ? (
|
|
143
|
-
t.dismissable ? (
|
|
138
|
+
onClick: l[0] || (l[0] = (c) => s.$emit("dismiss"))
|
|
139
|
+
}, null, 8, ["icon-definition"])) : v("", !0)
|
|
140
|
+
])) : (a(), f(G, { key: 2 }, [
|
|
141
|
+
t.title || t.dismissable ? (a(), f("div", ne, [
|
|
142
|
+
t.title ? (a(), f("h6", ae, x(t.title), 1)) : v("", !0),
|
|
143
|
+
t.dismissable ? (a(), C(r(A), {
|
|
144
144
|
key: 1,
|
|
145
145
|
class: "tooltip__dismiss",
|
|
146
146
|
variant: "standard",
|
|
147
147
|
size: "extra-small",
|
|
148
148
|
"icon-only": !0,
|
|
149
|
-
"icon-definition": r(
|
|
149
|
+
"icon-definition": r(I),
|
|
150
150
|
"aria-label": "Dismiss tooltip",
|
|
151
|
-
onClick: l[1] || (l[1] = (
|
|
152
|
-
}, null, 8, ["icon-definition"])) :
|
|
153
|
-
])) :
|
|
154
|
-
|
|
151
|
+
onClick: l[1] || (l[1] = (c) => s.$emit("dismiss"))
|
|
152
|
+
}, null, 8, ["icon-definition"])) : v("", !0)
|
|
153
|
+
])) : v("", !0),
|
|
154
|
+
p(s.$slots, "default", {}, void 0, !0)
|
|
155
155
|
], 64))
|
|
156
|
-
], 10,
|
|
156
|
+
], 10, oe));
|
|
157
157
|
}
|
|
158
|
-
}),
|
|
159
|
-
const
|
|
160
|
-
for (const [
|
|
161
|
-
|
|
162
|
-
return
|
|
163
|
-
},
|
|
158
|
+
}), F = (t, e) => {
|
|
159
|
+
const o = t.__vccOpts || t;
|
|
160
|
+
for (const [s, l] of e)
|
|
161
|
+
o[s] = l;
|
|
162
|
+
return o;
|
|
163
|
+
}, ce = /* @__PURE__ */ F(re, [["__scopeId", "data-v-7ccd7c7d"]]), de = /* @__PURE__ */ E({
|
|
164
164
|
__name: "Tooltip",
|
|
165
165
|
props: {
|
|
166
166
|
trigger: { default: "hover" },
|
|
@@ -172,66 +172,77 @@ const Z = ["id"], ee = {
|
|
|
172
172
|
dismissable: { type: Boolean },
|
|
173
173
|
className: {}
|
|
174
174
|
},
|
|
175
|
-
setup(t) {
|
|
176
|
-
const
|
|
177
|
-
const
|
|
178
|
-
if (!
|
|
179
|
-
const { innerWidth:
|
|
180
|
-
return `${U}-${
|
|
181
|
-
},
|
|
182
|
-
|
|
183
|
-
},
|
|
184
|
-
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
175
|
+
setup(t, { expose: e }) {
|
|
176
|
+
const o = t, s = J(), l = b(!1), c = b(null), n = b(null), m = b("top-center"), $ = b(0), S = () => {
|
|
177
|
+
const i = c.value?.getBoundingClientRect();
|
|
178
|
+
if (!i) return "top-center";
|
|
179
|
+
const { innerWidth: u, innerHeight: B } = window, h = i.top, X = B - i.bottom, O = n.value?.firstElementChild?.getBoundingClientRect().height ?? 0, U = (O > 0 ? h >= O : h >= X) ? "top" : "bottom", R = i.left + i.width / 2, q = R < u / 3 ? "left" : R > u * 2 / 3 ? "right" : "center";
|
|
180
|
+
return `${U}-${q}`;
|
|
181
|
+
}, z = (i) => {
|
|
182
|
+
i.key === "Escape" && d();
|
|
183
|
+
}, L = (i) => {
|
|
184
|
+
c.value && !c.value.contains(i.target) && d();
|
|
185
|
+
};
|
|
186
|
+
function W() {
|
|
187
|
+
const i = n.value?.firstElementChild?.getBoundingClientRect();
|
|
188
|
+
if (!i) return;
|
|
189
|
+
const u = 8, B = i.right - (window.innerWidth - u), h = u - i.left;
|
|
190
|
+
B <= 0 && h <= 0 || ($.value = window.innerWidth / 2 - (i.left + i.width / 2));
|
|
191
|
+
}
|
|
192
|
+
const y = async () => {
|
|
193
|
+
o.placement === "auto" ? m.value = S() : m.value = o.placement, $.value = 0, l.value = !0, document.addEventListener("keydown", z), o.trigger === "click" && document.addEventListener("click", L), await ee(), W();
|
|
194
|
+
}, d = () => {
|
|
195
|
+
l.value = !1, document.removeEventListener("keydown", z), document.removeEventListener("click", L);
|
|
196
|
+
}, j = () => {
|
|
197
|
+
l.value ? d() : y();
|
|
191
198
|
};
|
|
192
|
-
|
|
193
|
-
const
|
|
194
|
-
type:
|
|
195
|
-
color:
|
|
196
|
-
tail:
|
|
197
|
-
placement:
|
|
198
|
-
title:
|
|
199
|
-
dismissable:
|
|
199
|
+
K(d), e({ show: y, hide: d });
|
|
200
|
+
const H = g(() => ({
|
|
201
|
+
type: o.type,
|
|
202
|
+
color: o.color,
|
|
203
|
+
tail: o.tail,
|
|
204
|
+
placement: m.value,
|
|
205
|
+
title: o.title,
|
|
206
|
+
dismissable: o.dismissable
|
|
200
207
|
}));
|
|
201
|
-
return (
|
|
208
|
+
return (i, u) => (a(), f("span", w(
|
|
202
209
|
{
|
|
203
210
|
ref_key: "wrapperEl",
|
|
204
|
-
ref:
|
|
205
|
-
class: r(
|
|
211
|
+
ref: c,
|
|
212
|
+
class: r(N)("tooltip-trigger", o.className)
|
|
206
213
|
},
|
|
207
|
-
t.trigger === "click" ? { onClick:
|
|
214
|
+
t.trigger === "click" ? { onClick: j } : { onMouseenter: y, onMouseleave: d, onFocusin: y, onFocusout: d }
|
|
208
215
|
), [
|
|
209
|
-
|
|
210
|
-
|
|
216
|
+
p(i.$slots, "default", {
|
|
217
|
+
tooltipId: r(s),
|
|
218
|
+
isOpen: l.value
|
|
219
|
+
}, void 0, !0),
|
|
220
|
+
Q("span", {
|
|
211
221
|
ref_key: "positionerEl",
|
|
212
|
-
ref:
|
|
213
|
-
class:
|
|
214
|
-
style:
|
|
215
|
-
visibility:
|
|
216
|
-
"--positioner-gap": t.tail ? "var(--spacing-l)" : "0.5rem"
|
|
222
|
+
ref: n,
|
|
223
|
+
class: M(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${m.value}`]),
|
|
224
|
+
style: Z({
|
|
225
|
+
visibility: l.value ? "visible" : "hidden",
|
|
226
|
+
"--positioner-gap": t.tail ? "var(--spacing-l)" : "0.5rem",
|
|
227
|
+
"--adjust-x": `${$.value}px`
|
|
217
228
|
}),
|
|
218
|
-
onClick:
|
|
229
|
+
onClick: u[0] || (u[0] = Y(() => {
|
|
219
230
|
}, ["stop"]))
|
|
220
231
|
}, [
|
|
221
|
-
|
|
222
|
-
id: r(
|
|
223
|
-
onDismiss:
|
|
232
|
+
_(ce, w(H.value, {
|
|
233
|
+
id: r(s),
|
|
234
|
+
onDismiss: d
|
|
224
235
|
}), {
|
|
225
|
-
default:
|
|
226
|
-
|
|
236
|
+
default: k(() => [
|
|
237
|
+
p(i.$slots, "body", {}, void 0, !0)
|
|
227
238
|
]),
|
|
228
239
|
_: 3
|
|
229
240
|
}, 16, ["id"])
|
|
230
241
|
], 6)
|
|
231
242
|
], 16));
|
|
232
243
|
}
|
|
233
|
-
}),
|
|
244
|
+
}), me = /* @__PURE__ */ F(de, [["__scopeId", "data-v-b3f93b8c"]]);
|
|
234
245
|
export {
|
|
235
|
-
|
|
236
|
-
|
|
246
|
+
me as Tooltip,
|
|
247
|
+
ce as TooltipBubble
|
|
237
248
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-tooltip",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Tooltip component for displaying simple or rich content on hover of an element",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@fortawesome/pro-solid-svg-icons": "^7.1.0",
|
|
32
|
-
"@phila/phila-ui-button": "2.2.3-beta.
|
|
32
|
+
"@phila/phila-ui-button": "2.2.3-beta.3",
|
|
33
33
|
"@phila/phila-ui-core": "2.4.0-beta.2"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"vite": "^7.0.6",
|
|
41
41
|
"vite-plugin-dts": "^4.5.4",
|
|
42
42
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
43
|
-
"@phila/phila-ui-tags": "0.0
|
|
43
|
+
"@phila/phila-ui-tags": "0.1.0-beta.3"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"build": "vite build",
|