vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
2 lines (1 loc) • 2.62 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(o){const s=o,r=e.ref(),n=e.ref([]),i=e.computed(()=>typeof s.width=="number"?`${s.width}px`:s.width),c=e.computed(()=>s.items.length);function d(){for(let l=0;l<c.value;l++)n.value[l]=getComputedStyle(r.value[l].firstElementChild||r.value[l],null).getPropertyValue("line-height")}return e.watchEffect(()=>{d()},{flush:"post"}),e.watchEffect(()=>{if(s.mode==="center")for(let l=0;l<c.value;l++)(l+1)%2?s.position==="left"?r.value[l].classList.add("desc-alternate-left"):r.value[l].classList.add("desc-alternate-right"):s.position==="left"?r.value[l].classList.add("desc-alternate-right"):r.value[l].classList.add("desc-alternate-left")},{flush:"post"}),(l,m)=>(e.openBlock(),e.createElementBlock("div",{class:"timeline-wrap",style:e.normalizeStyle(`width: ${i.value};`)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["timeline-item",{"item-last":a===o.items.length-1}]),key:a},[e.createElementVNode("span",{class:e.normalizeClass(["timeline-tail",`tail-${o.mode}`]),style:e.normalizeStyle(`border-left-style: ${o.lineStyle};`)},null,6),e.createElementVNode("div",{class:e.normalizeClass(["timeline-dot",`dot-${o.mode}`]),style:e.normalizeStyle(`height: ${n.value[a]}`)},[e.renderSlot(l.$slots,"dot",{item:t,index:a},()=>[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:r,class:e.normalizeClass(`timeline-desc desc-${o.mode}`)},[e.renderSlot(l.$slots,"desc",{item:t,index:a},()=>[e.createTextVNode(e.toDisplayString(t.desc||"--"),1)],!0)],2)],2))),128))],4))}});exports.default=u;