vue-devui/tabs/index.umd.js

DevUI components based on Vite and Vue3

(function(v,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(v=typeof globalThis!="undefined"?globalThis:v||self,t(v.index={},v.Vue))})(this,function(v,t){"use strict";const w={modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null},closeable:{type:Boolean,default:!1},addable:{type:Boolean,default:!1},tabPosition:{type:String,default:"top"}};function y(e,a,n){let o=e;return a&&(o+=`__${a}`),n&&(o+=`--${n}`),o}function V(e,a=!1){const n=a?`.devui-${e}`:`devui-${e}`;return{b:()=>y(n),e:s=>s?y(n,s):"",m:s=>s?y(n,"",s):"",em:(s,f)=>s&&f?y(n,s,f):""}}const g=V("tabs");function k(e,a){const{cssClass:n,tabPosition:o,customWidth:r}=t.toRefs(e),l=t.computed(()=>({[g.e("nav")]:!0,[g.em("nav",e.type)]:!0,[n.value]:Boolean(n.value),[g.em("nav","top")]:o.value==="top",[g.em("nav","right")]:o.value==="right",[g.em("nav","bottom")]:o.value==="bottom",[g.em("nav","left")]:o.value==="left"})),i=t.computed(()=>({["custom-width"]:Boolean(r.value)})),s={width:e.customWidth?e.customWidth:""},f=t.computed(()=>["top","bottom"].includes(e.tabPosition)?{left:a.offsetLeft+"px",width:a.offsetWidth+"px"}:{top:a.offsetTop+"px",height:a.offsetHeight+"px",width:a.offsetWidth+"px"});return{ulClasses:l,aClasses:i,customStyle:s,sliderAnimationStyle:f}}function U(e,a,n,o,r,l){const i=()=>{e.type==="slider"&&setTimeout(()=>{var c;const d=(c=l.value)==null?void 0:c.querySelector("#"+e.modelValue+".active");d&&l.value&&(["top","bottom"].includes(e.tabPosition)?o.offsetLeft=d.getBoundingClientRect().left-l.value.getBoundingClientRect().left:(o.offsetTop=d.getBoundingClientRect().top-l.value.getBoundingClientRect().top,o.offsetHeight=d.getBoundingClientRect().height),o.offsetWidth=d.getBoundingClientRect().width)})},s=d=>{let c=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const u=e.beforeChange(d);typeof u!="undefined"&&(u.then?c=u:c=Promise.resolve(u))}return c},f=(d,c)=>{const u=d.props.id;!e.reactivable&&e.modelValue===u||s(u).then(p=>{if(!p)return;const C=n.value.find(P=>P.props.id===u);a&&C&&!C.props.disabled&&(a.state.active=u,e.type==="slider"&&c&&l&&l.value&&(["left","right"].includes(e.tabPosition)?o.offsetLeft=c.getBoundingClientRect().left-l.value.nativeElement.getBoundingClientRect().left:(o.offsetTop=c.getBoundingClientRect().top-l.value.nativeElement.getBoundingClientRect().top,o.offsetHeight=c.getBoundingClientRect().height),o.offsetWidth=c.getBoundingClientRect().width),r.emit("active-tab-change",C.props.id))})};return{update:i,activeClick:f,beforeMount:()=>{e.type!=="slider"&&e.modelValue===void 0&&n.value&&n.value.length>0&&f(n.value[0])},mounted:()=>{var d;if(e.type==="slider"&&e.modelValue===void 0&&n.value&&n.value.length>0&&n.value[0]){const c=n.value[0],u=(d=c.tabsEle)==null?void 0:d.value,p=u==null?void 0:u.getElementById(c.tabId);f(p)}},tabCanClose:d=>(e.closeable||d.closeable)&&!d.disabled}}function $(e){return{onTabRemove:(o,r)=>{r.stopPropagation(),e.emit("tab-remove",o.props,r),e.emit("tab-change",o.props.id,"delete")},onTabAdd:()=>{e.emit("tab-add"),e.emit("tab-change",void 0,"add")}}}var F="",j=t.defineComponent({name:"DTabNav",props:w,emits:["active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=V("tabs"),o=t.shallowRef(),r=t.reactive({offsetLeft:0,offsetWidth:0,offsetTop:0,offsetHeight:0,id:null}),l=t.inject("tabs"),i=t.computed(()=>Object.values((l==null?void 0:l.state.data)||{})),{ulClasses:s,aClasses:f,customStyle:B,sliderAnimationStyle:N}=k(e,r),{update:m,beforeMount:d,mounted:c,activeClick:u,tabCanClose:p}=U(e,l,i,r,a,o),{onTabRemove:C,onTabAdd:P}=$(a),_=()=>{P(),t.nextTick(()=>{o.value&&(o.value.scrollLeft=o.value.scrollWidth)})};let R=!1;const L=h=>{if(o.value){const T=h.clientX,b=o.value.scrollLeft;R=!0,o.value.addEventListener("mousemove",M=>{if(R&&o.value){const E=M.clientX-T;o.value.scrollLeft=b-E}}),o.value.addEventListener("mouseup",()=>{R=!1}),o.value.addEventListener("mouseleave",()=>{R=!1})}};return t.onUpdated(()=>m()),t.onBeforeMount(()=>d()),t.onMounted(()=>{c(),o.value&&o.value.addEventListener("mousedown",L)}),t.onUnmounted(()=>{o.value&&o.value.removeEventListener("mousedown",L)}),t.watch(()=>e.modelValue,()=>{t.nextTick(()=>{const h=i.value.find(T=>T.props.id===e.modelValue);h&&u(h)})}),()=>{const h=b=>p(b)?t.createVNode("span",{class:n.e("close-btn"),onClick:M=>C(b,M)},[t.createVNode(t.resolveComponent("d-icon"),{size:"12px",name:"error-o"},null)]):null,T=e.addable?t.createVNode("li",{class:n.e("new-tab"),onClick:_},[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)]):null;return t.createVNode("ul",{ref:o,role:"tablist",class:s.value},[(i.value||[]).map(b=>t.createVNode("li",{role:"presentation",onClick:()=>{u(b)},class:(e.modelValue===b.props.id?"active":"")+(b.props.disabled?" disabled":""),id:b.props.id},[t.createVNode("span",{class:n.e("nav-content")},[t.createVNode("a",{role:"tab","data-toggle":b.props.id,"aria-expanded":e.modelValue===b.props.id,class:f.value,style:B},[b.slots.title?b.slots.title():t.createVNode("span",null,[b.props.title])]),h(b)])])),T,t.createVNode("div",{class:n.e(`nav-${e.type}-animation`),style:N.value},null)])}}});const W=V("tabs");function X(e){return{onUpdateModelValue:i=>{e.emit("update:modelValue",i)},onActiveTabChange:i=>{e.emit("active-tab-change",i)},onTabRemove:(i,s)=>{e.emit("tab-remove",i,s)},onTabAdd:()=>{e.emit("tab-add")},onTabChange:(i,s)=>{e.emit("tab-change",i,s)}}}function D(e){return{tabsClasses:t.computed(()=>({[W.b()]:!0,[W.m(e.tabPosition)]:!0}))}}var S=t.defineComponent({name:"DTabs",props:w,emits:["update:modelValue","active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=t.reactive({data:{},active:e.modelValue,showContent:e.showContent}),o=m=>{m.uid&&(n.data[m.uid]=m)},r=m=>{m&&delete n.data[m]};t.provide("tabs",{state:n,addTab:o,deleteTab:r});const{onUpdateModelValue:l,onActiveTabChange:i,onTabRemove:s,onTabAdd:f,onTabChange:B}=X(a),{tabsClasses:N}=D(e);return t.watch(()=>n.active,()=>{l(n.active)}),()=>{var c,u;const m=t.createVNode(j,t.mergeProps(e,{onActiveTabChange:i,onTabRemove:s,onTabAdd:f,onTabChange:B}),null),d=(u=(c=a.slots).default)==null?void 0:u.call(c);return t.createVNode("div",{class:N.value},[e.tabPosition==="bottom"?[d,m]:[m,d],t.createVNode("div",{style:"clear: both"},null)])}}});const H={title:{type:[String,Number],default:null},id:{type:String,default:null},disabled:{type:Boolean,default:!1},closeable:{type:Boolean,default:!1}};var q="",A=t.defineComponent({name:"DTab",props:H,setup(e,{slots:a}){const n=t.inject("tabs"),o=V("tab"),r=t.getCurrentInstance(),l=t.reactive({uid:r==null?void 0:r.uid,slots:a,props:e});return t.onMounted(()=>{n==null||n.addTab(l)}),t.onUnmounted(()=>{n==null||n.deleteTab(l.uid)}),()=>{var f;const{id:i}=e;return(n==null?void 0:n.state.showContent)&&n.state.active===i?t.createVNode("div",{class:o.e("content")},[t.createVNode("div",{role:"tabpanel"},[(f=a.default)==null?void 0:f.call(a)])]):null}}}),I={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"100%",install(e){e.component(S.name,S),e.component(A.name,A)}};v.Tab=A,v.Tabs=S,v.default=I,v.tabsProps=w,Object.defineProperty(v,"__esModule",{value:!0}),v[Symbol.toStringTag]="Module"});