@farris/ui-vue/components/button-group/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../button/index.umd.js"),require("../dynamic-resolver/index.umd.js"),require("../popover/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../button/index.umd.js","../dynamic-resolver/index.umd.js","../popover/index.umd.js","../designer-canvas/index.umd.js","../common/index.umd.js"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s["button-group"]={},s.Vue,s.FButton,s.dynamicResolver,s.FPopover,s.designerCanvas,s.common))})(this,function(s,t,C,D,j,N,V){"use strict";const x={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/button-group.schema.json",title:"button-group",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for button-group",type:"string"},type:{description:"The type string of button-group",type:"string",default:"button-group"},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,i,c){return i}const S=new Map([["appearance",D.resolveAppearance]]),$={title:"button-group",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:[]}}}}}},v={id:String,data:{type:Array,default:[]},disabled:{type:Boolean,default:!1},count:{type:Number,default:2},mode:{type:String,default:"default"},size:{type:String,default:"middle"},type:{type:String,default:"primary"},placement:{type:String,default:"bottom-left"}},k=D.createPropsResolver(v,x,S,P,$);function G(e,i,c){const a=t.ref(),r=t.ref(!1),u=t.ref(),d=t.ref(!1);function g(){const y=a.value;y&&y.show(c.value)}async function p(){r.value=!r.value,await t.nextTick(),g()}function f(){r.value=!1,i.emit("changeState",r.value)}function n(y){y.stopPropagation(),p(),i.emit("changeState",r.value)}function l(y,B){y.stopPropagation(),!B.disabled&&(r.value=!1,i.emit("change",{payload:y,button:B}),i.emit("click",{payload:y,button:B}))}function m(){r.value&&(u.value=setTimeout(()=>{d.value||f()},1e3))}function o(){u.value&&(clearTimeout(u.value),u.value=null)}function b(y){d.value=!0}function M(y){d.value=!1,m()}return{hidePopup:f,onClickDropdownButton:n,onClickDropdownMenuItem:l,onMouseleaveDropdownButton:m,onMouseenterDropdownButton:o,onMouseenterDropMenu:b,onMouseleaveDropMenu:M,popoverRef:a,shouldPopupContent:r,togglePopup:p}}function R(e,i,c){const{hidePopup:a,onClickDropdownMenuItem:r,popoverRef:u,onMouseenterDropMenu:d,onMouseleaveDropMenu:g}=c;function p(n){return t.createVNode(t.Fragment,null,[n.divider&&t.createVNode("div",{class:"dropdown-divider"},null),t.createVNode("div",{id:n.id,class:"dropdown-item"+(n.disabled?" disabled":""),onClick:l=>r(l,n)},[n.icon&&t.createVNode("i",{class:"f-icon dropdown-item-icon"+n.icon},null),t.createVNode("span",null,[n.text])])])}function f(n){return t.createVNode(j,{id:`${e.id}-popover`,ref:u,visible:!0,placement:e.placement,host:"body",fitContent:!0,onHidden:a,minWidth:120},{default:()=>[t.createVNode("div",{class:"bg-white",onMouseenter:d,onMouseleave:g},[n.map(l=>p(l))])]})}return{renderDropdownMenu:f}}function w(e,i){const c=t.ref(),a=t.ref(),r=G(e,i,a),{onMouseleaveDropdownButton:u,onMouseenterDropdownButton:d,onClickDropdownButton:g,shouldPopupContent:p}=r,{renderDropdownMenu:f}=R(e,c,r),n=()=>({"margin-bottom":"2px"});function l(m){return t.createVNode("div",{class:"btn-group f-btn-group-dropdown",ref:c,onMouseleave:u,onMouseenter:d,style:n},[t.createVNode("button",{ref:a,type:"button",class:"f-btn-dropdown",onClick:g},[t.createVNode("span",{class:"f-icon f-icon-lookup"},null)]),p.value&&f(m)])}return{renderDropdownButton:l}}const h=t.defineComponent({name:"FButtonGroup",props:v,emits:["click","change","changeState"],setup(e,i){const c=t.ref(),a=e.data&&e.data.slice(0,e.count)||[],r=e.data&&e.data.slice(e.count)||[],u=o=>o.type||e.type,d=o=>o.disabled!==void 0?o.disabled:e.disabled,g=function(o){const b={"f-btn-ml":(o.type&&o.type!=="link"||e.type!=="link")&&e.mode==="default","btn-link":!o.type&&!e.type||e.type==="link"||o.type==="link"},M=o.type?o.type:e.type&&e.type!=="link"?e.type:"";return M&&(b[`btn-${M}`]=!0),b},p=function(){return{"position-relative":!0,"btn-group":e.mode==="group","f-btn-group-links":e.type==="link"}},f=()=>({display:"inline-flex","vertical-align":"middle","margin-bottom":"2px"});function n(o,b){i.emit("change",{payload:o,button:b}),i.emit("click",{payload:o,button:b})}function l(o){return t.createVNode(C,{disabled:d(o),id:o.id,icon:o.icon,size:e.size,type:u(o),customClass:g(o),onClick:b=>n(b,o)},{default:()=>[o.text]})}const{renderDropdownButton:m}=w(e,i);return()=>t.createVNode("div",{class:"f-btn-group",style:"position:relative;",ref:c},[t.createVNode("div",{class:p(),style:f()},[a.map(o=>l(o))]),!!r.length&&m(r)])}}),F=t.defineComponent({name:"FButtonGroupDesign",props:v,emits:["click","changeState","change","clickMenuOut"],setup(e,i){const c=t.ref(),a=t.inject("design-item-context"),r=N.useDesignerComponent(c,a);t.onMounted(()=>{c.value.componentInstance=r}),i.expose(r.value);const u=e.data&&e.data.slice(0,e.count)||[],d=e.data&&e.data.slice(e.count)||[],g=function(n){const l={btn:!0,"f-btn-ml":n.type&&n.type!=="link","btn-link":!!n.icon||!n.type,"btn-icontext":!!n.icon,disabled:n.disabled};return n.type&&(l[`btn-${n.type}`]=!0),l};function p(n){return t.createVNode("div",null,[t.createVNode("button",{type:"button",id:n.id,title:n.id,class:g(n)},[n.icon&&t.createVNode("i",{class:`f-icon ${n.icon}`},null),!n.icon&&n.text])])}const{renderDropdownButton:f}=w(e,i);return()=>t.createVNode("div",{class:"f-btn-group",style:"position:relative;",ref:c},[t.createVNode("div",{class:(e.size==="large"?"btn-group-lg":"btn-group-sm")+" btn-group f-btn-group-links"},[u.map(n=>p(n))]),!!d.length&&f(d)])}});h.register=(e,i,c,a)=>{e["button-group"]=h,i["button-group"]=k},h.registerDesigner=(e,i,c)=>{e["button-group"]=F,i["button-group"]=k};const q=V.withInstall(h);s.FButtonGroup=h,s.buttonGroupProps=v,s.default=q,s.propsResolver=k,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});