@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 19.2 kB
JavaScript
(function(r,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("../../components/tree-grid/index.umd.js"),require("../../components/common/index.umd.js"),require("vue"),require("@vueuse/core"),require("../../components/dynamic-resolver/index.umd.js"),require("../../components/data-view/index.umd.js"),require("../data-grid/index.umd.js"),require("../../components/designer-canvas/index.umd.js"),require("../../components/property-panel/index.umd.js"),require("../data-view/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","../../components/tree-grid/index.umd.js","../../components/common/index.umd.js","vue","@vueuse/core","../../components/dynamic-resolver/index.umd.js","../../components/data-view/index.umd.js","../data-grid/index.umd.js","../../components/designer-canvas/index.umd.js","../../components/property-panel/index.umd.js","../data-view/index.umd.js"],v):(r=typeof globalThis<"u"?globalThis:r||self,v(r["tree-grid"]={},r.FTreeGrid,r.common,r.Vue,r.VueUseCore,r.dynamicResolver,r.dataView,r.designer$2,r.designerCanvas,r.propertyPanel,r.designer$1))})(this,function(r,v,A,s,re,j,u,se,G,ae,g){"use strict";const N={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/tree-grid.schema.json",title:"tree-grid",description:"A Farris Data Grid Component",type:"object",properties:{id:{description:"The unique identifier for a Input Group",type:"string"},type:{description:"The type string of Input Group component",type:"string",default:"tree-grid"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},fit:{type:"boolean",default:!1},showStripe:{type:"boolean",default:!0},showBorder:{type:"boolean",default:!1},showTreeNodeIcons:{type:"boolean",default:!1},showSetting:{type:"boolean",default:!1},size:{description:"",type:"object",properties:{width:{type:"number"},height:{type:"number"}},default:null},dataSource:{description:"",type:"string",default:""},columns:{description:"",type:"array",default:[]},identifyField:{description:"",type:"string"},editable:{description:"",type:"boolean",default:!1},disabled:{description:"",type:"boolean",default:!1},visible:{description:"",type:"boolean",default:!0},cell:{type:"object",properties:{highlightFocusingCell:{description:"",type:"boolean",default:!1},mergeCell:{description:"",type:"boolean",default:!1},showEditableIcon:{description:"",type:"boolean",default:!1}}},column:{type:"object",properties:{fitColumns:{description:"",type:"boolean",default:!1},fitMode:{description:"",type:"string",default:"average"},groups:{description:"",type:"array",default:[]},reorderColumn:{description:"Enable to drag column to reorder",type:"boolean",default:!1},resizeColumn:{type:"boolean",default:!0},resizeColumnOnDoubleClick:{description:"",type:"boolean",default:!0}}},command:{type:"object",properties:{enable:{description:"",type:"boolean",default:!1},commands:{type:"array",default:[]},commandColumnWidth:{description:"",type:"number",default:120},onClickDeleteCommand:{description:"",type:"string",default:""},onClickEditCommand:{description:"",type:"string",default:""}}},contextMenu:{description:"",type:"object",properties:{enable:{description:"",type:"boolean",default:!1}}},customizaiton:{type:"object",properties:{enableScheme:{description:"",type:"boolean",default:!1},enableSetting:{description:"",type:"boolean",default:!1}}},edit:{type:"obejct",properties:{mode:{description:"",type:"string",default:"cell",enum:["cell","row","card"]},selectOnEditing:{description:"",type:"boolean",default:!1},onAppendRow:{description:"",type:"string",default:""},onBeforeEdit:{description:"",type:"string",default:""}}},filter:{type:"object",properties:{enable:{description:"",type:"boolean",default:!1},filterStyle:{description:"",type:"string",default:"filter-column",enum:["filter-column","filter-row"]},mode:{description:"",type:"string",default:"server",enum:["server"]},showSummary:{description:"",type:"boolean",default:!0},onFilterChange:{description:"",type:"string",default:""}}},footer:{type:"object",properties:{enable:{description:"",type:"boolean",default:!1},customFooterStyle:{description:"",type:"object"},footerDataCommand:{description:"",type:"string",default:""},footerDataFrom:{description:"",type:"string",default:"client"},footerHeight:{description:"",type:"number",default:29},footerPosition:{description:"",type:"string",default:"bottom"},footerTemplate:{description:"",type:"string",default:""}}},group:{description:"",type:"object",properties:{enable:{description:"",type:"boolean",default:!1},customGroupRow:{description:"",type:"object"},customGroupRowStyle:{description:"",type:"obejct"},customSummaryStyle:{description:"",type:"obejct"},groupColSpan:{description:"",type:"number",default:1},groupFields:{description:"",type:"array",default:[]},showGroupedColumn:{description:"",type:"boolean",default:!0},showGroupPanel:{description:"",type:"boolean",default:!1},showSummary:{description:"",type:"boolean",default:!1},summaryPosition:{description:"",type:"string",default:"separate",enum:["separate","merge-to-group"]},disableGroupOnEditing:{description:"",type:"boolean",default:!0},expandGroupRows:{description:"",type:"boolean",default:!0}}},header:{type:"object",properties:{wrapHeadings:{description:"",type:"boolean",default:!1}}},pagination:{type:"object",properties:{enable:{description:"",type:"boolean",default:!1},disablePagination:{description:"",type:"string",default:""},contentTemplate:{description:"",type:"string",default:""},index:{description:"",type:"number",default:1},mode:{description:"",type:"string",default:"server",enum:["server","client"]},showGoto:{description:"",type:"boolean",default:!1},showIndex:{description:"",type:"boolean",default:!0},showLimits:{description:"",type:"boolean",default:!1},showPageInfo:{description:"",type:"boolean",default:!0},size:{description:"",type:"number",default:20},sizeLimits:{description:"",type:"array",default:[10,20,30,50,100]},onPageChange:{description:"",type:"string",default:""},onPageSizeChange:{description:"",type:"string",default:""}}},rowOption:{type:"object",properties:{customRowStyle:{description:"自定义行样式",type:"string"},customCellStyle:{description:"自定义单元格样式",type:"string",default:""},disable:{description:"",type:"obejct"},height:{description:"",type:"number",default:30},showHovering:{type:"boolean",default:!0},wrapContent:{type:"boolean",default:!1}}},rowNumber:{description:"",type:"object",properties:{enable:{description:"",type:"boolean",default:!1},heading:{description:"",type:"string",default:"序号"},width:{description:"",type:"number",default:36},onClickRow:{description:"",type:"string",default:""},onDoubleClickRow:{description:"",type:"string",default:""}}},onClickRow:{description:"行点击事件",type:"string",default:""},onSelectionChange:{description:"行切换事件",type:"string",default:""},onPageIndexChanged:{description:"切换页码事件",type:"string",default:""},onPageSizeChanged:{description:"分页条数变化事件",type:"string",default:""},selection:{type:"object",properties:{enableSelectRow:{description:"允许选中行",type:"boolean",default:!0},enable:{description:"",type:"boolean",default:!0},checkOnSelect:{description:"",type:"boolean",default:!1},showSelectAll:{description:"",type:"boolean",default:!1},clearSelectionOnEmpty:{description:"",type:"boolean",default:!0},customSelectionItem:{description:"",type:"object"},focusSelection:{description:"",type:"string",default:"current",enum:["current","all"]},keepSelectingOnClick:{description:"",type:"boolean",default:!0},keepSelectingOnPaging:{description:"",type:"boolean",default:!0},multiSelect:{description:"",type:"boolean",default:!1},selectionMode:{description:"",type:"string",default:"default"},selectOnCheck:{description:"",type:"boolean",default:!1},selectOnEditing:{description:"",type:"boolean",default:!1},showCheckbox:{description:"",type:"boolean",default:!1},showCheckAll:{description:"",type:"boolean",default:!1},showSelection:{description:"",type:"boolean",default:!1},onBeforeSelect:{description:"",type:"string",default:""},onBeforeUnCheck:{description:"",type:"",default:""},onBeforeUnSelect:{description:"",type:"string",default:""},onCheckAll:{description:"",type:"string",default:""},onChecked:{description:"",type:"string",default:""},onSelectionChange:{description:"",type:"string",default:""},onUnCheckAll:{description:"",type:"string",default:""},onUnChecked:{description:"",type:"string",default:""},onCheckedChange:{description:"",type:"string"}}},sort:{type:"object",properties:{enable:{description:"",type:"boolean",default:!1},fields:{description:"",type:"array",default:[]},mode:{description:"",type:"string",default:"server",enum:["server"]},multiSort:{description:"",type:"boolean",default:!1}}},summary:{description:"",type:"object",properties:{enable:{description:"",type:"boolean",default:!1},customSummaryStyle:{description:"",type:"object"},groupFields:{description:"",type:"array",default:[]},mode:{description:"",type:"string",default:"client",enum:["client","server"]},position:{description:"",type:"boolean",default:"bottom",enum:["bottom","top","both"]}}},toolbar:{description:"",type:"object",properties:{enable:{description:"",type:"boolean",default:!1}}},visualization:{autoHeight:{description:"",type:"boolean",default:!1},emptyDataHeight:{description:"",type:"number",default:36},emptyTemplate:{description:"",type:"string",default:""},maxHeight:{description:"",type:"number",default:300},scrollBarShowMode:{description:"",type:"string",default:"auto"},showBorder:{description:"",type:"boolean",default:!1},showScrollArrow:{description:"",type:"boolean",default:!1},striped:{description:"",type:"boolean",default:!0},useBlankWhenDataIsEmpty:{description:"",type:"boolean",default:!1}},emptyTemplate:{description:"",type:"string",default:""}},required:["id","type","columns"],events:{onSelectionChange:"行切换事件",onClickRow:"行点击事件",onDoubleClickRow:"行双击事件",onFilterChanged:"过滤事件",onSortChanged:"排序事件",onSelectItem:"选中行事件",onUnSelectItem:"取消选中行事件",onSelectAll:"全选事件",onUnSelectAll:"取消全选事件",onClickEditCommand:"操作列编辑事件",onClickDeleteCommand:"操作列删除事件"}},U=new Map([["appearance",j.resolveAppearance],["column","columnOption"],["command","commandOption"]]);function le(t,e,i){var p;const o=i.parentComponentInstance,a=o.schema.type,d=String(((p=o.schema.appearance)==null?void 0:p.class)||"").split(" "),c=a==="section"||a==="tab-page",l=d.includes("f-page-content-nav"),n=d.includes("f-page-main"),m=t.getSchemaByType("component");m.id=`${e.id}-component`,m.componentType="data-grid";let y="";return y+=c?"f-struct-data-grid-in-card f-struct-is-subgrid":"",y+=l?"f-struct-data-grid-in-nav f-struct-wrapper f-utils-fill-flex-column":"",y+=n?"f-struct-data-grid f-struct-wrapper":"",m.appearance={class:y},m.contents=[e],m}function de(t,e,i){const o=i.parentComponentInstance,a=String(o.schema.appearance.class||"").split(" "),d=a.includes("f-page-content-nav"),c=a.includes("f-page-main"),l=t.getSchemaByType("section");l.id=`${e.id}-section`;let n="";return n+=d?"f-section-in-nav ":"",n+=c?"f-section-in-managelist ":"",n+="f-section-grid",l.appearance={class:n},l.contents=[e],l}function ce(t,e,i){const o=t.getSchemaByType("content-container");return o.id=`${e.id}-layout`,o.appearance={class:"f-grid-is-sub f-utils-flex-column"},o.contents=[e],o}function q(t,e,i){const a=i.parentComponentInstance.schema.type,d=a==="section"||a==="tab-page";e.appearance={class:"f-component-grid"};const l=(d?ce:de)(t,e,i);return le(t,l,i)}const z=j.createPropsResolver(v.treeGridProps,N,U,q),H=j.createTreeGridSelectionItemResolver(),$=j.createTreeGridBindingResolver(),E=A.excludeProperties(Object.assign({},v.treeGridProps,{componentId:{type:String,default:""}}),"columnOption","commandOption"),L=j.createPropsResolver(E,N,U,q),_=j.createDataViewUpdateColumnsResolver();class pe extends ae.BaseControlProperty{constructor(e,i){super(e,i)}getPropertyConfig(e){return this.getBasicPropConfig(e),this.getAppearanceProperties(e),this.propertyConfig.categories.command=g.useCommandOption().getCommandColumnProperties(e),this.propertyConfig.categories.column=g.useColumnOption().getColumnOptionProperties(e),this.propertyConfig.categories.rowOption=g.useRowOption().getRowOptionProperties(e),this.propertyConfig.categories.summary=g.useSummary().getSummaryProperties(e),this.propertyConfig.categories.filter={title:"过滤",description:"",properties:{mode:{title:"类型",type:"enum",description:"过滤类型",$converter:"/converter/grid-filter.converter",editor:{data:[{id:"server",name:"服务端"}]}}}},this.getEventPropConfig(e),this.propertyConfig}getBasicPropConfig(e){var c,l,n;const i=(n=(l=(c=this.formSchemaUtils.getFormSchema())==null?void 0:c.module)==null?void 0:l.entity[0])==null?void 0:n.entities[0],o=this.assembleSchemaEntityToTree(i,0),a=this,d=super.getBasicPropConfig(e);this.propertyConfig.categories.basic={description:"Basic Information",title:"基本信息",properties:{...d.properties,dataSource:{description:"绑定数据源",title:"绑定数据源",editor:{type:"combo-tree",textField:"name",valueField:"label",data:o,editable:!1},readonly:!0}},setPropertyRelates(m,y){switch(m&&m.propertyID){case"dataSource":{const p=a.formSchemaUtils.getViewModelById(a.viewModelId);if(p){const w=o.find(P=>P.label===m.propertyValue);p.bindTo=w.bindTo}a.designViewModelUtils.assembleDesignViewModel();break}}}}}getAppearanceProperties(e){this.propertyConfig.categories.appearance=g.useAppearance().getDataGrid(e,this.viewModelId),this.propertyConfig.categories.rowNumber=g.useRowNumber().getRowNumber(e),this.propertyConfig.categories.pagination=g.usePagination().getPagination(e,!0)}getEventPropConfig(e){const i=g.useDataGridEvent().initEvent(e),o=this,a=o.eventsEditorUtils.formProperties(e,o.viewModelId,i),d=o.createBaseEventProperty(a);this.propertyConfig.categories.eventsEditor={title:"事件",hideTitle:!0,properties:d,refreshPanelAfterChanged:!0,tabId:"commands",tabName:"交互",setPropertyRelates(c,l){const n=c.propertyValue;delete e[o.viewModelId],n&&(n.setPropertyRelates=this.setPropertyRelates,o.eventsEditorUtils.saveRelatedParameters(e,o.viewModelId,n.events,n)),e.remoteSort=!!e.columnSorted,e.command&&(e.command.onClickEditCommand=e.onClickEditCommand,e.command.onClickDeleteCommand=e.onClickDeleteCommand)}}}assembleSchemaEntityToTree(e,i,o,a="",d=[]){const c=a?`${a}/${e.label}`:"/";return d.push({id:e.id,name:e.name,label:e.label,layer:i,parent:o&&o.id,bindTo:c.replace("//","/")}),e.type.entities&&e.type.entities.length&&e.type.entities.map(l=>this.assembleSchemaEntityToTree(l,i+1,e,c,d)),d}}function ue(t,e){const i=t.schema,o=s.ref(!0),a=s.ref(!0);function d(p){return p&&p.sourceType==="control"?p.componentCategory==="input":!1}function c(){return!1}function l(){return!1}function n(){return!0}function m(p){return new pe(p,e).getPropertyConfig(i)}function y(){var p,w,P,S;if(t&&e){const M=(p=t==null?void 0:t.componentInstance)==null?void 0:p.value.belongedComponentId;let b="",D="";const{formSchemaUtils:R}=e;if(M){const k=R.getRootViewModelId(),I=R.getComponentByViewModelId(k),f=R.selectNode(I,O=>O.contents&&O.contents.find(B=>B.component===M));(f==null?void 0:f.type)===((w=G.DgControl["tab-page"])==null?void 0:w.type)&&((P=f==null?void 0:f.contents)!=null&&P.length)&&(b=f.title||""),(f==null?void 0:f.type)===((S=G.DgControl.section)==null?void 0:S.type)&&(f==null?void 0:f.showHeader)!==!1&&(b=f.mainTitle||""),b=b?`${b} > `:"",D=b?f.id:""}const C=G.DgControl["tree-grid"].name;e==null||e.formSchemaUtils.getControlBasicInfoMap().set(t.schema.id,{componentTitle:C,parentPathName:`${b}${C}`,reliedComponentId:D})}}return{canAccepts:d,checkCanDeleteComponent:c,checkCanMoveComponent:l,hideNestedPaddingInDesginerView:n,triggerBelongedComponentToMoveWhenMoved:o,triggerBelongedComponentToDeleteWhenDeleted:a,getPropsConfig:m,setComponentBasicInfoMap:y}}const T=s.defineComponent({name:"FTreeGridDesign",props:E,emits:[],setup(t,e){var te,oe;const i=s.ref(),o=0,a=((te=t.rowOption)==null?void 0:te.height)||28,d=s.ref(20),c=s.ref(t.columns),l=u.useIdentify(t),n=s.ref(),m=s.ref(),y=s.ref([]),p=s.ref(!1),w=s.ref(((oe=t.rowOption)==null?void 0:oe.wrapContent)||!1),P=s.inject("designer-host-service"),S=s.inject("design-item-context"),M=ue(S,P),b=G.useDesignerComponent(i,S,M);b.value.designerClass="f-utils-fill-flex-column";const D=u.useFilter(t,e),R=u.useHierarchy(t),C=u.useDataView(t,new Map,D,R,l),k=u.useSelection(t,C,l,y,e),I=s.computed(()=>C.dataView.value.length),{containerStyleObject:f}=u.useDataViewContainerStyle(t),O=u.useCommandColumn(t),{applyCommands:B}=O;B(c);const J=g.useDesignerColumn(t),{applyColumnSorter:me,columnContext:V,updateColumnRenderContext:ye}=J,ge=u.useSort(t),be=u.useGroupColumn(t,V),Ce=u.useRow(t,e,k,l),K=u.useEdit(t,e,l,Ce,y),Q=u.useVisualDataBound(t),he=u.useVisualDataCell(t,K,Q),ve=u.useVisualDataRow(t,C,K,R,l,Q,he),X=g.useDesignerVisualData(t,c,C,I,o,ve),{getVisualData:Y}=X,we=u.useSidebar(t,k),{sidebarWidth:Se}=we;y.value=Y(0,I.value+o-1);const W=u.useVirtualScroll(t,C,y,V,X,I,o,Se),{onWheel:je,dataGridWidth:Z,viewPortHeight:ee,viewPortWidth:x,updateVisibleRowsOnLatestVisibleScope:Pe}=W,Re=g.useDesignerFitColumn(t,V,n,x,be),{calculateColumnsSize:F}=Re,Ie=s.computed(()=>({"drag-container":!0,"fv-grid":!0,"fv-grid-bordered":t.showBorder,"fv-datagrid-strip":t.showStripe})),Te=s.computed(()=>({"fv-grid-content":!0,"fv-grid-content-hover":p.value,"fv-grid-wrap-content":w.value})),{renderGridHeader:Ge}=se.getColumnHeader(S,t,J,W,"tree-grid-column"),{renderHorizontalScrollbar:Me}=u.getHorizontalScrollbar(t,n,W);function De(){var ne,ie;const h=Math.ceil(n.value.clientHeight/a);h>d.value&&(d.value=h,Pe()),ee.value=((ne=m.value)==null?void 0:ne.clientHeight)||0,Z.value=((ie=n.value)==null?void 0:ie.clientWidth)||0,F()}s.onMounted(()=>{i.value.componentInstance=b,n.value&&(d.value=Math.max(Math.ceil(n.value.clientHeight/a),d.value),y.value=Y(0,I.value+o-1),re.useResizeObserver(n.value,De),F(),s.nextTick(()=>{n.value&&(Z.value=n.value.clientWidth),m.value&&(x.value=m.value.clientWidth,ee.value=m.value.clientHeight)}))});function ke(h){h&&(c.value=h,B(c),ye(c.value),me(C,ge),F())}return s.watch(()=>t.columns,h=>{ke(h)}),s.watch(x,()=>{n.value&&F()}),e.expose(b.value),()=>s.createVNode("div",{ref:i,class:Ie.value,style:f.value,onWheel:je,dragref:`${S.schema.id}-container`},[n.value&&Ge(),s.createVNode("div",{ref:n,class:Te.value,onMouseover:()=>{p.value=!0},onMouseleave:()=>{p.value=!1}},[Me()])])}});T.register=(t,e,i,o)=>{t["tree-grid"]=v,e["tree-grid"]=z,o["tree-grid"]={bindingResolver:$,selectionItemResolver:H,updateColumnsResolver:_}},T.registerDesigner=(t,e,i)=>{t["tree-grid"]=T,e["tree-grid"]=L};const fe=A.withInstall(T);r.FTreeGridDesign=T,r.bindingResolver=$,r.default=fe,r.designPropsResolver=L,r.propsResolver=z,r.selectionItemResolver=H,r.treeGridDesignProps=E,r.updateColumnsResolver=_,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});