2 lines
13 KiB
JavaScript
2 lines
13 KiB
JavaScript
var e=Object.defineProperty,a=Object.defineProperties,t=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,o=(a,t,l)=>t in a?e(a,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):a[t]=l,r=(e,a)=>{for(var t in a||(a={}))s.call(a,t)&&o(e,t,a[t]);if(l)for(var t of l(a))n.call(a,t)&&o(e,t,a[t]);return e},i=(e,l)=>a(e,t(l));import{d as u,_ as d,o as c,c as p,a as v,w as b,y as m,k as f,m as y,K as h,n as g,p as w,P as k,ba as x,ax as P,F as C,x as T,G as _,M as $,N,bb as B,bc as S,q as E,J as R,ay as A,S as j,C as O,Y as F,E as z,au as L,I,D as K,s as M,t as V,ac as H,a7 as q,bd as D,a5 as U,be as Y,a0 as G,a1 as J,a2 as W,H as X,O as Q,bf as Z,af as ee,$ as ae,A as te,z as le,aa as se}from"./index-131368df.js";import{E as ne,_ as oe}from"./SwitchRoles-e92e6434.js";import{m as re}from"./typescript-7283c357.js";import{t as ie,U as ue,I as de}from"./index-dc1c8b9b.js";import{a as ce}from"./arrow-right-2e7d3193.js";const pe=u({name:"ArrowLeft"}),ve={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},be=[v("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"},null,-1)];var me=d(pe,[["render",function(e,a,t,l,s,n){return c(),p("svg",ve,be)}]]);const fe=u({name:"Plus"}),ye={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},he=[v("path",{fill:"currentColor",d:"M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"},null,-1)];var ge=d(fe,[["render",function(e,a,t,l,s,n){return c(),p("svg",ye,he)}]]);const we=Symbol("tabsRootContextKey"),ke=f({tabs:{type:y(Array),default:()=>re([])}});var xe=_(u(i(r({},{name:"ElTabBar"}),{props:ke,setup(e,{expose:a}){const t=e,l=$(),s=h(we);s||ie("ElTabBar","<el-tabs><el-tab-bar /></el-tabs>");const n=g("tabs"),o=w(),r=w(),i=()=>r.value=(()=>{let e=0,a=0;const n=["top","bottom"].includes(s.props.tabPosition)?"width":"height",o="width"===n?"x":"y";return t.tabs.every((s=>{var r,i,u,d;const c=null==(i=null==(r=l.parent)?void 0:r.refs)?void 0:i[`tab-${s.paneName}`];if(!c)return!1;if(!s.active)return!0;a=c[`client${x(n)}`];const p="x"===o?"left":"top";e=c.getBoundingClientRect()[p]-(null!=(d=null==(u=c.parentElement)?void 0:u.getBoundingClientRect()[p])?d:0);const v=window.getComputedStyle(c);return"width"===n&&(t.tabs.length>1&&(a-=Number.parseFloat(v.paddingLeft)+Number.parseFloat(v.paddingRight)),e+=Number.parseFloat(v.paddingLeft)),!1})),{[n]:`${a}px`,transform:`translate${x(o)}(${e}px)`}})();return b((()=>t.tabs),(async()=>{await k(),i()}),{immediate:!0}),P(o,(()=>i())),a({ref:o,update:i}),(e,a)=>(c(),p("div",{ref_key:"barRef",ref:o,class:C([m(n).e("active-bar"),m(n).is(m(s).props.tabPosition)]),style:T(r.value)},null,6))}})),[["__file","/home/runner/work/element-plus/element-plus/packages/components/tabs/src/tab-bar.vue"]]);const Pe=f({panes:{type:y(Array),default:()=>re([])},currentName:{type:[String,Number],default:""},editable:Boolean,onTabClick:{type:y(Function),default:N},onTabRemove:{type:y(Function),default:N},type:{type:String,values:["card","border-card",""],default:""},stretch:Boolean}),Ce=u({name:"ElTabNav",props:Pe,setup(e,{expose:a}){const t=h(we);t||ie("ElTabNav","<el-tabs><tab-nav /></el-tabs>");const l=g("tabs"),s=B(),n=S(),o=w(),r=w(),i=w(),u=w(!1),d=w(0),c=w(!1),p=w(!0),v=E((()=>["top","bottom"].includes(t.props.tabPosition)?"width":"height")),m=E((()=>({transform:`translate${"width"===v.value?"X":"Y"}(-${d.value}px)`}))),f=()=>{if(!o.value)return;const e=o.value[`offset${x(v.value)}`],a=d.value;if(!a)return;const t=a>e?a-e:0;d.value=t},y=()=>{if(!o.value||!r.value)return;const e=r.value[`offset${x(v.value)}`],a=o.value[`offset${x(v.value)}`],t=d.value;if(e-t<=a)return;const l=e-t>2*a?t+a:e-a;d.value=l},k=()=>{const e=r.value;if(!(u.value&&i.value&&o.value&&e))return;const a=i.value.querySelector(".is-active");if(!a)return;const l=o.value,s=["top","bottom"].includes(t.props.tabPosition),n=a.getBoundingClientRect(),c=l.getBoundingClientRect(),p=s?e.offsetWidth-c.width:e.offsetHeight-c.height,v=d.value;let b=v;s?(n.left<c.left&&(b=v-(c.left-n.left)),n.right>c.right&&(b=v+n.right-c.right)):(n.top<c.top&&(b=v-(c.top-n.top)),n.bottom>c.bottom&&(b=v+(n.bottom-c.bottom))),b=Math.max(b,0),d.value=Math.min(b,p)},C=()=>{if(!r.value||!o.value)return;const e=r.value[`offset${x(v.value)}`],a=o.value[`offset${x(v.value)}`],t=d.value;if(a<e){const t=d.value;u.value=u.value||{},u.value.prev=t,u.value.next=t+a<e,e-t<a&&(d.value=e-a)}else u.value=!1,t>0&&(d.value=0)},T=e=>{const a=e.code,{up:t,down:l,left:s,right:n}=z;if(![t,l,s,n].includes(a))return;const o=Array.from(e.currentTarget.querySelectorAll("[role=tab]")),r=o.indexOf(e.target);let i;i=a===s||a===t?0===r?o.length-1:r-1:r<o.length-1?r+1:0,o[i].focus(),o[i].click(),_()},_=()=>{p.value&&(c.value=!0)},$=()=>c.value=!1;return b(s,(e=>{"hidden"===e?p.value=!1:"visible"===e&&setTimeout((()=>p.value=!0),50)})),b(n,(e=>{e?setTimeout((()=>p.value=!0),50):p.value=!1})),P(i,C),R((()=>setTimeout((()=>k()),0))),A((()=>C())),a({scrollToActiveTab:k,removeFocus:$}),()=>{const a=u.value?[j("span",{class:[l.e("nav-prev"),l.is("disabled",!u.value.prev)],onClick:f},[j(O,null,{default:()=>[j(me,null,null)]})]),j("span",{class:[l.e("nav-next"),l.is("disabled",!u.value.next)],onClick:y},[j(O,null,{default:()=>[j(ce,null,null)]})])]:null,s=e.panes.map(((a,s)=>{var n,o;const r=a.props.name||a.index||`${s}`,i=a.isClosable||e.editable;a.index=`${s}`;const u=i?j(O,{class:"is-icon-close",onClick:t=>e.onTabRemove(a,t)},{default:()=>[j(F,null,null)]}):null,d=(null==(o=(n=a.instance.slots).label)?void 0:o.call(n))||a.props.label,p=a.active?0:-1;return j("div",{ref:`tab-${r}`,class:[l.e("item"),l.is(t.props.tabPosition),l.is("active",a.active),l.is("disabled",a.props.disabled),l.is("closable",i),l.is("focus",c.value)],id:`tab-${r}`,key:`tab-${r}`,"aria-controls":`pane-${r}`,role:"tab","aria-selected":a.active,tabindex:p,onFocus:()=>_(),onBlur:()=>$(),onClick:t=>{$(),e.onTabClick(a,r,t)},onKeydown:t=>{!i||t.code!==z.delete&&t.code!==z.backspace||e.onTabRemove(a,t)}},[d,u])}));return j("div",{ref:i,class:[l.e("nav-wrap"),l.is("scrollable",!!u.value),l.is(t.props.tabPosition)]},[a,j("div",{class:l.e("nav-scroll"),ref:o},[j("div",{class:[l.e("nav"),l.is(t.props.tabPosition),l.is("stretch",e.stretch&&["top","bottom"].includes(t.props.tabPosition))],ref:r,style:m.value,role:"tablist",onKeydown:T},[e.type?null:j(xe,{tabs:[...e.panes]},null),s])])])}}}),Te=f({type:{type:String,values:["card","border-card",""],default:""},activeName:{type:[String,Number],default:""},closable:Boolean,addable:Boolean,modelValue:{type:[String,Number],default:""},editable:Boolean,tabPosition:{type:String,values:["top","right","bottom","left"],default:"top"},beforeLeave:{type:y(Function),default:()=>!0},stretch:Boolean}),_e=e=>M(e)||V(e),$e=(e,a=[])=>{const t=e.children||[];return Array.from(t).forEach((e=>{let t=e.type;t=t.name||t,"ElTabPane"===t&&e.component?a.push(e.component):t!==q&&"template"!==t||$e(e,a)})),a};var Ne=u({name:"ElTabs",props:Te,emits:{[ue]:e=>_e(e),[de]:e=>_e(e),"tab-click":(e,a)=>a instanceof Event,"tab-change":e=>_e(e),edit:(e,a)=>["remove","add"].includes(a),"tab-remove":e=>_e(e),"tab-add":()=>!0},setup(e,{emit:a,slots:t,expose:l}){const s=$();(({from:e,replacement:a,scope:t,version:l,ref:s,type:n="API"},o)=>{b((()=>m(o)),(e=>{}),{immediate:!0})})({scope:"el-tabs",type:"Event",from:"input",replacement:"tab-change",version:"2.5.0",ref:"https://element-plus.org/en-US/component/tabs.html#tabs-events"},E((()=>{var e;return L(null==(e=s.vnode.props)?void 0:e.onInput)})));const n=g("tabs"),o=w(),r=w([]),i=w(e.modelValue||e.activeName||"0"),u={},d=(e=!1)=>{if(t.default){const a=s.subTree.children,t=Array.from(a).find((({props:e})=>(null==e?void 0:e.class)===n.e("content")));if(!t)return;const l=$e(t).map((e=>u[e.uid])),o=!(l.length===r.value.length&&l.every(((e,a)=>e.uid===r.value[a].uid)));(e||o)&&(r.value=l)}else 0!==r.value.length&&(r.value=[])},c=e=>{i.value=e,a(de,e),a(ue,e),a("tab-change",e)},p=a=>{var t;if(i.value===a)return;const l=null==(t=e.beforeLeave)?void 0:t.call(e,a,i.value);H(l)?l.then((()=>{var e,t;c(a),null==(t=null==(e=o.value)?void 0:e.removeFocus)||t.call(e)}),N):!1!==l&&c(a)},v=(e,t,l)=>{e.props.disabled||(p(t),a("tab-click",e,l))},f=(e,t)=>{e.props.disabled||(t.stopPropagation(),a("edit",e.props.name,"remove"),a("tab-remove",e.props.name))},y=()=>{a("edit",void 0,"add"),a("tab-add")};return A((()=>d())),R((()=>d())),b((()=>e.activeName),(e=>p(e))),b((()=>e.modelValue),(e=>p(e))),b(i,(async()=>{var e,a;d(!0),await k(),await(null==(e=o.value)?void 0:e.$nextTick()),null==(a=o.value)||a.scrollToActiveTab()})),I(we,{props:e,currentName:i,updatePaneState:e=>u[e.uid]=e}),l({currentName:i}),()=>{const a=e.editable||e.addable?j("span",{class:n.e("new-tab"),tabindex:"0",onClick:y,onKeydown:e=>{e.code===z.enter&&y()}},[j(O,{class:n.is("icon-plus")},{default:()=>[j(ge,null,null)]})]):null,l=j("div",{class:[n.e("header"),n.is(e.tabPosition)]},[a,j(Ce,{ref:o,currentName:i.value,editable:e.editable,type:e.type,panes:r.value,stretch:e.stretch,onTabClick:v,onTabRemove:f},null)]),s=j("div",{class:n.e("content")},[K(t,"default")]);return j("div",{class:[n.b(),n.m(e.tabPosition),{[n.m("card")]:"card"===e.type,[n.m("border-card")]:"border-card"===e.type}]},[..."bottom"!==e.tabPosition?[l,s]:[s,l]])}}});const Be=f({label:{type:String,default:""},name:{type:[String,Number],default:""},closable:Boolean,disabled:Boolean,lazy:Boolean}),Se=["id","aria-hidden","aria-labelledby"];var Ee=_(u(i(r({},{name:"ElTabPane"}),{props:Be,setup(e){const a=e,t=$(),l=h(we);l||ie("ElTabPane","usage: <el-tabs><el-tab-pane /></el-tabs/>");const s=g("tab-pane"),n=w(),o=E((()=>a.closable||l.props.closable)),r=D((()=>l.currentName.value===(a.name||n.value))),i=w(r.value),u=E((()=>a.name||n.value)),d=D((()=>!a.lazy||i.value||r.value));return b(r,(e=>{e&&(i.value=!0)})),l.updatePaneState(U({uid:t.uid,instance:Y(t),props:a,paneName:u,active:r,index:n,isClosable:o})),(e,a)=>m(d)?G((c(),p("div",{key:0,id:`pane-${m(u)}`,class:C(m(s).b()),role:"tabpanel","aria-hidden":!m(r),"aria-labelledby":`tab-${m(u)}`},[K(e.$slots,"default")],10,Se)),[[J,m(r)]]):W("v-if",!0)}})),[["__file","/home/runner/work/element-plus/element-plus/packages/components/tabs/src/tab-pane.vue"]]);const Re=X(Ne,{TabPane:Ee}),Ae=Q(Ee);const je=e=>{if(e&&e instanceof Array&&e.length>0){const a=Z().roles,t=e;return a.some((e=>t.includes(e)))}return console.error("need roles! Like v-permission=\"['admin','editor']\""),!1};const Oe={class:"app-container"},Fe={class:"permission-alert"},ze=se(" 只有 "),Le=se("admin"),Ie=se("可以看见这个 "),Ke=se(" v-permission=\"['admin']\" "),Me={class:"permission-alert"},Ve=se(" 只有 "),He=se("editor"),qe=se("可以看见这个 "),De=se(" v-permission=\"['editor']\" "),Ue={class:"permission-alert"},Ye=se(" 两者 "),Ge=se("admin"),Je=se("和 "),We=se("editor"),Xe=se("都可以看见这个 "),Qe=se(" v-permission=\"['admin', 'editor']\" "),Ze=se(" 在某些情况下，不适合使用 v-permission。例如：element-plus 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。 "),ea=se(" admin 可以看见这个 "),aa=se(" v-if=\"checkPermission(['admin'])\" "),ta=se(" editor 可以看见这个 "),la=se(" v-if=\"checkPermission(['editor'])\" "),sa=se(" 两者 admin 和 editor 都可以看见这个 "),na=se(" v-if=\"checkPermission(['admin', 'editor'])\" ");var oa=ee(u({setup(e){const a=U({key:1,handleRolesChange:()=>{a.key++}});return(e,t)=>{const l=ne,s=Ae,n=Re,o=ae("permission");return c(),p("div",Oe,[j(oe,{onChange:m(a).handleRolesChange},null,8,["onChange"]),(c(),p("div",{key:m(a).key,style:{"margin-top":"30px"}},[v("div",null,[G((c(),p("span",Fe,[ze,j(l,null,{default:te((()=>[Le])),_:1}),Ie])),[[o,["admin"]]]),G((c(),le(l,{class:"permission-sourceCode",type:"info",size:"large"},{default:te((()=>[Ke])),_:1})),[[o,["admin"]]])]),v("div",null,[G((c(),p("span",Me,[Ve,j(l,null,{default:te((()=>[He])),_:1}),qe])),[[o,["editor"]]]),G((c(),le(l,{class:"permission-sourceCode",type:"info",size:"large"},{default:te((()=>[De])),_:1})),[[o,["editor"]]])]),v("div",null,[G((c(),p("span",Ue,[Ye,j(l,null,{default:te((()=>[Ge])),_:1}),Je,j(l,null,{default:te((()=>[We])),_:1}),Xe])),[[o,["admin","editor"]]]),G((c(),le(l,{class:"permission-sourceCode",type:"info",size:"large"},{default:te((()=>[Qe])),_:1})),[[o,["admin","editor"]]])])])),(c(),p("div",{key:"checkPermission"+m(a).key,style:{"margin-top":"60px"}},[j(l,{type:"info",size:"large"},{default:te((()=>[Ze])),_:1}),j(n,{type:"border-card",style:{width:"550px","margin-top":"60px"}},{default:te((()=>[m(je)(["admin"])?(c(),le(s,{key:0,label:"admin"},{default:te((()=>[ea,j(l,{class:"permission-sourceCode",type:"info"},{default:te((()=>[aa])),_:1})])),_:1})):W("",!0),m(je)(["editor"])?(c(),le(s,{key:1,label:"editor"},{default:te((()=>[ta,j(l,{class:"permission-sourceCode",type:"info"},{default:te((()=>[la])),_:1})])),_:1})):W("",!0),m(je)(["admin","editor"])?(c(),le(s,{key:2,label:"admin 和 editor"},{default:te((()=>[sa,j(l,{class:"permission-sourceCode",type:"info"},{default:te((()=>[na])),_:1})])),_:1})):W("",!0)])),_:1})]))])}}}),[["__scopeId","data-v-6aac19ea"]]);export{oa as default};
|