vue-ts-seven-segment-display/dist/vue-ts-seven-segment-display.umd.cjs

A simple seven-segment display component built with Vue and TypeScript.

(function(o,t){typeof exports=="object"&&typeof module<"u"?module.exports=t(require("vue")):typeof define=="function"&&define.amd?define(["vue"],t):(o=typeof globalThis<"u"?globalThis:o||self,o.VueTsSevenSegmentDisplay=t(o.Vue))})(this,function(o){"use strict";const t=["height"],u=["d","fill"];return o.defineComponent({__name:"SevenSegmentDisplay",props:{value:{type:[Number,String,null],default:null},height:{type:[Number,String],required:!1,default:96},segmentSize:{type:Number,required:!1,default:8},color:{type:String,required:!1,default:"#545C6C"},bgColor:{type:String,required:!1,default:"#F2F2F2"},spacing:{type:[Number,String],required:!1,default:8},startFromEnd:Boolean,autoGrow:Boolean},setup(l){const n=o.computed(()=>l.autoGrow&&l.value!==null&&l.value.toString().length>l.segmentSize?l.value.toString().length:l.segmentSize),a=o.computed(()=>Array.from({length:n.value},(L,e)=>{if(l.value===null)return g.null;const c=l.value.toString().toUpperCase();let C=e<c.length?e:null,b=c.charAt(0)==="-"&&e===0;if(l.startFromEnd&&(C=e<n.value-c.length?null:e,b=b&&C===n.value-c.length),C!==null){let r=l.startFromEnd?C-(n.value-c.length):e;if(b)return g["-"];const i=c.charAt(r);return i in g?g[i]:g.null}return g.null})),g={null:[l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.bgColor]," ":[l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.bgColor],"-":[l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.color],_:[l.bgColor,l.bgColor,l.bgColor,l.color,l.bgColor,l.bgColor,l.bgColor],"=":[l.bgColor,l.bgColor,l.bgColor,l.color,l.bgColor,l.bgColor,l.color],"[":[l.color,l.bgColor,l.bgColor,l.color,l.color,l.color,l.bgColor],"]":[l.color,l.color,l.color,l.color,l.bgColor,l.bgColor,l.bgColor],0:[l.color,l.color,l.color,l.color,l.color,l.color,l.bgColor],1:[l.bgColor,l.color,l.color,l.bgColor,l.bgColor,l.bgColor,l.bgColor],2:[l.color,l.color,l.bgColor,l.color,l.color,l.bgColor,l.color],3:[l.color,l.color,l.color,l.color,l.bgColor,l.bgColor,l.color],4:[l.bgColor,l.color,l.color,l.bgColor,l.bgColor,l.color,l.color],5:[l.color,l.bgColor,l.color,l.color,l.bgColor,l.color,l.color],6:[l.color,l.bgColor,l.color,l.color,l.color,l.color,l.color],7:[l.color,l.color,l.color,l.bgColor,l.bgColor,l.bgColor,l.bgColor],8:[l.color,l.color,l.color,l.color,l.color,l.color,l.color],9:[l.color,l.color,l.color,l.color,l.bgColor,l.color,l.color],A:[l.color,l.color,l.color,l.bgColor,l.color,l.color,l.color],B:[l.bgColor,l.bgColor,l.color,l.color,l.color,l.color,l.color],C:[l.color,l.bgColor,l.bgColor,l.color,l.color,l.color,l.bgColor],D:[l.bgColor,l.color,l.color,l.color,l.color,l.bgColor,l.color],E:[l.color,l.bgColor,l.bgColor,l.color,l.color,l.color,l.color],F:[l.color,l.bgColor,l.bgColor,l.bgColor,l.color,l.color,l.color],G:[l.color,l.bgColor,l.color,l.color,l.color,l.color,l.bgColor],H:[l.bgColor,l.bgColor,l.color,l.bgColor,l.color,l.color,l.color],I:[l.bgColor,l.bgColor,l.bgColor,l.bgColor,l.color,l.color,l.bgColor],J:[l.bgColor,l.color,l.color,l.color,l.color,l.bgColor,l.bgColor],K:[l.color,l.bgColor,l.color,l.bgColor,l.color,l.color,l.color],L:[l.bgColor,l.bgColor,l.bgColor,l.color,l.color,l.color,l.bgColor],M:[l.color,l.bgColor,l.color,l.bgColor,l.color,l.bgColor,l.bgColor],N:[l.color,l.color,l.color,l.bgColor,l.color,l.color,l.bgColor],O:[l.color,l.color,l.color,l.color,l.color,l.color,l.bgColor],P:[l.color,l.color,l.bgColor,l.bgColor,l.color,l.color,l.color],Q:[l.color,l.color,l.color,l.bgColor,l.bgColor,l.color,l.color],R:[l.color,l.color,l.bgColor,l.bgColor,l.color,l.color,l.bgColor],S:[l.color,l.bgColor,l.color,l.color,l.bgColor,l.color,l.color],T:[l.bgColor,l.bgColor,l.bgColor,l.color,l.color,l.color,l.color],U:[l.bgColor,l.color,l.color,l.color,l.color,l.color,l.bgColor],V:[l.bgColor,l.color,l.color,l.color,l.bgColor,l.color,l.bgColor],W:[l.bgColor,l.color,l.bgColor,l.color,l.bgColor,l.color,l.bgColor],X:[l.bgColor,l.color,l.color,l.bgColor,l.color,l.color,l.color],Y:[l.bgColor,l.color,l.color,l.color,l.bgColor,l.color,l.color],Z:[l.color,l.color,l.bgColor,l.color,l.bgColor,l.bgColor,l.color]},d=["M49 0H15L8 7L15 14H49L56 7L49 0Z","M64 51L64 15L57 8L50 15L50 44L57 51L64 51Z","M64 53L64 89L57 96L50 89L50 60L57 53L64 53Z","M49 90H15L8 97L15 104H49L56 97L49 90Z","M1.87959e-06 53L3.0598e-07 89L7 96L14 89L14 60L7 53L1.87959e-06 53Z","M1.87959e-06 51L3.0598e-07 15L7 8L14 15L14 44L7 51L1.87959e-06 51Z","M49 45H15L8 52L15 59H49L56 52L49 45Z"];return(L,e)=>(o.openBlock(),o.createElementBlock("div",{style:o.normalizeStyle({display:"flex",alignItems:"center",justifyContent:"center",gap:`${l.spacing}px`})},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(a.value,(c,C)=>(o.openBlock(),o.createElementBlock("svg",{key:`segment-${C}`,height:l.height,viewBox:"0 0 64 104",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[(o.openBlock(),o.createElementBlock(o.Fragment,null,o.renderList(d,(b,r)=>o.createElementVNode("path",{key:`segment-digit-${r}`,d:b,fill:c[r]},null,8,u)),64))],8,t))),128))],4))}})});