UNPKG

@wikimedia/codex

Version:

Codex Design System for Wikimedia

2 lines (1 loc) 2.48 kB
"use strict";const a=require("vue"),b=require("./useWarnOnce.cjs"),c=require("./_plugin-vue_export-helper.js"),m=a.defineComponent({name:"CdxProgressBar",inheritAttrs:!1,props:{value:{type:[Number,null],default:null},max:{type:Number,default:100},inline:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},startLabel:{type:String,default:""},endLabel:{type:String,default:""}},setup(e,{attrs:r}){b(()=>!e.inline&&!r["aria-label"]&&!r["aria-hidden"],"CdxProgressBar: Progress bars require one of the following attribute, aria-label or aria-hidden. See documentation on https://doc.wikimedia.org/codex/latest/components/demos/progressbar.html");const s=a.computed(()=>typeof e.value=="number"),d=a.computed(()=>({"cdx-progress-bar--block":!e.inline,"cdx-progress-bar--inline":e.inline,"cdx-progress-bar--enabled":!e.disabled,"cdx-progress-bar--disabled":e.disabled})),o=a.computed(()=>e.inline?"true":void 0),l=a.computed(()=>typeof e.value!="number"?0:Math.min(Math.max(e.value,0),e.max)),n=a.computed(()=>({"--cdx-progress-value":l.value,"--cdx-progress-max":e.max})),t=a.useId(),i=a.computed(()=>!!(e.startLabel||e.endLabel)),u=a.computed(()=>i.value?t:void 0);return{rootClasses:d,computedAriaHidden:o,hasValue:s,progressStyles:n,clampedValue:l,labelsId:t,ariaLabelledBy:u}}}),p=["aria-labelledby","aria-hidden","aria-disabled","aria-valuemin","aria-valuemax","aria-valuenow"],g=["id"],v={class:"cdx-progress-bar__label cdx-progress-bar__label--start"},h={class:"cdx-progress-bar__label cdx-progress-bar__label--end"};function f(e,r,s,d,o,l){return a.openBlock(),a.createElementBlock(a.Fragment,null,[a.createElementVNode("div",a.mergeProps({class:["cdx-progress-bar",e.rootClasses]},e.$attrs,{role:"progressbar","aria-labelledby":e.ariaLabelledBy,"aria-hidden":e.computedAriaHidden,"aria-disabled":e.disabled,"aria-valuemin":e.hasValue?0:void 0,"aria-valuemax":e.hasValue?e.max:void 0,"aria-valuenow":e.hasValue?e.clampedValue:void 0,style:e.hasValue?e.progressStyles:void 0}),[a.createElementVNode("div",{class:a.normalizeClass(["cdx-progress-bar__bar",{"cdx-progress-bar__bar--determinate":e.hasValue}])},null,2)],16,p),e.startLabel||e.endLabel?(a.openBlock(),a.createElementBlock("div",{key:0,id:e.labelsId,class:"cdx-progress-bar__labels"},[a.createElementVNode("div",v,a.toDisplayString(e.startLabel),1),a.createElementVNode("div",h,a.toDisplayString(e.endLabel),1)],8,g)):a.createCommentVNode("v-if",!0)],64)}const y=c._export_sfc(m,[["render",f]]);module.exports=y;