eslink-ui-plus/es/tab/index.js

vue3 component library, css framework

import{defineComponent as K,ref as E,computed as k,watch as I,pushScopeId as T,popScopeId as V,openBlock as v,createElementBlock as c,Fragment as $,createElementVNode as _,normalizeClass as g,normalizeStyle as j,createCommentVNode as u,renderSlot as d,renderList as N,toDisplayString as z}from"vue";var B=Object.defineProperty,A=Object.getOwnPropertySymbols,D=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable,O=(e,t,a)=>t in e?B(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,H=(e,t)=>{for(var a in t||(t={}))D.call(t,a)&&O(e,a,t[a]);if(A)for(var a of A(t))F.call(t,a)&&O(e,a,t[a]);return e},p=K({props:{styles:{type:Object,default:()=>({})},source:{type:Array,default:()=>[]},modelValue:{type:[String,Number],default:""},slotKey:{type:String,default:"value"},className:{type:String,default:""},border:{type:Boolean,default:!0},control:{type:Boolean,default:!1},keyConfig:Object},emits:["click","update:modelValue","change"],setup(e,t){const{emit:a}=t,{valueKey:l,labelKey:s}=H({labelKey:"name",valueKey:"value"},e.keyConfig),i=E(e.modelValue),n=k(()=>{var r;return(r=e==null?void 0:e.source)==null?void 0:r.reduce((o,h)=>(o[h[l]]=h,o),{})}),y=r=>{const o=r.$ref;i.value=r[l],o.scrollIntoView(!1),a("update:modelValue",r[l]),a("click",r)},w=r=>`${r[e.slotKey]}-slot`,C=r=>{var o;return!!((o=t.slots)==null?void 0:o[w(r)])};I(i,(r,o)=>{r!==o&&a("change",r)}),I(()=>e.modelValue,(r,o)=>{r!==o&&(i.value=r)},{immediate:!0});const m=k(()=>((e==null?void 0:e.source)||[]).findIndex(o=>o[l]===i.value));return{emit:a,valueKey:l,labelKey:s,tabActive:i,clickTab:y,sourceMap:n,slotName:w,prevTab:()=>{if(m.value!==0){const r=e.source[m.value-1];i.value=r[l],r.$ref.scrollIntoView(!1),a("click",r),a("update:modelValue",i.value)}},nextTab:()=>{var r;if(m.value!==((r=e==null?void 0:e.source)==null?void 0:r.length)-1){const o=e.source[m.value+1],h=o.$ref;i.value=o[l],h.scrollIntoView(!1),a("click",o),a("update:modelValue",i.value)}},slots:t.slots,itemHasSlot:C,hasDefaultSlot:t.slots.default,slotContent:t.slots.content}}}),M=Object.defineProperty,L=Object.defineProperties,q=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,G=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable,S=(e,t,a)=>t in e?M(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,f=(e,t)=>{for(var a in t||(t={}))G.call(t,a)&&S(e,a,t[a]);if(P)for(var a of P(t))J.call(t,a)&&S(e,a,t[a]);return e},b=(e,t)=>L(e,q(t));T("data-v-0aa9e32d");const Q=["onClick"],R={key:3},U={key:0,class:"es-tab__content"};V();function W(e,t,a,l,s,i){return v(),c($,null,[_("div",{class:g(["es-tab",[{"es-tab--has-border":e.border},e.className]]),style:j(e.styles)},[e.control?(v(),c("div",{key:0,class:"es-tab__pre es-icon-arrow-left-s-line",onClick:t[0]||(t[0]=(...n)=>e.prevTab&&e.prevTab(...n))})):u("v-if",!0),_("div",{class:g(["es-tab__container",[e.control?"es-tab__container__calc-width":"es-tab__container__100-percent-width"]])},[d(e.$slots,"itemBefore"),(v(!0),c($,null,N(e.source,n=>(v(),c("div",{class:g(["es-tab__item",[{actived:e.tabActive===n[e.valueKey]}]]),ref:y=>n.$ref=y,key:n[e.valueKey],onClick:y=>e.clickTab(n)},[e.slots.before?d(e.$slots,"before",{key:0,tabItem:b(f({},n),{active:e.tabActive,actived:e.tabActive===n[e.valueKey]})}):u("v-if",!0),_("div",{class:g(["es-tab__item__content",[{actived:e.tabActive===n[e.valueKey]}]])},[e.slots.activeBefore?d(e.$slots,"activeBefore",{key:0,tabItem:b(f({},n),{active:e.tabActive,actived:e.tabActive===n[e.valueKey]})}):u("v-if",!0),e.itemHasSlot(n)?d(e.$slots,e.slotName(n),{key:1,tabItem:b(f({},n),{active:e.tabActive,actived:e.tabActive===n[e.valueKey]})}):d(e.$slots,"default",{key:2,tabItem:b(f({},n),{active:e.tabActive,actived:e.tabActive===n[e.valueKey]})}),!e.itemHasSlot(n)&&!e.hasDefaultSlot?(v(),c("span",R,z(n[e.labelKey]),1)):u("v-if",!0),e.slots.activeAfter?d(e.$slots,"activeAfter",{key:4,tabItem:b(f({},n),{active:e.tabActive,actived:e.tabActive===n[e.valueKey]})}):u("v-if",!0)],2),e.slots.after?d(e.$slots,"after",{key:1,tabItem:b(f({},n),{active:e.tabActive,actived:e.tabActive===n[e.valueKey]})}):u("v-if",!0)],10,Q))),128)),d(e.$slots,"itemAfter")],2),e.control?(v(),c("div",{key:1,class:"es-tab__next es-icon-arrow-right-s-line",onClick:t[1]||(t[1]=(...n)=>e.nextTab&&e.nextTab(...n))})):u("v-if",!0)],6),e.slotContent?(v(),c("div",U,[d(e.$slots,"content",{tabItem:b(f({},e.sourceMap[e.tabActive]),{active:e.tabActive})})])):u("v-if",!0)],64)}function X(e,t){t===void 0&&(t={});var a=t.insertAt;if(!(!e||typeof document=="undefined")){var l=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css",a==="top"&&l.firstChild?l.insertBefore(s,l.firstChild):l.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}var Y=`.es-tab[data-v-0aa9e32d] {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFang SC;
  box-sizing: border-box;
  height: 40px;
}
.es-tab__container[data-v-0aa9e32d] {
  display: flex;
  align-items: center;
  overflow-x: auto;
  color: #2853d2;
  font-size: 14px;
  font-family: PingFang SC;
  box-sizing: border-box;
  height: 100%;
  background: #ffffff;
  flex-shrink: 0;
  padding: 0 16px;
  overflow-y: hidden;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}
.es-tab__container[data-v-0aa9e32d]::-webkit-scrollbar {
  display: none;
}
.es-tab__container__calc-width[data-v-0aa9e32d] {
  width: calc(100% - 56px);
}
.es-tab__container__100-percent-width[data-v-0aa9e32d] {
  width: 100%;
}
.es-tab__pre[data-v-0aa9e32d] {
  width: 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #a7baf1;
}
.es-tab__next[data-v-0aa9e32d] {
  width: 28px;
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-end;
  cursor: pointer;
  color: #a7baf1;
}
.es-tab--has-border[data-v-0aa9e32d] {
  border-bottom: 1px solid #e6e7ef;
}
.es-tab__item[data-v-0aa9e32d] {
  height: 100%;
  box-sizing: border-box;
  margin-left: 24px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  cursor: pointer;
}
.es-tab__item[data-v-0aa9e32d]:nth-of-type(1) {
  margin-left: 0;
}
.es-tab__item__content[data-v-0aa9e32d] {
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  border-bottom: 2px solid transparent;
}
.es-tab__item__content.actived[data-v-0aa9e32d] {
  border-bottom: 2px solid #5075e2;
  color: #282934;
}`;X(Y),p.render=W,p.__scopeId="data-v-0aa9e32d",p.__file="components/tab/index.vue",p.install=e=>{e.component("es-tab",p)};export{p as default};