@dracoui/ember
Version:
Draco Design System for Ember
3 lines (2 loc) • 6.78 kB
JavaScript
import{_ as e,b as t,a as s}from"../../../_rollupPluginBabelHelpers-CLoDr8uC.js";import{DracoTabsSizeValues as i,DracoTabsVariantValues as n}from"./types.js";import{assert as a}from"@ember/debug";import{action as d}from"@ember/object";import o from"@glimmer/component";import{tracked as r}from"@glimmer/tracking";import{precompileTemplate as l}from"@ember/template-compilation";import{setComponentTemplate as b}from"@ember/component";var p,c,h,I,y,_,u,m,T=l('{{#if (and this.tabs (has-block))}}\n {{draco-assert\n (concat "@tabs for \\"" this.componentName "\\" cannot be used with \'block params\'")\n false\n }}\n{{/if}}\n\n<div\n class={{this.classNames}}\n {{did-insert this.didInsert}}\n {{did-update this.didUpdateSelectedTabId this._selectedTabId}}\n ...attributes\n>\n <div class="draco-tabs__tablist-wrapper">\n <ul class="draco-tabs__tablist" role="tablist">\n {{#if this.tabs}}\n {{#each this.tabs as |tab index|}}\n {{draco/tabs/tab\n size=this.size\n text=tab.title\n icon=tab.icon\n iconSize=tab.iconSize\n iconPosition=tab.iconPosition\n disabled=tab.disabled\n didInsertNode=this.didInsertTab\n didUpdateNode=this.didUpdateTab\n willDestroyNode=this.willDestroyTab\n tabIds=this._tabIds\n panelIds=this._panelIds\n selectedTabIndex=this.selectedTabIndex\n onClick=this.onClick\n onKeyUp=this.onKeyUp\n }}\n {{/each}}\n {{else}}\n {{yield\n (hash\n Tab=(component\n "draco/tabs/tab"\n size=this.size\n disabled=@disabled\n didInsertNode=this.didInsertTab\n didUpdateNode=this.didUpdateTab\n willDestroyNode=this.willDestroyTab\n tabIds=this._tabIds\n panelIds=this._panelIds\n selectedTabIndex=this.selectedTabIndex\n onClick=this.onClick\n onKeyUp=this.onKeyUp\n )\n )\n }}\n {{/if}}\n </ul>\n </div>\n\n {{#if this.tabs}}\n {{#each this.tabs as |panel index|}}\n {{draco/tabs/panel\n text=panel.content\n didInsertNode=this.didInsertPanel\n willDestroyNode=this.willDestroyPanel\n tabIds=this._tabIds\n panelIds=this._panelIds\n selectedTabIndex=this.selectedTabIndex\n }}\n {{/each}}\n {{else}}\n {{yield\n (hash\n Panel=(component\n "draco/tabs/panel"\n didInsertNode=this.didInsertPanel\n willDestroyNode=this.willDestroyPanel\n tabIds=this._tabIds\n panelIds=this._panelIds\n selectedTabIndex=this.selectedTabIndex\n )\n )\n }}\n {{/if}}\n</div>');const f=i.Medium,g=n.Primary,w=Object.values(i),x=Object.values(n);let N=(c=e((p=class extends o{constructor(e,i){super(e,i),t(this,"componentName","Draco::Tabs"),s(this,"_isControlled",c,this),s(this,"_selectedTabId",h,this),s(this,"_selectedTabIndex",I,this),s(this,"_tabIds",y,this),s(this,"_panelNodes",_,this),s(this,"_panelIds",u,this),s(this,"_tabNodes",m,this),this._isControlled=void 0!==this.args.selectedTabIndex,this._selectedTabIndex=this.args.selectedTabIndex??0}get size(){const{size:e=f}=this.args;return a(` for "${this.componentName}" must be one of the following: ${w.join(", ")}; received: ${e}`,w.includes(e)),e}get tabs(){const{tabs:e=[]}=this.args;return e&&e.forEach((e=>{a(` member 'title' for "${this.componentName}" must be a 'string' value; received: ${typeof e.title}`,"string"==typeof e.title)})),e||[]}get selectedTabIndex(){return this._isControlled?this.args.selectedTabIndex??0:this._selectedTabIndex}set selectedTabIndex(e){this._isControlled||(this._selectedTabIndex=e)}get isFullWidth(){return this.args.isFullWidth??!0}get classNames(){const e=["draco-tabs"];return e.push(`draco-tabs--size-${this.size}`),this.isFullWidth&&e.push("draco-tabs--width-full"),e.join(" ")}didInsert(){a("The number of Tabs must be equal to the number of Panels",this._tabNodes.length===this._panelNodes.length),this._selectedTabId&&(this.selectedTabIndex=this._tabIds.indexOf(this._selectedTabId))}didUpdateSelectedTabId(){this._selectedTabId&&(this.selectedTabIndex=this._tabIds.indexOf(this._selectedTabId))}didInsertTab(e,t){this._tabNodes=[...this._tabNodes,e],this._tabIds=[...this._tabIds,e.id],t&&(this._selectedTabId=e.id)}didUpdateTab(e,t){t&&(this.selectedTabIndex=e)}willDestroyTab(e){this._tabNodes=this._tabNodes.filter((t=>t.id!==e.id)),this._tabIds=this._tabIds.filter((t=>t!==e.id))}didInsertPanel(e,t){this._panelNodes=[...this._panelNodes,e],this._panelIds=[...this._panelIds,t]}willDestroyPanel(e){this._panelNodes=this._panelNodes.filter((t=>t.id!==e.id)),this._panelIds=this._panelIds.filter((t=>t!==e.id))}onClick(e,t){this.selectedTabIndex=t,"function"==typeof this.args.onClickTab&&this.args.onClickTab(e,t)}}).prototype,"_isControlled",[r],{configurable:!0,enumerable:!0,writable:!0,initializer:null}),h=e(p.prototype,"_selectedTabId",[r],{configurable:!0,enumerable:!0,writable:!0,initializer:null}),I=e(p.prototype,"_selectedTabIndex",[r],{configurable:!0,enumerable:!0,writable:!0,initializer:null}),y=e(p.prototype,"_tabIds",[r],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return[]}}),_=e(p.prototype,"_panelNodes",[r],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return[]}}),u=e(p.prototype,"_panelIds",[r],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return[]}}),m=e(p.prototype,"_tabNodes",[r],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return[]}}),e(p.prototype,"didInsert",[d],Object.getOwnPropertyDescriptor(p.prototype,"didInsert"),p.prototype),e(p.prototype,"didUpdateSelectedTabId",[d],Object.getOwnPropertyDescriptor(p.prototype,"didUpdateSelectedTabId"),p.prototype),e(p.prototype,"didInsertTab",[d],Object.getOwnPropertyDescriptor(p.prototype,"didInsertTab"),p.prototype),e(p.prototype,"didUpdateTab",[d],Object.getOwnPropertyDescriptor(p.prototype,"didUpdateTab"),p.prototype),e(p.prototype,"willDestroyTab",[d],Object.getOwnPropertyDescriptor(p.prototype,"willDestroyTab"),p.prototype),e(p.prototype,"didInsertPanel",[d],Object.getOwnPropertyDescriptor(p.prototype,"didInsertPanel"),p.prototype),e(p.prototype,"willDestroyPanel",[d],Object.getOwnPropertyDescriptor(p.prototype,"willDestroyPanel"),p.prototype),e(p.prototype,"onClick",[d],Object.getOwnPropertyDescriptor(p.prototype,"onClick"),p.prototype),p);b(T,N);export{w as AVAILABLE_SIZES,x as AVAILABLE_VARIANTS,f as DEFAULT_SIZE,g as DEFAULT_VARIANT,N as default};
//# sourceMappingURL=index.js.map