@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 16 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},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)}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 d(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:d}}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 d(a){const w={"f-icon":!0};if(a.icon){const p=a.icon.trim().split(" ");p&&p.length&&p.reduce((x,R)=>(x[R]=!0,x),w)}return w}function l(a){return!!(a.icon&&a.icon.trim())}return{iconClass:d,shouldShowIcon:l}}function be(d,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 R(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 v(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),d.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:R(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:R(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),d.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 S=(Z=(q=F==null?void 0:F.exposed)==null?void 0:q.elementRef.value)==null?void 0:Z.querySelector("#"+e);if(S||(S=b==null?void 0:b.querySelector("#"+e)),!S)return r;const le=window.innerWidth,W=window.innerHeight,T=S==null?void 0:S.getClientRects();if(S&&T&&T.length){const{top:B,width:J,left:I,right:m,height:z}=T[0],L=Math.ceil(z+B);r.top=`${L}px`,r.left=`${I}px`;const Q=o.id+"_menu",P=(S==null?void 0:S.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=`${B-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-B-z<G?B>G?(r.top=`${B-G-6}px`,r.maxHeight=`${B-16}px`):(r.maxHeight=`${W-L}px`,B>W-B-z&&(r.top="10px",r.maxHeight=`${B-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:v}}function ge(d,l,a){const w=n.ref(d.alignment),{renderDropdownMenu:p,clearAllDropDownMenu:x,updateContainerId:R}=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 v(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:v(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:v(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:R}}const{buildResponseToolbarItems:ae}=ce(),ue=n.defineComponent({name:"FResponseToolbar",props:re,emits:["click"],setup(d,l){const a=n.ref(ae(d.items)),w=n.ref(),p=n.ref(),x=n.ref(),R=g.isMobilePhone(),j={id:"__more_buttons__",text:R?"":pe.LocaleService.getLocaleValue("responseToolbar.more"),icon:R?"f-icon-more-horizontal":"",class:d.moreButtonClass},C=n.ref(new U(j)),_=Object.assign({},j,{id:j.id+"width"}),v=n.ref(-1),O=he();let A=!1;const{guid:$,uuid:Y}=g.useGuid(),s=d.id?d.id:"toolbar-"+$(),f=n.ref(),V="dropdown-container-"+s+"-"+Y(4),{renderToolbarDropdown:H,clearAllDropDown:te,updateContainerId:ne}=ge(d,l,O);ne(V);const oe=n.computed(()=>C.value.children.length>0),se=n.computed(()=>d.visible?C.value.children.length>0?!0:a.value.findIndex(t=>t.shown&&t.children&&t.children.length>0)>-1:!1);function o(){d.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":d.buttonSize==="sm","f-response-toolbar-lg":d.buttonSize==="lg","d-none":!d.visible};return g.getCustomClass(t,d.customClass)}),r=n.computed(()=>({"w-100":!0,"d-flex":!0,"flex-nowrap":!0,"justify-content-end":d.alignment==="right","justify-content-start":d.alignment==="left","justify-content-center":d.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 c={btn:!0,"f-rt-btn":!0,"f-btn-ml":d.alignment==="right"||i>0&&d.alignment==="center","f-btn-mr":d.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(c,D)}function S(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 c=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=>S(D,t)},[O.shouldShowIcon(t)&&n.createVNode("i",{class:O.iconClass(t)},null),t.text]),[[n.resolveDirective("tooltip"),c]])}return n.createVNode("button",{type:"button",class:F(t,i),id:t.id,disabled:!t.enable,onClick:c=>S(c,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"))),c=Math.ceil(parseFloat(getComputedStyle(t).getPropertyValue("margin-right")));return(i||0)+t.getBoundingClientRect().width+(c||0)}function Z(t,i,c){if(i<v.value){let D=c-1;for(;D>=0;D--){const k=t[D],N=q(k);if(i+=N,i>=v.value)break}c=D}return i-=v.value,c=c<0?0:c,{start:c,space:i}}function B(t){const i=x.value;let c=t;const k=Array.from(i.children).filter(E=>E.id!=="__more_buttons__"),N=k.length;let ee=!1,M=0;for(;M<N;M++){const E=k[M],X=q(E);if(X<=c)c-=X;else{const K=Z(k,c,M);M=K.start,c=K.space,ee=!0;break}}if(!ee&&T.length>0){const E=Z(k,c,M);M=E.start,c=E.space}const Ce=T.length>0;for(;M<N;M++){const E=k[M],X=q(E);W.set(E.id,!0);const K=T.find(ye=>ye.id===E.id);K?K.width=X:T[Ce?"unshift":"push"]({id:E.id,width:X})}return c}function J(){W=new Map,T=[]}function I(t=!1){const i=Object.assign({},C.value);i.children=[];const c=new U(i),D=a.value.reduce((k,N)=>{const ee=d.items.find(M=>M.id===N.id);return t?(c.children.push(N),N.shown=!1,k):(W.has(N.id)?(c.children.push(N),N.shown=!1):N.shown=ee.visible!==!1,k.push(N),k)},[]);C.value=c,a.value=D}function m(t){if(R){J(),I(!0);return}let i=B(t);if(T.length){let c=0;for(;c<T.length;c++){const D=d.items.find(k=>k.id===T[c].id);if(D&&D.visible!==!1){const k=T[c].width;if(i>=k||c===T.length-1&&i+v.value>=k)i-=k;else break}}for(let D=0;D<c;D++)W.delete(T[D].id);T.splice(0,c-1)}I()}function z(){if(w.value&&v.value<0){const t=w.value.querySelector("#"+_.id);if(!t)return;t.getBoundingClientRect().width===0?v.value=-1:v.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(R){m(t),b();return}(t>=0&&t<i||T.length)&&(z(),m(t),b())}function Q(){return v.value<0&&n.createVNode("div",{style:"position:fixed;top:-40px;visibility:hidden;"},[H(new U(_))])}const P=new ResizeObserver(t=>{if(t.length){if(R)return;const c=t[0].contentRect.width;L(c)}});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(()=>d.items,()=>{a.value=ae(d.items),C.value.children=[],n.nextTick(()=>{z(),J(),L()})},{deep:!0}),n.watch(()=>d.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":v.value<0?"hidden":"initial"}},[d.visible&&Q(),d.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"}})});