vue-amazing-ui/lib/flex/Flex.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),u=a.defineComponent({__name:"Flex",props:{width:{default:"auto"},vertical:{type:Boolean,default:!1},wrap:{default:"nowrap"},justify:{default:"normal"},align:{default:"normal"},gap:{default:"middle"}},setup(t){const e=t,r=a.computed(()=>typeof e.width=="number"?`${e.width}px`:e.width),i=a.computed(()=>{if(e.gap===void 0)return 0;if(typeof e.gap=="number")return`${e.gap}px`;if(Array.isArray(e.gap))return`${e.gap[1]}px ${e.gap[0]}px`;if(["small","middle","large"].includes(e.gap))return{small:"8px",middle:"16px",large:"24px"}[e.gap]});return(l,n)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["flex-wrap",{"flex-vertical":t.vertical}]),style:a.normalizeStyle(`
      width: ${r.value};
      gap: ${i.value};
      margin-bottom: -${Array.isArray(e.gap)&&t.wrap?e.gap[1]:0}px;
      --wrap: ${t.wrap};
      --justify: ${t.justify};
      --align: ${t.align};
    `)},[a.renderSlot(l.$slots,"default",{},void 0,!0)],6))}});exports.default=u;