UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

2 lines (1 loc) 10.6 kB
(function(f,N){typeof exports=="object"&&typeof module<"u"?N(exports,require("../common/index.umd.js"),require("vue"),require("@vueuse/core"),require("../dynamic-resolver/index.umd.js"),require("../data-view/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","../common/index.umd.js","vue","@vueuse/core","../dynamic-resolver/index.umd.js","../data-view/index.umd.js","../designer-canvas/index.umd.js"],N):(f=typeof globalThis<"u"?globalThis:f||self,N(f["tree-view"]={},f.common,f.Vue,f.VueUseCore,f.dynamicResolver,f.dataView,f.designerCanvas))})(this,function(f,N,o,le,Z,n,re){"use strict";const ae=new Map([["appearance",Z.resolveAppearance]]);function ce(e,i,a){return i}const ue={title:"tree-view",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}}}},de={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/tree-view.schema.json",title:"tree-view",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for tree-view",type:"string"},type:{description:"The type string of tree-view",type:"string",default:"tree-view"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disable:{type:"string",default:!1},editable:{description:"",type:"boolean",default:!0},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},require:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},visible:{description:"",type:"boolean",default:!0},idField:{description:"",type:"string",default:"id"}},required:["id","type"]},fe={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}},E={customClass:{type:String,default:""},columns:{type:Array,default:[{field:"name",title:"",dataType:"string",width:"100%"}]},columnOption:{type:Object},displayField:{type:String,default:"name",require:!0},showLines:{type:Boolean,default:!1},data:{type:Object,default:[]},disable:{type:Boolean,default:!1},disabledField:{type:String,default:"disabled"},fit:{type:Boolean,default:!1},height:{type:Number,default:-1},id:{type:String,default:""},idField:{type:String,default:"id",require:!0},minHeight:{type:Number,default:300},minWidth:{type:Number,default:400},pagination:{type:Object,default:{enable:!1,size:-1}},rowNumber:{type:Object,default:{enable:!1,width:36,heading:"序号"}},selection:{type:Object,default:{enableSelectRow:!0,multiSelect:!1,multiSelectMode:"DependOnCheck",showCheckbox:!1,showSelectAll:!1,showSelection:!1}},selectionValues:{type:Array,default:[]},showTreeNodeIcons:{type:Boolean,default:!1},treeNodeIconsData:{type:[Object,String],default:{}},iconField:{type:String,default:""},width:{type:Number,default:-1},newDataItem:{type:[Function,Object],default:()=>{}},lineColor:{type:String,default:"#9399a0"},cellHeight:{type:Number,default:28},onOutputValue:{type:Function,default:()=>{}},onCurrentEvent:{type:Function,default:()=>{}},hierarchy:{type:Object,default:{cascadeOption:{autoCheckChildren:!1,autoCheckParent:!1,selectionRange:"All"},parentIdField:"parent"}},rowOption:{type:Object},virtualized:{type:Boolean,default:!1},showEllipsis:{type:Boolean,default:!1},autoHeight:{type:Boolean,default:!1},loadData:{type:Function},checkboxPosition:{type:String,default:"after-expand"}},Y=Z.createPropsResolver(E,de,ae,ce,ue);function ee(e,i,a,C,c,j,b,I,r,T,d,S,s,u,m,O,q){const{calculateCellPositionInRow:z}=C,{columnContext:V}=c,{gridDataStyle:x}=S,{renderDataRow:w}=n.getHierarchyRow(e,i,V,a,j,b,I,r,T,d,S,s,u,O,q);function A(){const v=z(V.value.primaryColumns);return a.value.filter(D=>D.visible!==!1).map((D,g)=>w(D,v,"primary",g))}function h(){return o.createVNode("div",{ref:m,class:"fv-grid-content-primary"},[o.createVNode("div",{class:"fv-grid-data",style:x.value},[A()])])}return{renderTreeArea:h}}function te(e,i){function a(){return i.slots.header&&o.createVNode("div",{class:"f-tree-view-header"},[i.slots.header()])}return{renderHeader:a}}const P=o.defineComponent({name:"FTreeView",props:E,emits:["outputValue","currentEvent","clickRow","selectItem","unSelectItem","selectionChange","expandNode","dblclickNode","clickRow","selectionUpdate"],setup(e,i){var se;const a=o.ref(((se=e.rowOption)==null?void 0:se.height)||28),C=o.ref(!1),c=o.ref(),j=o.ref(!1),b=o.ref(),I=o.ref(20),r=o.ref([]),T=n.useFilter(e,i),d=n.useIdentify(e),S=n.useHierarchy(e),s=n.useDataView(e,new Map,T,S,d),u=n.useSelection(e,s,d,r,i),m=n.useSelectHierarchyItem(e,r,s,d,u,i),O=o.computed(()=>{const t={"fv-grid":!0,"fv-tree-view":!0};return N.getCustomClass(t,e.customClass)}),q=o.computed(()=>({"fv-grid-content":!0,"fv-grid-content-hover":j.value})),{containerStyleObject:z}=n.useDataViewContainerStyle(e,r),V=o.ref(e.columns),x=n.useColumn(e,i),{columnContext:w}=x,A=n.useGroupColumn(e,w),h=0,v=o.computed(()=>e.virtualized?Math.min(s.dataView.value.length,I.value):s.dataView.value.length),D=o.computed(()=>!r.value||!r.value.length),g=n.useRow(e,i,u,d),M=n.useEdit(e,i,d,g,r),F=n.useVisualDataBound(e,s,a),W=n.useVisualDataCell(e,{},F),G=n.useVisualDataRow(e,s,M,S,d,F,W,a),H=n.useVisualData(e,V,s,v,h,G),{getVisualData:B}=H,_=n.useCellPosition(e,w,a,C),y=n.useVirtualScroll(e,s,r,w,H,v,h,o.ref(0),a,C),J=n.useSidebar(e,u),{onWheel:K,dataGridWidth:L,viewPortHeight:U,viewPortWidth:$,resetScroll:k,updateVisibleRowsOnLatestVisibleScope:pe}=y,{renderVerticalScrollbar:Ce}=n.getVerticalScrollbar(e,c,y),{renderHorizontalScrollbar:he}=n.getHorizontalScrollbar(e,c,y),{renderDataGridSidebar:ve}=n.getSidebar(e,g,u,J,y),ge=n.useFitColumn(e,w,c,$,A),{calculateColumnsSize:ne}=ge;function be(){return e.header==="ContentHeader",te}const Ie=be(),{renderHeader:Se}=Ie(e,i),{renderTreeArea:we}=ee(e,i,r,_,x,s,M,S,g,u,m,y,H,F,b,a,C);function Q(){const t=u.getSelectionRow();return t?t.dataIndex-1:-1}function De(){var l,p;const t=Math.ceil(c.value.clientHeight/a.value);t>I.value&&(I.value=t,pe()),U.value=((l=b.value)==null?void 0:l.clientHeight)||0,L.value=((p=c.value)==null?void 0:p.clientWidth)||0,ne()}const{renderEmpty:Re}=n.getEmpty(e,i);o.onMounted(()=>{c.value&&(I.value=Math.max(Math.ceil(c.value.clientHeight/a.value),I.value),r.value=B(0,v.value+h-1),le.useResizeObserver(c.value,De),ne(),o.nextTick(()=>{c.value&&(L.value=c.value.clientWidth),b.value&&($.value=b.value.clientWidth,U.value=b.value.clientHeight)}))});function je(){const t=Q();s.insertNewDataItem(t),r.value=B(0,v.value+h-1)}function Oe(){const t=Q();s.insertNewChildDataItem(t),r.value=B(0,v.value+h-1)}function Fe(){const t=Q(),l=m.getNextSelectableHierarchyItemId(t);s.removeHierarchyDataItem(t),r.value=B(0,v.value+h-1),l&&m.selectItemById(l)}function He(t,l){s.editDataItem(t,l),r.value=B(0,v.value+h-1)}function Be(){}function Ne(){}function Te(t){return Object.prototype.hasOwnProperty.call(t,"raw")?s.hasRealChildren(t.raw):s.hasRealChildren(t)}function Ve(t,l){const p=r.value.find(X=>X.raw[d.idField.value]===l),R=p?p.dataIndex-1:-1;s.insertNewChildDataItems(t,R)}function oe(t){if(t>-1){const l=r.value[t];l&&u.selectItem(l)}}function xe(t,l){if(t){const p=u.getSelectionRow();if(s.load(t),s.reOrderVisibleIndex(),l!=null&&l.keepScrollPosition){const R=y.offsetY.value;k(),y.scrollTo(R)}else k();if(p&&p.raw&&p.raw.originalId){const R=t.findIndex(X=>X.originalId===p.raw.originalId);R>-1&&oe(R)}}}function Me(){u.clearSelection()}function Pe(t){m.selectItemByIds(t)}function ie(t){g.activeRowById(t)}function qe(t,l={isCurrent:!0}){l!=null&&l.isCurrent&&ie(t),m.selectItemById(t)}function ze(t){const l=d.idField.value,p=r.value.find(R=>R.raw[l]===t);p&&g.changeRow(p)}function Ae(){u.emptyCurrentRowId()}i.expose({addNewDataItem:je,addNewChildDataItem:Oe,removeDataItem:Fe,editDataItem:He,acceptDataItem:Be,cancelDataItem:Ne,selectItem:oe,updateDataSource:xe,clearSelection:Me,selectItemById:qe,activeRowById:ie,hasChildren:Te,addChildrenToNode:Ve,selectRowById:ze,selectItemByIds:Pe,emptyCurrentRowId:Ae});const $e=o.computed(()=>{const t={};return y.shouldShowHorizontalScrollbar.value&&(t.paddingBottom="10px"),y.shouldShowVirticalScrollbar.value&&(t.paddingRight="10px"),t});return()=>o.createVNode("div",{class:O.value,style:z.value,onWheel:K},[Se(),o.createVNode("div",{ref:c,class:q.value,onMouseover:()=>{j.value=!0},onMouseleave:()=>{j.value=!1},style:$e.value},[c.value&&ve(r),we(),c.value&&D.value&&Re(),c.value&&he(),c.value&&Ce()])])}}),me=o.defineComponent({name:"FTreeViewDesign",props:E,emits:["outputValue","currentEvent","selectionChange"],setup(e,i){var $;const a=o.ref(!1),C=o.ref((($=e.rowOption)==null?void 0:$.height)||28),c=o.ref(),j=o.inject("design-item-context"),b=re.useDesignerComponent(c,j),I=o.ref();o.ref(e.idField);const r=o.ref(),T=o.ref(!1),d=o.ref([]),S=n.useFilter(e,i),s=n.useHierarchy(e),u=n.useIdentify(e),m=n.useDataView(e,new Map,S,s,u),O=n.useSelection(e,m,u,d,i),q=n.useSelectHierarchyItem(e,d,m,u,O,i),z=o.computed(()=>({"fv-tree":!0})),V=o.computed(()=>({"fv-tree-content":!0})),{containerStyleObject:x}=n.useDataViewContainerStyle(e,d);function w(k){}function A(){return[]}function h(){return[]}const v=o.ref(e.columns),D=n.useColumn(e,i),{columnContext:g}=D,M=0,F=o.computed(()=>m.dataView.value.length),W=n.useRow(e,i,O,u),G=n.useEdit(e,i,u,W,d),H=n.useVisualDataBound(e,m,C),B=n.useVisualDataCell(e,{},H),_=n.useVisualDataRow(e,m,G,s,u,H,B,C),y=n.useVisualData(e,v,m,F,M,_),{getVisualData:J}=y,K=n.useCellPosition(e,g,C,a);d.value=J(0,F.value+M-1);const L=n.useVirtualScroll(e,m,d,g,y,F,M,o.ref(0),C,a),{renderTreeArea:U}=ee(e,i,d,K,D,m,G,s,W,O,q,L,y,H,I,C,a);return i.expose(b.value),()=>o.createVNode("div",{class:z.value,style:x.value,onWheel:w},[o.createVNode("div",{ref:r,class:V.value,onMouseover:()=>{T.value=!0},onMouseleave:()=>{T.value=!1}},[U(),A(),h()])])}});P.register=(e,i,a)=>{e["tree-view"]=P,i["tree-view"]=Y},P.registerDesigner=(e,i,a)=>{e["tree-view"]=me,i["tree-view"]=Y};const ye=N.withInstall(P);f.FTreeView=P,f.columnOptions=fe,f.default=ye,f.propsResolver=Y,f.treeViewProps=E,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});