@fish-render/descriptions/index.cjs

Fish Render descriptions component for Vue 3

(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.FishDescriptions={},p.Vue))})(this,function(p,e){"use strict";const V="",g=["xs","sm","md","lg","xl"];function $(r,n){const d={};let f;for(const l of g)r&&r[l]!==void 0&&(f=r[l]),d[l]=f===void 0?1:f;if(typeof n=="number")return g.forEach(l=>{d[l]=n}),d;if(!n||typeof n!="object")return d;let u;for(const l of g)n&&n[l]!==void 0&&(u=n[l]),u!==void 0&&(d[l]=u);return d}const w={key:0,class:"desc-header"},j={class:"desc-title"},k={class:"desc-extra"},C=e.defineComponent({__name:"Descriptions",props:{title:{default:""},column:{default:()=>({xs:1,sm:2,lg:3})},layout:{default:"auto"},gutter:{default:15},labelWidth:{default:void 0}},setup(r){const n=r;e.provide("descriptionsLayout",n.layout),e.provide("descriptionsLabelWidth",n.labelWidth);const d={xs:1,sm:2,lg:3},f=e.computed(()=>$(d,n.column));e.provide("descriptionsColumns",f);const u=e.computed(()=>{const t=e.toValue(f);return typeof t=="number"?`desc-grid-cols-${t}`:[`desc-grid-cols-${t.xs}`,`desc-sm-grid-cols-${t.sm}`,`desc-md-grid-cols-${t.md}`,`desc-lg-grid-cols-${t.lg}`,`desc-xl-grid-cols-${t.xl}`].filter(Boolean).join(" ")}),l=[{name:"xs",media:""},{name:"sm",media:"@media (min-width: 640px)"},{name:"md",media:"@media (min-width: 768px)"},{name:"lg",media:"@media (min-width: 1024px)"},{name:"xl",media:"@media (min-width: 1280px)"}];function b(t){const o={};let s=0,a=0;Array.isArray(t)?(s=t[0]??0,a=t[1]??0):(s=t,a=t);for(const{name:c}of l){const i=typeof s=="object"?s[c]??0:s,m=typeof a=="object"?a[c]??0:a;o[c]=[i,m]}return o}const h=e.computed(()=>b(n.gutter)),y=e.computed(()=>{var o,s;const t={};for(const{name:a}of l){const[c,i]=h.value[a]??[0,0];if(a==="xs")c&&(t["column-gap"]=`${c}px`),i&&(t["row-gap"]=`${i}px`);else if(c||i){let m="";c&&(m+=`${(o=l.find(x=>x.name===a))==null?void 0:o.media}{.desc-grid{column-gap:${c}px;}}`),i&&(m+=`${(s=l.find(x=>x.name===a))==null?void 0:s.media}{.desc-grid{row-gap:${i}px;}}`),m&&(t["--desc-gutter-mq"]=(t["--desc-gutter-mq"]||"")+m)}}return t});return(t,o)=>(e.openBlock(),e.createElementBlock("div",null,[t.title||t.$slots.title||t.$slots.extra?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",j,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])]),e.createElementVNode("div",k,[e.renderSlot(t.$slots,"extra")])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["desc-grid",u.value]),style:e.normalizeStyle(y.value)},[e.renderSlot(t.$slots,"default")],6)]))}}),S=e.defineComponent({__name:"DescriptionsItem",props:{label:{default:""},labelClass:{default:""},contentClass:{default:""},span:{default:1},labelWidth:{default:void 0}},setup(r){const n=r,d=e.inject("descriptionsLayout","auto"),f=e.inject("descriptionsLabelWidth",void 0),u=e.inject("descriptionsColumns",e.computed(()=>({xs:1,sm:1,md:1,lg:1,xl:1}))),l=e.computed(()=>d==="horizontal"?"desc-flex-row":d==="vertical"?"desc-flex-col":"desc-flex-auto"),b={xs:1,md:2,lg:3},h=e.computed(()=>$(b,n.span)),y=e.computed(()=>{const o=e.toValue(h),s=e.toValue(u),a=typeof o=="number"?{xs:o,sm:o,md:o,lg:o,xl:o}:o,c=typeof s=="number"?{xs:s,sm:s,md:s,lg:s,xl:s}:s,i={};for(const m of g)i[m]=Math.min(a[m],c[m]);return[`desc-col-span-${i.xs}`,`desc-sm-col-span-${i.sm}`,`desc-md-col-span-${i.md}`,`desc-lg-col-span-${i.lg}`,`desc-xl-col-span-${i.xl}`].join(" ")}),t=e.computed(()=>{const o=n.labelWidth===void 0?f:n.labelWidth;if(o!==void 0)return{width:typeof o=="number"?`${o}px`:o}});return(o,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([l.value,y.value])},[o.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["desc-label",[o.labelClass,t.value&&(t.value.width||t.value.width)?"":"desc-nowrap"]]),style:e.normalizeStyle(t.value)},e.toDisplayString(o.label)+": ",7)):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["desc-content",o.contentClass])},[e.renderSlot(o.$slots,"default")],2)],2))}}),B={install:r=>{r.component("Descriptions",C),r.component("DescriptionsItem",S)}};p.Descriptions=C,p.DescriptionsItem=S,p.default=B,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});