UNPKG

@nine-slice-frame/vue

Version:

Nine-slice scaling component for Vue 3 using CSS border-image

3 lines (2 loc) 1.08 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),s=t.defineComponent({__name:"NineSliceFrame",props:{imagePath:{},slice:{default:8},borderWidth:{default:5},repeat:{default:"stretch"},fill:{type:Boolean,default:!0},pixelated:{type:Boolean,default:!0},class:{default:""},style:{type:[Boolean,null,String,Object,Array],default:()=>({})}},setup(r){const e=r,a=t.computed(()=>typeof e.slice=="number"?e.slice.toString():`${e.slice.top} ${e.slice.right} ${e.slice.bottom} ${e.slice.left}`),o=t.computed(()=>`url("${e.imagePath}") ${a.value} ${e.fill?"fill":""} / ${e.borderWidth}px / 0px ${e.repeat}`),i=t.computed(()=>{const l={borderWidth:"1px",borderStyle:"solid",borderImage:o.value,imageRendering:e.pixelated?"pixelated":"auto"};return typeof e.style=="object"&&!Array.isArray(e.style)?{...l,...e.style}:l});return(l,n)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(e.class),style:t.normalizeStyle(i.value)},[t.renderSlot(l.$slots,"default")],6))}});exports.NineSliceFrame=s; //# sourceMappingURL=index.js.map