@data-slot/hover-card 0.2.90 → 0.2.92
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 +11 -3
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -124,7 +124,14 @@ Use controller `setOpen(open)` or the `hover-card:set` event to apply state.
|
|
|
124
124
|
|
|
125
125
|
## Data Attributes
|
|
126
126
|
|
|
127
|
-
Options can be set via data attributes
|
|
127
|
+
Options can be set via data attributes. JS options take precedence.
|
|
128
|
+
|
|
129
|
+
Placement attributes (`data-side`, `data-align`, `data-side-offset`, `data-align-offset`, `data-avoid-collisions`, `data-collision-padding`) resolve in this order:
|
|
130
|
+
|
|
131
|
+
1. JavaScript option
|
|
132
|
+
2. `hover-card-content`
|
|
133
|
+
3. `hover-card-positioner`
|
|
134
|
+
4. `hover-card` root (fallback)
|
|
128
135
|
|
|
129
136
|
| Attribute | Type | Default | Description |
|
|
130
137
|
|-----------|------|---------|-------------|
|
|
@@ -132,8 +139,8 @@ Options can be set via data attributes on root/content. JS options take preceden
|
|
|
132
139
|
| `data-delay` | number | `700` | Open delay (ms) |
|
|
133
140
|
| `data-skip-delay-duration` | number | `300` | Warm-up window to skip open delay (ms) |
|
|
134
141
|
| `data-close-delay` | number | `300` | Close delay (ms) |
|
|
135
|
-
| `data-side` | string | `"bottom"` | Preferred side
|
|
136
|
-
| `data-align` | string | `"center"` | Preferred align
|
|
142
|
+
| `data-side` | string | `"bottom"` | Preferred side |
|
|
143
|
+
| `data-align` | string | `"center"` | Preferred align |
|
|
137
144
|
| `data-side-offset` | number | `4` | Distance from trigger (px) |
|
|
138
145
|
| `data-align-offset` | number | `0` | Align offset (px) |
|
|
139
146
|
| `data-avoid-collisions` | boolean | `true` | Collision handling |
|
|
@@ -180,6 +187,7 @@ root.dispatchEvent(new CustomEvent("hover-card:set", { detail: { value: true } }
|
|
|
180
187
|
Position is computed in JavaScript and applied as `position: absolute` + `transform: translate3d(...)`.
|
|
181
188
|
By default, content is portaled to `document.body` while open.
|
|
182
189
|
Use `data-open` / `data-closed`, `data-side`, and `data-align` for animation/styling.
|
|
190
|
+
Placement uses layout dimensions, so `scale`/`zoom` animations on `hover-card-content` stay aligned without requiring an extra inner wrapper.
|
|
183
191
|
|
|
184
192
|
```css
|
|
185
193
|
[data-slot="hover-card-content"] {
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`right`,`bottom`,`left`],n=[`start`,`center`,`end`];let r=0;function i(i,a={}){let o=(0,e.getPart)(i,`hover-card-trigger`),s=(0,e.getPart)(i,`hover-card-content`),c=(0,e.getPart)(i,`hover-card-positioner`),l=c&&s&&c.contains(s)?c:null,u=(0,e.getPart)(i,`hover-card-portal`),
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`right`,`bottom`,`left`],n=[`start`,`center`,`end`];let r=0;function i(i,a={}){let o=(0,e.getPart)(i,`hover-card-trigger`),s=(0,e.getPart)(i,`hover-card-content`),c=(0,e.getPart)(i,`hover-card-positioner`),l=c&&s&&c.contains(s)?c:null,u=(0,e.getPart)(i,`hover-card-portal`),ee=u&&l&&u.contains(l)?u:null;if(!o||!s)throw Error(`Hover-card requires trigger and content slots`);let d=a.open!==void 0,f=a.defaultOpen??(0,e.getDataBool)(i,`defaultOpen`)??!1,p=a.delay??(0,e.getDataNumber)(i,`delay`)??700,m=a.skipDelayDuration??(0,e.getDataNumber)(i,`skipDelayDuration`)??300,h=a.closeDelay??(0,e.getDataNumber)(i,`closeDelay`)??300,g=a.onOpenChange,_=a.closeOnClickOutside??(0,e.getDataBool)(i,`closeOnClickOutside`)??!0,v=a.closeOnEscape??(0,e.getDataBool)(i,`closeOnEscape`)??!0,y=a.portal??(0,e.getDataBool)(s,`portal`)??(0,e.getDataBool)(i,`portal`)??!0,b=(t,n)=>(0,e.getDataEnum)(s,t,n)??(l?(0,e.getDataEnum)(l,t,n):void 0)??(0,e.getDataEnum)(i,t,n),x=t=>(0,e.getDataNumber)(s,t)??(l?(0,e.getDataNumber)(l,t):void 0)??(0,e.getDataNumber)(i,t),te=t=>(0,e.getDataBool)(s,t)??(l?(0,e.getDataBool)(l,t):void 0)??(0,e.getDataBool)(i,t),S=a.side??b(`side`,t)??`bottom`,C=a.align??b(`align`,n)??`center`,w=a.sideOffset??x(`sideOffset`)??4,T=a.alignOffset??x(`alignOffset`)??0,ne=a.avoidCollisions??te(`avoidCollisions`)??!0,E=a.collisionPadding??x(`collisionPadding`)??8,D=a.open??f,O=!1,k=!1,A=!1,j=!1,M=!1,N=null,P=null,F=-1/0,I=-1/0,L=[],R=(0,e.createPortalLifecycle)({content:s,root:i,enabled:y,wrapperSlot:l?void 0:`hover-card-positioner`,container:l??void 0,mountTarget:l?ee??l:void 0}),z=(0,e.ensureId)(s,`hover-card-content`);o.setAttribute(`aria-haspopup`,`dialog`),o.setAttribute(`aria-controls`,z),s.setAttribute(`data-side`,S),s.setAttribute(`data-align`,C);let B=()=>o.hasAttribute(`disabled`)||o.getAttribute(`aria-disabled`)===`true`,V=()=>{N&&=(clearTimeout(N),null)},H=()=>{P&&=(clearTimeout(P),null)},U=()=>{V(),H()},W=(t,n)=>{(0,e.emit)(i,`hover-card:change`,{open:t,reason:n,trigger:o,content:s}),g?.(t)},G=()=>{let t=R.container,n=i.ownerDocument.defaultView??window,r=(0,e.computeFloatingPosition)({anchorRect:o.getBoundingClientRect(),contentRect:(0,e.measurePopupContentRect)(s),side:S,align:C,sideOffset:w,alignOffset:T,avoidCollisions:ne,collisionPadding:E});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${r.x+n.scrollX}px, ${r.y+n.scrollY}px, 0)`,t.style.willChange=`transform`,t.style.margin=`0`,s.setAttribute(`data-side`,r.side),s.setAttribute(`data-align`,r.align),t!==s&&(t.setAttribute(`data-side`,r.side),t.setAttribute(`data-align`,r.align))},K=e=>{let t=R.container;if(i.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),t!==s&&t.setAttribute(`data-state`,e),e===`open`){i.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),t!==s&&t.setAttribute(`data-open`,``),O?(i.setAttribute(`data-instant`,``),s.setAttribute(`data-instant`,``),t!==s&&t.setAttribute(`data-instant`,``)):(i.removeAttribute(`data-instant`),s.removeAttribute(`data-instant`),t!==s&&t.removeAttribute(`data-instant`)),i.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),t!==s&&t.removeAttribute(`data-closed`);return}i.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),t!==s&&t.setAttribute(`data-closed`,``),i.removeAttribute(`data-instant`),s.removeAttribute(`data-instant`),t!==s&&t.removeAttribute(`data-instant`),i.removeAttribute(`data-open`),s.removeAttribute(`data-open`),t!==s&&t.removeAttribute(`data-open`)},q=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{k||(R.restore(),s.hidden=!0)}}),J=(0,e.createPositionSync)({observedElements:[o,s],isActive:()=>D,ancestorScroll:!1,onUpdate:G}),Y=(t,n,i=!1)=>{D!==t&&(!t&&D&&m>0&&(r=Date.now()+m),O=t?i:!1,D=t,(0,e.setAria)(o,`expanded`,D),t?(R.mount(),s.hidden=!1,K(`open`),q.enter(),G(),J.start(),J.update()):(K(`closed`),q.exit(),J.stop()),W(D,n))},X=(e,t,n=!1)=>{if(D!==e){if(d){W(e,t);return}Y(e,t,n)}},Z=(e,t,n=!1)=>{Y(e,t,n)},Q=e=>{if(H(),V(),m>0&&Date.now()<r){X(!0,e,!0);return}if(p<=0){X(!0,e);return}N=setTimeout(()=>{N=null,X(!0,e)},p)},re=e=>{if(V(),H(),h<=0){X(!1,e);return}P=setTimeout(()=>{P=null,X(!1,e)},h)},$=e=>{A||j||M||re(e)};return(0,e.setAria)(o,`expanded`,D),K(D?`open`:`closed`),s.hidden=!D,D&&(R.mount(),q.enter(),s.hidden=!1,G(),J.start(),J.update()),L.push((0,e.on)(i.ownerDocument,`keydown`,e=>{e.key===`Tab`&&(F=Date.now())},{capture:!0}),(0,e.on)(i.ownerDocument,`pointerdown`,()=>{F=-1/0,I=-1/0},{capture:!0}),(0,e.on)(i.ownerDocument,`pointermove`,e=>{e.pointerType!==`touch`&&(I=Date.now())},{capture:!0}),(0,e.on)(o,`pointerenter`,e=>{e.pointerType!==`touch`&&(A=!0,!B()&&(Date.now()-I>250||Q(`pointer`)))}),(0,e.on)(o,`pointermove`,e=>{e.pointerType!==`touch`&&(!A||B()||D||N||Q(`pointer`))}),(0,e.on)(o,`pointerleave`,e=>{if(e.pointerType===`touch`)return;A=!1;let t=e.relatedTarget;t&&s.contains(t)||$(`pointer`)})),L.push((0,e.on)(s,`pointerenter`,e=>{e.pointerType!==`touch`&&(j=!0,H())}),(0,e.on)(s,`pointerleave`,e=>{if(e.pointerType===`touch`)return;j=!1;let t=e.relatedTarget;t&&o.contains(t)||$(`pointer`)})),L.push((0,e.on)(o,`focusin`,()=>{B()||Date.now()-F>750||(M=!0,Q(`focus`))}),(0,e.on)(o,`focusout`,e=>{let t=e.relatedTarget;t&&(o.contains(t)||s.contains(t))||(M=!1,$(`blur`))}),(0,e.on)(s,`focusin`,()=>{M=!0,H()}),(0,e.on)(s,`focusout`,e=>{let t=e.relatedTarget;t&&(o.contains(t)||s.contains(t))||(M=!1,$(`blur`))})),L.push((0,e.createDismissLayer)({root:i,isOpen:()=>D,onDismiss:()=>X(!1,`dismiss`),closeOnClickOutside:_,closeOnEscape:v})),L.push((0,e.on)(i,`hover-card:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&Z(n,`api`)})),{open:()=>{B()||(U(),X(!0,`api`))},close:()=>{U(),X(!1,`api`)},toggle:()=>{U(),!(!D&&B())&&X(!D,`api`)},setOpen:e=>{U(),Z(e,`api`)},get isOpen(){return D},destroy:()=>{k=!0,U(),J.stop(),q.cleanup(),R.cleanup(),L.forEach(e=>e()),L.length=0}}}const a=new WeakSet;function o(t=document){let n=[];for(let r of(0,e.getRoots)(t,`hover-card`))a.has(r)||(a.add(r),n.push(i(r)));return n}exports.create=o,exports.createHoverCard=i;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{computeFloatingPosition as e,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as i,emit as
|
|
1
|
+
import{computeFloatingPosition as e,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as i,emit as ee,ensureId as te,getDataBool as a,getDataEnum as o,getDataNumber as s,getPart as c,getRoots as l,measurePopupContentRect as ne,on as u,setAria as d}from"@data-slot/core";const f=[`top`,`right`,`bottom`,`left`],re=[`start`,`center`,`end`];let p=0;function m(l,m={}){let h=c(l,`hover-card-trigger`),g=c(l,`hover-card-content`),_=c(l,`hover-card-positioner`),v=_&&g&&_.contains(g)?_:null,y=c(l,`hover-card-portal`),ie=y&&v&&y.contains(v)?y:null;if(!h||!g)throw Error(`Hover-card requires trigger and content slots`);let ae=m.open!==void 0,oe=m.defaultOpen??a(l,`defaultOpen`)??!1,b=m.delay??s(l,`delay`)??700,x=m.skipDelayDuration??s(l,`skipDelayDuration`)??300,S=m.closeDelay??s(l,`closeDelay`)??300,se=m.onOpenChange,ce=m.closeOnClickOutside??a(l,`closeOnClickOutside`)??!0,le=m.closeOnEscape??a(l,`closeOnEscape`)??!0,ue=m.portal??a(g,`portal`)??a(l,`portal`)??!0,C=(e,t)=>o(g,e,t)??(v?o(v,e,t):void 0)??o(l,e,t),w=e=>s(g,e)??(v?s(v,e):void 0)??s(l,e),de=e=>a(g,e)??(v?a(v,e):void 0)??a(l,e),T=m.side??C(`side`,f)??`bottom`,E=m.align??C(`align`,re)??`center`,D=m.sideOffset??w(`sideOffset`)??4,fe=m.alignOffset??w(`alignOffset`)??0,pe=m.avoidCollisions??de(`avoidCollisions`)??!0,me=m.collisionPadding??w(`collisionPadding`)??8,O=m.open??oe,k=!1,A=!1,j=!1,M=!1,N=!1,P=null,F=null,I=-1/0,L=-1/0,R=[],z=n({content:g,root:l,enabled:ue,wrapperSlot:v?void 0:`hover-card-positioner`,container:v??void 0,mountTarget:v?ie??v:void 0}),he=te(g,`hover-card-content`);h.setAttribute(`aria-haspopup`,`dialog`),h.setAttribute(`aria-controls`,he),g.setAttribute(`data-side`,T),g.setAttribute(`data-align`,E);let B=()=>h.hasAttribute(`disabled`)||h.getAttribute(`aria-disabled`)===`true`,V=()=>{P&&=(clearTimeout(P),null)},H=()=>{F&&=(clearTimeout(F),null)},U=()=>{V(),H()},W=(e,t)=>{ee(l,`hover-card:change`,{open:e,reason:t,trigger:h,content:g}),se?.(e)},G=()=>{let t=z.container,n=l.ownerDocument.defaultView??window,r=e({anchorRect:h.getBoundingClientRect(),contentRect:ne(g),side:T,align:E,sideOffset:D,alignOffset:fe,avoidCollisions:pe,collisionPadding:me});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${r.x+n.scrollX}px, ${r.y+n.scrollY}px, 0)`,t.style.willChange=`transform`,t.style.margin=`0`,g.setAttribute(`data-side`,r.side),g.setAttribute(`data-align`,r.align),t!==g&&(t.setAttribute(`data-side`,r.side),t.setAttribute(`data-align`,r.align))},K=e=>{let t=z.container;if(l.setAttribute(`data-state`,e),g.setAttribute(`data-state`,e),t!==g&&t.setAttribute(`data-state`,e),e===`open`){l.setAttribute(`data-open`,``),g.setAttribute(`data-open`,``),t!==g&&t.setAttribute(`data-open`,``),k?(l.setAttribute(`data-instant`,``),g.setAttribute(`data-instant`,``),t!==g&&t.setAttribute(`data-instant`,``)):(l.removeAttribute(`data-instant`),g.removeAttribute(`data-instant`),t!==g&&t.removeAttribute(`data-instant`)),l.removeAttribute(`data-closed`),g.removeAttribute(`data-closed`),t!==g&&t.removeAttribute(`data-closed`);return}l.setAttribute(`data-closed`,``),g.setAttribute(`data-closed`,``),t!==g&&t.setAttribute(`data-closed`,``),l.removeAttribute(`data-instant`),g.removeAttribute(`data-instant`),t!==g&&t.removeAttribute(`data-instant`),l.removeAttribute(`data-open`),g.removeAttribute(`data-open`),t!==g&&t.removeAttribute(`data-open`)},q=i({element:g,onExitComplete:()=>{A||(z.restore(),g.hidden=!0)}}),J=r({observedElements:[h,g],isActive:()=>O,ancestorScroll:!1,onUpdate:G}),Y=(e,t,n=!1)=>{O!==e&&(!e&&O&&x>0&&(p=Date.now()+x),k=e?n:!1,O=e,d(h,`expanded`,O),e?(z.mount(),g.hidden=!1,K(`open`),q.enter(),G(),J.start(),J.update()):(K(`closed`),q.exit(),J.stop()),W(O,t))},X=(e,t,n=!1)=>{if(O!==e){if(ae){W(e,t);return}Y(e,t,n)}},Z=(e,t,n=!1)=>{Y(e,t,n)},Q=e=>{if(H(),V(),x>0&&Date.now()<p){X(!0,e,!0);return}if(b<=0){X(!0,e);return}P=setTimeout(()=>{P=null,X(!0,e)},b)},ge=e=>{if(V(),H(),S<=0){X(!1,e);return}F=setTimeout(()=>{F=null,X(!1,e)},S)},$=e=>{j||M||N||ge(e)};return d(h,`expanded`,O),K(O?`open`:`closed`),g.hidden=!O,O&&(z.mount(),q.enter(),g.hidden=!1,G(),J.start(),J.update()),R.push(u(l.ownerDocument,`keydown`,e=>{e.key===`Tab`&&(I=Date.now())},{capture:!0}),u(l.ownerDocument,`pointerdown`,()=>{I=-1/0,L=-1/0},{capture:!0}),u(l.ownerDocument,`pointermove`,e=>{e.pointerType!==`touch`&&(L=Date.now())},{capture:!0}),u(h,`pointerenter`,e=>{e.pointerType!==`touch`&&(j=!0,!B()&&(Date.now()-L>250||Q(`pointer`)))}),u(h,`pointermove`,e=>{e.pointerType!==`touch`&&(!j||B()||O||P||Q(`pointer`))}),u(h,`pointerleave`,e=>{if(e.pointerType===`touch`)return;j=!1;let t=e.relatedTarget;t&&g.contains(t)||$(`pointer`)})),R.push(u(g,`pointerenter`,e=>{e.pointerType!==`touch`&&(M=!0,H())}),u(g,`pointerleave`,e=>{if(e.pointerType===`touch`)return;M=!1;let t=e.relatedTarget;t&&h.contains(t)||$(`pointer`)})),R.push(u(h,`focusin`,()=>{B()||Date.now()-I>750||(N=!0,Q(`focus`))}),u(h,`focusout`,e=>{let t=e.relatedTarget;t&&(h.contains(t)||g.contains(t))||(N=!1,$(`blur`))}),u(g,`focusin`,()=>{N=!0,H()}),u(g,`focusout`,e=>{let t=e.relatedTarget;t&&(h.contains(t)||g.contains(t))||(N=!1,$(`blur`))})),R.push(t({root:l,isOpen:()=>O,onDismiss:()=>X(!1,`dismiss`),closeOnClickOutside:ce,closeOnEscape:le})),R.push(u(l,`hover-card:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&Z(n,`api`)})),{open:()=>{B()||(U(),X(!0,`api`))},close:()=>{U(),X(!1,`api`)},toggle:()=>{U(),!(!O&&B())&&X(!O,`api`)},setOpen:e=>{U(),Z(e,`api`)},get isOpen(){return O},destroy:()=>{A=!0,U(),J.stop(),q.cleanup(),z.cleanup(),R.forEach(e=>e()),R.length=0}}}const h=new WeakSet;function g(e=document){let t=[];for(let n of l(e,`hover-card`))h.has(n)||(h.add(n),t.push(m(n)));return t}export{g as create,m as createHoverCard};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-slot/hover-card",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.92",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -39,6 +39,6 @@
|
|
|
39
39
|
],
|
|
40
40
|
"license": "MIT",
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@data-slot/core": "0.2.
|
|
42
|
+
"@data-slot/core": "0.2.92"
|
|
43
43
|
}
|
|
44
44
|
}
|