@farris/ui-vue/components/combo-tree/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(p,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("lodash-es"),require("../button-edit/index.umd.js"),require("../dynamic-resolver/index.umd.js"),require("../tree-view/index.umd.js"),require("../input-group/index.umd.js"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es","../button-edit/index.umd.js","../dynamic-resolver/index.umd.js","../tree-view/index.umd.js","../input-group/index.umd.js","../common/index.umd.js"],t):(p=typeof globalThis<"u"?globalThis:p||self,t(p["combo-tree"]={},p.Vue,p.LodashES,p.FButtonEdit,p.dynamicResolver,p.FTreeView,p.inputGroup,p.common))})(this,function(p,t,P,A,E,$,U,W){"use strict";const _=new Map([["appearance",E.resolveAppearance]]),G={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/combo-list.schema.json",title:"combo-tree",description:"A Farris Input Component",type:"object",properties:{id:{description:"The unique identifier for a combo list",type:"string"},type:{description:"The type string of number combo list component",type:"string",default:"combo-tree"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},editable:{description:"",type:"boolean",default:!0},enableLinkLabel:{description:"",type:"boolean",default:!1},label:{description:"",type:"string",default:""},lableWidth:{description:"",type:"number"},placeholder:{description:"",type:"string",default:""},valueField:{description:"",type:"string",default:"id"},titleField:{description:"",type:"string",default:"name"},textField:{description:"",type:"string",default:"name"},data:{description:"",type:"array"},readonly:{description:"",type:"boolean",default:!1},required:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},textAlign:{description:"",type:"string",enum:["left","middle","right"],default:"left"},visible:{description:"",type:"boolean",default:!0},onBlur:{description:"",type:"string",default:""},onClickLinkLabel:{description:"",type:"string",default:""},formatter:{type:"object",default:null},customRowStatus:{type:"object",default:null},minPanelWidth:{description:"",type:"number",default:160},idField:{description:"",type:"string",default:"id"},multiSelect:{description:"",type:"boolean",default:!1},viewType:{description:"",type:"string",default:"text"},searchFields:{description:"",type:"array",default:[]},enableSearch:{description:"",type:"boolean",default:!1},displayFormatter:{type:"object",default:null},enableClear:{description:"",type:"boolean",default:!0}},required:["id","type"]};function z(e,u,h){return u}var H=(e=>(e.Text="text",e.Tag="tag",e))(H||{}),L=(e=>(e.top="top",e.bottom="bottom",e.auto="auto",e))(L||{});const D={id:{type:String},data:{type:Array,default:[]},displayText:{type:String,default:""},disabled:{type:Boolean,default:!1},dropDownIcon:{type:String,default:'<span class="f-icon f-icon-arrow-chevron-down"></span>'},editable:{type:Boolean,default:!1},enableClear:{type:Boolean,default:!0},enableSearch:{type:Boolean,default:!1},enableTitle:{type:Boolean,default:!0},fitEditor:{type:Boolean,default:!1},forcePlaceholder:{type:Boolean,default:!1},hidePanelOnClear:{type:Boolean,default:!0},idField:{type:String,default:"id"},mapFields:{type:Object},maxHeight:{type:Number,default:350},maxLength:{type:Number},multiSelect:{type:Boolean,default:!1},modelValue:{type:String,default:""},placeholder:{type:String},placement:{type:String,default:"auto"},readonly:{type:Boolean,default:!1},remoteSearch:{type:Boolean,default:!1},separator:{type:String,default:","},tabIndex:{type:Number,default:-1},textField:{type:String,default:"name"},titleField:{type:String,default:"name"},valueField:{type:String,default:"id"},viewType:{type:String,default:"text"},focusOnCreated:{type:Boolean,default:!1},selectOnCreated:{type:Boolean,default:!1},formatter:{type:Function,default:null},displayFormatter:{type:Function,default:null},editorParams:{type:Object},repositoryToken:{type:Symbol,default:null},customRowStatus:{type:Object,default:null},minPanelWidth:{type:Number,default:160},searchFields:{type:Array,default:["name"]}},q=E.createPropsResolver(D,G,_,z),J={data:{type:Array,default:[]},enableSearch:{type:Boolean,default:!1},idField:{type:String,default:"id"},multiSelect:{default:!1,type:Boolean},selectedValues:{type:String,default:""},separator:{type:String,default:","},textField:{type:String,default:"name"},titleField:{type:String,default:"name"},width:{type:Number},height:{type:Number,default:350},valueField:{type:String,default:"id"},formatter:{type:Function},maxHeight:{type:Number,default:350},repositoryToken:{type:Symbol,default:null},editorParams:{type:Object},customRowStatus:{type:Object,default:null},searchHandler:{type:Function,default:()=>{}}},K=t.defineComponent({name:"FComboTreeContainer",props:J,emits:["selectionChange","selectItem","unSelectItem","expandNode"],setup(e,u){const h=t.ref(e.data),y=t.ref([]),w=t.ref(e.separator),T=t.ref(e.width),I=t.ref(e.height),V=t.ref(e.maxHeight),v=t.ref(String(e.selectedValues).split(w.value)),g=t.ref(),C={customRowStatus:e.customRowStatus};t.watch(()=>e.selectedValues,a=>{v.value=String(a).split(w.value)}),t.watch(()=>e.data,a=>{var S;h.value=a,(S=g.value)==null||S.updateDataSource(a)});const l={enableSelectRow:!0,multiSelect:e.multiSelect,showCheckbox:e.multiSelect,multiSelectMode:"OnCheckAndClick"};let n=null;e.repositoryToken&&(n=t.inject(e.repositoryToken));const r=t.computed(()=>[{field:e.textField,title:"",dataType:"string",formatter:e.formatter}]),c=t.computed(()=>{const a={};return T.value!==void 0&&(a.width=`${T.value}px`),I.value!==void 0&&(a.height=`${I.value}px`),V.value!==void 0&&V.value>0&&(a.maxHeight=`${V.value}px`,a.overflow="auto"),h.value.length===0&&(a.height="200px"),a.position="relative",a});function s(a=[]){a&&a.length>0?(y.value=[...a],v.value=y.value.map(S=>S[e.idField])):(y.value=[],v.value=[]),u.emit("selectionChange",y.value)}t.onMounted(()=>{n&&n.getData(e.editorParams).then(a=>{h.value=a}),v.value&&g.value.activeRowById(v.value[0])});const b=a=>{g.value.selectItemByIds(a)};return u.expose({treeInstance:g,checkItems:b}),()=>t.createVNode("div",{class:"f-combo-tree-container d-flex flex-column",style:c.value},[e.enableSearch&&t.createVNode("div",{class:"p-2",style:"position: sticky;top:0;z-index: 2; background:white",onMousedown:a=>a.stopPropagation()},[t.createVNode(U.FInputGroup,{buttonContent:'<i class="f-icon f-icon-search"></i>',enableClear:!0,placeholder:"请输入搜索内容",onClear:()=>u.emit("clearSearch"),onInput:(a,S)=>e.searchHandler(S)},null)]),t.createVNode($,{ref:g,fit:!0,data:h.value,idField:e.idField,columns:r.value,"selection-values":v.value,onSelectionUpdate:s,columnOption:{fitColumns:!0,fitMode:"expand"},rowOption:C,autoHeight:!0,selection:l,rowNumber:{enable:!1},onSelectItem:a=>u.emit("selectItem",a.raw),onUnSelectItem:a=>u.emit("unSelectItem",a.raw),onExpandNode:a=>u.emit("expandNode",{node:a.row,treeRef:g.value})},null)])}});function Q(e){const u=t.ref(""),h=t.ref(e.modelValue),y=t.ref(e.data||[]),w=t.ref(e.editable);function T(l,n=[]){return l=l||[],l.reduce((r,c)=>(c.id=c.id||c.data[e.idField],r.push(c),c.children&&c.children.length&&T(c.children,r),r),n)}function I(l){const n=String(l).split(e.separator).map((b,a)=>[b,a]),r=new Map(n),c=[];return T(y.value,c),c.filter(b=>{const a=b.data?String(b.data[e.valueField]):String(b[e.valueField]);return r.has(a)}).map(b=>b.data?b.data:b).sort((b,a)=>{const S=r.get(String(b[e.valueField]))||0,N=r.get(String(a[e.valueField]))||0;return S-N})}function V(l){const n=I(l),r=e.displayFormatter?e.displayFormatter(n):n.map(c=>c[e.textField]).join(e.separator);u.value=w.value?r||l:r}function v(l){const n=l.split(e.separator).map(s=>[s,!0]),r=new Map(n);let c=[];return y.value[0].data?T(y.value,c):c=y.value,c=c.map(s=>s.data?s.data:s),c.filter(s=>r.has(s[e.textField])||r.has(s[e.valueField]))}function g(l){const n={};return n[e.idField]=l,n[e.textField]=l,[n]}function C(l){let n=v(l);const r=n&&n.length>0;return w.value&&!r&&(n=g(l)),n}return t.watch(()=>e.data,()=>{y.value=e.data}),t.watch([y],([l])=>{if(e.modelValue){const n=l.find(r=>r[e.valueField]===e.modelValue);n&&(u.value=n[e.textField])}}),t.watch(()=>e.modelValue,(l,n)=>{l!==n&&(h.value=l,V(l))}),V(e.modelValue),{dataSource:y,displayText:u,editable:w,modelValue:h,getItemsByDisplayText:v,getItemsByValue:I,getSelectedItemsByDisplayText:C,flatTreeNodes:T}}function X(e,u){const{comboEditorRef:h,dataSource:y,searchFields:w,originalValue:T,showPopover:I,flatTreeNodes:V,comboTreeRef:v}=e;let g=!1,C=null;function l(i,f){i.forEach(d=>{const F=f.find(j=>j.id===d.id);d.selectable=F.selectable!=null?!!F.selectable:!0,d.children&&l(d.children,f)})}function n(i,f){const d=(i.children||[]).map(j=>n(j,f)).filter(j=>j!==null);return w.value.some(j=>{var M;return(M=i.data[j])==null?void 0:M.toString().toLowerCase().includes(f.toLowerCase())})?{data:{...i.data},children:i.children,id:i.data[u]}:d.length>0?{data:{...i.data},children:d,id:i.data[u]}:null}function r(){T.value=P.cloneDeep(y.value)}function c(i){var d;if(I.value||(d=h.value)==null||d.showPopup(),!i){r();return}const f=y.value.map(F=>n(F,i)).filter(F=>F!==null);if(f.length){const F=[];V(y.value,F),l(f,F)}T.value=P.cloneDeep(f)}const s=P.debounce(i=>{var d;const f=(d=i.target)==null?void 0:d.value;c(f)},200);function b(i){var d;if(g)return;let f=(d=i.target)==null?void 0:d.value;f!==""&&(f=f.trim()),i.target._value!==f&&s(i)}function a(){g=!0}function S(i){var d;g=!1;const f=(d=i.target)==null?void 0:d.value;f!==""&&c(f.trim())}function N(){C&&(C.removeEventListener("compositionstart",a),C.removeEventListener("compositionend",S),C=null)}function O(){var f,d,F;N();const i=(F=(d=(f=v.value)==null?void 0:f.$el)==null?void 0:d.querySelector)==null?void 0:F.call(d,"input");i&&(C=i,i.addEventListener("compositionstart",a),i.addEventListener("compositionend",S))}return t.watch(()=>v.value,i=>{i?O():N()},{flush:"post"}),t.onUnmounted(()=>{N()}),{onValueChange:b,resetDataSource:r,setupCompositionEvents:O}}const R=t.defineComponent({name:"FComboTree",props:D,emits:["clear","update:modelValue","change","search","expandNode"],setup(e,u){const h=t.ref(),y=t.ref(e.disabled),w=t.ref(e.enableClear),T=t.ref(e.enableSearch),I=t.ref(e.readonly),V=t.ref(e.searchFields||[e.textField]),v=t.ref(),g=t.ref(),C=t.ref(!0);let l={};const{dataSource:n,displayText:r,editable:c,modelValue:s,flatTreeNodes:b}=Q(e),a=t.computed(()=>e.multiSelect);t.computed(()=>h.value?h.value.elementRef.getBoundingClientRect().width:0);const S=t.computed(()=>{var m;const o=(m=h.value)==null?void 0:m.popoverRef;return o?o.shown:!1}),{onValueChange:N,resetDataSource:O}=X({comboEditorRef:h,dataSource:n,searchFields:V,originalValue:v,showPopover:S,flatTreeNodes:b,comboTreeRef:g},e.idField);function i(){!a.value&&h.value&&C.value&&h.value.hidePopup()}const f=o=>{const m=o==null?void 0:o.map(x=>x.data||x);return e.displayFormatter?e.displayFormatter(m):m.map(x=>x[e.textField]).join(e.separator)};function d(o=[]){if(!a.value)r.value=f(o),s.value=o.map(m=>m.data?m.data[e.valueField]:m[e.valueField]).join(e.separator),u.emit("update:modelValue",s.value),u.emit("change",o,s.value);else{const m=Object.keys(l),x=Object.values(l);r.value=f(x),s.value=m.join(e.separator),u.emit("update:modelValue",s.value),u.emit("change",x,s.value)}i()}function F(o){var m;s.value="",l={},S.value&&((m=h.value)==null||m.hidePopup()),u.emit("update:modelValue",""),u.emit("change",null,s.value),u.emit("clear")}function j(o){a.value&&(delete l[o.id],d())}function M(o){a.value&&(l[o.id]=o,d())}t.watch([()=>e.disabled,()=>e.editable,()=>e.enableClear,()=>e.enableSearch,()=>e.readonly],([o,m,x,B,k])=>{y.value=o,c.value=m,w.value=x,T.value=B,I.value=k});const Z=()=>{if(v.value=P.cloneDeep(n.value),a.value&&s.value){const o=[];b(n.value,o),s.value.split(e.separator).reduce((m,x)=>(m[x]=o.find(B=>B.id===x),m),l)}};function ee(){C.value=!1,O(),setTimeout(()=>{var o;(o=g.value)==null||o.checkItems(s.value.split(e.separator)),C.value=!0},10)}function te(o){const{node:m,treeRef:x}=o,{data:B}=m.raw,k=m.raw;u.emit("expandNode",{data:B,treeRef:x,treeNode:k})}return()=>t.createVNode(A,{ref:h,id:e.id,disable:y.value,readonly:I.value,forcePlaceholder:e.forcePlaceholder,editable:c.value&&!e.multiSelect,buttonContent:e.dropDownIcon,placeholder:e.placeholder,enableClear:w.value,maxLength:e.maxLength,tabIndex:e.tabIndex,enableTitle:e.enableTitle,inputType:e.viewType,popupOnClick:!0,modelValue:r.value,"onUpdate:modelValue":o=>r.value=o,onClear:F,onInput:N,focusOnCreated:e.focusOnCreated,selectOnCreated:e.selectOnCreated,beforeOpen:Z,placement:e.placement,popupMinWidth:e.minPanelWidth},{default:()=>[S.value&&t.createVNode(K,{ref:g,maxHeight:e.maxHeight,multiSelect:e.multiSelect,enableSearch:e.enableSearch,idField:e.idField,valueField:e.valueField,textField:e.textField,titleField:e.titleField,data:v.value,selectedValues:s.value,onSelectionChange:d,formatter:e.formatter,editorParams:e.editorParams,repositoryToken:e.repositoryToken,customRowStatus:e.customRowStatus,searchHandler:N,onUnSelectItem:j,onSelectItem:M,onClearSearch:ee,onExpandNode:te},null)]})}});R.register=(e,u,h,y)=>{e["combo-tree"]=R,u["combo-tree"]=q};const Y=W.withInstall(R);p.FComboTree=R,p.Placement=L,p.ViewType=H,p.comboTreeProps=D,p.default=Y,p.propsResolver=q,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});