vue-amazing-ui/lib/steps/Steps.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../utils/index.cjs"),v=["onClick"],h={class:"steps-icon"},k={key:0,class:"steps-num"},B={key:1,class:"icon-svg",focusable:"false","data-icon":"check",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},y={key:1,class:"steps-dot"},g={class:"steps-content"},E={class:"steps-title"},_={key:0,class:"steps-description"},b=e.defineComponent({__name:"Steps",props:{items:{default:()=>[]},width:{default:"auto"},size:{default:"default"},vertical:{type:Boolean,default:!1},labelPlacement:{default:"right"},dotted:{type:Boolean,default:!1},current:{default:1}},emits:["update:current","change"],setup(u,{emit:p}){const s=u,{colorPalettes:n}=f.useInject("Steps"),c=p,d=e.computed(()=>typeof s.width=="number"?`${s.width}px`:s.width),i=e.computed(()=>s.items.length),l=e.computed(()=>s.current<1?1:s.current>i.value+1?i.value+1:s.current);function m(t){l.value!==t&&(c("update:current",t),c("change",t))}return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["steps-wrap",{"steps-small":t.size==="small","steps-vertical":t.vertical,"steps-label-bottom":!t.vertical&&(t.labelPlacement==="bottom"||t.dotted),"steps-dotted":t.dotted}]),style:e.normalizeStyle(`
      --steps-width: ${d.value};
      --steps-primary-color: ${e.unref(n)[5]};
      --steps-primary-color-hover: ${e.unref(n)[5]};
      --steps-icon-color: ${e.unref(n)[0]};
      --steps-icon-color-hover: ${e.unref(n)[5]};
    `)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(a,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["steps-item",{"steps-finish":l.value>o+1,"steps-process":l.value===o+1,"steps-wait":l.value<o+1}]),key:o},[e.createElementVNode("div",{tabindex:"0",class:"steps-info-wrap",onClick:w=>m(o+1)},[r[1]||(r[1]=e.createElementVNode("div",{class:"steps-tail"},null,-1)),e.createElementVNode("div",h,[t.dotted?(e.openBlock(),e.createElementBlock("span",y)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[l.value<=o+1?(e.openBlock(),e.createElementBlock("span",k,e.toDisplayString(o+1),1)):(e.openBlock(),e.createElementBlock("svg",B,[...r[0]||(r[0]=[e.createElementVNode("path",{d:"M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"},null,-1)])]))],64))]),e.createElementVNode("div",g,[e.createElementVNode("div",E,e.toDisplayString(a.title),1),a.description?(e.openBlock(),e.createElementBlock("div",_,e.toDisplayString(a.description),1)):e.createCommentVNode("",!0)])],8,v)],2))),128))],6))}});exports.default=b;