vue-svg-map
Version:
A set of Vue 3 components to display an interactive SVG map
2 lines (1 loc) • 3.44 kB
JavaScript
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.VueSvgMap={},l.Vue))})(this,function(l,e){"use strict";const w=["viewBox","aria-label"],b=["id","d","aria-label"],u=e.defineComponent({__name:"SvgMap",props:{map:{},locationAttributes:{type:[Object,Function],default:()=>({})}},setup(g){return(t,m)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:t.map.viewBox,"aria-label":t.map.label,class:"svg-map"},[e.renderSlot(t.$slots,"before"),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.map.locations,(i,p)=>(e.openBlock(),e.createElementBlock("path",e.mergeProps({key:i.id,id:i.id,d:i.path,"aria-label":i.name,class:"svg-map__location"},{ref_for:!0},{...t.$attrs,...typeof t.locationAttributes=="function"?t.locationAttributes(i,p):t.locationAttributes}),null,16,b))),128)),e.renderSlot(t.$slots,"after")],8,w))}}),M=e.defineComponent({__name:"SvgMapCheckbox",props:e.mergeModels({map:{}},{modelValue:{default:()=>[]},modelModifiers:{}}),emits:["update:modelValue"],setup(g){const t=e.useModel(g,"modelValue");function m(r){return t.value.some(s=>s===r.id)}function i(r){return{role:"checkbox",tabindex:"0","aria-checked":m(r)}}function p(r){const s=r.target;if(s){const c=s.id,d=t.value.indexOf(c);d>-1?t.value=[...t.value.slice(0,d),...t.value.slice(d+1)]:t.value=[...t.value,c]}}return(r,s)=>(e.openBlock(),e.createBlock(u,e.mergeProps(r.$attrs,{map:r.map,role:"group",locationAttributes:i,onClick:e.withModifiers(p,["stop"]),onKeydown:e.withKeys(e.withModifiers(p,["prevent","stop"]),["space"])}),e.createSlots({_:2},[e.renderList(r.$slots,(c,d)=>({name:d,fn:e.withCtx(h=>[e.renderSlot(r.$slots,d,e.normalizeProps(e.guardReactiveProps(h)))])}))]),1040,["map","onKeydown"]))}}),S=e.defineComponent({__name:"SvgMapRadio",props:e.mergeModels({map:{}},{modelValue:{default:()=>null},modelModifiers:{}}),emits:["update:modelValue"],setup(g){const t=e.useModel(g,"modelValue"),m=e.useTemplateRef("svg");let i;e.onMounted(()=>{m.value&&(i=m.value.$el.querySelectorAll("path"))});function p(o){return t.value===o.id}function r(o,n){return t.value?p(o)?"0":"-1":n===0?"0":"-1"}function s(o){o.id!==t.value&&(t.value=o.id,o.focus())}function c(o){const n=o.target;if(n){const a=n.nextElementSibling,f=a?.nodeName==="path"?a:i[0];s(f)}}function d(o){const n=o.target;if(n){const a=n.previousElementSibling,f=a?.nodeName==="path"?a:i[i.length-1];s(f)}}function h(o,n){return{role:"radio",tabindex:r(o,n),"aria-checked":p(o)}}return(o,n)=>(e.openBlock(),e.createBlock(u,e.mergeProps({ref:"svg"},o.$attrs,{map:o.map,role:"radiogroup",locationAttributes:h,onClick:n[0]||(n[0]=e.withModifiers(a=>s(a.target),["stop"])),onKeydown:[n[1]||(n[1]=e.withKeys(e.withModifiers(a=>s(a.target),["prevent","stop"]),["space"])),e.withKeys(e.withModifiers(c,["prevent","stop"]),["down"]),e.withKeys(e.withModifiers(c,["prevent","stop"]),["right"]),e.withKeys(e.withModifiers(d,["prevent","stop"]),["up"]),e.withKeys(e.withModifiers(d,["prevent","stop"]),["left"])]}),e.createSlots({_:2},[e.renderList(o.$slots,(a,f)=>({name:f,fn:e.withCtx(k=>[e.renderSlot(o.$slots,f,e.normalizeProps(e.guardReactiveProps(k)))])}))]),1040,["map","onKeydown"]))}});l.SvgMap=u,l.SvgMapCheckbox=M,l.SvgMapRadio=S,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});