UNPKG

@ntohq/buefy-next

Version:

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

3 lines (2 loc) 9.89 kB
/*! Buefy v0.2.0 | 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 n=t.defineComponent({name:"NavbarBurger",props:{isOpened:{type:Boolean,default:!1}}}),s=(e,t)=>{const n=e.__vccOpts||e;for(const[e,s]of t)n[e]=s;return n};const o=["aria-expanded"],a=[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 i=s(n,[["render",function(e,n,s,i,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"}),[...a],16,o)}],["__file","/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/navbar/NavbarBurger.vue"]]);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:n,middleware:s}){t.target!==e&&!e.contains(t.target)&&s(t,e)&&n(t,e)}function h({eventHandlers:e},t){e.forEach((({event:e,handler:n})=>{document[`${t}EventListener`](e,n)}))}var u={beforeMount:function(e,{value:t}){const{handler:n,middleware:s,events:o}=d(t),a={el:e,eventHandlers:o.map((t=>({event:t,handler:t=>c({event:t,el:e,handler:n,middleware:s})})))};h(a,"add"),l.push(a)},updated:function(e,{value:t}){const{handler:n,middleware:s,events:o}=d(t),a=l.filter((t=>t.el===e))[0];h(a,"remove"),a.eventHandlers=o.map((t=>({event:t,handler:t=>c({event:t,el:e,handler:n,middleware:s})}))),h(a,"add")},unmounted:function(e){h(l.filter((t=>t.el===e))[0],"remove")}};const v="has-navbar-fixed-top",p="has-spaced-navbar-fixed-top",f="has-navbar-fixed-bottom",m="has-spaced-navbar-fixed-bottom";var b=s(t.defineComponent({name:"BNavbar",components:{NavbarBurger:i},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,{"is-fixed-top":this.fixedTop,"is-fixed-bottom":this.fixedBottom,"has-navbar-centered":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 n=t.h("div",{class:this.wrapperClass},e);return this.genNavbarSlots([n])},genNavbarSlots(e){const n=t.h("nav",{class:["navbar",this.computedClasses],role:"navigation","aria-label":"main navigation"},e);return t.withDirectives(n,[[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(v),this.spaced&&this.setBodyClass(p)):(this.removeBodyClass(v),this.removeBodyClass(p))},setBodyFixedBottomClass(e){this.checkIfFixedPropertiesAreColliding(),e?(this.setBodyClass(f),this.spaced&&this.setBodyClass(m)):(this.removeBodyClass(f),this.removeBodyClass(m))}},beforeMount(){this.fixedTop&&this.setBodyFixedTopClass(!0),this.fixedBottom&&this.setBodyFixedBottomClass(!0)},beforeUnmount(){if(this.fixedTop){const e=this.spaced?p:v;this.removeBodyClass(e)}else if(this.fixedBottom){const e=this.spaced?m:f;this.removeBodyClass(e)}},render(){return this.genNavbar()}}),[["__file","/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/navbar/Navbar.vue"]]);const g=["div","span","input"];var y=s(t.defineComponent({name:"BNavbarItem",inheritAttrs:!1,props:{tag:{type:String,default:"a"},active:Boolean},methods:{keyPress({key:e}){"Escape"!==e&&"Esc"!==e||this.closeMenuRecursive(this,["NavBar"])},handleClickEvent(e){if(!g.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 n=e.$parent;if(!n)return null;return t.reduce(((e,t)=>n.$data[`_is${t}`]?(n.closeMenu(),n):e),null)||this.closeMenuRecursive(n,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,n,s,o,a,i){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"])}],["__file","/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/navbar/NavbarItem.vue"]]);let B=!0;var w=Object.getOwnPropertySymbols,x=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,C=t.defineComponent({inheritAttrs:!1,props:{compatFallthrough:{type:Boolean,default:()=>B}},computed:{rootAttrs(){return this.compatFallthrough?{class:this.$attrs.class,style:this.$attrs.style,id:this.$attrs.id}:{}},fallthroughAttrs(){if(this.compatFallthrough){return((e,t)=>{var n={};for(var s in e)x.call(e,s)&&t.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&w)for(var s of w(e))t.indexOf(s)<0&&k.call(e,s)&&(n[s]=e[s]);return n})(this.$attrs,["style","class","id"])}return this.$attrs}}});var N=s(t.defineComponent({name:"BNavbarDropdown",directives:{clickOutside:u},mixins:[C],props:{label:String,hoverable:Boolean,active:Boolean,right:Boolean,arrowless:Boolean,boxed:Boolean,closeOnClick:{type:Boolean,default:!0},collapsible:Boolean,tag:{type:String,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,n,s,o,a,i){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:n[0]||(n[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]])}],["__file","/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/navbar/NavbarDropdown.vue"]]);const A=(e,t,n)=>{const s=n||t.name;if(null==s)throw new Error("Buefy.registerComponent: missing component name");e.component(s,t)},O={install(e){A(e,b),A(e,y),A(e,N)}};e.BNavbar=b,e.BNavbarDropdown=N,e.BNavbarItem=y,e.default=O,Object.defineProperty(e,"__esModule",{value:!0})}));