@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 18.1 kB
JavaScript
(function(u,N){typeof exports=="object"&&typeof module<"u"?N(exports,require("../common/index.umd.js"),require("vue"),require("@vueuse/core"),require("../data-view/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","../common/index.umd.js","vue","@vueuse/core","../data-view/index.umd.js"],N):(u=typeof globalThis<"u"?globalThis:u||self,N(u["data-grid"]={},u.common,u.Vue,u.VueUseCore,u.dataView))})(this,function(u,N,t,We,i){"use strict";const Ue={enable:{type:Boolean,default:!1},index:{type:Number,default:1},mode:{type:String,default:"client"},showGoto:{type:Boolean,default:!1},showIndex:{type:Boolean,default:!0},showLimits:{type:Boolean,default:!1},showPageInfo:{type:Boolean,default:!0},size:{type:Number,default:20},sizeLimits:{type:Array,default:[10,20,30,50,100]},total:{type:Number,default:0},disabled:{type:Boolean,default:!1}},qe={enable:{type:Boolean,default:!1},fields:{type:Array,default:[]},mode:{type:String,default:"client"},multiSort:{type:Boolean,default:!1}},Ke={customGroupRow:{type:Function,default:()=>{}},customGroupRowStyle:{type:Function,default:()=>{}},customSummaryStyle:{type:Function,default:()=>{}},enable:{type:Boolean,default:!1},groupColSpan:{type:Number,default:1},groupFields:{type:Array,default:[]},showGroupedColumn:{type:Boolean,default:!0},showGroupPanel:{type:Boolean,default:!1},showSummary:{type:Boolean,default:!1},summaryPosition:{type:String,default:"separate"}},_e={enable:{type:Boolean,default:!1},filterStyle:{type:String,default:"filter-column"},mode:{type:String,default:"server"},showSummary:{type:Boolean,default:!0}},$e={wrapHeadings:{type:Boolean,default:!1}},Ye={enable:{type:Boolean,default:!1},heading:{type:String,default:"序号"},width:{type:Number,default:36},showEllipsis:{type:Boolean,default:!0}},Je={customRowStyle:{type:Function,default:()=>{}},customRowStatus:{type:Function,default:()=>{}},disable:{type:Function,default:()=>{}},height:{type:Number,default:28},showHovering:{type:Boolean,default:!0},wrapContent:{type:Boolean,default:!1}},Qe={enable:{type:Boolean,default:!1},customSummaryStyle:{type:Function,default:()=>{}},groupFields:{type:Array,default:[]},mode:{type:String,default:"client"},position:{type:String,default:"bottom"}},Xe={fitColumns:{type:Boolean,default:!1},fitMode:{type:String,default:"average"},groups:{type:Array,defaut:[]},reorderColumn:{type:Boolean,default:!1},resizeColumn:{type:Boolean,default:!0},resizeColumnOnDoubleClick:{type:Boolean,default:!0}},Ze={checkOnSelect:{type:Boolean,default:!1},clearSelectionOnEmpty:{type:Boolean,default:!0},customSelectionItem:{type:Function,default:()=>{}},enabelSelectRow:{type:Boolean,default:!0},keepSelectingOnClick:{type:Boolean,default:!0},keepSelectingOnPaging:{type:Boolean,default:!0},multiSelect:{type:Boolean,default:!1},focusSelection:{type:String,default:"current"},selectOnCheck:{type:Boolean,default:!1},showCheckbox:{type:Boolean,default:!1},showSelectAll:{type:Boolean,default:!1},showSelection:{type:Boolean,default:!1}},et={selectOnEditing:{type:Boolean,default:!1},editMode:{type:String,default:"cell"}},tt={show:{type:Boolean,default:!1},message:{type:String,default:"加载中..."}},je={customClass:{type:String,default:""},appendOnEnterAtLastCell:{type:Boolean,default:!1},beforeEditCell:{type:Function,default:n=>!0},beforeEndEditCell:{type:Function,default:()=>!0},changePolicy:{type:String,default:"push"},columns:{type:Array,default:[]},columnOption:{type:Object},commandOption:{type:Object,default:{enable:!1,commands:[],halign:"center"}},data:{type:Array,default:[]},disabled:{type:Boolean,default:!1},disabledField:{type:String,default:"disabled"},editable:{type:Boolean,default:!1},editOption:{type:Object,default:{selectOnEditing:!1,editMode:"cell"}},enableCommands:{type:Boolean,default:!1},enableFilter:{type:Boolean,default:!1},filter:{type:Object},fit:{type:Boolean,default:!1},focusOnEditingCell:{type:Boolean,default:!0},group:{type:Object},header:{type:Object},height:{type:Number,default:-1},id:{type:String,default:""},idField:{type:String,default:"id",require:!0},loading:{type:Boolean,default:!1},mergeCell:{type:Boolean,default:!1},minHeight:{type:Number,default:300},minWidth:{type:Number,default:400},newDataItem:{type:Function,default:()=>{}},pagination:{type:Object,default:{enable:!1,size:20}},rowNumber:{type:Object,default:{enable:!0,width:32,showEllipsis:!0,heading:"序号"}},rowOption:{type:Object,default:{wrapContent:!1}},selection:{type:Object,default:{enableSelectRow:!0,multiSelect:!1,multiSelectMode:"DependOnCheck",showCheckbox:!1,showSelectAll:!1,showSelection:!1,keepSelectingOnClick:!0}},selectionValues:{type:Array,default:[]},selectOnEditingCell:{type:Boolean,default:!1},showBorder:{type:Boolean,default:!1},showFooter:{type:Boolean,default:!1},showHeader:{type:Boolean,default:!0},showHorizontalLines:{type:Boolean,default:!0},showScrollBar:{type:String,default:"auto"},showSetting:{type:Boolean,default:!1},showStripe:{type:Boolean,default:!0},showVerticallLines:{type:Boolean,default:!1},sort:{type:Object},summary:{type:Object,default:{enable:!1,groupFields:["numericField1","numericField2"]}},virtualized:{type:Boolean,default:!0},width:{type:Number,default:-1},emptyTemplate:{type:Object}};function nt(n,g,j,ie,G,v,C,se,d,D,re,U,f,q,E,K){const{isNull:k,isUndefined:_}=N.useCommonUtils(),{totalItems:he,rawView:Se}=K,{calculateCellPositionInRow:s,cellKey:B,cellPosition:V,rowKey:p,rowPosition:$,rowSpanCellPosition:T,groupCellPosition:ue,summaryCellPosition:ve}=C,{cellContentClass:be,cellContentPosition:M,cellContentClassWithEllipsis:R}=v,{collpaseGroupIconClass:Be}=D,{gridCellClass:de,gridRowClass:H,onClickRow:ce,onMouseoverRow:h,onMouseoutRow:A}=U,{onClickCell:fe}=d,{toggleGroupRow:x}=f,{columnContext:O,hasLeftFixedColumn:Y,hasRightFixedColumn:w}=se,{navigateOnKeyUp:S,navigateOnKeyDown:Oe}=re,F=e=>(e||[]).some(a=>t.isVNode(a)?!(a.type===t.Comment||a.type===t.Fragment&&!F(a.children)):!0)?e:null,J=e=>{var a,r,o;return((r=(a=e.column)==null?void 0:a.editor)==null?void 0:r.type)==="switch"||((o=e.column)==null?void 0:o.dataType)==="boolean"?{display:"flex",flexGrow:"1",overflow:"hidden"}:{flexGrow:"1"}},Q=t.reactive({"fv-grid-content-left-fixed":!0}),X=t.reactive({"fv-grid-content-right-fixed":!0});t.watch([he,Se],e=>{!e[0]&&!e[1].length?(Q["fv-grid-content-left-fixed"]=!1,X["fv-grid-content-right-fixed"]=!1):(Q["fv-grid-content-left-fixed"]=!0,X["fv-grid-content-right-fixed"]=!0)});const{gridDataStyle:Z,gridMergedDataStyle:me,leftFixedGridDataStyle:we,leftFixedGridMergedDataStyle:Fe,rightFixedGridDataStyle:ee,rightFixedGridMergedDataStyle:Ie}=q;function Ne(e,a){a.collapse=!a.collapse,E.value=x(a.collapse?"collapse":"expand",a,E.value)}function m(e,a){const r=[];if(e.groupField&&a[e.groupField]){for(let y=0;y<=e.layer;y++)r.push(t.createVNode("div",{class:"fv-grid-group-row-icon",onClick:W=>Ne(W,e)},[t.createVNode("span",{class:Be(e)},null)]));const o=e.data[e.groupField];r.push(t.createVNode("div",{ref:o.setRef,key:B(e,e.layer+1),class:"fv-grid-cell",style:ue(o,a,e.layer)},[o.data])),Object.values(e.data).filter(y=>y.field!==e.groupField&&y.colSpan!==0).forEach(y=>{r.push(t.createVNode("div",{ref:y.setRef,key:B(e,y.index),class:"fv-grid-cell",style:V(y,a)},[y.data]))})}return r}function Ge(e,a,r){return e.layer>-1&&t.createVNode("div",{ref:e.setRef,key:p(e),class:H(e,r),style:$(e),onClick:o=>ce(o,e),onMouseover:o=>h(o,e)},[m(e,a)])}function ye(e,a){const r=[];if(e.groupField&&a[e.groupField]){const o=e.data[e.groupField];r.push(t.createVNode("div",{ref:o.setRef,key:B(e,e.layer+1),class:"fv-grid-cell",style:ve(o,a,e.layer)},[o.data]))}return r}function pe(e,a,r){return e.layer>-1&&t.createVNode("div",{ref:e.setRef,key:p(e),class:H(e,r),style:$(e),onClick:o=>ce(o,e),onMouseover:o=>h(o,e)},[ye(e,a)])}function z(e,a){var r,o,y;return e.showTips&&typeof((r=e.column)==null?void 0:r.formatter)!="function"&&((o=e.column)==null?void 0:o.dataType)!=="commands"&&((y=e.column)==null?void 0:y.dataType)!=="setting"?t.createVNode("div",{class:R(e),title:e.formatter(e,a)},[e.formatter(e,a)]):t.createVNode("div",{class:R(e)},[e.formatter(e,a)])}function I(e){const a=!k(e.data)&&!_(e.data)?e.data.toString():e.data;return e.showTips?t.createVNode("div",{class:R(e),title:a},[a]):t.createVNode("div",{class:R(e)},[a])}function De(e,a){return!k(e.data)&&!_(e.data)?e.data.toString():e.data,e.mode===i.CellMode.editing?t.createVNode("div",{style:J(e)},[e.getEditor(e)]):e.column.columnTemplate?e.column.columnTemplate(e,a):e.formatter?z(e,a):I(e)}function te(e,a,r){return t.createVNode("div",{ref:e.setRef,key:p(e),class:H(e,r),style:$(e),onClick:o=>ce(o,e),onMouseover:o=>h(o,e),onMouseout:o=>A(o,e)},[Object.values(e.data).filter(o=>a[o.field]&&o.rowSpan===1).map(o=>{var W,Ce;const y=g.slots.cellTemplate&&F(g.slots.cellTemplate({cell:o,row:e}));return t.createVNode("div",{ref:o.setRef,key:B(e,o.index),class:de(o),style:V(o,a),onClick:le=>fe(le,o,e,o.column),onKeydown:le=>S(le,o)},[t.createVNode("div",{class:be(o),style:M(o)},[y?(Ce=(W=g.slots).cellTemplate)==null?void 0:Ce.call(W,{cell:o,row:e}):De(o,e)])])})])}const ne=[te,Ge,pe];function L(e,a){const r=s(e);return E.value.map((o,y)=>ne[o.type](o,r,y))}function oe(e){const a=s(e);return E.value.map(r=>Object.values(r.data).filter(o=>a[o.field]&&o.rowSpan>1).map(o=>t.createVNode("div",{key:B(r,o.index),class:"fv-grid-cell fv-grid-merged-cell",style:T(r,o,a)},[o.data])))}function ge(){return t.createVNode("div",{ref:ie,class:Q},[t.createVNode("div",{class:"fv-grid-data",style:we.value},[L(O.value.leftColumns.filter(e=>e.visible))]),t.createVNode("div",{class:"fv-grid-merge-date",style:Fe.value},[oe(O.value.leftColumns.filter(e=>e.visible))])])}function ke(){return t.createVNode("div",{ref:j,class:"fv-grid-content-primary"},[t.createVNode("div",{class:"fv-grid-data",style:Z.value},[L(O.value.primaryColumns.filter(e=>e.visible))]),t.createVNode("div",{class:"fv-grid-merge-date",style:me.value},[oe(O.value.primaryColumns.filter(e=>e.visible))])])}function Ve(){return t.createVNode("div",{ref:G,class:X},[t.createVNode("div",{class:"fv-grid-data",style:ee.value},[L(O.value.rightColumns.filter(e=>e.visible))]),t.createVNode("div",{class:"fv-grid-merge-date",style:Ie.value},[oe(O.value.rightColumns.filter(e=>e.visible))])])}function xe(){const e=[];return Y.value&&e.push(ge()),e.push(ke()),w.value&&e.push(Ve()),e}return{renderDataArea:xe}}const Ee=t.defineComponent({name:"FDataGrid",props:je,emits:["changed","clickRow","doubleClickRow","selectionChange","unSelectItem","selectItem","enterUpInLastCell","selecAll","unSelectAll","pageIndexChanged","pageSizeChanged","beginEditCell","endEditCell","filterChanged","sortChanged"],setup(n,g){var Ae,ze;t.ref();const j=0,ie=((Ae=n.rowOption)==null?void 0:Ae.height)||28,G=t.ref(20),v=t.ref(n.columns),C=i.useIdentify(n),se=t.ref(),d=t.ref(),D=t.ref(),re=t.ref(),U=t.ref(),f=t.ref([]),q=t.ref(!1),E=t.ref(((ze=n.rowOption)==null?void 0:ze.wrapContent)||!1),K=i.useGroupData(n,C),k=i.useFilter(n,g),_=i.useHierarchy(n),{showLoading:he,renderLoading:Se}=i.useLoading(n,se),s=i.useDataView(n,new Map,k,_,C),B=i.usePagination(n,s),{shouldRenderPagination:V}=B,p=i.useSelection(n,s,C,f,g),{showSelectAll:$,showSelection:T,selectedValues:ue,updateSelectAllStatus:ve}=p,be=t.computed(()=>n.disabled),M=t.computed(()=>n.virtualized?Math.min(s.dataView.value.length,G.value):s.dataView.value.length);t.computed(()=>n.loadingConfig.message);const{containerStyleObject:R}=i.useDataViewContainerStyle(n),Be=i.useCommandColumn(n),{applyCommands:de}=Be;de(v);const{applyColumnSetting:H,removeColumnSetting:ce}=i.useSettingColumn(n);n.showSetting&&H(v);const h=i.useColumn(n,g),A=i.useSort(n),{applyColumnSorter:fe,columnContext:x,updateColumnRenderContext:O}=h;fe(s,A);const Y=i.useGroupColumn(n,x),w=i.useRow(n,g,p,C),S=i.useEdit(n,g,C,w,f),Oe=i.useVisualDataBound(n),F=i.useVisualDataCell(n,S,Oe),J=i.useVisualDataRow(n,s,S,_,C,Oe,F),Q=i.useVisualGroupRow(n,C,F,J),X=i.useVisualSummaryRow(n,C,F,J),Z=i.useVisualData(n,v,s,M,j,J,Q,X),{getVisualData:me}=Z,we=i.useCellContentStyle(x),Fe=i.useCellPosition(n,x),ee=i.useSidebar(n,p),{sidebarWidth:Ie,showSidebarCheckBox:Ne}=ee,m=i.useVirtualScroll(n,s,f,x,Z,M,j,Ie,S),{onWheel:Ge,dataGridWidth:ye,viewPortHeight:pe,viewPortWidth:z,resetScroll:I,updateVisibleRowsOnLatestVisibleScope:De}=m,te=i.useFitColumn(n,x,d,z,Y),{calculateColumnsSize:ne}=te,L=i.useFilterHistory(),oe=i.useColumnFilter(d,U,s,L,m),ge=i.useDragColumn(n,g,h,s,Y,K,m),ke=t.computed(()=>{const l={"fv-grid":!0,"fv-grid-bordered":n.showBorder,"fv-grid-horizontal-bordered":n.showHorizontalLines,"fv-datagrid-strip":n.showStripe};return N.getCustomClass(l,n.customClass)}),Ve=t.computed(()=>({"fv-grid-content":!0,"fv-grid-content-hover":q.value,"fv-grid-wrap-content":E.value})),xe=t.computed(()=>{const l={};return m.shouldShowHorizontalScrollbar.value&&(l.paddingBottom="10px"),m.shouldShowVirticalScrollbar.value&&(l.paddingRight="10px"),l}),{renderGridHeader:e,renderGridColumnResizeOverlay:a,shouldShowHeader:r}=i.getColumnHeader(n,g,d,re,U,h,s,ge,oe,k,L,te,Y,p,ee,A,m,z,f),{renderDataGridPagination:o}=i.getPagination(n,g,s,m,B,p),{renderDataGridSidebar:y}=i.getSidebar(n,w,p,ee,m),{renderDisableMask:W}=i.getDisableMask(),{renderDataGridSummary:Ce}=i.getSummary(n,s,h),{renderHorizontalScrollbar:le}=i.getHorizontalScrollbar(n,d,m),{renderVerticalScrollbar:lt}=i.getVerticalScrollbar(n,d,m),{renderFilterPanel:at}=i.getFilterPanel(n,h,s,k,m),{renderGroupPanel:it}=i.getGroupPanel(n,s,ge,K,m);function st(){var c,b;const l=Math.ceil(d.value.clientHeight/ie);l>G.value&&(G.value=l,De()),pe.value=((c=D.value)==null?void 0:c.clientHeight)||0,ye.value=((b=d.value)==null?void 0:b.clientWidth)||0,ne()}t.onMounted(()=>{d.value&&(G.value=Math.max(Math.ceil(d.value.clientHeight/ie),G.value),f.value=me(0,M.value+j-1),We.useResizeObserver(d.value,st),ne(),t.nextTick(()=>{d.value&&(ye.value=d.value.clientWidth),D.value&&(z.value=D.value.clientWidth,pe.value=D.value.clientHeight)})),he.value&&Se()}),t.onUnmounted(()=>{}),t.watch(z,()=>{});function rt(){s.insertNewDataItem(),I()}function ut(){s.insertNewDataItem(f.value.length),I()}function dt(l){S.onEditingRow(l)}function ct(l){s.removeDataItem(l),I()}function ft(l){s.removeDataItemById(l),I()}function mt(l){S.acceptEditingRow(l)}function yt(l){S.cancelEditingRow(l)}function pt(l){f.value.forEach((c,b)=>{const ae=s.visibleDataItems.value.findIndex(P=>P===c.raw),Le=f.value[b-1];l.forEach(P=>{c.data[P.field]?F.updateCellByColumn(c.data[P.field],P,Le,c.raw):c.data[P.field]=F.createCellByColumn(P,ae,c.raw,c,Le)})})}function Pe(l){l&&(v.value=l,pt(v.value),de(v),n.showSetting&&H(v),O(v.value),fe(s,A),ne())}t.watch(()=>n.showSetting,(l,c)=>{l!==c&&Pe(v.value)});function Te(l,c){l&&(s.load(l),f.value=me(0,M.value+j-1),c!=null&&c.keepScrollTop?m.scrollTo(m.offsetY.value):I(),f.value.length||(ue.value=[]),Ne.value&&$.value&&ve()),S.clear()}function Me(l){B.updatePagination(l)}t.watch(s.shouldGroupingData,(l,c)=>{l!==c&&(s.updateDataView(),I())}),t.watch(()=>n.data,l=>{n.changePolicy==="default"&&Te(l)},{deep:!0}),t.watch(()=>n.columns,l=>{Pe(l)});function gt(l){p.selectItemById(l)}function Ct(l){const c=C.idField.value,b=f.value.find(ae=>ae.raw[c]===l);b&&w.clickRowItem(b)}function ht(l){w.activeRowById(l)}function St(l){const c=C.idField.value,b=f.value.find(ae=>ae.raw[c]===l);b&&w.selectRow(b)}function vt(l){p.selectItemByIds(l)}function bt(){return f.value}function Bt(l){return f.value.filter(c=>l.includes(c.raw[n.idField]))}function Ot(){return p.getSelectedItems()}function wt(){return p.getSelectionRow()}function Ft(){S.endEditCell()}function It(l){p.unSelectItemByIds(l)}function Re(){p.clearSelection()}function Nt(){return p.currentSelectedDataId.value}function Gt(){m.scrollToBottom()}function Dt(l){m.scrollToRowByIndex(l)}function kt(){p.keepSelectingOnPaging.value||Re(),s.updateVisibleDataSummary(f.value),Me({total:s.dataView.value.length,index:1})}const He={activeRowById:ht,selectRowById:St,addNewDataItem:rt,addNewDataItemAtLast:ut,removeDataItem:ct,removeDataItemById:ft,editDataItem:dt,acceptDataItem:mt,cancelDataItem:yt,selectItemById:gt,selectItemByIds:vt,updateColumns:Pe,updateDataSource:Te,updatePagination:Me,getVisibleData:bt,getVisibleDataByIds:Bt,getSelectedItems:Ot,getSelectionRow:wt,getCurrentRowId:Nt,endEditCell:Ft,clickRowItemById:Ct,clearSelection:Re,unSelectItemByIds:It,scrollToBottom:Gt,scrollToRowByIndex:Dt,updateDerivedData:kt};g.expose(He);const Vt=i.useNavigation(n,g,He,h,S,f),{renderDataArea:xt}=nt(n,g,D,re,U,we,Fe,h,S,K,Vt,w,Z,m,f,s),Pt=t.computed(()=>!f.value||!f.value.length),{renderEmpty:jt}=i.getEmpty(n,g),Et=t.computed(()=>({"d-flex":!0,"justify-content-between":V.value&&T.value,"justify-content-end":V.value&&!T.value,"position-relative":!0,"fv-datagrid-pagination":!0})),Tt=t.computed(()=>({"flex-direction":"row"})),Mt=t.computed(()=>({"d-flex":!0,"align-items-center":!0}));return t.provide("dataGridContext",{useColumnComposition:h,dataView:s,useFilterComposition:k,useFitColumnComposition:te,useSortComposition:A,useVirtualScrollComposition:m}),()=>t.createVNode("div",{ref:se,class:ke.value,style:R.value,onWheel:Ge},[d.value&&n.enableFilter&&at(),d.value&&it(),d.value&&r.value&&e(),t.createVNode("div",{ref:d,class:Ve.value,style:xe.value,onMouseover:()=>q.value=!0,onMouseleave:()=>q.value=!1},[d.value&&y(f),d.value&&xt(),d.value&&Pt.value&&jt(),d.value&&le(),d.value&<()]),d.value&&Ce(),(V.value||T.value)&&t.createVNode("div",{class:Et.value,style:Tt.value},[T.value&&t.createVNode("div",{class:Mt.value},[t.createVNode("div",null,["已选："+ue.value.length,t.createTextVNode(" 条")])]),V.value&&o()]),a(),be.value&&W()])}}),ot=N.withInstall(Ee);u.FDataGrid=Ee,u.columnOptions=Xe,u.dataGridProps=je,u.default=ot,u.editOptions=et,u.filterOptions=_e,u.groupOptions=Ke,u.headerOptions=$e,u.loadingOptions=tt,u.paginationOptions=Ue,u.rowNumberOptions=Ye,u.rowOptions=Je,u.selectionOptions=Ze,u.sortOptions=qe,u.summaryOptions=Qe,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});