@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 17.9 kB
JavaScript
(function(g,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("vue-i18n"),require("../button-edit/index.umd.js"),require("../dynamic-resolver/index.umd.js"),require("lodash-es"),require("../list-view/index.umd.js"),require("../../designer/button-edit/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../common/index.umd.js"),require("../property-panel/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","vue-i18n","../button-edit/index.umd.js","../dynamic-resolver/index.umd.js","lodash-es","../list-view/index.umd.js","../../designer/button-edit/index.umd.js","../designer-canvas/index.umd.js","../common/index.umd.js","../property-panel/index.umd.js"],i):(g=typeof globalThis<"u"?globalThis:g||self,i(g["combo-list"]={},g.Vue,g.vueI18n,g.FButtonEdit,g.dynamicResolver,g.LodashES,g.FListView,g.FButtonEditDesign,g.designerCanvas,g.common,g.propertyPanel))})(this,function(g,i,E,M,j,q,$,N,G,H,W){"use strict";const J=new Map([["appearance",j.resolveAppearance]]),U={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/combo-list.schema.json",title:"combo-list",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-list"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disabled:{description:"",type:"boolean",default:!1},enableClear:{description:"",type:"boolean",default:!1},editable:{description:"",type:"boolean",default:!1},enableLinkLabel:{description:"",type:"boolean",default:!1},label:{description:"",type:"string",default:""},lableWidth:{description:"",type:"number"},placeholder:{description:"",type:"string",default:"请选择"},idField:{description:"",type:"string",default:"id"},valueField:{description:"",type:"string",default:"id"},titleField:{description:"",type:"string",default:"name"},textField:{description:"",type:"string",default:"name"},dataSourceType:{description:"",type:"string",default:"static"},data:{description:"",type:"array"},remote:{description:"",type:"string"},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"},multiSelect:{description:"",type:"boolean",default:!1},maxLength:{description:"",type:"number",default:null},visible:{description:"",type:"boolean",default:!0},onBlur:{description:"",type:"string",default:""},onClickLinkLabel:{description:"",type:"sting",default:""},maxHeight:{description:"",type:"number",default:350},minPanelWidth:{description:"",type:"number",default:160},popupOnClick:{description:"",type:"boolean",default:!0},separator:{description:"",type:"string",default:","},viewType:{description:"",type:"string",default:"tag"},enableSearch:{description:"启用搜索",type:"boolean",default:!0},enableHighlightSearch:{description:"启用高亮搜索",type:"boolean",default:!1}},required:["type"],ignore:["id","appearance","binding","visible"]};function _(e,t,l){return t}var k=(e=>(e.top="top",e.bottom="bottom",e.auto="auto",e))(k||{});const B={id:{type:String},data:{type:Array,default:[]},disabled:{default:!1,type:Boolean},dropDownIcon:{type:String,default:'<span class="f-icon f-icon-arrow-chevron-down"></span>'},editable:{default:!1,type:Boolean},enableClear:{default:!0,type:Boolean},enableSearch:{type:Boolean,default:!1},enableTitle:{default:!0,type:Boolean},fitEditor:{default:!1,type:Boolean},forcePlaceholder:{default:!1,type:Boolean},hidePanelOnClear:{default:!0,type:Boolean},idField:{default:"id",type:String},mapFields:{type:Object},maxHeight:{default:350,type:Number},maxLength:{type:Number},multiSelect:{type:Boolean,default:!1},modelValue:{},placeholder:{type:String,default:"请选择"},placement:{type:String,default:"auto"},readonly:{default:!1,type:Boolean},remote:{default:null,type:Object},remoteSearch:{default:!1,type:Boolean},separator:{default:",",type:String},tabIndex:{type:Number,default:-1},textField:{default:"name",type:String},titleField:{default:"name",type:String},valueField:{default:"id",type:String},viewType:{default:"tag",type:String},change:{type:Function,default:()=>{}},focusOnCreated:{type:Boolean,default:!1},selectOnCreated:{type:Boolean,default:!1},autoHeight:{type:Boolean,default:!0},beforeOpen:{type:Function,default:null},searchOption:{type:[Boolean,Function],default:!1},enableHighlightSearch:{type:Boolean,default:!0},minPanelWidth:{type:Number,default:160},popupOnClick:{type:Boolean,default:!0}},A=Object.assign({},B,{readonly:{}}),L=j.createPropsResolver(B,U,J,_),z={dataSource:{type:Array,default:[]},enableSearch:{type:Boolean,default:!1},idField:{type:String,default:"id"},multiSelect:{type:Boolean,default:!1},selectedValues:{type:String,default:""},separator:{type:String,default:","},textField:{type:String,default:"name"},titleField:{type:String,default:"name"},width:{type:Number},maxHeight:{type:Number},valueField:{type:String,default:"id"},onSelectionChange:{type:Function,default:()=>{}},searchOption:{type:[Boolean,Function],default:!1},enableHighlightSearch:{type:Boolean,default:!0}},K=i.defineComponent({name:"FComboListContainer",props:z,emits:["selectionChange"],setup(e,t){const l=i.ref(),o=i.ref(e.dataSource),a=i.ref([]),f=i.ref(e.separator),b=i.ref(e.width),m=i.ref(e.maxHeight),u=i.ref(String(e.selectedValues).split(f.value)),x=i.computed(()=>e.multiSelect),h=i.computed(()=>({enableSelectRow:!0,multiSelect:e.multiSelect,multiSelectMode:"OnCheckAndClick",showCheckbox:x.value,showSelectAll:!1,showSelection:!0}));i.watch(e.dataSource,()=>{o.value=e.dataSource}),i.computed(()=>e.enableSearch?"SearchBar":"ContentHeader");const S=i.computed(()=>{const c={};return b.value!==void 0&&(c.width=`${b.value}px`),m.value!==void 0&&m.value>0&&(c.maxHeight=`${m.value}px`),c});function n(c){l.value.search(c)}function d(c){a.value=c.map(y=>Object.assign({},y)),u.value=c.map(y=>y[e.idField]),t.emit("selectionChange",a.value)}function v(c){if(e.enableHighlightSearch)return;let y=[];const{searchOption:r}=e;typeof r=="function"?y=o.value.filter(F=>r(c,F)):y=o.value.filter(F=>F[e.valueField].indexOf(c)>-1||F[e.textField].indexOf(c)>-1),l.value.updateDataSource(y)}i.watch([()=>e.selectedValues],([c])=>{e.multiSelect?u.value=c.split(f.value):u.value=[c]});function C(c){l.value.activeRowById(c)}return i.onMounted(()=>{var c,y;if(!e.multiSelect){const r=(c=u.value)==null?void 0:c[0];let F=r;if(!q.isUndefined(r)){const w=typeof r,T=typeof((y=o.value[0])==null?void 0:y[e.valueField||e.idField]);T==="number"&&w!==T&&(F=Number(r)),T==="boolean"&&w!==T&&(F=r==="true"?!0:r==="false"?!1:r),C(F)}}}),t.expose({search:n,activeRowById:C}),()=>i.createVNode("div",{class:"f-combo-list-container",style:S.value},[i.createVNode($,{ref:l,size:"small",itemClass:"f-combo-list-item",itemContentClass:"text-truncate",header:"ContentHeader",headerClass:"f-combo-list-search-box",data:o.value,idField:e.idField,textField:e.textField,titleField:e.titleField,multiSelect:e.multiSelect,selection:h.value,enableHighlightSearch:e.enableHighlightSearch,selectionValues:u.value,onSelectionChange:d,onAfterSearch:v},null)])}});function Q(e){const{t}=E.useI18n(),l=i.ref(""),o=i.ref(e.modelValue),a=i.ref(e.data||[]),f=i.ref(e.editable);function b(n){const d=e.multiSelect?String(n).split(e.separator):[String(n)],v=d.map(y=>[y,!0]),C=new Map(v);return a.value.filter(y=>C.has(String(y[e.valueField]))).sort((y,r)=>{const F=d.indexOf(y[e.valueField]),w=d.indexOf(r[e.valueField]);return F-w})}function m(n){const d=b(n).map(v=>v[e.textField]).join(e.separator);l.value=f.value?d||n:d}function u(n){if(e.multiSelect){const d=n.split(e.separator).map(C=>[C,!0]),v=new Map(d);return a.value.filter(C=>v.has(C[e.textField]))}return a.value.filter(d=>""+d[e.textField]===n)}function x(n){const d={};return d[e.idField]=n,d[e.textField]=n,[d]}function h(n){let d=u(n);const v=d&&d.length>0;return f.value&&!v&&(d=x(n)),d}function S(){const{url:n,method:d="GET",headers:v={"Content-Type":"application/json;charset=utf-8;"},body:C=null}=e.remote,c=d.toLowerCase()==="get"?{method:d,headers:v}:{method:d,headers:v,body:C};let y=!1;fetch(new Request(n,c)).then(r=>{var w,T;if(r.status===200)return y=!!((T=(w=r.headers)==null?void 0:w.get("content-type"))!=null&&T.includes("application/json")),y?r.text():r.json();throw r.status===405?new Error(t("comboList.remoteError")):new Error(r.statusText)}).then(r=>{r.length&&(a.value=y?JSON.parse(r):r)}).catch(r=>{console.warn(r)})}return e.remote&&S(),i.watch(()=>e.data,()=>{a.value=e.data}),i.watch([a],([n])=>{if(e.modelValue!=null){const d=n.find(v=>v[e.valueField]===e.modelValue);d&&(l.value=d[e.textField])}}),i.watch(()=>e.modelValue,n=>{o.value=n,m(n)}),m(e.modelValue),{dataSource:a,displayText:l,editable:f,modelValue:o,getItemsByDisplayText:u,getItemsByValue:b,getSelectedItemsByDisplayText:h}}const P=i.defineComponent({name:"FComboList",props:B,emits:["clear","update:modelValue","change","input"],setup(e,t){const{t:l}=E.useI18n(),o=i.ref(),a=i.ref(),f=i.ref(e.disabled||e.readonly),b=i.ref(e.enableClear),m=i.ref(e.enableSearch),u=i.ref(e.readonly),{dataSource:x,displayText:h,editable:S,modelValue:n,getSelectedItemsByDisplayText:d,getItemsByDisplayText:v}=Q(e),C=i.ref(e.dropDownIcon);C.value==='<span class="f-icon f-icon-arrow-chevron-down"></span>'&&(C.value='<span id="'+e.id+'-icon-dropdown" class="f-icon f-icon-arrow-chevron-down"></span>');const c=i.computed(()=>e.multiSelect),y=i.computed(()=>a.value?a.value.elementRef.getBoundingClientRect().width:0);function r(){!c.value&&a.value&&a.value.hidePopup()}function F(s){h.value=s.map(V=>V[e.textField]).join(e.separator);let p="";s.length===1?p=s[0][e.valueField]:p=s.map(V=>V[e.valueField]).join(e.separator),n.value!==p&&(n.value=p,t.emit("update:modelValue",n.value),t.emit("change",s,n.value))}function w(){const s=d(h.value);F(s)}function T(){u.value||h.value}function ee(s){var p;n.value="",(p=o.value)==null||p.activeRowById(""),t.emit("update:modelValue",""),t.emit("change",[],""),t.emit("clear")}function te(s){var p,V;e.enableSearch?((p=o.value)==null||p.search(s),(V=o.value)==null||V.activeRowById(s)):(n.value=s,h.value=s,t.emit("update:modelValue",n.value),t.emit("change",[s],s))}function ie(s){if(e.multiSelect){const p=v(s),I=p.map(R=>R[e.idField||e.valueField]).join(e.separator);n.value!==I&&(n.value=I,t.emit("update:modelValue",n.value),t.emit("change",p,n.value))}}function le(){return h.value}function ne(s){const{value:p}=s.target;te(p),t.emit("input",p)}function ae(){a.value.hidePopup()}return t.expose({getDisplayText:le,hidePopup:ae}),i.watch([()=>e.disabled,()=>e.editable,()=>e.enableClear,()=>e.enableSearch,()=>e.readonly],([s,p,V,I,R])=>{f.value=s,S.value=p,b.value=V,m.value=I,u.value=R}),()=>i.createVNode(M,{ref:a,id:e.id,disable:f.value,readonly:u.value,forcePlaceholder:e.forcePlaceholder,editable:S.value,buttonContent:C.value,placeholder:e.placeholder==="请选择"?l("comboList.placeholder"):e.placeholder,enableClear:b.value,maxLength:e.maxLength,tabIndex:e.tabIndex,enableTitle:e.enableTitle,multiSelect:e.multiSelect,inputType:e.multiSelect?e.viewType:"text",modelValue:h.value,"onUpdate:modelValue":s=>h.value=s,focusOnCreated:e.focusOnCreated,selectOnCreated:e.selectOnCreated,onClear:ee,onClick:T,onChange:ie,onBlur:w,onInput:ne,beforeOpen:e.beforeOpen,placement:e.placement,popupMinWidth:e.minPanelWidth,popupClass:"f-combo-list-wrapper",popupOnClick:e.popupOnClick,limitContentBySpace:!0},{default:()=>[i.createVNode(K,{ref:o,idField:e.idField,valueField:e.valueField,textField:e.textField,titleField:e.titleField,dataSource:x.value,selectedValues:n.value,separator:e.separator,multiSelect:e.multiSelect,enableSearch:m.value,maxHeight:e.maxHeight,enableHighlightSearch:e.enableHighlightSearch,width:e.fitEditor?y.value:void 0,onSelectionChange:s=>{F(s),r()}},null)]})}}),O={convertFrom:(e,t)=>(e.editor.remote||{})[t],convertTo:(e,t,l)=>{e.editor.remote=e.editor.remote||{},e.editor.remote[t]=l}};class X extends W.InputBaseProperty{constructor(t,l){super(t,l)}getCommonEditorProperties(t){var l,o,a,f;return{separator:{visible:!!((l=t.editor)!=null&&l.multiSelect)&&((o=t.editor)==null?void 0:o.viewType)==="text",description:"下拉列表启用多选且数据展示类型为文本时的分隔符",title:"分隔符",type:"string"},viewType:{visible:!!((a=t.editor)!=null&&a.multiSelect),description:"数据展示类型，有标签和文本两种方式",title:"数据展示类型",type:"enum",editor:{data:[{id:"tag",name:"标签"},{id:"text",name:"文本"}]},refreshPanelAfterChanged:!0},editable:{description:"",title:"允许编辑",type:"boolean",refreshPanelAfterChanged:!0},enableHighlightSearch:{visible:!!((f=t.editor)!=null&&f.editable),description:"编辑状态下启用高亮搜索",title:"启用高亮搜索",type:"boolean"}}}getEditorProperties(t){var f,b;const l=this;let o="";if(((f=t==null?void 0:t.binding)==null?void 0:f.type)==="Form"){const m=this.schemaService.getFieldByIDAndVMID(t.binding.field,this.viewModelId);(b=m==null?void 0:m.schemaField)!=null&&b.type&&(o=m.schemaField.type.$type)}return l.getComponentConfig(t,{type:"combo-list"},{enableClear:{description:"",title:"启用清空",type:"boolean"},dataSourceType:{description:"",title:"数据源类型",type:"enum",editor:{default:"static",data:[{id:"static",name:"静态"},{id:"dynamic",name:"动态"}]},refreshPanelAfterChanged:!0},data:{description:"",title:"数据",type:"array",visible:!t.editor.dataSourceType||t.editor.dataSourceType==="static",...l.getItemCollectionEditor(t,t.editor.valueField,t.editor.textField),refreshPanelAfterChanged:!0},url:{visible:t.editor.dataSourceType==="dynamic",$converter:O,description:"",title:"服务端API",type:"string"},body:{visible:t.editor.dataSourceType==="dynamic",$converter:O,description:"",title:"服务端API参数",type:"string"},textField:{description:"",title:"数据源显示字段",type:"string",readonly:t.editor.dataSourceType!=="dynamic"},valueField:{description:"",title:"数据源值字段",type:"string",readonly:t.editor.dataSourceType!=="dynamic"},multiSelect:{description:"",title:"启用多选",visible:!o||o==="StringType",type:"boolean",refreshPanelAfterChanged:!0},maxLength:{description:"",title:"最大输入长度",type:"number",editor:{nullable:!0,min:0,useThousands:!1}},...this.getCommonEditorProperties(t)},(m,u)=>{if(!m||!u.editor)return;const x=this;switch(m.propertyID){case"dataSourceType":{m.propertyValue==="static"?(u.editor.valueField="value",u.editor.textField="name",u.editor.remote=null):m.propertyValue==="dynamic"&&(u.editor.remote={method:"GET"},u.editor.valueField="value",u.editor.textField="name");break}case"data":{!x.checkEnumDataReadonly(u)&&u.formatter&&(u.formatter.data=[...m.propertyValue]);break}}})}getGridFieldEdtiorProperties(t,l){var b,m,u,x;const o=this;let a="";if(((b=t==null?void 0:t.binding)==null?void 0:b.type)==="Form"){const h=this.schemaService.getFieldByIDAndVMID(t.binding.field,this.viewModelId);(m=h==null?void 0:h.schemaField)!=null&&m.type&&(a=h.schemaField.type.$type)}return o.getComponentConfig(t,{type:"combo-list"},{enableClear:{description:"",title:"启用清空",type:"boolean"},data:{description:"",title:"数据",type:"array",visible:!0,...o.getItemCollectionEditor(t,(u=t.editor)==null?void 0:u.valueField,(x=t.editor)==null?void 0:x.textField),refreshPanelAfterChanged:!0},textField:{description:"",title:"数据源显示字段",type:"string",readonly:!0},valueField:{description:"",title:"数据源值字段",type:"string",readonly:!0},multiSelect:{description:"",title:"启用多选",visible:a==="StringType",type:"boolean",refreshPanelAfterChanged:!0},maxLength:{description:"",title:"最大输入长度",type:"number",editor:{nullable:!0,min:0,useThousands:!1}},...this.getCommonEditorProperties(t)},(h,S)=>{if(!h||!S.editor)return;const n=this;switch(h.propertyID){case"dataSourceType":{h.propertyValue==="static"?(S.editor.valueField="value",S.editor.textField="name",S.editor.remote=null):h.propertyValue==="dynamic"&&(S.editor.remote={method:"GET"});break}case"data":{!n.checkEnumDataReadonly(S)&&S.formatter&&(S.formatter.data=[...h.propertyValue]);break}}})}setEditorPropertyRelates(t,l,o){if(!t||!l.editor)return;const a=this;switch(t.propertyID){case"dataSourceType":{t.propertyValue==="static"&&(l.editor.valueField="value",l.editor.textField="name",l.editor.remote={});break}case"data":{!a.checkEnumDataReadonly(l)&&l.formatter&&(l.formatter.data=[...t.propertyValue]);break}}}changeBindingField(t,l,o){var f;super.changeBindingField(t,l);const a=o;t.editor&&((f=a==null?void 0:a.type)==null?void 0:f.$type)===H.FormSchemaEntityFieldType$Type.EnumType&&(t.editor.data=a.type.enumValues||[])}}function Y(e,t){const l=e.schema;function o(a,f){return new X(a,t).getPropertyConfig(l,f)}return{getPropsConfig:o}}const Z=i.defineComponent({name:"FComboListDesign",props:A,emits:["clear","update:modelValue","change"],setup(e,t){const l=i.ref(),o=i.inject("designer-host-service"),a=i.inject("design-item-context"),f=Y(a,o),b=G.useDesignerComponent(l,a,f);return i.onMounted(()=>{l.value.componentInstance=b}),t.expose(b.value),()=>i.createVNode(N,{ref:l,buttonContent:e.dropDownIcon,readonly:!0,editable:!1,forcePlaceholder:!0,placeholder:e.placeholder,enableClear:!0},null)}});P.register=(e,t,l,o)=>{e["combo-list"]=P,t["combo-list"]=L},P.registerDesigner=(e,t,l)=>{e["combo-list"]=Z,t["combo-list"]=L};const D=H.withInstall(P);g.FComboList=P,g.Placement=k,g.comboListDesignProps=A,g.comboListProps=B,g.default=D,g.propsResolver=L,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});