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

Farris Vue, a Farris Design based Vue3 component library.

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