godown 3.7.0 → 3.7.1

package/components/tabs.d.ts

@@ -6,7 +6,8 @@ import { type OutlineType } from "../core/outline.js";
  *
  * It accepts "tabs" to present the sub-content.
  *
- * If "useSlot" is set, then each piece of content in "tabs" will be a named slot with the same name as it.
+ * When "useSlot" is enabled, each item in "tabs" becomes a named slot with the same name as itself,
+ * while for non-slot tabs, the content is rendered as a horizontally padded string.
  *
  * When "mouseenter" and "mouseleave" are triggered on an individual tab, the indicator will move.
  *

package/components/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../src/components/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAOtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,cAQM,IAAK,SAAQ,WAAW;IAE5B,WAAW,EAAE,WAAW,CAAY;IAEpC;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,IAAI,EAAE,MAAM,EAAE,CAAC;IAEf;;OAEG;IAEH,KAAK,SAAK;IAEV,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAG7B,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAGlD,SAAS,CAAC,WAAW,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAExD,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAW3B,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAQnC,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IAsCpC,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;CAS/B;AAED,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../src/components/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAOtE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,cAQM,IAAK,SAAQ,WAAW;IAE5B,WAAW,EAAE,WAAW,CAAY;IAEpC;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,IAAI,EAAE,MAAM,EAAE,CAAC;IAEf;;OAEG;IAEH,KAAK,SAAK;IAEV,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAG7B,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAGlD,SAAS,CAAC,WAAW,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAExD,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAW3B,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAQnC,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IAsCpC,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;CAS/B;AAED,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/components/tabs.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{godown as i,styles as e,attr as o,tokenList as r,htmlSlot as s}from"@godown/element";import{scopePrefix as n,cssGlobalVars as a,GlobalStyle as d}from"../core/global-style.js";import{css as p,html as l}from"lit";import{property as c,queryAll as h}from"lit/decorators.js";import{OutlineBuilder as u}from"../core/outline.js";const m="tabs",v=n(m),y="hover";let x=class Tabs extends d{constructor(){super(...arguments),this.outlineType="border",this.useSlot=!1,this.index=0}render(){return l`<ul part="root" ${o(this.observedRecord)} @mouseleave="${this._handleMouseLeave}">${this.tabs.map(((t,i)=>l`<li part="${r("item",{selected:this.index===i})}" @mouseenter="${()=>{this.move(this._lastIndex,i),this._lastIndex=i}}" @click="${()=>this.select(i)}">${this.useSlot?s(t):t}<div part="indicator"></div></li>`))}</ul>`}connectedCallback(){super.connectedCallback(),this._lastIndex=this.index}_handleMouseLeave(){const t=this._items[this._lastIndex];t&&t.part.remove(y),this._lastIndex=this.index}move(t,i){if(t===i)return;const{_items:e,_indicators:o}=this,r=e[i];if(!r)return;r.part.add(y);const s=e[t];if(!s)return;s.part.remove(y);const n=o[i],a=o[t];if(!n||!a)return;const d=a.getBoundingClientRect(),p=r.getBoundingClientRect(),l=d.x-p.x,c=d.y-p.y,h=d.width,{style:u}=n;u.transform=`translate3d(${l}px,${c}px,0)`,u.width=h+"px",u.transition=a.style.transition="none",n.getBoundingClientRect(),u.width=u.transform=u.transition=a.style.transition=""}select(t){this.index!==t&&(this.dispatchCustomEvent("select",t),this.move(this._lastIndex,t),this._lastIndex=t,this.index=t)}};t([c({attribute:"outline-type"})],x.prototype,"outlineType",void 0),t([c({type:Boolean})],x.prototype,"useSlot",void 0),t([c({type:Array})],x.prototype,"tabs",void 0),t([c({type:Number})],x.prototype,"index",void 0),t([h("[part~=item]")],x.prototype,"_items",void 0),t([h("[part=indicator]")],x.prototype,"_indicators",void 0),x=t([i(m),e(new u({width:`${v}--outline-width`,color:`${v}--outline-color`}).css,p`:host{${v}--indicator-background:var(${a._colors.darkgray[7]});${v}--outline-color:var(${a.passive});${v}--outline-width:0.075em;${v}--space:0.25em;border-radius:var(${a.borderRadius});cursor:default;display:flex;transition:.2s ease-in-out;width:-moz-fit-content;width:fit-content}[part=root]{border-radius:inherit;display:flex;flex-direction:inherit;gap:var(${v}--space);overflow-x:clip;padding:var(${v}--space);transition:inherit;transition-property:width,transform,opacity}[useslot] [part~=item]{padding:0}[part~=item]{display:block;padding:0 .5em;position:relative}[part=indicator],[part~=item]{border-radius:inherit;transition:inherit;transition-property:inherit;width:100%}[part=indicator]{background:var(${v}--indicator-background);height:100%;inset:0;opacity:0;position:absolute;z-index:-1}[part~=selected]{background:var(${v}--indicator-background)}[part~=hover] [part=indicator],[part~=selected] [part=indicator]{opacity:1}`)],x);var b=x;export{x as Tabs,b as default};
+import{__decorate as t}from"tslib";import{godown as i,styles as e,attr as o,tokenList as r,htmlSlot as n}from"@godown/element";import{scopePrefix as s,cssGlobalVars as a,GlobalStyle as d}from"../core/global-style.js";import{css as p,html as l}from"lit";import{property as c,queryAll as h}from"lit/decorators.js";import{OutlineBuilder as u}from"../core/outline.js";const m="tabs",v=s(m),y="hover";let x=class Tabs extends d{constructor(){super(...arguments),this.outlineType="border",this.useSlot=!1,this.index=0}render(){return l`<ul part="root" ${o(this.observedRecord)} @mouseleave="${this._handleMouseLeave}">${this.tabs.map(((t,i)=>l`<li part="${r("item",{selected:this.index===i})}" @mouseenter="${()=>{this.move(this._lastIndex,i),this._lastIndex=i}}" @click="${()=>this.select(i)}">${this.useSlot?n(t):t}<div part="indicator"></div></li>`))}</ul>`}connectedCallback(){super.connectedCallback(),this._lastIndex=this.index}_handleMouseLeave(){const t=this._items[this._lastIndex];t&&t.part.remove(y),this._lastIndex=this.index}move(t,i){if(t===i)return;const{_items:e,_indicators:o}=this,r=e[i];if(!r)return;r.part.add(y);const n=e[t];if(!n)return;n.part.remove(y);const s=o[i],a=o[t];if(!s||!a)return;const d=a.getBoundingClientRect(),p=r.getBoundingClientRect(),l=d.x-p.x,c=d.y-p.y,h=d.width,{style:u}=s;u.transform=`translate3d(${l}px,${c}px,0)`,u.width=h+"px",u.transition=a.style.transition="none",s.getBoundingClientRect(),u.width=u.transform=u.transition=a.style.transition=""}select(t){this.index!==t&&(this.dispatchCustomEvent("select",t),this.move(this._lastIndex,t),this._lastIndex=t,this.index=t)}};t([c({attribute:"outline-type"})],x.prototype,"outlineType",void 0),t([c({type:Boolean})],x.prototype,"useSlot",void 0),t([c({type:Array})],x.prototype,"tabs",void 0),t([c({type:Number})],x.prototype,"index",void 0),t([h("[part~=item]")],x.prototype,"_items",void 0),t([h("[part=indicator]")],x.prototype,"_indicators",void 0),x=t([i(m),e(new u({width:`${v}--outline-width`,color:`${v}--outline-color`}).css,p`:host{${v}--indicator-background:var(${a._colors.darkgray[7]});${v}--outline-color:var(${a.passive});${v}--outline-width:0.075em;${v}--space:0.25em;border-radius:var(${a.borderRadius});cursor:default;display:flex;transition:.2s ease-in-out;width:-moz-fit-content;width:fit-content}[part=root]{border-radius:inherit;display:flex;flex-direction:inherit;gap:var(${v}--space);overflow-x:clip;padding:var(${v}--space);position:relative;transition:inherit;transition-property:width,transform,opacity;z-index:1}[useslot] [part~=item]{padding:0}[part~=item]{display:block;padding:0 .4em;position:relative}[part=indicator],[part~=item]{border-radius:inherit;transition:inherit;transition-property:inherit;width:100%}[part=indicator]{background:var(${v}--indicator-background);height:100%;inset:0;opacity:0;position:absolute;z-index:-1}[part~=selected]{background:var(${v}--indicator-background)}[part~=hover] [part=indicator],[part~=selected] [part=indicator]{opacity:1}`)],x);var b=x;export{x as Tabs,b as default};
 //# sourceMappingURL=tabs.js.map

package/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../src/components/tabs.ts"],"sourcesContent":null,"names":["protoName","cssScope","scopePrefix","mouseEnterAddedToken","Tabs","GlobalStyle","constructor","this","outlineType","useSlot","index","render","html","attr","observedRecord","_handleMouseLeave","tabs","map","tab","tokenList","selected","move","_lastIndex","select","htmlSlot","connectedCallback","super","lastItem","_items","part","remove","from","to","_indicators","toItem","add","fromItem","toIndicator","fromIndicator","fromIndicatorRect","getBoundingClientRect","toItemRect","transformX","x","transformY","y","fromWidth","width","style","transform","transition","dispatchCustomEvent","__decorate","property","attribute","prototype","undefined","type","Boolean","Array","Number","queryAll","godown","styles","OutlineBuilder","color","css","cssGlobalVars","_colors","darkgray","passive","borderRadius","Tabs$1"],"mappings":"4WAMA,MAAMA,EAAY,OACZC,EAAWC,EAAYF,GAEvBG,EAAuB,QAkC7B,IAAMC,EAAN,MAAMA,aAAaC,EAAnB,WAAAC,uBAEEC,KAAWC,YAAgB,SAM3BD,KAAOE,SAAG,EAYVF,KAAKG,MAAG,EAUR,MAAAC,GACE,OAAOC,CAAI,mBAGLC,EAAKN,KAAKO,gCACGP,KAAKQ,sBAElBR,KAAKS,KAAKC,KAAI,CAACC,EAAKR,IACbE,CAAI,aAECO,EAAU,OAAQ,CACxBC,SAAUb,KAAKG,QAAUA,qBAEb,KACZH,KAAKc,KAAKd,KAAKe,WAAYZ,GAC3BH,KAAKe,WAAaZ,CAAK,cAEhB,IAAMH,KAAKgB,OAAOb,OAEzBH,KAAKE,QAAUe,EAASN,GAAOA,8CAS7C,iBAAAO,GACEC,MAAMD,oBACNlB,KAAKe,WAAaf,KAAKG,MAGf,iBAAAK,GACR,MAAMY,EAAWpB,KAAKqB,OAAOrB,KAAKe,YAC9BK,GACFA,EAASE,KAAKC,OAAO3B,GAEvBI,KAAKe,WAAaf,KAAKG,MAGzB,IAAAW,CAAKU,EAAcC,GACjB,GAAID,IAASC,EACX,OAEF,MAAMJ,OAAEA,EAAMK,YAAEA,GAAgB1B,KAC1B2B,EAASN,EAAOI,GACtB,IAAKE,EACH,OAEFA,EAAOL,KAAKM,IAAIhC,GAChB,MAAMiC,EAAWR,EAAOG,GACxB,IAAKK,EACH,OAEFA,EAASP,KAAKC,OAAO3B,GACrB,MAAMkC,EAAcJ,EAAYD,GAC1BM,EAAgBL,EAAYF,GAClC,IAAKM,IAAgBC,EACnB,OAEF,MAAMC,EAAoBD,EAAcE,wBAClCC,EAAaP,EAAOM,wBACpBE,EAAaH,EAAkBI,EAAIF,EAAWE,EAC9CC,EAAaL,EAAkBM,EAAIJ,EAAWI,EAC9CC,EAAYP,EAAkBQ,OAE9BC,MAAEA,GAAUX,EAGlBW,EAAMC,UAAY,eAAeP,OAAgBE,SACjDI,EAAMD,MAAQD,EAAY,KAC1BE,EAAME,WAAaZ,EAAcU,MAAME,WAJvB,OAMhBb,EAAYG,wBAEZQ,EAAMD,MAAQC,EAAMC,UAAYD,EAAME,WAAaZ,EAAcU,MAAME,WAAa,GAGtF,MAAA3B,CAAOH,GACDb,KAAKG,QAAUU,IAGnBb,KAAK4C,oBAAoB,SAAU/B,GACnCb,KAAKc,KAAKd,KAAKe,WAAYF,GAC3Bb,KAAKe,WAAaF,EAClBb,KAAKG,MAAQU,KAlHfgC,EAAA,CADCC,EAAS,CAAEC,UAAW,kBACYlD,EAAAmD,UAAA,mBAAAC,GAMnCJ,EAAA,CADCC,EAAS,CAAEI,KAAMC,WACHtD,EAAAmD,UAAA,eAAAC,GAMfJ,EAAA,CADCC,EAAS,CAAEI,KAAME,SACJvD,EAAAmD,UAAA,YAAAC,GAMdJ,EAAA,CADCC,EAAS,CAAEI,KAAMG,UACTxD,EAAAmD,UAAA,aAAAC,GAKCJ,EAAA,CADTS,EAAS,iBACuCzD,EAAAmD,UAAA,cAAAC,GAGvCJ,EAAA,CADTS,EAAS,qBAC6CzD,EAAAmD,UAAA,mBAAAC,GA5BnDpD,EAAIgD,EAAA,CARTU,EAAO9D,GACP+D,EACC,IAAIC,EAAe,CACjBjB,MAAO,GAAG9C,mBACVgE,MAAO,GAAGhE,qBACTiE,IACHA,CAAG,SAASjE,+BAAsCkE,EAAcC,QAAQC,SAAS,OAAOpE,wBAA+BkE,EAAcG,YAAYrE,4BAAmCA,qCAA4CkE,EAAcI,+LAA+LtE,yCAAgDA,uTAA8TA,uHAA8HA,yGAEr5BG,GAwHN,IAAAoE,EAAepE"}
+{"version":3,"file":"tabs.js","sources":["../src/components/tabs.ts"],"sourcesContent":null,"names":["protoName","cssScope","scopePrefix","mouseEnterAddedToken","Tabs","GlobalStyle","constructor","this","outlineType","useSlot","index","render","html","attr","observedRecord","_handleMouseLeave","tabs","map","tab","tokenList","selected","move","_lastIndex","select","htmlSlot","connectedCallback","super","lastItem","_items","part","remove","from","to","_indicators","toItem","add","fromItem","toIndicator","fromIndicator","fromIndicatorRect","getBoundingClientRect","toItemRect","transformX","x","transformY","y","fromWidth","width","style","transform","transition","dispatchCustomEvent","__decorate","property","attribute","prototype","undefined","type","Boolean","Array","Number","queryAll","godown","styles","OutlineBuilder","color","css","cssGlobalVars","_colors","darkgray","passive","borderRadius","Tabs$1"],"mappings":"4WAMA,MAAMA,EAAY,OACZC,EAAWC,EAAYF,GAEvBG,EAAuB,QAmC7B,IAAMC,EAAN,MAAMA,aAAaC,EAAnB,WAAAC,uBAEEC,KAAWC,YAAgB,SAM3BD,KAAOE,SAAG,EAYVF,KAAKG,MAAG,EAUR,MAAAC,GACE,OAAOC,CAAI,mBAGLC,EAAKN,KAAKO,gCACGP,KAAKQ,sBAElBR,KAAKS,KAAKC,KAAI,CAACC,EAAKR,IACbE,CAAI,aAECO,EAAU,OAAQ,CACxBC,SAAUb,KAAKG,QAAUA,qBAEb,KACZH,KAAKc,KAAKd,KAAKe,WAAYZ,GAC3BH,KAAKe,WAAaZ,CAAK,cAEhB,IAAMH,KAAKgB,OAAOb,OAEzBH,KAAKE,QAAUe,EAASN,GAAOA,8CAS7C,iBAAAO,GACEC,MAAMD,oBACNlB,KAAKe,WAAaf,KAAKG,MAGf,iBAAAK,GACR,MAAMY,EAAWpB,KAAKqB,OAAOrB,KAAKe,YAC9BK,GACFA,EAASE,KAAKC,OAAO3B,GAEvBI,KAAKe,WAAaf,KAAKG,MAGzB,IAAAW,CAAKU,EAAcC,GACjB,GAAID,IAASC,EACX,OAEF,MAAMJ,OAAEA,EAAMK,YAAEA,GAAgB1B,KAC1B2B,EAASN,EAAOI,GACtB,IAAKE,EACH,OAEFA,EAAOL,KAAKM,IAAIhC,GAChB,MAAMiC,EAAWR,EAAOG,GACxB,IAAKK,EACH,OAEFA,EAASP,KAAKC,OAAO3B,GACrB,MAAMkC,EAAcJ,EAAYD,GAC1BM,EAAgBL,EAAYF,GAClC,IAAKM,IAAgBC,EACnB,OAEF,MAAMC,EAAoBD,EAAcE,wBAClCC,EAAaP,EAAOM,wBACpBE,EAAaH,EAAkBI,EAAIF,EAAWE,EAC9CC,EAAaL,EAAkBM,EAAIJ,EAAWI,EAC9CC,EAAYP,EAAkBQ,OAE9BC,MAAEA,GAAUX,EAGlBW,EAAMC,UAAY,eAAeP,OAAgBE,SACjDI,EAAMD,MAAQD,EAAY,KAC1BE,EAAME,WAAaZ,EAAcU,MAAME,WAJvB,OAMhBb,EAAYG,wBAEZQ,EAAMD,MAAQC,EAAMC,UAAYD,EAAME,WAAaZ,EAAcU,MAAME,WAAa,GAGtF,MAAA3B,CAAOH,GACDb,KAAKG,QAAUU,IAGnBb,KAAK4C,oBAAoB,SAAU/B,GACnCb,KAAKc,KAAKd,KAAKe,WAAYF,GAC3Bb,KAAKe,WAAaF,EAClBb,KAAKG,MAAQU,KAlHfgC,EAAA,CADCC,EAAS,CAAEC,UAAW,kBACYlD,EAAAmD,UAAA,mBAAAC,GAMnCJ,EAAA,CADCC,EAAS,CAAEI,KAAMC,WACHtD,EAAAmD,UAAA,eAAAC,GAMfJ,EAAA,CADCC,EAAS,CAAEI,KAAME,SACJvD,EAAAmD,UAAA,YAAAC,GAMdJ,EAAA,CADCC,EAAS,CAAEI,KAAMG,UACTxD,EAAAmD,UAAA,aAAAC,GAKCJ,EAAA,CADTS,EAAS,iBACuCzD,EAAAmD,UAAA,cAAAC,GAGvCJ,EAAA,CADTS,EAAS,qBAC6CzD,EAAAmD,UAAA,mBAAAC,GA5BnDpD,EAAIgD,EAAA,CARTU,EAAO9D,GACP+D,EACC,IAAIC,EAAe,CACjBjB,MAAO,GAAG9C,mBACVgE,MAAO,GAAGhE,qBACTiE,IACHA,CAAG,SAASjE,+BAAsCkE,EAAcC,QAAQC,SAAS,OAAOpE,wBAA+BkE,EAAcG,YAAYrE,4BAAmCA,qCAA4CkE,EAAcI,+LAA+LtE,yCAAgDA,mVAA0VA,uHAA8HA,yGAEj7BG,GAwHN,IAAAoE,EAAepE"}