@data-slot/accordion 0.2.3 → 0.2.5
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 +24 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,6 +65,30 @@ const accordion = createAccordion(element, {
|
|
|
65
65
|
| `collapsible` | `boolean` | `true` | Whether items can be fully collapsed (single mode only) |
|
|
66
66
|
| `onValueChange` | `(value: string[]) => void` | `undefined` | Callback when expanded items change |
|
|
67
67
|
|
|
68
|
+
### Data Attributes
|
|
69
|
+
|
|
70
|
+
Options can also be set via data attributes on the root element. JS options take precedence.
|
|
71
|
+
|
|
72
|
+
| Attribute | Type | Default | Description |
|
|
73
|
+
|-----------|------|---------|-------------|
|
|
74
|
+
| `data-multiple` | boolean | `false` | Allow multiple items open at once |
|
|
75
|
+
| `data-default-value` | string | none | Initially expanded item |
|
|
76
|
+
| `data-collapsible` | boolean | `true` | Whether items can be fully collapsed |
|
|
77
|
+
|
|
78
|
+
Boolean attributes: present or `"true"` = true, `"false"` = false, absent = default.
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<!-- Multiple items can be open, starting with "one" expanded -->
|
|
82
|
+
<div data-slot="accordion" data-multiple data-default-value="one">
|
|
83
|
+
...
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<!-- Single mode that cannot be fully collapsed -->
|
|
87
|
+
<div data-slot="accordion" data-collapsible="false">
|
|
88
|
+
...
|
|
89
|
+
</div>
|
|
90
|
+
```
|
|
91
|
+
|
|
68
92
|
### Controller
|
|
69
93
|
|
|
70
94
|
| Method/Property | Description |
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let r=
|
|
1
|
+
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){if(s(e,t))return o(e,t)??void 0}let f=0;const p=(e,t)=>e.id||=`${t}-${++f}`,m=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function h(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const g=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));function _(n,r={}){let i=t(n,`accordion-item`);if(i.length===0)throw Error(`Accordion requires at least one accordion-item`);let a=r.multiple??u(n,`multiple`)??!1,o=r.onValueChange,s=r.collapsible??u(n,`collapsible`)??!0,c=r.defaultValue??d(n,`defaultValue`),l=c?Array.isArray(c)?c:[c]:[],f=new Set(l),_=[],v=[];i.forEach(t=>{let r=t.dataset.value;if(!r)return;let i=e(t,`accordion-trigger`),c=e(t,`accordion-content`);if(!i||!c)return;v.push(i);let l=p(c,`accordion-content`),u=p(i,`accordion-trigger`);i.setAttribute(`aria-controls`,l),c.setAttribute(`aria-labelledby`,u),c.setAttribute(`role`,`region`),_.push(h(i,`click`,()=>{let e=f.has(r);if(e){if(!s&&!a&&f.size===1)return;f.delete(r)}else a?f.add(r):f=new Set([r]);y(),g(n,`accordion:change`,{value:[...f]}),o?.([...f])}))}),_.push(h(n,`keydown`,e=>{let t=e.target,n=v.indexOf(t);if(n===-1)return;let r=n;switch(e.key){case`ArrowDown`:r=n+1,r>=v.length&&(r=0);break;case`ArrowUp`:r=n-1,r<0&&(r=v.length-1);break;case`Home`:r=0;break;case`End`:r=v.length-1;break;default:return}e.preventDefault(),v[r]?.focus()}));let y=()=>{i.forEach(t=>{let n=t.dataset.value;if(!n)return;let r=e(t,`accordion-trigger`),i=e(t,`accordion-content`);if(!r||!i)return;let a=f.has(n),o=r.getAttribute(`aria-expanded`)===`true`;if(m(r,`expanded`,a),t.setAttribute(`data-state`,a?`open`:`closed`),i.setAttribute(`data-state`,a?`open`:`closed`),a)i.hidden=!1,i._accordionTimeout&&(clearTimeout(i._accordionTimeout),i._accordionTimeout=null);else if(o){i._accordionTimeout&&clearTimeout(i._accordionTimeout);let e=i.parentElement,t=n=>{if(n.propertyName===`grid-template-rows`){let n=i.getAttribute(`data-state`);n===`closed`&&(i.hidden=!0),e?.removeEventListener(`transitionend`,t),i._accordionTimeout&&(clearTimeout(i._accordionTimeout),i._accordionTimeout=null)}};e?(e.addEventListener(`transitionend`,t),i._accordionTimeout=setTimeout(()=>{let n=i.getAttribute(`data-state`);n===`closed`&&(i.hidden=!0),e.removeEventListener(`transitionend`,t),i._accordionTimeout=null},350)):i._accordionTimeout=setTimeout(()=>{i.hidden=!0,i._accordionTimeout=null},300)}else i.hidden=!0})};y();let b={expand:e=>{f.has(e)||(a?f.add(e):f=new Set([e]),y(),g(n,`accordion:change`,{value:[...f]}),o?.([...f]))},collapse:e=>{f.has(e)&&(!s&&!a&&f.size===1||(f.delete(e),y(),g(n,`accordion:change`,{value:[...f]}),o?.([...f])))},toggle:e=>{f.has(e)?b.collapse(e):b.expand(e)},get value(){return[...f]},destroy:()=>{_.forEach(e=>e()),_.length=0,i.forEach(t=>{let n=e(t,`accordion-content`);n&&n._accordionTimeout&&(clearTimeout(n._accordionTimeout),n._accordionTimeout=null)})}};return b}const v=new WeakSet;function y(e=document){let t=[];for(let r of n(e,`accordion`)){if(v.has(r))continue;v.add(r),t.push(_(r))}return t}exports.create=y,exports.createAccordion=_;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let r=
|
|
1
|
+
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){if(s(e,t))return o(e,t)??void 0}let f=0;const p=(e,t)=>e.id||=`${t}-${++f}`,m=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function h(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const g=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));function _(n,r={}){let i=t(n,`accordion-item`);if(i.length===0)throw Error(`Accordion requires at least one accordion-item`);let a=r.multiple??u(n,`multiple`)??!1,o=r.onValueChange,s=r.collapsible??u(n,`collapsible`)??!0,c=r.defaultValue??d(n,`defaultValue`),l=c?Array.isArray(c)?c:[c]:[],f=new Set(l),_=[],v=[];i.forEach(t=>{let r=t.dataset.value;if(!r)return;let i=e(t,`accordion-trigger`),c=e(t,`accordion-content`);if(!i||!c)return;v.push(i);let l=p(c,`accordion-content`),u=p(i,`accordion-trigger`);i.setAttribute(`aria-controls`,l),c.setAttribute(`aria-labelledby`,u),c.setAttribute(`role`,`region`),_.push(h(i,`click`,()=>{let e=f.has(r);if(e){if(!s&&!a&&f.size===1)return;f.delete(r)}else a?f.add(r):f=new Set([r]);y(),g(n,`accordion:change`,{value:[...f]}),o?.([...f])}))}),_.push(h(n,`keydown`,e=>{let t=e.target,n=v.indexOf(t);if(n===-1)return;let r=n;switch(e.key){case`ArrowDown`:r=n+1,r>=v.length&&(r=0);break;case`ArrowUp`:r=n-1,r<0&&(r=v.length-1);break;case`Home`:r=0;break;case`End`:r=v.length-1;break;default:return}e.preventDefault(),v[r]?.focus()}));let y=()=>{i.forEach(t=>{let n=t.dataset.value;if(!n)return;let r=e(t,`accordion-trigger`),i=e(t,`accordion-content`);if(!r||!i)return;let a=f.has(n),o=r.getAttribute(`aria-expanded`)===`true`;if(m(r,`expanded`,a),t.setAttribute(`data-state`,a?`open`:`closed`),i.setAttribute(`data-state`,a?`open`:`closed`),a)i.hidden=!1,i._accordionTimeout&&(clearTimeout(i._accordionTimeout),i._accordionTimeout=null);else if(o){i._accordionTimeout&&clearTimeout(i._accordionTimeout);let e=i.parentElement,t=n=>{if(n.propertyName===`grid-template-rows`){let n=i.getAttribute(`data-state`);n===`closed`&&(i.hidden=!0),e?.removeEventListener(`transitionend`,t),i._accordionTimeout&&(clearTimeout(i._accordionTimeout),i._accordionTimeout=null)}};e?(e.addEventListener(`transitionend`,t),i._accordionTimeout=setTimeout(()=>{let n=i.getAttribute(`data-state`);n===`closed`&&(i.hidden=!0),e.removeEventListener(`transitionend`,t),i._accordionTimeout=null},350)):i._accordionTimeout=setTimeout(()=>{i.hidden=!0,i._accordionTimeout=null},300)}else i.hidden=!0})};y();let b={expand:e=>{f.has(e)||(a?f.add(e):f=new Set([e]),y(),g(n,`accordion:change`,{value:[...f]}),o?.([...f]))},collapse:e=>{f.has(e)&&(!s&&!a&&f.size===1||(f.delete(e),y(),g(n,`accordion:change`,{value:[...f]}),o?.([...f])))},toggle:e=>{f.has(e)?b.collapse(e):b.expand(e)},get value(){return[...f]},destroy:()=>{_.forEach(e=>e()),_.length=0,i.forEach(t=>{let n=e(t,`accordion-content`);n&&n._accordionTimeout&&(clearTimeout(n._accordionTimeout),n._accordionTimeout=null)})}};return b}const v=new WeakSet;function y(e=document){let t=[];for(let r of n(e,`accordion`)){if(v.has(r))continue;v.add(r),t.push(_(r))}return t}export{y as create,_ as createAccordion};
|