UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

2 lines (1 loc) 10.9 kB
(function(d,T){typeof exports=="object"&&typeof module<"u"?T(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"],T):(d=typeof globalThis<"u"?globalThis:d||self,T(d["tree-view"]={},d.common,d.Vue,d.VueUseCore,d.dynamicResolver,d.dataView,d.designerCanvas))})(this,function(d,T,n,le,Z,i,ae){"use strict";const re=new Map([["appearance",Z.resolveAppearance]]);function ce(e,o,m){return o}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}},A={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"},autoExpandWidth:{type:Boolean,default:!1}},Y=Z.createPropsResolver(A,de,re,ce,ue);function ee(e,o,m,f,O,c,H,I,S,a,h,y,w,s,r,C,P){const{calculateCellPositionInRow:q}=f,{columnContext:V}=O,{gridDataStyle:x}=y,{renderDataRow:D}=i.getHierarchyRow(e,o,V,m,c,H,I,S,a,h,y,w,s,C,P);function E(){const g=q(V.value.primaryColumns);return m.value.filter(R=>R.visible!==!1).map((R,b)=>D(R,g,"primary",b))}function v(){return n.createVNode("div",{ref:r,class:"fv-grid-content-primary"},[n.createVNode("div",{class:"fv-grid-data",style:x.value},[E()])])}return{renderTreeArea:v}}function te(e,o){function m(){return o.slots.header&&n.createVNode("div",{class:"f-tree-view-header"},[o.slots.header()])}return{renderHeader:m}}const W=n.defineComponent({name:"FTreeView",props:A,emits:["outputValue","currentEvent","clickRow","selectItem","unSelectItem","selectionChange","expandNode","dblclickNode","clickRow","selectionUpdate"],setup(e,o){var se;const m=n.ref(null),f=n.ref(((se=e.rowOption)==null?void 0:se.height)||28),O=n.ref(!1),c=n.ref(),H=n.ref(!1),I=n.ref(),S=n.ref(20),a=n.ref([]),h=i.useFilter(e,o),y=i.useIdentify(e),w=i.useHierarchy(e),s=i.useDataView(e,new Map,h,w,y),r=i.useSelection(e,s,y,a,o),C=i.useSelectHierarchyItem(e,a,s,y,r,o),P=n.computed(()=>{const t={"fv-grid":!0,"fv-tree-view":!0};return T.getCustomClass(t,e.customClass)}),q=n.computed(()=>({"fv-grid-content":!0,"fv-grid-content-hover":H.value})),V=n.ref(e.columns),x=i.useColumn(e,o),{columnContext:D}=x,E=i.useGroupColumn(e,D),v=0,g=n.computed(()=>e.virtualized?Math.min(s.dataView.value.length,S.value):s.dataView.value.length),R=n.computed(()=>!a.value||!a.value.length),b=i.useRow(e,o,r,y),M=i.useEdit(e,o,y,b,a),F=i.useVisualDataBound(e,s,f),k=i.useVisualDataCell(e,{},F),G=i.useVisualDataRow(e,s,M,w,y,F,k,f),B=i.useVisualData(e,V,s,g,v,G),{getVisualData:N}=B,_=i.useCellPosition(e,D,f,O),u=i.useVirtualScroll(e,s,a,D,B,g,v,n.ref(0),f,O),J=i.useSidebar(e,r),{onWheel:K,dataGridWidth:L,viewPortHeight:U,viewPortWidth:$,resetScroll:z,updateVisibleRowsOnLatestVisibleScope:pe}=u,{renderVerticalScrollbar:he}=i.getVerticalScrollbar(e,c,u),{renderHorizontalScrollbar:Ce}=i.getHorizontalScrollbar(e,c,u),{renderDataGridSidebar:ve}=i.getSidebar(e,b,r,J,u),ge=i.useFitColumn(e,D,c,$,E),{calculateColumnsSize:ne}=ge;function be(){return e.header==="ContentHeader",te}const Ie=be(),{renderHeader:Se}=Ie(e,o),{renderTreeArea:we}=ee(e,o,a,_,x,s,M,w,b,r,C,u,B,F,I,f,O),{containerStyleObject:De}=i.useDataViewContainerStyle(e,a,()=>{var t;return((t=u.getHierarchyIndentWidth)==null?void 0:t.call(u))||0},u.gridViewWidth);function Q(){const t=r.getSelectionRow();return t?t.dataIndex-1:-1}function Re(){var l,p;const t=Math.ceil(c.value.clientHeight/f.value);t>S.value&&(S.value=t,pe()),U.value=((l=I.value)==null?void 0:l.clientHeight)||0,L.value=((p=c.value)==null?void 0:p.clientWidth)||0,ne()}const{renderEmpty:je}=i.getEmpty(e,o);n.onMounted(()=>{c.value&&(S.value=Math.max(Math.ceil(c.value.clientHeight/f.value),S.value),a.value=N(0,g.value+v-1),le.useResizeObserver(c.value,Re),ne(),n.nextTick(()=>{if(c.value&&(L.value=c.value.clientWidth),I.value&&($.value=I.value.clientWidth,U.value=I.value.clientHeight),e.autoExpandWidth){const t=u.getHierarchyIndentWidth(),l=u.gridViewWidth.value+t;m.value.style.width=`${l}px`}}))});function Oe(){const t=Q();s.insertNewDataItem(t),a.value=N(0,g.value+v-1)}function He(){const t=Q();s.insertNewChildDataItem(t),a.value=N(0,g.value+v-1)}function Fe(){const t=Q(),l=C.getNextSelectableHierarchyItemId(t);s.removeHierarchyDataItem(t),a.value=N(0,g.value+v-1),l&&C.selectItemById(l)}function Be(t,l){s.editDataItem(t,l),a.value=N(0,g.value+v-1)}function Ne(){}function Te(){}function Ve(t){return Object.prototype.hasOwnProperty.call(t,"raw")?s.hasRealChildren(t.raw):s.hasRealChildren(t)}function xe(t,l){const p=a.value.find(X=>X.raw[y.idField.value]===l),j=p?p.dataIndex-1:-1;s.insertNewChildDataItems(t,j)}function ie(t){if(t>-1){const l=a.value[t];l&&r.selectItem(l)}}function Me(t,l){if(t){const p=r.getSelectionRow();if(s.load(t),s.reOrderVisibleIndex(),l!=null&&l.keepScrollPosition){const j=u.offsetY.value;z(),u.scrollTo(j)}else z();if(p&&p.raw&&p.raw.originalId){const j=t.findIndex(X=>X.originalId===p.raw.originalId);j>-1&&ie(j)}}}function We(){r.clearSelection()}function Pe(t){C.selectItemByIds(t)}function oe(t){b.activeRowById(t)}function qe(t,l={isCurrent:!0}){l!=null&&l.isCurrent&&oe(t),C.selectItemById(t)}function Ee(t){const l=y.idField.value,p=a.value.find(j=>j.raw[l]===t);p&&b.changeRow(p)}function $e(){r.emptyCurrentRowId()}o.expose({addNewDataItem:Oe,addNewChildDataItem:He,removeDataItem:Fe,editDataItem:Be,acceptDataItem:Ne,cancelDataItem:Te,selectItem:ie,updateDataSource:Me,clearSelection:We,selectItemById:qe,activeRowById:oe,hasChildren:Ve,addChildrenToNode:xe,selectRowById:Ee,selectItemByIds:Pe,emptyCurrentRowId:$e});const ze=n.computed(()=>{const t={};return u.shouldShowHorizontalScrollbar.value&&(t.paddingBottom="10px"),u.shouldShowVirticalScrollbar.value&&(t.paddingRight="10px"),t});return()=>n.createVNode("div",{ref:m,class:P.value,style:De.value,onWheel:K},[Se(),n.createVNode("div",{ref:c,class:q.value,onMouseover:()=>{H.value=!0},onMouseleave:()=>{H.value=!1},style:ze.value},[c.value&&ve(a),we(),c.value&&R.value&&je(),c.value&&Ce(),c.value&&he()])])}}),me=n.defineComponent({name:"FTreeViewDesign",props:A,emits:["outputValue","currentEvent","selectionChange"],setup(e,o){var $;const m=n.ref(!1),f=n.ref((($=e.rowOption)==null?void 0:$.height)||28),O=n.ref(),c=n.inject("design-item-context"),H=ae.useDesignerComponent(O,c),I=n.ref();n.ref(e.idField);const S=n.ref(),a=n.ref(!1),h=n.ref([]),y=i.useFilter(e,o),w=i.useHierarchy(e),s=i.useIdentify(e),r=i.useDataView(e,new Map,y,w,s),C=i.useSelection(e,r,s,h,o),P=i.useSelectHierarchyItem(e,h,r,s,C,o),q=n.computed(()=>({"fv-tree":!0})),V=n.computed(()=>({"fv-tree-content":!0})),{containerStyleObject:x}=i.useDataViewContainerStyle(e,h);function D(z){}function E(){return[]}function v(){return[]}const g=n.ref(e.columns),R=i.useColumn(e,o),{columnContext:b}=R,M=0,F=n.computed(()=>r.dataView.value.length),k=i.useRow(e,o,C,s),G=i.useEdit(e,o,s,k,h),B=i.useVisualDataBound(e,r,f),N=i.useVisualDataCell(e,{},B),_=i.useVisualDataRow(e,r,G,w,s,B,N,f),u=i.useVisualData(e,g,r,F,M,_),{getVisualData:J}=u,K=i.useCellPosition(e,b,f,m);h.value=J(0,F.value+M-1);const L=i.useVirtualScroll(e,r,h,b,u,F,M,n.ref(0),f,m),{renderTreeArea:U}=ee(e,o,h,K,R,r,G,w,k,C,P,L,u,B,I,f,m);return o.expose(H.value),()=>n.createVNode("div",{class:q.value,style:x.value,onWheel:D},[n.createVNode("div",{ref:S,class:V.value,onMouseover:()=>{a.value=!0},onMouseleave:()=>{a.value=!1}},[U(),E(),v()])])}});W.register=(e,o,m)=>{e["tree-view"]=W,o["tree-view"]=Y},W.registerDesigner=(e,o,m)=>{e["tree-view"]=me,o["tree-view"]=Y};const ye=T.withInstall(W);d.FTreeView=W,d.columnOptions=fe,d.default=ye,d.propsResolver=Y,d.treeViewProps=A,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});