@farris/ui-vue/designer/data-view/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(m,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],u):(m=typeof globalThis<"u"?globalThis:m||self,u(m["data-view"]={},m.Vue))})(this,function(m,u){"use strict";function $(i,a,s,r,c){const{getGridHeaderCells:p}=c,C=120,D=50,_=u.computed(()=>{var e;return((e=i.rowNumber)==null?void 0:e.enable)||!1}),V=u.computed(()=>{var e,t;return((e=i.selection)==null?void 0:e.multiSelect)||((t=i.selection)==null?void 0:t.showCheckbox)||!1}),M=u.computed(()=>{var e;return 0+(_.value?((e=i.rowNumber)==null?void 0:e.width)||32:0)+(V.value?D:0)}),E=u.computed(()=>{var e;return(e=i.columnOption)==null?void 0:e.fitColumns}),N=u.computed(()=>{var e;return E.value&&((e=i.columnOption)==null?void 0:e.fitMode)||"none"});function I(e,t,o){const h=parseInt(e.width,10)/100;return o*h}function b(e,t,o){return typeof e.width=="string"?I(e,t,o):e.width||C}function A(e,t){const o=[],h=[];let f=0;e.value.primaryColumns.forEach(g=>{typeof g.width=="string"?h.push(g):(g.width=g.width||C,f+=g.width,o.push(g))});const w=t*(o.length/e.value.primaryColumns.length);o.forEach(g=>{const d=w*(g.width/f);g.actualWidth=d,e.value.primaryColumnsWidth+=g.actualWidth});const S=t-w;h.forEach(g=>{const d=I(g,e.value,S);g.actualWidth=d,e.value.primaryColumnsWidth+=g.actualWidth})}function W(e,t){const o=[],h=[],f=new WeakMap;let w=0,S=0;if(e.value.primaryColumns.forEach(d=>{if(typeof d.width=="string"){const y=I(d,e.value,t);f.set(d,y),w+=y,h.push(d)}else d.width=d.width||C,S+=d.width,o.push(d)}),t-w>S){const d=t-w;h.forEach(y=>{y.actualWidth=f.get(y)||C,e.value.primaryColumnsWidth+=y.actualWidth}),o.forEach(y=>{y.actualWidth=d*(y.width/S),e.value.primaryColumnsWidth+=y.actualWidth})}else A(e,t)}function v(e,t){e.value.primaryColumns.forEach(o=>{o.actualWidth=b(o,e.value,t),e.value.primaryColumnsWidth+=o.actualWidth})}const O={expand:W,none:v,percentage:A};function R(e){e.value.leftHeaderColumns=Array.from(p(e.value.leftColumns).values()),e.value.primaryHeaderColumns=Array.from(p(e.value.primaryColumns).values()),e.value.rightHeaderColumns=Array.from(p(e.value.rightColumns).values())}function P(e){e.value.leftColumnsWidth=0,e.value.primaryColumnsWidth=0,e.value.rightColumnsWidth=0,e.value.leftColumns.forEach(t=>{e.value.leftColumnsWidth+=t.actualWidth||0}),e.value.primaryColumns.forEach(t=>{e.value.primaryColumnsWidth+=t.actualWidth||0}),e.value.rightColumns.forEach(t=>{e.value.rightColumnsWidth+=t.actualWidth||0}),e.value=Object.assign({},e.value)}function n(e,t,o){var y;let h=0;const f=e.value.primaryColumns,w=e.value.rightColumns;e.value.rightColumns.forEach(k=>{k.actualWidth=b(k,e.value,t),h+=k.actualWidth});const S=o-h,g=O[N.value];if(g&&g(e,S),e.value.primaryColumnsWidth+h<=o)return e.value.primaryColumns=[...f,...w],e.value.primaryColumnsWidth+=h,e.value.rightColumns=[],e.value.rightColumnsWidth=0,!0;const d=new Map;return d.set("primary",[]),d.set("right",[]),e.value.primaryColumns.reduce((k,F)=>{var T,H;return F.fixed==="right"?(T=k.get("right"))==null||T.push(F):(H=k.get("primary"))==null||H.push(F),k},d),(y=d.get("right"))!=null&&y.length&&(e.value.primaryColumns=[...d.get("primary")||[]],e.value.rightColumns=[...d.get("right")||[]]),e.value.primaryColumnsWidth=0,e.value.rightColumnsWidth=0,!1}function l(){if(s.value){a.value.leftColumnsWidth=0,a.value.primaryColumnsWidth=0,a.value.rightColumnsWidth=0;const e=s.value.clientWidth-M.value;a.value.leftColumns.forEach(o=>{o.actualWidth=b(o,a.value,e),a.value.leftColumnsWidth+=o.actualWidth});const t=e-a.value.leftColumnsWidth;if(n(a,e,t))r.value=t;else{a.value.rightColumns.forEach(f=>{f.actualWidth=b(f,a.value,e),a.value.rightColumnsWidth+=f.actualWidth});const o=e-a.value.leftColumnsWidth-a.value.rightColumnsWidth,h=O[N.value];h&&h(a,o),r.value=o}R(a),a.value=Object.assign({},a.value)}}return u.watch(()=>{var e;return(e=i.columnOption)==null?void 0:e.fitColumns},(e,t)=>{e!==t&&e&&l()}),u.watch(N,(e,t)=>{e!==t&&E.value&&l()}),{calculateColumnHeaders:R,calculateColumnsSize:l,calculateColumnsWidth:P}}const B="";function G(i){const s={defaultColumnWidth:120,headerDepth:1,leftColumns:[],leftColumnsMap:new Map,leftColumnsWidth:0,leftHeaderColumns:[],primaryColumns:[],primaryColumnsMap:new Map,primaryColumnsWidth:0,primaryHeaderColumns:[],rightColumns:[],rightColumnsMap:new Map,rightColumnsWidth:0,rightHeaderColumns:[],summaryColumns:[]},r=u.ref(s);function c(){r.value={defaultColumnWidth:120,headerDepth:1,leftColumns:[],leftColumnsMap:new Map,leftColumnsWidth:0,leftHeaderColumns:[],primaryColumns:[],primaryColumnsMap:new Map,primaryColumnsWidth:0,primaryHeaderColumns:[],rightColumns:[],rightColumnsMap:new Map,rightColumnsWidth:0,rightHeaderColumns:[],summaryColumns:[]}}const p=u.ref(i.summary),C=u.computed(()=>{const n=p.value;return(n==null?void 0:n.groupFields)||[]});function D(){r.value.rightColumns.forEach(e=>{e.showSetting=!1}),r.value.primaryColumns.forEach(e=>{e.showSetting=!1});const n=r.value.rightColumns,l=r.value.primaryColumns;n.length>0?n[n.length-1].showSetting=!0:l.length>0&&(l[l.length-1].showSetting=!0)}function _(n){c();const l=new Map;return C.value&&C.value.reduce((e,t)=>(e.set(t,!0),e),l),n.reduce((e,t)=>(t.filter=t.filter||B,t.fixed==="left"?(r.value.leftColumns.push(t),r.value.leftColumnsMap.set(t.field,t),r.value.leftColumnsWidth+=t.actualWidth):t.fixed==="right"?(r.value.rightColumns.push(t),r.value.rightColumnsMap.set(t.field,t),r.value.rightColumnsWidth+=t.actualWidth):(r.value.primaryColumns.push(t),r.value.primaryColumnsMap.set(t.field,t),r.value.primaryColumnsWidth+=t.actualWidth),l.has(t.field)&&r.value.summaryColumns.push(t),e),r),D(),r}_(i.columns);const V=u.computed(()=>r.value.leftColumns.length>0),M=u.computed(()=>r.value.rightColumns.length>0);function E(n,l){return l.sortable&&l.sort&&l.sort!=="none"&&n.push(l),n}function N(n,l){return n.sortOrder=n.sortOrder||0,l.sortOrder=l.sortOrder||0,n.sortOrder===l.sortOrder?0:n.sortOrder<l.sortOrder?-1:1}function I(n,l){return n.sortOrder=n.sortOrder||0,l.sortOrder=l.sortOrder||0,n.sortOrder===l.sortOrder?0:n.sortOrder<l.sortOrder?1:-1}function b(n,l){return l.filterable&&n.push(l),n}function A(){const n=[];return r.value.leftColumns.reduce(b,n),r.value.primaryColumns.reduce(b,n),r.value.rightColumns.reduce(b,n),n}function W(){const n=[];r.value.leftColumns.reduce(E,n),r.value.primaryColumns.reduce(E,n),r.value.rightColumns.reduce(E,n);const l=Math.max(...n.map(e=>e.sortOrder||0));return n.sort(I).map(e=>{const t=e.sortOrder||l+1;return e.sortOrder=t,e}).sort(N).map((e,t)=>{const o=t+1;return e.sortOrder=o,e})}function v(n,l,e){const t=n.map(o=>{const h=e.getSorterByColumn(o),f=o.sort==="asc",w=o.sort==="desc",S=f?h.ascend:w?h.decend:void 0;return{field:o.field,compare:S}});l.setSorters(t)}function O(n,l){const e=W();v(e,n,l)}function R(n){}function P(n){}return{applyColumnSorter:O,collectionFilterableColumns:A,applySortableColumns:v,collectionSortableColumns:W,columnContext:r,hasLeftFixedColumn:V,hasRightFixedColumn:M,updateColumnRenderContext:_,updateColumnSettingIcon:D,sortFromServer:R,createSortConditions:P}}function z(i,a,s,r,c,p,C,D){const _=u.ref(r.value-1+c),V=u.ref(0),{renderDataRow:M}=p,E=C?C.renderGroupRow:M,N=D?D.renderSummaryRow:M;function I(W){let v=M;return W.__fv_data_grid_group_row__&&(v=E),W.__fv_data_grid_group_summary__&&(v=N),v}function b(W,v,O,R){const{dataView:P}=s,n=[];if(P.value.length>0){const l=R?Date.now().toString():"";let e=W,t=0;const o=v-W+1;for(;n.length<o&&e<P.value.length;){const h=P.value[e],f=P.value[e-1]||O,w=n[t-1],S=f?(f.__fv_data_position__||0)+(f.__fv_data_height__||0):0,d=I(h)(h,f,w,e,S,a.value,n);d.refreshKey=l,n.push(d),t++,e++}}return V.value=n.length>0?n[0].index:0,_.value=n.length>0?n[n.length-1].index:0,n}function A(W,v,O){const R=v.groupField||"",{groupValue:P,raw:n}=v;s[W](R,P,n.groupParents||[]);const{dataView:l}=s,e=O[0].index,t=Math.min(e+r.value+c+1,l.value.length-1);return b(e,t)}return{getVisualData:b,maxVisibleRowIndex:_,minVisibleRowIndex:V,toggleGroupRow:A}}function L(){function i(a){return{title:"行配置",description:"",properties:{customRowStyle:{title:"行样式",type:"string",description:"自定义行样式",$converter:"/converter/row-option.converter",editor:{type:"code-editor",language:"javascript",leftTemplate:()=>u.createVNode(u.Fragment,null,[u.createVNode("h5",null,[u.createTextVNode("示例代码")]),u.createVNode("pre",null,[`
(dataItem) => {
    if(dataItem.code === '0001') {
        return {
          class: {
            'text-align': true,
            'text-red': true
          },
          style: {
            'background-color': '#000',
            'font-size': '1rem'
          }
        };
    }
    return {};
}
    
注: dataItem  行数据
                                `])])}},customCellStyle:{title:"单元格样式",type:"string",description:"自定义单元格样式",$converter:"/converter/row-option.converter",editor:{type:"code-editor",language:"javascript",leftTemplate:()=>u.createVNode(u.Fragment,null,[u.createVNode("h5",null,[u.createTextVNode("示例代码")]),u.createVNode("pre",null,[`
(cell) => {
    if(cell.data === '0002' && 
        cell.column.field === 'name') {
        return {
          class: {
            'text-align': true,
            'text-red': true
          },
          style: {
            'background-color': '#000',
            'font-size': '1rem'
          }
        };
    }
    return {};
}
注: cell.data   单元格数据
    cell.column 列数据
                                `])])}}}}}return{getRowOptionProperties:i}}function U(){function i(a){return{title:"填充列宽",description:"",properties:{fitColumns:{title:"启用",type:"boolean",description:"启用填充列宽",$converter:"/converter/column-option.converter",refreshPanelAfterChanged:!0}},setPropertyRelates(s,r){switch(s&&s.propertyID){case"fitColumns":{r.fit=s.propertyValue,r.columns&&(s.propertyValue?r.columns.forEach(c=>{c.resizable=!1}):r.columns.forEach(c=>{c.resizable=!0}));break}}}}}return{getColumnOptionProperties:i}}function K(){function i(a){return{title:"操作列",description:"",properties:{enable:{title:"启用",type:"boolean",$converter:"/converter/column-command.converter",description:"启用操作列",refreshPanelAfterChanged:!0}}}}return{getCommandColumnProperties:i}}function q(){function i(a){return{title:"合计行",description:"",properties:{enable:{title:"启用",type:"boolean",description:"启用合计行",$converter:"/converter/summary.converter",refreshPanelAfterChanged:!0}}}}return{getSummaryProperties:i}}function Y(){function i(a){var s;return{title:"分组",description:"",properties:{enable:{title:"启用",type:"boolean",description:"启用分组",$converter:"/converter/group.converter",refreshPanelAfterChanged:!0},showSummary:{title:"显示分组合计行",type:"boolean",visible:!!((s=a.group)!=null&&s.enable),$converter:"/converter/group.converter",description:"显示分组合计行"}}}}return{getGroupProperties:i}}function J(){function i(a){var r,c;const s=[{label:"onClickRow",name:"行点击事件"},{label:"onSelectionChange",name:"行切换事件"},{label:"onDoubleClickRow",name:"行双击事件"},{label:"onFilterChanged",name:"过滤事件"},{label:"onSortChanged",name:"排序事件"},{label:"onSelectItem",name:"选中行事件"},{label:"onUnSelectItem",name:"取消选中行事件"},{label:"onSelectAll",name:"全选事件"},{label:"onUnSelectAll",name:"取消全选事件"}];return((r=a.pagination)==null?void 0:r.enable)!==!1&&a.type!=="tree-grid"&&s.push({label:"onPageIndexChanged",name:"切换页码事件"},{label:"onPageSizeChanged",name:"分页条数变化事件"}),(c=a.command)!=null&&c.enable&&s.push({label:"onClickEditCommand",name:"操作列编辑事件"},{label:"onClickDeleteCommand",name:"操作列删除事件"}),s}return{initEvent:i}}function Q(){function i(a){var s,r,c;return{title:"多选配置",$converter:"/converter/grid-selection.converter",parentPropertyID:"editor",properties:{multiSelect:{title:"启用多选",type:"boolean",refreshPanelAfterChanged:!0},showCheckbox:{visible:!!((s=a.selection)!=null&&s.multiSelect),title:"显示复选框",type:"boolean",refreshPanelAfterChanged:!0},showSelectAll:{visible:!!((r=a.selection)!=null&&r.multiSelect)&&!!((c=a.selection)!=null&&c.showCheckbox),title:"显示全选",type:"boolean"},keepSelectingOnPaging:{title:"启用跨页多选",type:"boolean"},showSelection:{title:"显示已选数据数量",type:"boolean"}},setPropertyRelates(p,C){switch(p&&p.propertyID){case"multiSelect":a.selection.showCheckbox=p.propertyValue;break}}}}return{getSelection:i}}function X(){function i(a){return{title:"行号配置",$converter:"/converter/row-number.converter",parentPropertyID:"rowNumber",properties:{enable:{title:"显示行号",type:"boolean",refreshPanelAfterChanged:!0},width:{visible:a.rowNumber==null?!0:a.rowNumber.enable,title:"宽度",type:"number"},heading:{visible:a.rowNumber==null?!0:a.rowNumber.enable,title:"标题",type:"string"}}}}return{getRowNumber:i}}function Z(){function i(a,s){var r,c;return{title:"分页",$converter:"/converter/pagination.converter",parentPropertyID:"pagination",properties:{enable:{title:"启用分页",type:"boolean",refreshPanelAfterChanged:!0,editor:{readonly:s}},showIndex:{visible:((r=a.pagination)==null?void 0:r.enable)||!1,title:"显示页码",type:"boolean"},showLimits:{visible:((c=a.pagination)==null?void 0:c.enable)||!1,title:"显示分页条数",type:"boolean"}}}}return{getPagination:i}}function j(){function i(){return{showStripe:{title:"显示条纹",type:"boolean",description:"是否显示条纹"},showBorder:{title:"显示边框",type:"boolean",description:"是否显示边框"},showSetting:{title:"显示设置按钮",type:"boolean",description:"是否显示设置按钮"},emptyTemplate:{title:"空模板",type:"string",description:"空模板",editor:{type:"code-editor",language:"html"}}}}function a(r,c){return{title:"外观",properties:{class:{title:"class样式",type:"string",description:"组件的class样式"},columns:{title:"列设置",description:"列设置",type:"array",editor:{type:"grid-field-editor",viewModelId:c,gridData:r,getLatestGridData:p=>r},refreshPanelAfterChanged:!0},...i()},setPropertyRelates(p,C){switch(p&&p.propertyID){case"useBlankWhenDataIsEmpty":r.emptyDataHeight=r.useBlankWhenDataIsEmpty?36:240;break;case"columns":r.columns=p.propertyValue||[];break}}}}function s(r,c){return{title:"外观",properties:{class:{title:"class样式",type:"string",description:"组件的CSS样式"},columns:{title:"列设置",description:"列设置",$converter:"/converter/items-count.converter",editor:{type:"grid-field-editor",viewModelId:c,gridData:r,gridType:"tree-grid-column"},refreshPanelAfterChanged:!0},...i()},setPropertyRelates(p,C){switch(p&&p.propertyID){case"useBlankWhenDataIsEmpty":r.emptyDataHeight=r.useBlankWhenDataIsEmpty?36:240;break;case"fields":r.fields=p.propertyValue||[];break}}}}return{getDataGrid:a,getTreeGrid:s}}function x(){function i(a){return{title:"排序",description:"",properties:{mode:{title:"类型",type:"enum",description:"排序类型",$converter:"/converter/grid-sort.converter",editor:{data:[{id:"client",name:"客户端"},{id:"server",name:"服务端"}]}}}}}return{getSort:i}}function ee(){function i(a){return{title:"过滤",description:"",properties:{mode:{title:"类型",type:"enum",description:"过滤类型",$converter:"/converter/grid-filter.converter",editor:{data:[{id:"client",name:"客户端"},{id:"server",name:"服务端"}]}}}}}return{getFilter:i}}m.useAppearance=j,m.useColumnOption=U,m.useCommandOption=K,m.useDataGridEvent=J,m.useDesignerColumn=G,m.useDesignerFitColumn=$,m.useDesignerVisualData=z,m.useFilter=ee,m.useGroup=Y,m.usePagination=Z,m.useRowNumber=X,m.useRowOption=L,m.useSelection=Q,m.useSort=x,m.useSummary=q,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});