@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 16.1 kB
JavaScript
(function(y,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("../common/index.umd.js"),require("vue"),require("../locale/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","../common/index.umd.js","vue","../locale/index.umd.js"],g):(y=typeof globalThis<"u"?globalThis:y||self,g(y["response-toolbar"]={},y.common,y.Vue,y.locale))})(this,function(y,g,n,pe){"use strict";var ke=Object.defineProperty;var De=(y,g,n)=>g in y?ke(y,g,{enumerable:!0,configurable:!0,writable:!0,value:n}):y[g]=n;var h=(y,g,n)=>De(y,typeof g!="symbol"?g+"":g,n);const re={id:{type:String,default:""},customClass:{type:String,default:""},alignment:{Type:String,default:"right"},items:{Type:Array,default:[]},visible:{type:Boolean,default:!0},buttonSize:{type:String,default:""},moreButtonClass:{type:String,default:"btn-secondary"}};class ie{constructor(l){h(this,"id","");h(this,"class","btn-secondary");h(this,"icon","");h(this,"groupId","");h(this,"order",-1);h(this,"asDropDownTop",!1);h(this,"text","");h(this,"visible",!0);h(this,"shown",!0);h(this,"responsed",!1);h(this,"tipsEnable",!1);h(this,"tipsText","");h(this,"width",0);h(this,"dropdownClass","");h(this,"onClick",()=>{});h(this,"options");var w,p;this.options=l;const a=["id","class","icon","groupId","order","asDropDownTop","text","isDP","visible","responsed","width","tipsEnable","tipsText","dropdownClass","onClick"];Object.keys(l).filter(x=>a.indexOf(x)>-1).forEach(x=>{x==="visible"?this[x]=l[x]===void 0?!0:l[x]:this[x]=l[x]}),this.shown=this.visible,(w=l.appearance)!=null&&w.class&&(this.class=(p=l.appearance)==null?void 0:p.class),this.class||(this.class="btn-secondary")}get enable(){return Object.keys(this.options).indexOf("disabled")>-1?!this.options.disabled:n.computed(()=>!0)}setWidth(l){this.width=parseInt(l,10)}getWidth(){return this.visible?this.width:!1}}class de extends ie{constructor(l){super(l)}}function ce(){function c(l){const a=[];return l.reduce((w,p)=>(p.children&&p.children.length>0?w.push(new U(p)):w.push(new de(p)),w),a),a}return{buildResponseToolbarItems:c}}const{buildResponseToolbarItems:fe}=ce();class U extends ie{constructor(a){super(a);h(this,"placement","");h(this,"visible",!0);h(this,"dropdownClass","");h(this,"menuClass","");h(this,"split",!1);h(this,"children",[]);h(this,"expanded",!1);h(this,"shown",!0);const w=["visible","icon","isDP","class","dropdownClass","menuClass","placement","split","expanded"];Object.keys(a).filter(p=>w.indexOf(p)>-1).forEach(p=>{p==="visible"?this[p]=a[p]===void 0?!0:a[p]:this[p]=a[p]}),this.shown=this.visible,a.children&&a.children.length&&(this.children=fe(a.children))}}function he(){function c(a){const w={"f-icon":!0};if(a.icon){const p=a.icon.trim().split(" ");p&&p.length&&p.reduce((x,V)=>(x[V]=!0,x),w)}return w}function l(a){return!!(a.icon&&a.icon.trim())}return{iconClass:c,shouldShowIcon:l}}function be(c,l){function a(o){const e={"dropdown-menu":!0};return g.getCustomClass(e,o.menuClass)}function w(o){const e={disabled:!o.enable,"dropdown-submenu":!0,"f-rt-dropdown":!0,"text-truncate":!0};return g.getCustomClass(e,o.dropdownClass)}function p(o){const e={disabled:!o.enable,"dropdown-item":!0,"f-rt-btn":!0,"text-truncate":!0};return g.getCustomClass(e,o.dropdownClass)}function x(o){const e={disabled:!o.enable,"dropdown-item":!0,"f-rt-btn":!0,"text-truncate":!0,"f-rt-toggle":!o.split,"btn-icontext":!!(o.icon&&o.icon.trim()),"dropdown-toggle":!o.split,"btn-secondary":!0};return g.getCustomClass(e,o.dropdownClass)}function V(o){const e={"f-rt-btn":!0,"text-truncate":!0,"btn-icontext":!!(o.icon&&o.icon.trim()),"d-block":!0};return g.getCustomClass(e,o.dropdownClass)}let j;const C=new Map;let _="";function S(o){_="#"+o}function O(o,e,u){o.stopPropagation();const r=u?u.id:"__top_item__";if(e.children&&e.children.length&&(e.expanded=!e.expanded,e.expanded)){if(C.has(r)&&C.get(r)!==e){const b=C.get(r);b&&(b.expanded=!1,C.delete(r))}C.set(r,e)}}function A(o,e){document.body.click(),e.enable&&(o.stopPropagation(),typeof e.onClick=="function"&&e.onClick(o,e.id),c.emit("click",o,e.id))}function $(o,e){const u=o.target;u.className.indexOf("dropdown-item")<0||(u.title=u.scrollWidth>u.clientWidth?e:"")}function Y(o,e,u){if(e.tipsEnable&&e.tipsText){const r=n.reactive({content:e.tipsText,enable:e.tipsEnable});return n.withDirectives(n.createVNode("li",{class:p(e),id:e.id,key:e.id+"_"+u,onClick:b=>A(b,e)},[n.createVNode("span",{class:V(e)},[l.shouldShowIcon(e)&&n.createVNode("i",{class:l.iconClass(e)},null),e.text])]),[[n.resolveDirective("tooltip"),r]])}return n.createVNode("li",{class:p(e),id:e.id,onClick:r=>A(r,e)},[n.createVNode("span",{class:V(e),onMouseenter:r=>$(r,e.text)},[l.shouldShowIcon(e)&&n.createVNode("i",{class:l.iconClass(e)},null),e.text])])}function s(o,e,u){e.enable&&(typeof e.onClick=="function"&&u.onClick(o,e.id),c.emit("click",o,e.id),u.split||O(o,e,u))}function f(o,e,u){o&&o.stopPropagation(),O(o,e,u)}function v(o,e){o.stopPropagation();const u=e.id;if(e.children&&e.children.length&&e.expanded&&C.has(u)){const r=C.get(u);r&&(r.expanded=!1,C.delete(u))}}function H(o,e,u){if(e.tipsEnable&&e.tipsText){const r=n.reactive({content:e.tipsText,enable:e.tipsEnable});return n.createVNode("li",{class:w(e),id:e.id,key:e.id+"_"+u,onClick:b=>s(b,e,o)},[n.withDirectives(n.createVNode("span",{class:x(e)},[l.shouldShowIcon(e)&&n.createVNode("i",{class:l.iconClass(e)},null),e.text]),[[n.resolveDirective("tooltip"),r]]),e.split&&n.createVNode("span",{class:"dropdown-toggle dropdown-toggle-split f-rt-toggle",onClick:b=>f(b,e,o)},null),j(e,e)])}return n.createVNode("li",{class:w(e),id:e.id,onClick:r=>s(r,e,o),onMouseenter:r=>$(r,e.text)},[n.createVNode("span",{class:x(e)},[l.shouldShowIcon(e)&&n.createVNode("i",{class:l.iconClass(e)},null),e.text]),e.split&&n.createVNode("span",{class:"dropdown-toggle dropdown-toggle-split f-rt-toggle",onClick:r=>f(r,e,o)},null),j(e,e)])}function te(o){return o.children.filter(e=>e.visible).map((e,u)=>e.children&&e.children.length?H(o,e,u):Y(o,e,u))}function ne(o,e){if(!o)return 1080;let u=-1;const r=o.children.length;for(let b=0;b<r;b++)if(o.children[b].id===e){u=b;break}return 1080+r-u}function oe(o,e,u){var q,Z;const r={display:o.expanded?"block":"none",position:"fixed",maxWidth:"300px",minWidth:"120px",zIndex:1080,overflowY:"auto",maxHeight:"none"},b=document.querySelector(_);if(!b)return r;const F=n.getCurrentInstance();let N=(Z=(q=F==null?void 0:F.exposed)==null?void 0:q.elementRef.value)==null?void 0:Z.querySelector("#"+e);if(N||(N=b==null?void 0:b.querySelector("#"+e)),!N)return r;const le=window.innerWidth,W=window.innerHeight,T=N==null?void 0:N.getClientRects();if(N&&T&&T.length){const{top:E,width:J,left:I,right:m,height:z}=T[0],L=Math.ceil(z+E);r.top=`${L}px`,r.left=`${I}px`;const Q=o.id+"_menu",P=(N==null?void 0:N.querySelector("#"+Q))||(b==null?void 0:b.querySelector("#"+Q))||null;if(P){P.style.visibility="hidden",P.style.display="block";const G=P.offsetHeight;r.zIndex=o.expanded?ne(b,Q):1080,r.display==="block"&&(P.style.display="block");const t=P.getBoundingClientRect();if(u){r.top=`${E-6}px`;const i=Math.ceil(J+I);r.left=`${i}px`}le-I-J<t.width&&(r.left=`${(u?I:m)-t.width}px`),W-E-z<G?E>G?(r.top=`${E-G-6}px`,r.maxHeight=`${E-16}px`):(r.maxHeight=`${W-L}px`,E>W-E-z&&(r.top="10px",r.maxHeight=`${E-16}px`)):r.maxHeight=`${W-L}px`,P.style.visibility="visible"}}return r}j=function(o,e){const u=e?e.id:o.id;return n.createVNode(n.Teleport,{to:_,disabled:!o.expanded},{default:()=>[n.createVNode("ul",{class:a(o),style:oe(o,u,e),id:o.id+"_menu",onWheel:r=>v(r,o)},[te(o)])]})};function se(){C.forEach(o=>{o.expanded=!1}),C.clear()}return{renderDropdownMenu:j,clearAllDropDownMenu:se,updateContainerId:S}}function ge(c,l,a){const w=n.ref(c.alignment),{renderDropdownMenu:p,clearAllDropDownMenu:x,updateContainerId:V}=be(l,a);function j(s){const f={"btn-group":!0,"f-rt-dropdown":!0,"f-btn-ml":w.value==="right"||w.value==="center","f-btn-mr":w.value==="left"};return g.getCustomClass(f,s.dropdownClass)}function C(s){const f={btn:!0,disabled:!s.enable,"f-rt-btn":!0,"btn-icontext":!!(s.icon&&s.icon.trim())&&s.text,"f-rt-toggle":!s.split,"dropdown-toggle":!s.split,"f-btn-icon":s.icon&&!s.text};return g.getCustomClass(f,s.class)}function _(s){const f={btn:!0,"dropdown-toggle":!0,"dropdown-toggle-split":!0};return g.getCustomClass(f,s.class)}function S(s){return s.split?{display:"flex"}:{display:"flex","border-radius":"6px"}}function O(s,f){s.stopPropagation();const v=f.expanded;document.body.click(),typeof f.onClick=="function"&&f.onClick(s,f.id),l.emit("click",s,f.id),f.split||(f.expanded=!v)}function A(s,f){s.stopPropagation();const v=f.expanded;document.body.click(),f.expanded=!v}function $(s,f=!0){if(s.tipsEnable&&s.tipsText){const v=n.reactive({content:s.tipsText,enable:s.tipsEnable});return n.createVNode("div",{id:s.id,class:j(s)},[n.withDirectives(n.createVNode("div",{class:C(s),style:S(s),onClick:H=>s.enable&&O(H,s)},[a.shouldShowIcon(s)&&n.createVNode("i",{class:a.iconClass(s)},null),s.text&&n.createVNode("span",null,[s.text])]),[[n.resolveDirective("tooltip"),v]]),s.split&&n.createVNode("button",{class:_(s),style:"border-radius:0 6px 6px 0;",onClick:H=>A(H,s)},null),f&&p(s)])}return n.createVNode("div",{id:s.id,class:j(s)},[n.createVNode("div",{class:C(s),style:S(s),onClick:v=>s.enable&&O(v,s)},[a.shouldShowIcon(s)&&n.createVNode("i",{class:a.iconClass(s)},null),s.text&&n.createVNode("span",null,[s.text])]),s.split&&n.createVNode("button",{class:_(s),style:"border-radius:0 6px 6px 0;",onClick:v=>A(v,s)},null),f&&p(s)])}function Y(){x()}return{renderToolbarDropdown:$,clearAllDropDown:Y,updateContainerId:V}}const{buildResponseToolbarItems:ae}=ce(),ue=n.defineComponent({name:"FResponseToolbar",props:re,emits:["click"],setup(c,l){const a=n.ref(ae(c.items)),w=n.ref(),p=n.ref(),x=n.ref(),V=g.isMobilePhone(),j={id:"__more_buttons__",text:V?"":pe.LocaleService.getLocaleValue("responseToolbar.more"),icon:V?"f-icon-more-horizontal":""},C=n.ref(new U(j)),_=Object.assign({},j,{id:j.id+"width"}),S=n.ref(-1),O=he();let A=!1;const{guid:$,uuid:Y}=g.useGuid(),s=c.id?c.id:"toolbar-"+$(),f=n.ref(),v="dropdown-container-"+s+"-"+Y(4),{renderToolbarDropdown:H,clearAllDropDown:te,updateContainerId:ne}=ge(c,l,O);ne(v);const oe=n.computed(()=>C.value.children.length>0),se=n.computed(()=>c.visible?C.value.children.length>0?!0:a.value.findIndex(t=>t.shown&&t.children&&t.children.length>0)>-1:!1);function o(){c.visible&&!f.value&&document&&(f.value=document.createElement("div"),f.value.id=v,document.body.appendChild(f.value))}o();function e(){f.value&&document.body.contains(f.value)&&(document.body.removeChild(f.value),f.value=null)}n.watch(se,(t,i)=>{t?o():e()});const u=n.computed(()=>{const t={"f-toolbar":!0,"f-response-toolbar":!0,"position-relative":!0,"f-response-toolbar-sm":c.buttonSize==="sm","f-response-toolbar-lg":c.buttonSize==="lg","d-none":!c.visible,"is-mobile":V};return g.getCustomClass(t,c.customClass)}),r=n.computed(()=>({"w-100":!0,"d-flex":!0,"flex-nowrap":!0,"justify-content-end":c.alignment==="right","justify-content-start":c.alignment==="left","justify-content-center":c.alignment==="center"}));function b(t){t&&t.target.closest("ul.dropdown-menu")&&t.type==="wheel"||(a.value.filter(i=>i.children&&i.children.length>0).forEach(i=>{i.expanded=!1}),C.value.expanded=!1,te())}function F(t,i){var k;const d={btn:!0,"f-rt-btn":!0,"f-btn-ml":c.alignment==="right"||i>0&&c.alignment==="center","f-btn-mr":c.alignment==="left","btn-icontext":!!(t.icon&&t.icon.trim())},D=((k=t==null?void 0:t.appearance)==null?void 0:k.class)||t.class||"btn-secondary";return g.getCustomClass(d,D)}function N(t,i){document.body.click(),typeof i.onClick=="function"&&i.onClick(t,i.id),l.emit("click",t,i.id)}function le(t,i){if(t.tipsEnable&&t.tipsText){const d=n.reactive({content:t.tipsText,enable:t.tipsEnable});return n.withDirectives(n.createVNode("button",{type:"button",class:F(t,i),id:t.id,disabled:!t.enable,onClick:D=>N(D,t)},[O.shouldShowIcon(t)&&n.createVNode("i",{class:O.iconClass(t)},null),t.text]),[[n.resolveDirective("tooltip"),d]])}return n.createVNode("button",{type:"button",class:F(t,i),id:t.id,disabled:!t.enable,onClick:d=>N(d,t)},[O.shouldShowIcon(t)&&n.createVNode("i",{class:O.iconClass(t)},null),t.text])}let W=new Map,T=[];function q(t){const i=Math.ceil(parseFloat(getComputedStyle(t).getPropertyValue("margin-left"))),d=Math.ceil(parseFloat(getComputedStyle(t).getPropertyValue("margin-right")));return(i||0)+t.getBoundingClientRect().width+(d||0)}function Z(t,i,d){if(i<S.value){let D=d-1;for(;D>=0;D--){const k=t[D],R=q(k);if(i+=R,i>=S.value)break}d=D}return i-=S.value,d=d<0?0:d,{start:d,space:i}}function E(t){const i=x.value;let d=t;const k=Array.from(i.children).filter(B=>B.id!=="__more_buttons__"),R=k.length;let ee=!1,M=0;for(;M<R;M++){const B=k[M],X=q(B);if(X<=d)d-=X;else{const K=Z(k,d,M);M=K.start,d=K.space,ee=!0;break}}if(!ee&&T.length>0){const B=Z(k,d,M);M=B.start,d=B.space}const Ce=T.length>0;for(;M<R;M++){const B=k[M],X=q(B);W.set(B.id,!0);const K=T.find(ye=>ye.id===B.id);K?K.width=X:T[Ce?"unshift":"push"]({id:B.id,width:X})}return d}function J(){W=new Map,T=[]}function I(t=!1){const i=Object.assign({},C.value);i.children=[];const d=new U(i),D=a.value.reduce((k,R)=>{const ee=c.items.find(M=>M.id===R.id);return t?(d.children.push(R),R.shown=!1,k):(W.has(R.id)?(d.children.push(R),R.shown=!1):R.shown=ee.visible!==!1,k.push(R),k)},[]);C.value=d,a.value=D}function m(t){if(V){J(),I(!0);return}let i=E(t);if(T.length){let d=0;for(;d<T.length;d++){const D=c.items.find(k=>k.id===T[d].id);if(D&&D.visible!==!1){const k=T[d].width;if(i>=k||d===T.length-1&&i+S.value>=k)i-=k;else break}}for(let D=0;D<d;D++)W.delete(T[D].id);T.splice(0,d-1)}I()}function z(){if(w.value&&S.value<0){const t=w.value.querySelector("#"+_.id);if(!t)return;t.getBoundingClientRect().width===0?S.value=-1:S.value=q(t)}}function L(t=-1){if(t===0||!x.value||!p.value)return;t<0&&(t=p.value.getBoundingClientRect().width),t=Math.ceil(t);const i=Math.ceil(x.value.getBoundingClientRect().width);if(V){m(t),b();return}(t>=0&&t<i||T.length)&&(z(),m(t),b())}function Q(){return S.value<0&&n.createVNode("div",{style:"position:fixed;top:-40px;visibility:hidden;"},[H(new U(_))])}const P=new ResizeObserver(t=>{if(t.length){if(V)return;const d=t[0].contentRect.width;L(d)}});function G(){p.value&&!A&&(P.observe(p.value),A=!0)}return n.onMounted(()=>{z(),L(),G(),document.body.addEventListener("click",b),document.body.addEventListener("wheel",b)}),n.onUnmounted(()=>{P.disconnect(),e(),document.body.removeEventListener("click",b),document.body.removeEventListener("wheel",b)}),n.watch(()=>c.items,()=>{a.value=ae(c.items),C.value.children=[],n.nextTick(()=>{z(),J(),L()})},{deep:!0}),n.watch(()=>c.visible,t=>{t&&n.nextTick(()=>{z(),L(),G()})}),l.expose({elementRef:w}),()=>n.createVNode("div",{class:u.value,id:s,ref:w,style:{"overflow-y":S.value<0?"hidden":"initial"}},[c.visible&&Q(),c.visible&&n.createVNode("div",{ref:p,class:r.value},[n.createVNode("div",{ref:x,class:"d-inline-block f-response-content",style:"white-space: nowrap;"},[a.value.filter(t=>t.shown).map((t,i)=>t.children&&t.children.length>0?H(t):le(t,i)),oe.value&&H(C.value)])])])}});class we{constructor(l,a){h(this,"id");h(this,"name");h(this,"presetId",[]);h(this,"responsedIndex",[]);h(this,"width");this.id=l,this.name=a,this.width=0}setWidth(l){this.width=parseInt(l+"",10)}getWidth(){return this.width}setPreset(l){Array.isArray(l)?this.presetId=this.presetId.concat(l):this.presetId.push(l)}delPreset(){this.presetId=[]}removeResponsed(l){this.responsedIndex.splice(l,1)}setResponsed(l){Array.isArray(l)?this.responsedIndex=this.responsedIndex.concat(l):this.responsedIndex.push(l)}isResponsing(){return this.responsedIndex.length>0}isResponsed(){return this.presetId.length===this.responsedIndex.length}}const xe=g.withInstall(ue);y.FResponseToolbar=ue,y.ResponseToolbarDropDownItem=U,y.ResponseToolbarGroup=we,y.ResponseToolbarItem=de,y.default=xe,y.responseToolbarProps=re,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});