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

vue3 component library, css framework

(function(t,p){typeof exports=="object"&&typeof module!="undefined"?module.exports=p(require("vue")):typeof define=="function"&&define.amd?define(["vue"],p):(t=typeof globalThis!="undefined"?globalThis:t||self,t["es-tab"]=p(t.Vue))})(this,function(t){"use strict";var p=Object.defineProperty,y=Object.getOwnPropertySymbols,w=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable,h=(e,n,a)=>n in e?p(e,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[n]=a,C=(e,n)=>{for(var a in n||(n={}))w.call(n,a)&&h(e,a,n[a]);if(y)for(var a of y(n))S.call(n,a)&&h(e,a,n[a]);return e},b=t.defineComponent({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,n){const{emit:a}=n,{valueKey:s,labelKey:i}=C({labelKey:"name",valueKey:"value"},e.keyConfig),d=t.ref(e.modelValue),o=t.computed(()=>{var r;return(r=e==null?void 0:e.source)==null?void 0:r.reduce((l,v)=>(l[v[s]]=v,l),{})}),m=r=>{const l=r.$ref;d.value=r[s],l.scrollIntoView(!1),a("update:modelValue",r[s]),a("click",r)},_=r=>`${r[e.slotKey]}-slot`,j=r=>{var l;return!!((l=n.slots)==null?void 0:l[_(r)])};t.watch(d,(r,l)=>{r!==l&&a("change",r)}),t.watch(()=>e.modelValue,(r,l)=>{r!==l&&(d.value=r)},{immediate:!0});const u=t.computed(()=>((e==null?void 0:e.source)||[]).findIndex(l=>l[s]===d.value));return{emit:a,valueKey:s,labelKey:i,tabActive:d,clickTab:m,sourceMap:o,slotName:_,prevTab:()=>{if(u.value!==0){const r=e.source[u.value-1];d.value=r[s],r.$ref.scrollIntoView(!1),a("click",r),a("update:modelValue",d.value)}},nextTab:()=>{var r;if(u.value!==((r=e==null?void 0:e.source)==null?void 0:r.length)-1){const l=e.source[u.value+1],v=l.$ref;d.value=l[s],v.scrollIntoView(!1),a("click",l),a("update:modelValue",d.value)}},slots:n.slots,itemHasSlot:j,hasDefaultSlot:n.slots.default,slotContent:n.slots.content}}}),I=Object.defineProperty,$=Object.defineProperties,A=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,V=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,k=(e,n,a)=>n in e?I(e,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[n]=a,c=(e,n)=>{for(var a in n||(n={}))V.call(n,a)&&k(e,a,n[a]);if(g)for(var a of g(n))O.call(n,a)&&k(e,a,n[a]);return e},f=(e,n)=>$(e,A(n));t.pushScopeId("data-v-0aa9e32d");const B=["onClick"],E={key:3},P={key:0,class:"es-tab__content"};t.popScopeId();function N(e,n,a,s,i,d){return t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createElementVNode("div",{class:t.normalizeClass(["es-tab",[{"es-tab--has-border":e.border},e.className]]),style:t.normalizeStyle(e.styles)},[e.control?(t.openBlock(),t.createElementBlock("div",{key:0,class:"es-tab__pre es-icon-arrow-left-s-line",onClick:n[0]||(n[0]=(...o)=>e.prevTab&&e.prevTab(...o))})):t.createCommentVNode("v-if",!0),t.createElementVNode("div",{class:t.normalizeClass(["es-tab__container",[e.control?"es-tab__container__calc-width":"es-tab__container__100-percent-width"]])},[t.renderSlot(e.$slots,"itemBefore"),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.source,o=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["es-tab__item",[{actived:e.tabActive===o[e.valueKey]}]]),ref:m=>o.$ref=m,key:o[e.valueKey],onClick:m=>e.clickTab(o)},[e.slots.before?t.renderSlot(e.$slots,"before",{key:0,tabItem:f(c({},o),{active:e.tabActive,actived:e.tabActive===o[e.valueKey]})}):t.createCommentVNode("v-if",!0),t.createElementVNode("div",{class:t.normalizeClass(["es-tab__item__content",[{actived:e.tabActive===o[e.valueKey]}]])},[e.slots.activeBefore?t.renderSlot(e.$slots,"activeBefore",{key:0,tabItem:f(c({},o),{active:e.tabActive,actived:e.tabActive===o[e.valueKey]})}):t.createCommentVNode("v-if",!0),e.itemHasSlot(o)?t.renderSlot(e.$slots,e.slotName(o),{key:1,tabItem:f(c({},o),{active:e.tabActive,actived:e.tabActive===o[e.valueKey]})}):t.renderSlot(e.$slots,"default",{key:2,tabItem:f(c({},o),{active:e.tabActive,actived:e.tabActive===o[e.valueKey]})}),!e.itemHasSlot(o)&&!e.hasDefaultSlot?(t.openBlock(),t.createElementBlock("span",E,t.toDisplayString(o[e.labelKey]),1)):t.createCommentVNode("v-if",!0),e.slots.activeAfter?t.renderSlot(e.$slots,"activeAfter",{key:4,tabItem:f(c({},o),{active:e.tabActive,actived:e.tabActive===o[e.valueKey]})}):t.createCommentVNode("v-if",!0)],2),e.slots.after?t.renderSlot(e.$slots,"after",{key:1,tabItem:f(c({},o),{active:e.tabActive,actived:e.tabActive===o[e.valueKey]})}):t.createCommentVNode("v-if",!0)],10,B))),128)),t.renderSlot(e.$slots,"itemAfter")],2),e.control?(t.openBlock(),t.createElementBlock("div",{key:1,class:"es-tab__next es-icon-arrow-right-s-line",onClick:n[1]||(n[1]=(...o)=>e.nextTab&&e.nextTab(...o))})):t.createCommentVNode("v-if",!0)],6),e.slotContent?(t.openBlock(),t.createElementBlock("div",P,[t.renderSlot(e.$slots,"content",{tabItem:f(c({},e.sourceMap[e.tabActive]),{active:e.tabActive})})])):t.createCommentVNode("v-if",!0)],64)}function K(e,n){n===void 0&&(n={});var a=n.insertAt;if(!(!e||typeof document=="undefined")){var s=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",a==="top"&&s.firstChild?s.insertBefore(i,s.firstChild):s.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var T=`.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;
}`;return K(T),b.render=N,b.__scopeId="data-v-0aa9e32d",b.__file="components/tab/index.vue",b.install=e=>{e.component("es-tab",b)},b});