@data-slot/tabs 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -1 +1 @@
-var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`@data-slot/core`)),l=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function u(e,t={}){let{onValueChange:n,orientation:r=`horizontal`,activationMode:i=`auto`}=t,a=(0,c.getPart)(e,`tabs-list`),o=(0,c.getParts)(e,`tabs-trigger`),s=(0,c.getParts)(e,`tabs-content`),u=(0,c.getPart)(e,`tabs-indicator`);if(!a||o.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let f=new Map;for(let e of s){let t=(e.dataset.value||``).trim();t&&f.set(t,e)}let p=[],m=new Map,h=new Map;for(let e of o){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=f.get(t),i={el:e,value:t,disabled:n,panel:r};p.push(i),m.set(t,i),h.set(e,i)}let g=p.filter(e=>!e.disabled),_=new Map;g.forEach((e,t)=>_.set(e.value,t));let v=g[0]?.value||``,y=e,b=(t.defaultValue??y.dataset.defaultValue??``).trim(),x=m.get(b),S=x&&!x.disabled?b:v,C=[];a.setAttribute(`role`,`tablist`),r===`vertical`&&(0,c.setAria)(a,`orientation`,`vertical`);for(let e of p){let{el:t,disabled:n,panel:r}=e;t.setAttribute(`role`,`tab`);let i=(0,c.ensureId)(t,`tab`);if(t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),n&&(t.setAttribute(`aria-disabled`,`true`),t.tagName===`BUTTON`&&(t.disabled=!0)),r){r.setAttribute(`role`,`tabpanel`),r.tabIndex=-1;let e=(0,c.ensureId)(r,`tabpanel`);t.setAttribute(`aria-controls`,e),r.setAttribute(`aria-labelledby`,i)}}let w=()=>{if(!u)return;let e=m.get(S);if(!e)return;let t=a.getBoundingClientRect(),n=e.el.getBoundingClientRect();u.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),u.style.setProperty(`--active-tab-width`,`${n.width}px`),u.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),u.style.setProperty(`--active-tab-height`,`${n.height}px`)},T=(t,r=!1)=>{if(t=t.trim(),S===t&&!r)return;let i=m.get(t);if(!i||i.disabled)if(r){if(t=v,!t)return}else return;let a=S!==t;S=t;for(let e of p){let n=e.value===t;(0,c.setAria)(e.el,`selected`,n),e.el.tabIndex=n&&!e.disabled?0:-1,e.el.dataset.state=n?`active`:`inactive`}for(let e of s){let n=(e.dataset.value||``).trim();if(!n)continue;let r=n===t;e.hidden=!r,e.dataset.state=r?`active`:`inactive`}e.setAttribute(`data-value`,t),u&&w(),a&&!r&&((0,c.emit)(e,`tabs:change`,{value:t}),n?.(t))};if(T(S,!0),u){let e=()=>requestAnimationFrame(w);C.push((0,c.on)(window,`resize`,e)),C.push((0,c.on)(a,`scroll`,e));let t=new ResizeObserver(e);t.observe(a),C.push(()=>t.disconnect())}C.push((0,c.on)(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=h.get(t);n&&!n.disabled&&T(n.value)}));let E=r===`horizontal`,D=E?`ArrowLeft`:`ArrowUp`,O=E?`ArrowRight`:`ArrowDown`;C.push((0,c.on)(a,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=h.get(t);if(!n||g.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||T(n.value);return}if(E&&e.key===`ArrowDown`&&n.value===S){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(l);(n||t).focus();return}}let r=_.get(n.value)??-1;r===-1&&(r=_.get(S)??0);let a=r;switch(e.key){case D:a=r-1,a<0&&(a=g.length-1);break;case O:a=r+1,a>=g.length&&(a=0);break;case`Home`:a=0;break;case`End`:a=g.length-1;break;default:return}e.preventDefault();let o=g[a];o&&(o.el.focus(),i===`auto`&&T(o.value))}));let k={select:e=>T(e),get value(){return S},updateIndicator:w,destroy:()=>{C.forEach(e=>e()),C.length=0,d.delete(e)}};return k}const d=new WeakSet;function f(e=document){let t=[];for(let n of(0,c.getRoots)(e,`tabs`)){if(d.has(n))continue;d.add(n),t.push(u(n))}return t}exports.create=f,exports.createTabs=u;
+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=0;const i=(e,t)=>e.id||=`${t}-${++r}`,a=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))},o=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),s=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),c=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function l(n,r={}){let{onValueChange:l,orientation:d=`horizontal`,activationMode:f=`auto`}=r,p=e(n,`tabs-list`),m=t(n,`tabs-trigger`),h=t(n,`tabs-content`),g=e(n,`tabs-indicator`);if(!p||m.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let _=new Map;for(let e of h){let t=(e.dataset.value||``).trim();t&&_.set(t,e)}let v=[],y=new Map,b=new Map;for(let e of m){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=_.get(t),i={el:e,value:t,disabled:n,panel:r};v.push(i),y.set(t,i),b.set(e,i)}let x=v.filter(e=>!e.disabled),S=new Map;x.forEach((e,t)=>S.set(e.value,t));let C=x[0]?.value||``,w=n,T=(r.defaultValue??w.dataset.defaultValue??``).trim(),E=y.get(T),D=E&&!E.disabled?T:C,O=[];p.setAttribute(`role`,`tablist`),d===`vertical`&&a(p,`orientation`,`vertical`);for(let e of v){let{el:t,disabled:n,panel:r}=e;t.setAttribute(`role`,`tab`);let a=i(t,`tab`);if(t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),n&&(t.setAttribute(`aria-disabled`,`true`),t.tagName===`BUTTON`&&(t.disabled=!0)),r){r.setAttribute(`role`,`tabpanel`),r.tabIndex=-1;let e=i(r,`tabpanel`);t.setAttribute(`aria-controls`,e),r.setAttribute(`aria-labelledby`,a)}}let k=()=>{if(!g)return;let e=y.get(D);if(!e)return;let t=p.getBoundingClientRect(),n=e.el.getBoundingClientRect();g.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),g.style.setProperty(`--active-tab-width`,`${n.width}px`),g.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),g.style.setProperty(`--active-tab-height`,`${n.height}px`)},A=(e,t=!1)=>{if(e=e.trim(),D===e&&!t)return;let r=y.get(e);if(!r||r.disabled)if(t){if(e=C,!e)return}else return;let i=D!==e;D=e;for(let t of v){let n=t.value===e;a(t.el,`selected`,n),t.el.tabIndex=n&&!t.disabled?0:-1,t.el.dataset.state=n?`active`:`inactive`}for(let t of h){let n=(t.dataset.value||``).trim();if(!n)continue;let r=n===e;t.hidden=!r,t.dataset.state=r?`active`:`inactive`}n.setAttribute(`data-value`,e),g&&k(),i&&!t&&(s(n,`tabs:change`,{value:e}),l?.(e))};if(A(D,!0),g){let e=()=>requestAnimationFrame(k);O.push(o(window,`resize`,e)),O.push(o(p,`scroll`,e));let t=new ResizeObserver(e);t.observe(p),O.push(()=>t.disconnect())}O.push(o(p,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);n&&!n.disabled&&A(n.value)}));let j=d===`horizontal`,M=j?`ArrowLeft`:`ArrowUp`,N=j?`ArrowRight`:`ArrowDown`;O.push(o(p,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);if(!n||x.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||A(n.value);return}if(j&&e.key===`ArrowDown`&&n.value===D){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(c);(n||t).focus();return}}let r=S.get(n.value)??-1;r===-1&&(r=S.get(D)??0);let i=r;switch(e.key){case M:i=r-1,i<0&&(i=x.length-1);break;case N:i=r+1,i>=x.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=x.length-1;break;default:return}e.preventDefault();let a=x[i];a&&(a.el.focus(),f===`auto`&&A(a.value))}));let P={select:e=>A(e),get value(){return D},updateIndicator:k,destroy:()=>{O.forEach(e=>e()),O.length=0,u.delete(n)}};return P}const u=new WeakSet;function d(e=document){let t=[];for(let r of n(e,`tabs`)){if(u.has(r))continue;u.add(r),t.push(l(r))}return t}exports.create=d,exports.createTabs=l;

package/dist/index.js

@@ -1 +1 @@
-import{emit as e,ensureId as t,getPart as n,getParts as r,getRoots as i,on as a,setAria as o}from"@data-slot/core";const s=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function c(i,c={}){let{onValueChange:u,orientation:d=`horizontal`,activationMode:f=`auto`}=c,p=n(i,`tabs-list`),m=r(i,`tabs-trigger`),h=r(i,`tabs-content`),g=n(i,`tabs-indicator`);if(!p||m.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let _=new Map;for(let e of h){let t=(e.dataset.value||``).trim();t&&_.set(t,e)}let v=[],y=new Map,b=new Map;for(let e of m){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=_.get(t),i={el:e,value:t,disabled:n,panel:r};v.push(i),y.set(t,i),b.set(e,i)}let x=v.filter(e=>!e.disabled),S=new Map;x.forEach((e,t)=>S.set(e.value,t));let C=x[0]?.value||``,w=i,T=(c.defaultValue??w.dataset.defaultValue??``).trim(),E=y.get(T),D=E&&!E.disabled?T:C,O=[];p.setAttribute(`role`,`tablist`),d===`vertical`&&o(p,`orientation`,`vertical`);for(let e of v){let{el:n,disabled:r,panel:i}=e;n.setAttribute(`role`,`tab`);let a=t(n,`tab`);if(n.tagName===`BUTTON`&&!n.hasAttribute(`type`)&&(n.type=`button`),r&&(n.setAttribute(`aria-disabled`,`true`),n.tagName===`BUTTON`&&(n.disabled=!0)),i){i.setAttribute(`role`,`tabpanel`),i.tabIndex=-1;let e=t(i,`tabpanel`);n.setAttribute(`aria-controls`,e),i.setAttribute(`aria-labelledby`,a)}}let k=()=>{if(!g)return;let e=y.get(D);if(!e)return;let t=p.getBoundingClientRect(),n=e.el.getBoundingClientRect();g.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),g.style.setProperty(`--active-tab-width`,`${n.width}px`),g.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),g.style.setProperty(`--active-tab-height`,`${n.height}px`)},A=(t,n=!1)=>{if(t=t.trim(),D===t&&!n)return;let r=y.get(t);if(!r||r.disabled)if(n){if(t=C,!t)return}else return;let a=D!==t;D=t;for(let e of v){let n=e.value===t;o(e.el,`selected`,n),e.el.tabIndex=n&&!e.disabled?0:-1,e.el.dataset.state=n?`active`:`inactive`}for(let e of h){let n=(e.dataset.value||``).trim();if(!n)continue;let r=n===t;e.hidden=!r,e.dataset.state=r?`active`:`inactive`}i.setAttribute(`data-value`,t),g&&k(),a&&!n&&(e(i,`tabs:change`,{value:t}),u?.(t))};if(A(D,!0),g){let e=()=>requestAnimationFrame(k);O.push(a(window,`resize`,e)),O.push(a(p,`scroll`,e));let t=new ResizeObserver(e);t.observe(p),O.push(()=>t.disconnect())}O.push(a(p,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);n&&!n.disabled&&A(n.value)}));let j=d===`horizontal`,M=j?`ArrowLeft`:`ArrowUp`,N=j?`ArrowRight`:`ArrowDown`;O.push(a(p,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);if(!n||x.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||A(n.value);return}if(j&&e.key===`ArrowDown`&&n.value===D){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(s);(n||t).focus();return}}let r=S.get(n.value)??-1;r===-1&&(r=S.get(D)??0);let i=r;switch(e.key){case M:i=r-1,i<0&&(i=x.length-1);break;case N:i=r+1,i>=x.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=x.length-1;break;default:return}e.preventDefault();let a=x[i];a&&(a.el.focus(),f===`auto`&&A(a.value))}));let P={select:e=>A(e),get value(){return D},updateIndicator:k,destroy:()=>{O.forEach(e=>e()),O.length=0,l.delete(i)}};return P}const l=new WeakSet;function u(e=document){let t=[];for(let n of i(e,`tabs`)){if(l.has(n))continue;l.add(n),t.push(c(n))}return t}export{u as create,c as createTabs};
+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=0;const i=(e,t)=>e.id||=`${t}-${++r}`,a=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))},o=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),s=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),c=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function l(n,r={}){let{onValueChange:l,orientation:d=`horizontal`,activationMode:f=`auto`}=r,p=e(n,`tabs-list`),m=t(n,`tabs-trigger`),h=t(n,`tabs-content`),g=e(n,`tabs-indicator`);if(!p||m.length===0)throw Error(`Tabs requires tabs-list and at least one tabs-trigger`);let _=new Map;for(let e of h){let t=(e.dataset.value||``).trim();t&&_.set(t,e)}let v=[],y=new Map,b=new Map;for(let e of m){let t=(e.dataset.value||``).trim();if(!t)continue;let n=e.hasAttribute(`disabled`)||e.dataset.disabled!==void 0||e.getAttribute(`aria-disabled`)===`true`,r=_.get(t),i={el:e,value:t,disabled:n,panel:r};v.push(i),y.set(t,i),b.set(e,i)}let x=v.filter(e=>!e.disabled),S=new Map;x.forEach((e,t)=>S.set(e.value,t));let C=x[0]?.value||``,w=n,T=(r.defaultValue??w.dataset.defaultValue??``).trim(),E=y.get(T),D=E&&!E.disabled?T:C,O=[];p.setAttribute(`role`,`tablist`),d===`vertical`&&a(p,`orientation`,`vertical`);for(let e of v){let{el:t,disabled:n,panel:r}=e;t.setAttribute(`role`,`tab`);let a=i(t,`tab`);if(t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),n&&(t.setAttribute(`aria-disabled`,`true`),t.tagName===`BUTTON`&&(t.disabled=!0)),r){r.setAttribute(`role`,`tabpanel`),r.tabIndex=-1;let e=i(r,`tabpanel`);t.setAttribute(`aria-controls`,e),r.setAttribute(`aria-labelledby`,a)}}let k=()=>{if(!g)return;let e=y.get(D);if(!e)return;let t=p.getBoundingClientRect(),n=e.el.getBoundingClientRect();g.style.setProperty(`--active-tab-left`,`${n.left-t.left}px`),g.style.setProperty(`--active-tab-width`,`${n.width}px`),g.style.setProperty(`--active-tab-top`,`${n.top-t.top}px`),g.style.setProperty(`--active-tab-height`,`${n.height}px`)},A=(e,t=!1)=>{if(e=e.trim(),D===e&&!t)return;let r=y.get(e);if(!r||r.disabled)if(t){if(e=C,!e)return}else return;let i=D!==e;D=e;for(let t of v){let n=t.value===e;a(t.el,`selected`,n),t.el.tabIndex=n&&!t.disabled?0:-1,t.el.dataset.state=n?`active`:`inactive`}for(let t of h){let n=(t.dataset.value||``).trim();if(!n)continue;let r=n===e;t.hidden=!r,t.dataset.state=r?`active`:`inactive`}n.setAttribute(`data-value`,e),g&&k(),i&&!t&&(s(n,`tabs:change`,{value:e}),l?.(e))};if(A(D,!0),g){let e=()=>requestAnimationFrame(k);O.push(o(window,`resize`,e)),O.push(o(p,`scroll`,e));let t=new ResizeObserver(e);t.observe(p),O.push(()=>t.disconnect())}O.push(o(p,`click`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);n&&!n.disabled&&A(n.value)}));let j=d===`horizontal`,M=j?`ArrowLeft`:`ArrowUp`,N=j?`ArrowRight`:`ArrowDown`;O.push(o(p,`keydown`,e=>{let t=e.target.closest?.(`[data-slot="tabs-trigger"]`);if(!t)return;let n=b.get(t);if(!n||x.length===0)return;if(e.key===`Enter`||e.key===` `){e.preventDefault(),n.disabled||A(n.value);return}if(j&&e.key===`ArrowDown`&&n.value===D){let t=n.panel;if(t){e.preventDefault();let n=t.querySelector(c);(n||t).focus();return}}let r=S.get(n.value)??-1;r===-1&&(r=S.get(D)??0);let i=r;switch(e.key){case M:i=r-1,i<0&&(i=x.length-1);break;case N:i=r+1,i>=x.length&&(i=0);break;case`Home`:i=0;break;case`End`:i=x.length-1;break;default:return}e.preventDefault();let a=x[i];a&&(a.el.focus(),f===`auto`&&A(a.value))}));let P={select:e=>A(e),get value(){return D},updateIndicator:k,destroy:()=>{O.forEach(e=>e()),O.length=0,u.delete(n)}};return P}const u=new WeakSet;function d(e=document){let t=[];for(let r of n(e,`tabs`)){if(u.has(r))continue;u.add(r),t.push(l(r))}return t}export{d as create,l as createTabs};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/tabs",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -18,13 +18,26 @@
       }
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsdown"
   },
-  "dependencies": {
+  "devDependencies": {
     "@data-slot/core": "workspace:*"
   },
-  "keywords": ["headless", "ui", "tabs", "vanilla", "data-slot"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bejamas/data-slot",
+    "directory": "packages/tabs"
+  },
+  "keywords": [
+    "headless",
+    "ui",
+    "tabs",
+    "vanilla",
+    "data-slot"
+  ],
   "license": "MIT"
 }