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

Farris Vue, a Farris Design based Vue3 component library.

(function(c,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):(c=typeof globalThis<"u"?globalThis:c||self,t(c["button-group"]={},c.Vue,c.FButton,c.dynamicResolver,c.FPopover,c.designerCanvas,c.common))})(this,function(c,t,C,k,j,w,D){"use strict";const M={$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 N(e,i,d){return i}const V=new Map([["appearance",k.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:[]}}}}}},h={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"}},v=k.createPropsResolver(h,M,V,N,$);function x(e,i,d){const u=t.ref(),r=t.ref(!1),l=t.ref();function f(){const a=u.value;a&&a.show(d.value)}async function y(){r.value=!r.value,await t.nextTick(),f()}function s(){r.value=!1,i.emit("changeState",r.value)}function p(a){a.stopPropagation(),y(),i.emit("changeState",r.value)}function o(a,b){a.stopPropagation(),!b.disabled&&(r.value=!1,i.emit("change",b.id),i.emit("click",b))}function g(){r.value&&(l.value=setTimeout(()=>{s()},1e3))}function n(){l.value&&(clearTimeout(l.value),l.value=null)}return{hidePopup:s,onClickDropdownButton:p,onClickDropdownMenuItem:o,onMouseleaveDropdownButton:g,onMouseenterDropdownButton:n,popoverRef:u,shouldPopupContent:r,togglePopup:y}}function P(e,i,d){const{hidePopup:u,onClickDropdownMenuItem:r,popoverRef:l}=d;function f(s){return t.createVNode(t.Fragment,null,[s.divider&&t.createVNode("div",{class:"dropdown-divider"},null),t.createVNode("div",{id:s.id,class:"dropdown-item"+(s.disabled?" disabled":""),onClick:p=>r(p,s)},[s.icon&&t.createVNode("i",{class:"f-icon dropdown-item-icon"+s.icon},null),t.createVNode("span",null,[s.text])])])}function y(s){return t.createVNode(j,{id:`${e.id}-popover`,ref:l,visible:!0,placement:e.placement,host:i.value,fitContent:!0,onHidden:u,minWidth:120},{default:()=>[t.createVNode("div",{class:"bg-white"},[s.map(p=>f(p))])]})}return{renderDropdownMenu:y}}function B(e,i){const d=t.ref(),u=t.ref(),r=x(e,i,u),{onMouseleaveDropdownButton:l,onMouseenterDropdownButton:f,onClickDropdownButton:y,shouldPopupContent:s}=r,{renderDropdownMenu:p}=P(e,d,r);function o(g){return t.createVNode("div",{class:"btn-group f-btn-group-dropdown",ref:d,onMouseleave:l,onMouseenter:f},[t.createVNode("button",{ref:u,type:"button",class:"f-btn-dropdown",onClick:y},[t.createVNode("span",{class:"f-icon f-icon-lookup"},null)]),s.value&&p(g)])}return{renderDropdownButton:o}}const m=t.defineComponent({name:"FButtonGroup",props:h,emits:["click","change","changeState"],setup(e,i){const d=t.ref(),u=e.data&&e.data.slice(0,e.count)||[],r=e.data&&e.data.slice(e.count)||[],l=n=>n.type||e.type,f=n=>n.disabled!==void 0?n.disabled:e.disabled,y=function(n){const a={"f-btn-ml":(n.type&&n.type!=="link"||e.type!=="link")&&e.mode==="default","btn-link":!n.type&&!e.type||e.type==="link"||n.type==="link"},b=n.type?n.type:e.type&&e.type!=="link"?e.type:"";return b&&(a[`btn-${b}`]=!0),a},s=function(){return{"position-relative":!0,"btn-group":e.mode==="group","f-btn-group-links":e.type==="link"}};function p(n,a){i.emit("change",a.id),i.emit("click",a)}function o(n){return t.createVNode(C,{disabled:f(n),id:n.id,icon:n.icon,size:e.size,type:l(n),customClass:y(n),onClick:a=>p(a,n)},{default:()=>[n.text]})}const{renderDropdownButton:g}=B(e,i);return()=>t.createVNode("div",{class:"f-btn-group",style:"position:relative;",ref:d},[t.createVNode("div",{class:s(),style:"display:inline-flex;vertical-align:middle"},[u.map(n=>o(n))]),!!r.length&&g(r)])}}),S=t.defineComponent({name:"FButtonGroupDesign",props:h,emits:["click","changeState","change","clickMenuOut"],setup(e,i){const d=t.ref(),u=t.inject("design-item-context"),r=w.useDesignerComponent(d,u);t.onMounted(()=>{d.value.componentInstance=r}),i.expose(r.value);const l=e.data&&e.data.slice(0,e.count)||[],f=e.data&&e.data.slice(e.count)||[],y=function(o){const g={btn:!0,"f-btn-ml":o.type&&o.type!=="link","btn-link":!!o.icon||!o.type,"btn-icontext":!!o.icon,disabled:o.disabled};return o.type&&(g[`btn-${o.type}`]=!0),g};function s(o){return t.createVNode("div",null,[t.createVNode("button",{type:"button",id:o.id,title:o.id,class:y(o)},[o.icon&&t.createVNode("i",{class:`f-icon ${o.icon}`},null),!o.icon&&o.text])])}const{renderDropdownButton:p}=B(e,i);return()=>t.createVNode("div",{class:"f-btn-group",style:"position:relative;",ref:d},[t.createVNode("div",{class:(e.size==="large"?"btn-group-lg":"btn-group-sm")+" btn-group f-btn-group-links"},[l.map(o=>s(o))]),!!f.length&&p(f)])}});m.register=(e,i,d,u)=>{e["button-group"]=m,i["button-group"]=v},m.registerDesigner=(e,i,d)=>{e["button-group"]=S,i["button-group"]=v};const F=D.withInstall(m);c.FButtonGroup=m,c.buttonGroupProps=h,c.default=F,c.propsResolver=v,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});