cnhis-design-vue 3.1.41-release.6 → 3.1.42-beta.0

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

@@ -1 +1 @@
-import{defineComponent as e,ref as t,nextTick as l,onMounted as n,watch as o,onBeforeUnmount as i,onDeactivated as r,onActivated as a,openBlock as u,createElementBlock as s,normalizeStyle as d,createVNode as c,unref as f,withCtx as p,createCommentVNode as m,renderSlot as h,Fragment as v,renderList as y,createBlock as _,createElementVNode as w}from"vue";import{useThrottleFn as b,useEventListener as g}from"@vueuse/core";import{NScrollbar as x,NDescriptions as W,NDescriptionsItem as F}from"naive-ui";import S from"../../../../../shared/components/SlotRender/SlotRender.js";import k from"./InfoEllipsis.vue.js";import C from"./HiddenContent.vue.js";import j from"../../../../../_virtual/plugin-vue_export-helper.js";const H=w("section",{style:{height:"10px"}},null,-1),I=w("section",{style:{height:"12px"}},null,-1);var L=j(e({__name:"index",props:{compact:{type:Boolean,default:!0},infoList:{default:()=>[]},labelField:{default:"label"},valueField:{default:"value"},minColumnWidth:{default:180},rowHeight:{default:32},rootSlot:null},setup(e,{expose:w}){const j=e;function L({bold:e=!0,contentStyle:t={}}={}){return{fontWeight:e?700:500,...t}}function R(e,{bold:t=!0,contentStyle:l={}}={}){const n=B.value[e]+"px";return{width:n,maxWidth:n,fontWeight:t?700:500,...l}}function A(e){return["电话","身份证"].some((t=>{var l,n;return null==(n=null==(l=e[j.labelField])?void 0:l.includes)?void 0:n.call(l,t)}))}const M=t(3),q=t(),z=t(0),B=t([]),E=b((async function(){await l();const e=q.value;if(!e)return;const{clientWidth:t}=e;M.value=Math.floor(t/+j.minColumnWidth),z.value=Math.floor(t/M.value),await l();const n=e.querySelectorAll(".n-descriptions-table-content__label");n&&(B.value=Array.from(n).map((e=>z.value-e.clientWidth-8)))}),200,!0,!1);let $;function D(){clearInterval($)}function G(){D(),$=setInterval(E,700)}return n(E),o([()=>j.minColumnWidth,()=>j.infoList],E,{flush:"post",deep:!0}),g(window,"resize",E),i(D),r(D),a(G),n(G),w({updateColumn:E}),(t,l)=>(u(),s("section",{class:"c-info-header__info",ref_key:"infoRef",ref:q,style:d({"--row-height":e.rowHeight,"--column-width":z.value})},[c(f(x),{class:"c-info-header__infoWrapper",style:d({"--row-num":e.compact?1:2})},{default:p((()=>[m("   描述信息区插槽     "),h(t.$slots,"info",{},(()=>[H,c(f(W),{"label-align":"right",style:{width:"100%"},"label-placement":"left",separator:":",column:M.value},{default:p((()=>[(u(!0),s(v,null,y(e.infoList,((t,l)=>(u(),_(f(F),{key:t[e.labelField],label:t[e.labelField]},{default:p((()=>[t.slot?(u(),_(f(S),{key:0,renderer:t.slot,"root-slots":e.rootSlot,item:t,style:d(L(t)),width:B.value[l]},null,8,["renderer","root-slots","item","style","width"])):A(t)?(u(),_(C,{key:1,content:t[e.valueField],tip:t.tip,"content-style":L(t),width:B.value[l]},null,8,["content","tip","content-style","width"])):(u(),_(k,{key:2,"content-style":R(l,t),content:t[e.valueField],tip:t.tip},null,8,["content-style","content","tip"]))])),_:2},1032,["label"])))),128))])),_:1},8,["column"]),I]))])),_:3},8,["style"])],4))}}),[["__file","index.vue"]]);export{L as default};
+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};