vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
2 lines (1 loc) • 2.61 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=e.defineComponent({__name:"Timeline",props:{items:{default:()=>[]},width:{default:"100%"},lineStyle:{default:"solid"},mode:{default:"left"},position:{default:"left"}},setup(i){const o=i,s=e.ref(),a=e.ref([]),c=e.computed(()=>typeof o.width=="number"?`${o.width}px`:o.width),n=e.computed(()=>o.items.length);function d(){for(let l=0;l<n.value;l++)a.value[l]=getComputedStyle(s.value[l].firstElementChild||s.value[l],null).getPropertyValue("line-height")}return e.watchEffect(()=>{d()},{flush:"post"}),e.watchEffect(()=>{if(o.mode==="center")for(let l=0;l<n.value;l++)(l+1)%2?o.position==="left"?s.value[l].classList.add("desc-alternate-left"):s.value[l].classList.add("desc-alternate-right"):o.position==="left"?s.value[l].classList.add("desc-alternate-right"):s.value[l].classList.add("desc-alternate-left")},{flush:"post"}),(l,m)=>(e.openBlock(),e.createElementBlock("div",{class:"m-timeline",style:e.normalizeStyle(`width: ${c.value};`)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["timeline-item",{"item-last":r===l.items.length-1}]),key:r},[e.createElementVNode("span",{class:e.normalizeClass(["timeline-tail",`tail-${l.mode}`]),style:e.normalizeStyle(`border-left-style: ${l.lineStyle};`)},null,6),e.createElementVNode("div",{class:e.normalizeClass(["timeline-dot",`dot-${l.mode}`]),style:e.normalizeStyle(`height: ${a.value[r]}`)},[e.renderSlot(l.$slots,"dot",{item:t,index:r},()=>[t.color==="red"?(e.openBlock(),e.createElementBlock("span",{key:0,class:"dot-item",style:e.normalizeStyle({borderColor:"#ff4d4f"})},null,4)):t.color==="gray"?(e.openBlock(),e.createElementBlock("span",{key:1,class:"dot-item",style:e.normalizeStyle({borderColor:"#00000040"})},null,4)):t.color==="green"?(e.openBlock(),e.createElementBlock("span",{key:2,class:"dot-item",style:e.normalizeStyle({borderColor:"#52c41a"})},null,4)):t.color==="blue"?(e.openBlock(),e.createElementBlock("span",{key:3,class:"dot-item",style:e.normalizeStyle({borderColor:"#1677ff"})},null,4)):(e.openBlock(),e.createElementBlock("span",{key:4,class:"dot-item",style:e.normalizeStyle({borderColor:t.color||"#1677ff"})},null,4))],!0)],6),e.createElementVNode("div",{ref_for:!0,ref_key:"descRef",ref:s,class:e.normalizeClass(`timeline-desc desc-${l.mode}`)},[e.renderSlot(l.$slots,"desc",{item:t,index:r},()=>[e.createTextVNode(e.toDisplayString(t.desc||"--"),1)],!0)],2)],2))),128))],4))}});exports.default=u;