@data-slot/collapsible 0.2.78 → 0.2.80
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 +10 -2
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -140,15 +140,23 @@ The content element exposes size variables you can use for dimension animations:
|
|
|
140
140
|
|
|
141
141
|
| Variable | Description |
|
|
142
142
|
|----------|-------------|
|
|
143
|
-
| `--collapsible-panel-height` |
|
|
144
|
-
| `--collapsible-panel-width` |
|
|
143
|
+
| `--collapsible-panel-height` | Panel height (`auto` at open rest, measured px during transitions, `0px` when closed) |
|
|
144
|
+
| `--collapsible-panel-width` | Panel width (`auto` at open rest, measured px during transitions, `0px` when closed) |
|
|
145
145
|
|
|
146
146
|
Example:
|
|
147
147
|
|
|
148
148
|
```css
|
|
149
149
|
[data-slot="collapsible-content"] {
|
|
150
|
+
overflow: hidden;
|
|
150
151
|
height: var(--collapsible-panel-height);
|
|
151
152
|
width: var(--collapsible-panel-width);
|
|
153
|
+
transition: height 0.25s ease, width 0.25s ease, opacity 0.2s ease;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
[data-slot="collapsible-content"][data-starting-style],
|
|
157
|
+
[data-slot="collapsible-content"][data-ending-style] {
|
|
158
|
+
height: 0;
|
|
159
|
+
opacity: 0;
|
|
152
160
|
}
|
|
153
161
|
```
|
|
154
162
|
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=new WeakSet;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=new WeakSet,n=e=>{let t=e.trim();return t?t.endsWith(`ms`)?Number.parseFloat(t.slice(0,-2))||0:t.endsWith(`s`)?(Number.parseFloat(t.slice(0,-1))||0)*1e3:Number.parseFloat(t)||0:0},r=(e,t)=>{let r=e.split(`,`),i=t.split(`,`),a=Math.max(r.length,i.length),o=0;for(let e=0;e<a;e+=1){let t=n(r[e]??r[r.length-1]??`0`),a=n(i[e]??i[i.length-1]??`0`);o=Math.max(o,t+a)}return o},i=e=>{let t=getComputedStyle(e),n=r(t.transitionDuration,t.transitionDelay),i=r(t.animationDuration,t.animationDelay);return Math.max(n,i)};function a(n,r={}){let a=r.defaultOpen??(0,e.getDataBool)(n,`defaultOpen`)??!1,o=r.hiddenUntilFound??(0,e.getDataBool)(n,`hiddenUntilFound`)??!1,s=r.onOpenChange,c=(0,e.getPart)(n,`collapsible-trigger`),l=(0,e.getPart)(n,`collapsible-content`);if(!c||!l)throw Error(`Collapsible requires trigger and content slots`);let u=n.ownerDocument?.defaultView??window,d=a,f=[],p=null,m=null,h=null,g=null,_=[],v=(0,e.ensureId)(l,`collapsible-content`),y=(0,e.ensureId)(c,`collapsible-trigger`);c.setAttribute(`aria-controls`,v),l.setAttribute(`role`,`region`),l.setAttribute(`aria-labelledby`,y);let b=e=>{n.setAttribute(`data-state`,e),l.setAttribute(`data-state`,e)},x=(e,t)=>{l.style.setProperty(`--collapsible-panel-height`,e),l.style.setProperty(`--collapsible-panel-width`,t)},S=(e,t)=>{x(`${e}px`,`${t}px`)},C=()=>{x(`auto`,`auto`)},w=()=>{S(0,0)},T=()=>{S(l.scrollHeight,l.scrollWidth)},E=()=>{let e=l.style.getPropertyValue(`--collapsible-panel-height`).trim(),t=l.style.getPropertyValue(`--collapsible-panel-width`).trim();return e===`auto`&&t===`auto`},D=()=>{m!==null&&(u.cancelAnimationFrame(m),m=null),h!==null&&(u.clearTimeout(h),h=null),_.forEach(e=>e()),_=[]},O=()=>{g!==null&&(u.cancelAnimationFrame(g),g=null)},k=()=>{D(),O()},A=()=>{l.removeAttribute(`hidden`)},j=()=>{o?l.setAttribute(`hidden`,`until-found`):l.hidden=!0,w()},M=()=>{D(),!(!d||F.isExiting)&&C()},N=()=>{D();let e=i(l);if(e>0){let t=e=>{e.target===l&&M()};l.addEventListener(`transitionend`,t),l.addEventListener(`animationend`,t),_.push(()=>l.removeEventListener(`transitionend`,t)),_.push(()=>l.removeEventListener(`animationend`,t)),h=u.setTimeout(()=>{h=null,M()},Math.ceil(e)+50);return}m=u.requestAnimationFrame(()=>{m=null,M()})},P=()=>{O(),g=u.requestAnimationFrame(()=>{g=null,!d&&F.isExiting&&w()})},F=(0,e.createPresenceLifecycle)({element:l,onExitComplete:()=>{O(),j()}}),I=t=>{d!==t&&(d=t,(0,e.setAria)(c,`expanded`,d),b(d?`open`:`closed`),d?(O(),A(),T(),F.enter(),N()):(D(),T(),F.exit(),P()),(0,e.emit)(n,`collapsible:change`,{open:d}),s?.(d))};return(0,e.setAria)(c,`expanded`,d),d?(A(),T(),N()):j(),b(d?`open`:`closed`),typeof ResizeObserver<`u`&&(p=new ResizeObserver(()=>{!d||F.isExiting||E()||T()}),p.observe(l)),f.push((0,e.on)(c,`click`,()=>{c.hasAttribute(`disabled`)||c.getAttribute(`aria-disabled`)===`true`||I(!d)})),o&&f.push((0,e.on)(l,`beforematch`,()=>{d||I(!0)})),f.push((0,e.on)(n,`collapsible:set`,e=>{if(c.hasAttribute(`disabled`)||c.getAttribute(`aria-disabled`)===`true`)return;let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&I(n)})),{open:()=>I(!0),close:()=>I(!1),toggle:()=>I(!d),get isOpen(){return d},destroy:()=>{F.cleanup(),k(),p?.disconnect(),p=null,f.forEach(e=>e()),f.length=0,t.delete(n)}}}function o(n=document){let r=[];for(let i of(0,e.getRoots)(n,`collapsible`))t.has(i)||(t.add(i),r.push(a(i)));return r}exports.create=o,exports.createCollapsible=a;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createPresenceLifecycle as e,emit as t,ensureId as n,getDataBool as r,getPart as i,getRoots as a,on as o,setAria as s}from"@data-slot/core";const c=new WeakSet;
|
|
1
|
+
import{createPresenceLifecycle as e,emit as t,ensureId as n,getDataBool as r,getPart as i,getRoots as a,on as o,setAria as s}from"@data-slot/core";const c=new WeakSet,l=e=>{let t=e.trim();return t?t.endsWith(`ms`)?Number.parseFloat(t.slice(0,-2))||0:t.endsWith(`s`)?(Number.parseFloat(t.slice(0,-1))||0)*1e3:Number.parseFloat(t)||0:0},u=(e,t)=>{let n=e.split(`,`),r=t.split(`,`),i=Math.max(n.length,r.length),a=0;for(let e=0;e<i;e+=1){let t=l(n[e]??n[n.length-1]??`0`),i=l(r[e]??r[r.length-1]??`0`);a=Math.max(a,t+i)}return a},d=e=>{let t=getComputedStyle(e),n=u(t.transitionDuration,t.transitionDelay),r=u(t.animationDuration,t.animationDelay);return Math.max(n,r)};function f(a,l={}){let u=l.defaultOpen??r(a,`defaultOpen`)??!1,f=l.hiddenUntilFound??r(a,`hiddenUntilFound`)??!1,p=l.onOpenChange,m=i(a,`collapsible-trigger`),h=i(a,`collapsible-content`);if(!m||!h)throw Error(`Collapsible requires trigger and content slots`);let g=a.ownerDocument?.defaultView??window,_=u,v=[],y=null,b=null,x=null,S=null,C=[],w=n(h,`collapsible-content`),T=n(m,`collapsible-trigger`);m.setAttribute(`aria-controls`,w),h.setAttribute(`role`,`region`),h.setAttribute(`aria-labelledby`,T);let E=e=>{a.setAttribute(`data-state`,e),h.setAttribute(`data-state`,e)},D=(e,t)=>{h.style.setProperty(`--collapsible-panel-height`,e),h.style.setProperty(`--collapsible-panel-width`,t)},O=(e,t)=>{D(`${e}px`,`${t}px`)},k=()=>{D(`auto`,`auto`)},A=()=>{O(0,0)},j=()=>{O(h.scrollHeight,h.scrollWidth)},M=()=>{let e=h.style.getPropertyValue(`--collapsible-panel-height`).trim(),t=h.style.getPropertyValue(`--collapsible-panel-width`).trim();return e===`auto`&&t===`auto`},N=()=>{b!==null&&(g.cancelAnimationFrame(b),b=null),x!==null&&(g.clearTimeout(x),x=null),C.forEach(e=>e()),C=[]},P=()=>{S!==null&&(g.cancelAnimationFrame(S),S=null)},F=()=>{N(),P()},I=()=>{h.removeAttribute(`hidden`)},L=()=>{f?h.setAttribute(`hidden`,`until-found`):h.hidden=!0,A()},R=()=>{N(),!(!_||V.isExiting)&&k()},z=()=>{N();let e=d(h);if(e>0){let t=e=>{e.target===h&&R()};h.addEventListener(`transitionend`,t),h.addEventListener(`animationend`,t),C.push(()=>h.removeEventListener(`transitionend`,t)),C.push(()=>h.removeEventListener(`animationend`,t)),x=g.setTimeout(()=>{x=null,R()},Math.ceil(e)+50);return}b=g.requestAnimationFrame(()=>{b=null,R()})},B=()=>{P(),S=g.requestAnimationFrame(()=>{S=null,!_&&V.isExiting&&A()})},V=e({element:h,onExitComplete:()=>{P(),L()}}),H=e=>{_!==e&&(_=e,s(m,`expanded`,_),E(_?`open`:`closed`),_?(P(),I(),j(),V.enter(),z()):(N(),j(),V.exit(),B()),t(a,`collapsible:change`,{open:_}),p?.(_))};return s(m,`expanded`,_),_?(I(),j(),z()):L(),E(_?`open`:`closed`),typeof ResizeObserver<`u`&&(y=new ResizeObserver(()=>{!_||V.isExiting||M()||j()}),y.observe(h)),v.push(o(m,`click`,()=>{m.hasAttribute(`disabled`)||m.getAttribute(`aria-disabled`)===`true`||H(!_)})),f&&v.push(o(h,`beforematch`,()=>{_||H(!0)})),v.push(o(a,`collapsible:set`,e=>{if(m.hasAttribute(`disabled`)||m.getAttribute(`aria-disabled`)===`true`)return;let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&H(n)})),{open:()=>H(!0),close:()=>H(!1),toggle:()=>H(!_),get isOpen(){return _},destroy:()=>{V.cleanup(),F(),y?.disconnect(),y=null,v.forEach(e=>e()),v.length=0,c.delete(a)}}}function p(e=document){let t=[];for(let n of a(e,`collapsible`))c.has(n)||(c.add(n),t.push(f(n)));return t}export{p as create,f as createCollapsible};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-slot/collapsible",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.80",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -38,6 +38,6 @@
|
|
|
38
38
|
],
|
|
39
39
|
"license": "MIT",
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@data-slot/core": "0.2.
|
|
41
|
+
"@data-slot/core": "0.2.80"
|
|
42
42
|
}
|
|
43
43
|
}
|