UNPKG

buefy

Version:

Lightweight UI components for Vue.js (v3) based on Bulma

buefy.org

buefy/buefy

3 lines (2 loc) • 9.56 kB
1
2
3
/*! Buefy v3.0.7 | MIT License | github.com/buefy/buefy */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Navbar={},e.Vue)}(this,(function(e,t){"use strict";var s=t.defineComponent({name:"NavbarBurger",props:{isOpened:{type:Boolean,default:!1}}}),o=(e,t)=>{const s=e.__vccOpts||e;for(const[e,o]of t)s[e]=o;return s};const n=["aria-expanded"],i=[t.createElementVNode("span",{"aria-hidden":"true"},null,-1),t.createElementVNode("span",{"aria-hidden":"true"},null,-1),t.createElementVNode("span",{"aria-hidden":"true"},null,-1),t.createElementVNode("span",{"aria-hidden":"true"},null,-1)];var a=o(s,[["render",function(e,s,o,a,r,l){return t.openBlock(),t.createElementBlock("a",t.mergeProps({role:"button",class:["navbar-burger burger",{"is-active":e.isOpened}],"aria-label":"menu","aria-expanded":e.isOpened||void 0},e.$attrs,{tabindex:"0"}),[...i],16,n)}]]);const r="undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0)?["touchstart","click"]:["click"],l=[];function d(e){const t="function"==typeof e;if(!t&&"object"!=typeof e)throw new Error(`v-click-outside: Binding value should be a function or an object, ${typeof e} given`);return{handler:t?e:e.handler,middleware:!t&&e.middleware||(e=>!!e),events:!t&&e.events||r}}function c({el:e,event:t,handler:s,middleware:o}){t.target!==e&&!e.contains(t.target)&&o(t,e)&&s(t,e)}function h({eventHandlers:e},t){e.forEach((({event:e,handler:s})=>{document[`${t}EventListener`](e,s)}))}const u={beforeMount:function(e,{value:t}){const{handler:s,middleware:o,events:n}=d(t),i={el:e,eventHandlers:n.map((t=>({event:t,handler:t=>c({event:t,el:e,handler:s,middleware:o})})))};h(i,"add"),l.push(i)},updated:function(e,{value:t}){const{handler:s,middleware:o,events:n}=d(t),i=l.filter((t=>t.el===e))[0];h(i,"remove"),i.eventHandlers=n.map((t=>({event:t,handler:t=>c({event:t,el:e,handler:s,middleware:o})}))),h(i,"add")},unmounted:function(e){h(l.filter((t=>t.el===e))[0],"remove")}},v="is-fixed-top",p="has-navbar-fixed-top",m="has-spaced-navbar-fixed-top",f="is-fixed-bottom",b="has-navbar-fixed-bottom",g="has-spaced-navbar-fixed-bottom",B="has-navbar-centered";var y=t.defineComponent({name:"BNavbar",components:{NavbarBurger:a},directives:{clickOutside:u},props:{type:[String,Object],transparent:{type:Boolean,default:!1},fixedTop:{type:Boolean,default:!1},fixedBottom:{type:Boolean,default:!1},modelValue:{type:Boolean,default:!1},centered:{type:Boolean,default:!1},wrapperClass:{type:[String,Array,Object]},closeOnClick:{type:Boolean,default:!0},mobileBurger:{type:Boolean,default:!0},spaced:Boolean,shadow:Boolean},emits:{"update:modelValue":e=>!0},data(){return{internalIsActive:this.modelValue,_isNavBar:!0}},computed:{isOpened(){return this.internalIsActive},computedClasses(){return[this.type,{[v]:this.fixedTop,[f]:this.fixedBottom,[B]:this.centered,"is-spaced":this.spaced,"has-shadow":this.shadow,"is-transparent":this.transparent}]}},watch:{modelValue:{handler(e){this.internalIsActive=e},immediate:!0},fixedTop(e){this.setBodyFixedTopClass(e)},bottomTop(e){this.setBodyFixedBottomClass(e)}},methods:{toggleActive(){this.internalIsActive=!this.internalIsActive,this.emitUpdateParentEvent()},closeMenu(){this.closeOnClick&&this.internalIsActive&&(this.internalIsActive=!1,this.emitUpdateParentEvent())},emitUpdateParentEvent(){this.$emit("update:modelValue",this.internalIsActive)},setBodyClass(e){"undefined"!=typeof window&&document.body.classList.add(e)},removeBodyClass(e){"undefined"!=typeof window&&document.body.classList.remove(e)},checkIfFixedPropertiesAreColliding(){if(this.fixedTop&&this.fixedBottom)throw new Error("You should choose if the BNavbar is fixed bottom or fixed top, but not both")},genNavbar(){const e=[this.genNavbarBrandNode(),this.genNavbarSlotsNode()];if(!this.wrapperClass)return this.genNavbarSlots(e);const s=t.h("div",{class:this.wrapperClass},e);return this.genNavbarSlots([s])},genNavbarSlots(e){const s=t.h("nav",{class:["navbar",this.computedClasses],role:"navigation","aria-label":"main navigation"},e);return t.withDirectives(s,[[t.resolveDirective("click-outside"),this.closeMenu]])},genNavbarBrandNode(){const e=null!=this.$slots.brand?[this.$slots.brand(),this.genBurgerNode()]:this.genBurgerNode();return t.h("div",{class:"navbar-brand"},e)},genBurgerNode(){if(this.mobileBurger){const e=t.h(t.resolveComponent("navbar-burger"),{isOpened:this.isOpened,onClick:this.toggleActive,onKeyup:e=>{13===e.keyCode&&this.toggleActive()}});return!!this.$slots.burger?this.$slots.burger({isOpened:this.isOpened,toggleActive:this.toggleActive}):e}},genNavbarSlotsNode(){return t.h("div",{class:["navbar-menu",{"is-active":this.isOpened}]},[this.genMenuPosition("start"),this.genMenuPosition("end")])},genMenuPosition(e){return t.h("div",{class:`navbar-${e}`},null!=this.$slots[e]?this.$slots[e]():[])},setBodyFixedTopClass(e){this.checkIfFixedPropertiesAreColliding(),e?(this.setBodyClass(p),this.spaced&&this.setBodyClass(m)):(this.removeBodyClass(p),this.removeBodyClass(m))},setBodyFixedBottomClass(e){this.checkIfFixedPropertiesAreColliding(),e?(this.setBodyClass(b),this.spaced&&this.setBodyClass(g)):(this.removeBodyClass(b),this.removeBodyClass(g))}},beforeMount(){this.fixedTop&&this.setBodyFixedTopClass(!0),this.fixedBottom&&this.setBodyFixedBottomClass(!0)},beforeUnmount(){if(this.fixedTop){const e=this.spaced?m:p;this.removeBodyClass(e)}else if(this.fixedBottom){const e=this.spaced?g:b;this.removeBodyClass(e)}},render(){return this.genNavbar()}});const w=["div","span","input"];var C=o(t.defineComponent({name:"BNavbarItem",inheritAttrs:!1,props:{tag:{type:[String,Object],default:"a"},active:Boolean},methods:{keyPress({key:e}){"Escape"!==e&&"Esc"!==e||this.closeMenuRecursive(this,["NavBar"])},handleClickEvent(e){if(!w.some((t=>t===e.target.localName))){const e=this.closeMenuRecursive(this,["NavbarDropdown","NavBar"]);e&&e.$data._isNavbarDropdown&&this.closeMenuRecursive(e,["NavBar"])}},closeMenuRecursive(e,t){const s=e.$parent;if(!s)return null;return t.reduce(((e,t)=>s.$data[`_is${t}`]?(s.closeMenu(),s):e),null)||this.closeMenuRecursive(s,t)}},mounted(){"undefined"!=typeof window&&(this.$el.addEventListener("click",this.handleClickEvent),document.addEventListener("keyup",this.keyPress))},beforeUnmount(){"undefined"!=typeof window&&(this.$el.removeEventListener("click",this.handleClickEvent),document.removeEventListener("keyup",this.keyPress))}}),[["render",function(e,s,o,n,i,a){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),t.mergeProps({class:["navbar-item",{"is-active":e.active}]},e.$attrs),{default:t.withCtx((()=>[t.renderSlot(e.$slots,"default")])),_:3},16,["class"])}]]);let k=!0;var x=Object.getOwnPropertySymbols,N=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable,O=t.defineComponent({inheritAttrs:!1,props:{compatFallthrough:{type:Boolean,default:()=>k}},computed:{rootAttrs(){return this.compatFallthrough?{class:this.$attrs.class,style:this.$attrs.style,id:this.$attrs.id}:{}},fallthroughAttrs(){if(this.compatFallthrough){const e=this.$attrs,{style:t,class:s,id:o}=e;return((e,t)=>{var s={};for(var o in e)N.call(e,o)&&t.indexOf(o)<0&&(s[o]=e[o]);if(null!=e&&x)for(var o of x(e))t.indexOf(o)<0&&A.call(e,o)&&(s[o]=e[o]);return s})(e,["style","class","id"])}return this.$attrs}}});var $=o(t.defineComponent({name:"BNavbarDropdown",directives:{clickOutside:u},mixins:[O],props:{label:String,hoverable:Boolean,active:Boolean,right:Boolean,arrowless:Boolean,boxed:Boolean,closeOnClick:{type:Boolean,default:!0},collapsible:Boolean,tag:{type:[String,Object],default:"a"}},emits:{"active-change":e=>!0},data(){return{newActive:this.active,isHoverable:this.hoverable,_isNavbarDropdown:!0}},watch:{active(e){this.newActive=e},newActive(e){this.$emit("active-change",e)}},methods:{toggleMenu(){this.newActive=!this.newActive},showMenu(){this.newActive=!0},closeMenu(){this.newActive=!this.closeOnClick,this.hoverable&&this.closeOnClick&&(this.isHoverable=!1)},checkHoverable(){this.hoverable&&(this.isHoverable=!0)}}}),[["render",function(e,s,o,n,i,a){const r=t.resolveDirective("click-outside");return t.withDirectives((t.openBlock(),t.createElementBlock("div",t.mergeProps({class:["navbar-item has-dropdown",{"is-hoverable":e.isHoverable,"is-active":e.newActive}],onMouseenter:s[0]||(s[0]=(...t)=>e.checkHoverable&&e.checkHoverable(...t))},e.rootAttrs),[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),t.mergeProps({class:["navbar-link",{"is-arrowless":e.arrowless,"is-active":e.newActive&&e.collapsible}]},e.fallthroughAttrs,{"aria-haspopup":"true",onClick:t.withModifiers(e.toggleMenu,["prevent"]),onKeyup:t.withKeys(e.toggleMenu,["enter"]),tabindex:"0"}),{default:t.withCtx((()=>[e.label?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode(t.toDisplayString(e.label),1)],64)):t.renderSlot(e.$slots,"label",{key:1})])),_:3},16,["class","onClick","onKeyup"])),t.createElementVNode("div",{class:t.normalizeClass(["navbar-dropdown",{"is-right":e.right,"is-boxed":e.boxed,"is-hidden-touch":e.collapsible&&!e.newActive}])},[t.renderSlot(e.$slots,"default")],2)],16)),[[r,e.closeMenu]])}]]);const E=(e,t,s)=>{const o=t.name;if(null==o)throw new Error("Buefy.registerComponent: missing component name");e.component(o,t)},M={install(e){E(e,y),E(e,C),E(e,$)}};e.BNavbar=y,e.BNavbarDropdown=$,e.BNavbarItem=C,e.default=M,Object.defineProperty(e,"__esModule",{value:!0})}));