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