@farris/ui-vue/components/search-box/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../button-edit/index.umd.js"),require("../dynamic-resolver/index.umd.js"),require("../list-view/index.umd.js"),require("../loading/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../button-edit/index.umd.js","../dynamic-resolver/index.umd.js","../list-view/index.umd.js","../loading/index.umd.js","../designer-canvas/index.umd.js"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i["search-box"]={},i.Vue,i.FButtonEdit,i.dynamicResolver,i.FListView,i.FLoading,i.designerCanvas))})(this,function(i,t,S,F,j,w,R){"use strict";const v=new Map([["appearance",F.resolveAppearance]]),O={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/search-box.schema.json",title:"search-box",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for a search-box",type:"string"},type:{description:"The type string of search-box component",type:"string",default:"search-box"},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}},required:["id","type"]};function P(e,a,l){return a}const $={title:"search-box",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:[]}}}}}},x={buttonContent:{type:String,default:'<i class="f-icon f-icon-search"></i>'},customClass:{type:String,default:""},modelValue:{type:String,default:""},popupHost:{type:Object},popupRightBoundary:{type:Object},popupOffsetX:{type:Object},data:{type:Array,default:[]},placeholder:{type:String,default:"请输入关键词"},idField:{default:"id",type:String},textField:{default:"name",type:String},maxHeight:{default:350,type:Number},loading:{default:!1,type:Boolean},disable:{default:!1,type:Boolean},showDropdown:{default:!0,type:Boolean},updateOn:{default:"change",type:String}},C=F.createPropsResolver(x,O,v,P,$),N={data:{type:Array,default:[]},onConfirmResult:{type:Function,default:()=>{}},onSearchedValue:{type:Function,default:()=>{}},idField:{default:"id",type:String},textField:{default:"name",type:String},maxHeight:{default:350,type:Number},loading:{default:!1,type:Boolean}},B=t.defineComponent({name:"FSearchBoxContainer",props:N,emits:["confirmResult","searchedValue"],setup(e,a){const l=t.ref(e.data),c=t.ref(),{slots:f}=a,h=t.computed(()=>({"search-box-container":!0,"f-utils-overflow-xhya":!0,"position-relative":!0}));function g(n){var p;(p=c.value)==null||p.search(n)}function r(n){n.length&&(a.emit("confirmResult",n[0][e.textField]),a.emit("searchedValue",n))}function m(n){return f.default?t.createVNode(t.Fragment,null,[f.default(n)]):t.createVNode("span",null,[n.item[e.textField]])}const y=t.computed(()=>{const n={};return n.padding="8px",e.maxHeight!==void 0&&e.maxHeight>0&&(n.maxHeight=`${e.maxHeight}px`),n});return t.watch(()=>e.loading,n=>{}),t.watch(()=>e.data,n=>{n!==l.value&&(l.value=n),c.value.updateDataSource(n)}),a.expose({search:g}),()=>{const n={content:m};return t.createVNode("div",{class:h.value,style:y.value},[t.createVNode(w,{ref:"loadingInstance",isActive:e.loading},null),t.createVNode(j,{ref:c,itemClass:"dropdown-item",data:l.value,view:"ContentView",onClickItem:p=>r(p.data),idField:e.idField,textField:e.textField,titleField:e.textField,valueField:e.idField},n)])}}}),u=t.defineComponent({name:"FSearchBox",props:x,emits:["update:modelValue","change","selectedValue","clickButton"],setup(e,a){t.ref(e.data);const l=t.ref(),c=t.ref(),f=t.ref(e.placeholder),h='<i class="f-icon f-icon-clockwise f-icon-spin"></i>',g=t.computed(()=>e.loading?h:e.buttonContent);t.ref(e.editable);const r=t.ref(e.modelValue);t.watch(r,o=>{var s;(s=c.value)==null||s.search(o),a.emit("update:modelValue",o)}),t.watch(()=>e.modelValue,o=>{r.value=o});function m(o){l.value.commitValue(o)}function y(o){const s=r.value;a.emit("change",o,{oldValue:s,newValue:o})}function n(o){a.emit("selectedValue",o)}function p(o){a.emit("clickButton",o)}function V(){var o;(o=l.value)==null||o.togglePopup()}function d(){var o;(o=l.value)==null||o.hidePopup()}function b(){var o;(o=l.value)==null||o.showPopup()}return a.expose({togglePopup:V,hidePopup:d,showPopup:b}),()=>{const o={default:a.slots.default};return t.createVNode(S,{ref:l,"button-content":g.value,"custom-class":e.customClass,updateOn:e.updateOn,placeholder:f.value,onChange:s=>y(s),onClickButton:s=>p(s),disable:e.disable,"enable-clear":!0,"button-behavior":"Execute",modelValue:r.value,"onUpdate:modelValue":s=>r.value=s,"popup-host":e.popupHost,"popup-right-boundary":e.popupRightBoundary,"popup-offset-x":e.popupOffsetX,"popup-on-input":e.showDropdown,"popup-on-focus":e.showDropdown,limitContentBySpace:!0,placement:"auto"},{default:()=>[e.showDropdown&&t.createVNode(B,{ref:c,data:e.data,idField:e.idField,textField:e.textField,onConfirmResult:m,onSearchedValue:s=>n(s),loading:e.loading,maxHeight:e.maxHeight},o)],...a.slots})}}}),q=t.defineComponent({name:"FSearchBoxDesign",props:x,emits:["update:modelValue","change"],setup(e,a){const l=t.ref(e.data),c=t.ref(),f=t.ref(),h=t.ref("请输入关键词"),g=t.ref('<i class="f-icon f-icon-search"></i>'),r=t.ref(e.modelValue),m=t.ref(),y=t.inject("design-item-context"),n=R.useDesignerComponent(m,y);t.onMounted(()=>{m.value.componentInstance=n}),a.expose(n.value),t.watch(r,d=>{var b;(b=f.value)==null||b.search(d),a.emit("update:modelValue",d)}),t.watch(()=>e.modelValue,d=>{r.value=d});function p(d){c.value.commitValue(d)}function V(d){a.emit("change",d)}return()=>t.createVNode("div",{ref:m},[t.createVNode(t.resolveComponent("f-button-edit"),{ref:c,"button-content":g.value,placeholder:h.value,onChange:V,"enable-clear":!0,"button-behavior":"Execute",modelValue:r.value,"onUpdate:modelValue":d=>r.value=d,"popup-host":e.popupHost,"popup-right-boundary":e.popupRightBoundary,"popup-offset-x":e.popupOffsetX,"popup-on-input":!0,"popup-on-focus":!0},{default:()=>[t.createVNode(B,{ref:f,data:l.value,onConfirmResult:p},null)]})])}});u.install=e=>{e.component(u.name,u)},u.register=(e,a,l,c)=>{e["search-box"]=u,a["search-box"]=C},u.registerDesigner=(e,a,l)=>{e["search-box"]=q,a["search-box"]=C},i.FSearchBox=u,i.default=u,i.propsResolver=C,i.searchBoxProps=x,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});