@phila/phila-ui-tooltip 0.1.0-beta.1 → 0.1.0-beta.2
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 +96 -93
- package/package.json +2 -2
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: () => 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":"AAgLA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA8F9D,iBAAS,cAAc;WAiFT,OAAO,IAA6B;;;;;YAbrB,GAAG;sBACN,GAAG;;;;;;;EAiB5B;AAoBD,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-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-
|
|
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-bea2f168]{position:relative;display:inline-block}.tooltip-trigger__positioner[data-v-bea2f168]{position:absolute;z-index:1000}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-left[data-v-bea2f168]{bottom:100%;left:-8px;padding-bottom:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-right[data-v-bea2f168]{bottom:100%;right:-8px;padding-bottom:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--top-center[data-v-bea2f168]{bottom:100%;left:50%;transform:translate(-50%);padding-bottom:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-left[data-v-bea2f168]{top:100%;left:-8px;padding-top:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-right[data-v-bea2f168]{top:100%;right:-8px;padding-top:var(--positioner-gap)}.tooltip-trigger__positioner.tooltip-trigger__positioner--bottom-center[data-v-bea2f168]{top:100%;left:50%;transform:translate(-50%);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"),d=require("@phila/phila-ui-core"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),d=require("@phila/phila-ui-core"),P=["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,i=s=>"href"in s&&s.href!==void 0||"to"in s&&s.to!==void 0,n=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)),l=e.computed(()=>i(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:n.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:n.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(s,u)=>i(t)?(e.openBlock(),e.createBlock(e.unref(d.BaseLink),e.mergeProps({key:0},{...l.value,...s.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(d.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(s.$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:n.value},s.$attrs),[e.createVNode(e.unref(d.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,P))}});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 S=["id"],V={key:0,class:"tooltip__tail","aria-hidden":"true"},T={key:1,class:"tooltip__plain-row has-text-body-small"},D={key:0,class:"tooltip__title-row"},L={key:0},O=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,i=e.computed(()=>d.cn("tooltip","content","resets-link-colors",`tooltip--${t.type}`,`tooltip--${t.color}`,t.tail&&`tooltip--${t.placement}`,t.className));return(n,l)=>(e.openBlock(),e.createElementBlock("div",{id:o.id,class:e.normalizeClass(i.value),role:"tooltip"},[o.tail?(e.openBlock(),e.createElementBlock("div",V)):e.createCommentVNode("",!0),o.type==="plain"?(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(n.$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:l[0]||(l[0]=r=>n.$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",D,[o.title?(e.openBlock(),e.createElementBlock("h6",L,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:l[1]||(l[1]=r=>n.$emit("dismiss"))},null,8,["icon-definition"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},void 0,!0)],64))],10,S))}}),h=(o,t)=>{const i=o.__vccOpts||o;for(const[n,l]of t)i[n]=l;return i},C=h(O,[["__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,{expose:t}){const i=o,n=e.useId(),l=e.ref(!1),r=e.ref(null),s=e.ref(null),u=e.ref("top-center"),$=()=>{const a=r.value?.getBoundingClientRect();if(!a)return"top-center";const{innerWidth:p,innerHeight:_}=window,b=a.top,w=_-a.bottom,k=s.value?.firstElementChild?.getBoundingClientRect().height??0,x=(k>0?b>=k:b>=w)?"top":"bottom",g=a.left+a.width/2,z=g<p/3?"left":g>p*2/3?"right":"center";return`${x}-${z}`},f=a=>{a.key==="Escape"&&c()},v=a=>{r.value&&!r.value.contains(a.target)&&c()},m=()=>{i.placement==="auto"?u.value=$():u.value=i.placement,l.value=!0,document.addEventListener("keydown",f),i.trigger==="click"&&document.addEventListener("click",v)},c=()=>{l.value=!1,document.removeEventListener("keydown",f),document.removeEventListener("click",v)},E=()=>{l.value?c():m()};e.onUnmounted(c),t({show:m,hide:c});const N=e.computed(()=>({type:i.type,color:i.color,tail:i.tail,placement:u.value,title:i.title,dismissable:i.dismissable}));return(a,p)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({ref_key:"wrapperEl",ref:r,class:e.unref(d.cn)("tooltip-trigger",i.className)},o.trigger==="click"?{onClick:E}:{onMouseenter:m,onMouseleave:c,onFocusin:m,onFocusout:c}),[e.renderSlot(a.$slots,"default",{tooltipId:e.unref(n),isOpen:l.value},void 0,!0),e.createElementVNode("span",{ref_key:"positionerEl",ref:s,class:e.normalizeClass(["tooltip-trigger__positioner",`tooltip-trigger__positioner--${u.value}`]),style:e.normalizeStyle({visibility:l.value?"visible":"hidden","--positioner-gap":o.tail?"var(--spacing-l)":"0.5rem"}),onClick:p[0]||(p[0]=e.withModifiers(()=>{},["stop"]))},[e.createVNode(C,e.mergeProps(N.value,{id:e.unref(n),onDismiss:c}),{default:e.withCtx(()=>[e.renderSlot(a.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],6)],16))}}),A=h(R,[["__scopeId","data-v-bea2f168"]]);exports.Tooltip=A;exports.TooltipBubble=C;
|
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 C, computed as b, createBlock as $, createElementBlock as u, openBlock as a, unref as r, mergeProps as h, withCtx as k, createVNode as _, normalizeProps as O, guardReactiveProps as R, renderSlot as p, createTextVNode as D, toDisplayString as B, normalizeClass as V, createCommentVNode as v, Fragment as j, useId as q, ref as g, onUnmounted as G, createElementVNode as J, withModifiers as K, normalizeStyle as Q } from "vue";
|
|
2
|
+
import { cn as w, BaseLink as Y, ActionContent as P } from "@phila/phila-ui-core";
|
|
3
|
+
import './index.css';const Z = ["disabled"], T = /* @__PURE__ */ C({
|
|
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, i = (s) => "href" in s && s.href !== void 0 || "to" in s && s.to !== void 0, l = b(() => w(
|
|
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
|
-
)),
|
|
32
|
+
)), o = b(() => i(e) ? "to" in e && e.to !== void 0 ? {
|
|
33
33
|
to: e.to,
|
|
34
34
|
disabled: e.disabled,
|
|
35
|
-
className:
|
|
35
|
+
className: l.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: l.value
|
|
42
|
+
} : {}), c = b(
|
|
43
43
|
() => ({
|
|
44
44
|
iconDefinition: e.iconDefinition,
|
|
45
45
|
iconClass: e.iconClass,
|
|
@@ -50,33 +50,33 @@ 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 (s, m) => i(e) ? (a(), $(r(Y), h({ key: 0 }, { ...o.value, ...s.$attrs }, { role: "button" }), {
|
|
54
|
+
default: k(() => [
|
|
55
|
+
_(r(P), O(R(c.value)), {
|
|
56
|
+
default: k(() => [
|
|
57
|
+
p(s.$slots, "default", {}, () => [
|
|
58
|
+
D(B(e.text), 1)
|
|
59
59
|
])
|
|
60
60
|
]),
|
|
61
61
|
_: 3
|
|
62
62
|
}, 16)
|
|
63
63
|
]),
|
|
64
64
|
_: 3
|
|
65
|
-
}, 16)) : (
|
|
65
|
+
}, 16)) : (a(), u("button", h({
|
|
66
66
|
key: 1,
|
|
67
67
|
type: "button",
|
|
68
68
|
disabled: e.disabled,
|
|
69
|
-
class:
|
|
70
|
-
},
|
|
71
|
-
|
|
72
|
-
default:
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
class: l.value
|
|
70
|
+
}, s.$attrs), [
|
|
71
|
+
_(r(P), O(R(c.value)), {
|
|
72
|
+
default: k(() => [
|
|
73
|
+
p(s.$slots, "default", {}, () => [
|
|
74
|
+
D(B(e.text), 1)
|
|
75
75
|
])
|
|
76
76
|
]),
|
|
77
77
|
_: 3
|
|
78
78
|
}, 16)
|
|
79
|
-
], 16,
|
|
79
|
+
], 16, Z));
|
|
80
80
|
}
|
|
81
81
|
});
|
|
82
82
|
var A = {
|
|
@@ -84,17 +84,17 @@ var A = {
|
|
|
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 ee = ["id"], te = {
|
|
88
88
|
key: 0,
|
|
89
89
|
class: "tooltip__tail",
|
|
90
90
|
"aria-hidden": "true"
|
|
91
|
-
},
|
|
91
|
+
}, ie = {
|
|
92
92
|
key: 1,
|
|
93
93
|
class: "tooltip__plain-row has-text-body-small"
|
|
94
|
-
},
|
|
94
|
+
}, oe = {
|
|
95
95
|
key: 0,
|
|
96
96
|
class: "tooltip__title-row"
|
|
97
|
-
},
|
|
97
|
+
}, le = { key: 0 }, se = /* @__PURE__ */ C({
|
|
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, i = b(
|
|
112
|
+
() => w(
|
|
113
113
|
"tooltip",
|
|
114
114
|
"content",
|
|
115
115
|
"resets-link-colors",
|
|
@@ -119,15 +119,15 @@ const Z = ["id"], ee = {
|
|
|
119
119
|
e.className
|
|
120
120
|
)
|
|
121
121
|
);
|
|
122
|
-
return (
|
|
122
|
+
return (l, o) => (a(), u("div", {
|
|
123
123
|
id: t.id,
|
|
124
|
-
class: V(
|
|
124
|
+
class: V(i.value),
|
|
125
125
|
role: "tooltip"
|
|
126
126
|
}, [
|
|
127
|
-
t.tail ? (
|
|
128
|
-
t.type === "plain" ? (
|
|
129
|
-
|
|
130
|
-
t.dismissable ? (
|
|
127
|
+
t.tail ? (a(), u("div", te)) : v("", !0),
|
|
128
|
+
t.type === "plain" ? (a(), u("div", ie, [
|
|
129
|
+
p(l.$slots, "default", {}, void 0, !0),
|
|
130
|
+
t.dismissable ? (a(), $(r(T), {
|
|
131
131
|
key: 0,
|
|
132
132
|
class: "tooltip__dismiss",
|
|
133
133
|
variant: "standard",
|
|
@@ -135,12 +135,12 @@ const Z = ["id"], ee = {
|
|
|
135
135
|
"icon-only": !0,
|
|
136
136
|
"icon-definition": r(A),
|
|
137
137
|
"aria-label": "Dismiss tooltip",
|
|
138
|
-
onClick:
|
|
139
|
-
}, null, 8, ["icon-definition"])) :
|
|
140
|
-
])) : (
|
|
141
|
-
t.title || t.dismissable ? (
|
|
142
|
-
t.title ? (
|
|
143
|
-
t.dismissable ? (
|
|
138
|
+
onClick: o[0] || (o[0] = (c) => l.$emit("dismiss"))
|
|
139
|
+
}, null, 8, ["icon-definition"])) : v("", !0)
|
|
140
|
+
])) : (a(), u(j, { key: 2 }, [
|
|
141
|
+
t.title || t.dismissable ? (a(), u("div", oe, [
|
|
142
|
+
t.title ? (a(), u("h6", le, B(t.title), 1)) : v("", !0),
|
|
143
|
+
t.dismissable ? (a(), $(r(T), {
|
|
144
144
|
key: 1,
|
|
145
145
|
class: "tooltip__dismiss",
|
|
146
146
|
variant: "standard",
|
|
@@ -148,19 +148,19 @@ const Z = ["id"], ee = {
|
|
|
148
148
|
"icon-only": !0,
|
|
149
149
|
"icon-definition": r(A),
|
|
150
150
|
"aria-label": "Dismiss tooltip",
|
|
151
|
-
onClick:
|
|
152
|
-
}, null, 8, ["icon-definition"])) :
|
|
153
|
-
])) :
|
|
154
|
-
|
|
151
|
+
onClick: o[1] || (o[1] = (c) => l.$emit("dismiss"))
|
|
152
|
+
}, null, 8, ["icon-definition"])) : v("", !0)
|
|
153
|
+
])) : v("", !0),
|
|
154
|
+
p(l.$slots, "default", {}, void 0, !0)
|
|
155
155
|
], 64))
|
|
156
|
-
], 10,
|
|
156
|
+
], 10, ee));
|
|
157
157
|
}
|
|
158
158
|
}), I = (t, e) => {
|
|
159
|
-
const
|
|
160
|
-
for (const [
|
|
161
|
-
|
|
162
|
-
return
|
|
163
|
-
},
|
|
159
|
+
const i = t.__vccOpts || t;
|
|
160
|
+
for (const [l, o] of e)
|
|
161
|
+
i[l] = o;
|
|
162
|
+
return i;
|
|
163
|
+
}, ne = /* @__PURE__ */ I(se, [["__scopeId", "data-v-0155bbdd"]]), ae = /* @__PURE__ */ C({
|
|
164
164
|
__name: "Tooltip",
|
|
165
165
|
props: {
|
|
166
166
|
trigger: { default: "hover" },
|
|
@@ -172,66 +172,69 @@ 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 `${
|
|
181
|
-
},
|
|
182
|
-
|
|
183
|
-
},
|
|
184
|
-
|
|
185
|
-
},
|
|
186
|
-
|
|
187
|
-
},
|
|
188
|
-
|
|
189
|
-
},
|
|
190
|
-
|
|
175
|
+
setup(t, { expose: e }) {
|
|
176
|
+
const i = t, l = q(), o = g(!1), c = g(null), s = g(null), m = g("top-center"), M = () => {
|
|
177
|
+
const n = c.value?.getBoundingClientRect();
|
|
178
|
+
if (!n) return "top-center";
|
|
179
|
+
const { innerWidth: f, innerHeight: H } = window, N = n.top, U = H - n.bottom, z = s.value?.firstElementChild?.getBoundingClientRect().height ?? 0, W = (z > 0 ? N >= z : N >= U) ? "top" : "bottom", L = n.left + n.width / 2, X = L < f / 3 ? "left" : L > f * 2 / 3 ? "right" : "center";
|
|
180
|
+
return `${W}-${X}`;
|
|
181
|
+
}, x = (n) => {
|
|
182
|
+
n.key === "Escape" && d();
|
|
183
|
+
}, E = (n) => {
|
|
184
|
+
c.value && !c.value.contains(n.target) && d();
|
|
185
|
+
}, y = () => {
|
|
186
|
+
i.placement === "auto" ? m.value = M() : m.value = i.placement, o.value = !0, document.addEventListener("keydown", x), i.trigger === "click" && document.addEventListener("click", E);
|
|
187
|
+
}, d = () => {
|
|
188
|
+
o.value = !1, document.removeEventListener("keydown", x), document.removeEventListener("click", E);
|
|
189
|
+
}, F = () => {
|
|
190
|
+
o.value ? d() : y();
|
|
191
191
|
};
|
|
192
|
-
|
|
193
|
-
const
|
|
194
|
-
type:
|
|
195
|
-
color:
|
|
196
|
-
tail:
|
|
197
|
-
placement:
|
|
198
|
-
title:
|
|
199
|
-
dismissable:
|
|
192
|
+
G(d), e({ show: y, hide: d });
|
|
193
|
+
const S = b(() => ({
|
|
194
|
+
type: i.type,
|
|
195
|
+
color: i.color,
|
|
196
|
+
tail: i.tail,
|
|
197
|
+
placement: m.value,
|
|
198
|
+
title: i.title,
|
|
199
|
+
dismissable: i.dismissable
|
|
200
200
|
}));
|
|
201
|
-
return (
|
|
201
|
+
return (n, f) => (a(), u("span", h(
|
|
202
202
|
{
|
|
203
203
|
ref_key: "wrapperEl",
|
|
204
|
-
ref:
|
|
205
|
-
class: r(
|
|
204
|
+
ref: c,
|
|
205
|
+
class: r(w)("tooltip-trigger", i.className)
|
|
206
206
|
},
|
|
207
|
-
t.trigger === "click" ? { onClick:
|
|
207
|
+
t.trigger === "click" ? { onClick: F } : { onMouseenter: y, onMouseleave: d, onFocusin: y, onFocusout: d }
|
|
208
208
|
), [
|
|
209
|
-
|
|
210
|
-
|
|
209
|
+
p(n.$slots, "default", {
|
|
210
|
+
tooltipId: r(l),
|
|
211
|
+
isOpen: o.value
|
|
212
|
+
}, void 0, !0),
|
|
213
|
+
J("span", {
|
|
211
214
|
ref_key: "positionerEl",
|
|
212
|
-
ref:
|
|
213
|
-
class: V(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${
|
|
214
|
-
style:
|
|
215
|
-
visibility:
|
|
215
|
+
ref: s,
|
|
216
|
+
class: V(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${m.value}`]),
|
|
217
|
+
style: Q({
|
|
218
|
+
visibility: o.value ? "visible" : "hidden",
|
|
216
219
|
"--positioner-gap": t.tail ? "var(--spacing-l)" : "0.5rem"
|
|
217
220
|
}),
|
|
218
|
-
onClick:
|
|
221
|
+
onClick: f[0] || (f[0] = K(() => {
|
|
219
222
|
}, ["stop"]))
|
|
220
223
|
}, [
|
|
221
|
-
|
|
222
|
-
id: r(
|
|
223
|
-
onDismiss:
|
|
224
|
+
_(ne, h(S.value, {
|
|
225
|
+
id: r(l),
|
|
226
|
+
onDismiss: d
|
|
224
227
|
}), {
|
|
225
|
-
default:
|
|
226
|
-
|
|
228
|
+
default: k(() => [
|
|
229
|
+
p(n.$slots, "body", {}, void 0, !0)
|
|
227
230
|
]),
|
|
228
231
|
_: 3
|
|
229
232
|
}, 16, ["id"])
|
|
230
233
|
], 6)
|
|
231
234
|
], 16));
|
|
232
235
|
}
|
|
233
|
-
}),
|
|
236
|
+
}), ue = /* @__PURE__ */ I(ae, [["__scopeId", "data-v-bea2f168"]]);
|
|
234
237
|
export {
|
|
235
|
-
|
|
236
|
-
|
|
238
|
+
ue as Tooltip,
|
|
239
|
+
ne as TooltipBubble
|
|
237
240
|
};
|
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.2",
|
|
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",
|
|
@@ -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",
|