balm-ui/directives/shape/index.js

A modular and customizable UI library based on Material Design and Vue 3

!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define("vShape",[],t):"object"===typeof exports?exports.vShape=t():e.vShape=t()}("undefined"!==typeof self?self:this,(function(){return function(){"use strict";var e={};const t="mdc-shape--rounded",l="mdc-shape--cut",a={small:"mdc-shape--small",medium:"mdc-shape--medium",large:"mdc-shape--large"},s=(e,t)=>{let{value:l,modifiers:a}=t;if(a.cut){let t=l.split(" ").map((e=>e)),a=`0% ${t[0]}, ${t[0]} 0%`,s=`calc(100% - ${t[1]}) 0, 100% ${t[1]}`,d=`100% calc(100% - ${t[2]}), calc(100% - ${t[2]}) 100%`,o=`${t[3]} 100%, 0px calc(100% - ${t[3]})`;e.style.clipPath=`polygon(${a}, ${s}, ${d}, ${o})`}else e.style.borderRadius=l},d=(e,d,o)=>{let{value:u,modifiers:p}=o;if("update"===e)u&&s(d,{value:u,modifiers:p});else if(u)s(d,{value:u,modifiers:p});else{let s=p.cut?[l]:[t];p.small?s.push(a.small):p.large?s.push(a.large):s.push(a.medium),d.classList[e](...s)}},o={name:"shape",beforeMount(e,t){d("add",e,t)},updated(e,t){d("update",e,t)},beforeUnmount(e,t){d("remove",e,t)}};return e.default=o,e=e.default}()}));