cnhis-design-vue 3.1.41-beta.4 → 3.1.41-beta.40

package/es/components/info-header/src/components/infoDescription/index.vue.js

@@ -0,0 +1 @@
+import{defineComponent as e,inject as i,computed as o,ref as l,nextTick as t,onMounted as n,watch as r,onBeforeUnmount as a,onDeactivated as s,onActivated as u,openBlock as f,createElementBlock as m,normalizeStyle as d,createVNode as c,unref as p,withCtx as v,createCommentVNode as h,renderSlot as _,createElementVNode as y,createBlock as w,mergeProps as F}from"vue";import{useThrottleFn as L,useEventListener as x}from"@vueuse/core";import{isArray as b}from"lodash-es";import{NScrollbar as C,NConfigProvider as W}from"naive-ui";import j from"./DescriptionList.vue.js";import{InjectionInfoHeaderEmit as k,InjectionInfoHeaderFormRef as g}from"../../constants/index.js";import{useThemeOverrides as R}from"../../hooks/useThemeOverrides.js";import $ from"../../../../form-render/index.js";import A from"../../../../../_virtual/plugin-vue_export-helper.js";var I=A(e({__name:"index",props:{infoList:{default:()=>[]},labelField:{default:"label"},valueField:{default:"value"},minColumnWidth:{default:180},rootSlot:null,formProps:{default:()=>({})}},setup(e,{expose:A}){const I=e,{themeOverrides:M}=R(),O=i(k),P=o((()=>b(I.infoList)&&I.infoList.some((e=>e.formField)))),S=o((()=>b(I.infoList)?I.infoList.reduce(((e,i)=>(i.formField&&(e[i[I.labelField]]=i[I.valueField]),e)),{}):{}));function q(e){var i;const{fieldKey:o,value:l}=e,t=null==(i=I.infoList)?void 0:i.find((e=>e[I.labelField]===o));t&&(t[I.valueField]=l,O&&O("formChange",e))}const z=i(g),D=l(3),K=l(),T=l(0),B=l([]),E=L((async function(){await t();const e=K.value;if(!e)return;const{clientWidth:i}=e;D.value=Math.floor(i/+I.minColumnWidth),T.value=Math.floor(i/D.value),await t();const o=e.querySelectorAll(".n-descriptions-table-content__label");o&&(B.value=Array.from(o).map((e=>T.value-e.clientWidth-8)))}),200,!0,!1);let G;function H(){clearInterval(G)}function J(){H(),G=setInterval(E,700)}return n(E),r([()=>I.minColumnWidth,()=>I.infoList],E,{flush:"post",deep:!0}),x(window,"resize",E),a(H),s(H),u(J),n(J),A({updateColumn:E}),(i,o)=>(f(),m("section",{class:"c-info-header__info",ref_key:"infoRef",ref:K,style:d({"--column-width":T.value})},[c(p(C),{class:"c-info-header__infoWrapper"},{default:v((()=>[h("   描述信息区插槽     "),_(i.$slots,"info",{},(()=>[y("section",null,[p(P)?(f(),w(p($),F({key:1},e.formProps,{onFormChange:q,"initial-data":p(S),ref_key:"formRenderRef",ref:z}),{default:v((()=>[c(p(W),{"theme-overrides":p(M),style:d({"grid-column":"span min(var(--column), 999) / span min(var(--column), 999)"})},{default:v((()=>[c(j,F(i.$props,{"description-width-list":B.value,"column-num":D.value,"in-form":""}),null,16,["description-width-list","column-num"])])),_:1},8,["theme-overrides","style"])])),_:1},16,["initial-data"])):(f(),w(j,F({key:0},i.$props,{"description-width-list":B.value,"column-num":D.value}),null,16,["description-width-list","column-num"]))])]))])),_:3})],4))}}),[["__file","index.vue"]]);export{I as default};