buefy 1.0.0 → 1.0.2

package/dist/components/tooltip/index.js

@@ -0,0 +1,445 @@
+/*! Buefy v1.0.2 | MIT License | github.com/buefy/buefy */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Tooltip = {}, global.Vue));
+})(this, (function (exports, vue) { 'use strict';
+
+    let config = {
+      defaultTooltipType: "is-primary",
+      defaultTooltipDelay: null,
+      defaultTooltipCloseDelay: null};
+
+    function removeElement(el) {
+      if (typeof el.remove !== "undefined") {
+        el.remove();
+      } else if (typeof el.parentNode !== "undefined" && el.parentNode !== null) {
+        el.parentNode.removeChild(el);
+      }
+    }
+    function createAbsoluteElement(el) {
+      const root = document.createElement("div");
+      root.style.position = "absolute";
+      root.style.left = "0px";
+      root.style.top = "0px";
+      root.style.width = "100%";
+      const wrapper = document.createElement("div");
+      root.appendChild(wrapper);
+      wrapper.appendChild(el);
+      document.body.appendChild(root);
+      return root;
+    }
+
+    const TOOLTIP_POSITIONS = ["is-auto", "is-top", "is-bottom", "is-left", "is-right"];
+    var _sfc_main = vue.defineComponent({
+      name: "BTooltip",
+      props: {
+        active: {
+          type: Boolean,
+          default: true
+        },
+        type: {
+          type: String,
+          default: () => config.defaultTooltipType
+        },
+        label: String,
+        delay: {
+          type: Number,
+          default: () => config.defaultTooltipDelay
+        },
+        closeDelay: {
+          type: Number,
+          default: () => config.defaultTooltipCloseDelay
+        },
+        position: {
+          type: String,
+          default: "is-auto",
+          validator(value) {
+            return TOOLTIP_POSITIONS.indexOf(value) > -1;
+          }
+        },
+        triggers: {
+          type: Array,
+          default: () => ["hover"]
+        },
+        always: Boolean,
+        square: Boolean,
+        dashed: Boolean,
+        multilined: Boolean,
+        size: {
+          type: String,
+          default: "is-medium"
+        },
+        appendToBody: Boolean,
+        animated: {
+          type: Boolean,
+          default: true
+        },
+        animation: {
+          type: String,
+          default: "fade"
+        },
+        contentClass: String,
+        autoClose: {
+          type: [Array, Boolean],
+          default: true
+        }
+      },
+      emits: {
+        close: () => true,
+        open: () => true
+      },
+      data() {
+        return {
+          isActive: false,
+          triggerStyle: {},
+          timer: void 0,
+          _bodyEl: void 0,
+          // Used to append to body
+          resizeObserver: void 0,
+          resizeListener: void 0,
+          timeOutID: void 0,
+          controller: void 0,
+          dynamicPosition: void 0
+          // Computed once opened
+        };
+      },
+      computed: {
+        rootClasses() {
+          return ["b-tooltip", this.type, this.dynamicPosition, this.size, {
+            "is-square": this.square,
+            "is-always": this.always,
+            "is-multiline": this.multilined,
+            "is-dashed": this.dashed
+          }];
+        },
+        newAnimation() {
+          return this.animated ? this.animation : void 0;
+        }
+      },
+      watch: {
+        isActive() {
+          this.isActive ? this.$emit("open") : this.$emit("close");
+          if (this.appendToBody) {
+            this.updateAppendToBody();
+          }
+        }
+      },
+      methods: {
+        computePosition() {
+          if (this.position !== "is-auto") return this.position;
+          const trigger = this.$refs.trigger;
+          const bounds = trigger.getBoundingClientRect();
+          const dt = bounds.top;
+          const db = window.innerHeight - bounds.bottom;
+          const dl = bounds.left;
+          const dr = window.innerWidth - bounds.right;
+          const min = Math.min(dt, db, dl, dr);
+          if (min === dt) {
+            return "is-bottom";
+          } else if (min === db) {
+            return "is-top";
+          } else if (min === dl) {
+            return "is-right";
+          } else {
+            return "is-left";
+          }
+        },
+        updateAppendToBody() {
+          const tooltip = this.$refs.tooltip;
+          const trigger = this.$refs.trigger;
+          if (tooltip && trigger) {
+            const tooltipEl = this.$data._bodyEl.children[0];
+            tooltipEl.classList.forEach((item) => tooltipEl.classList.remove(item));
+            this.rootClasses.forEach((item) => {
+              if (typeof item === "object") {
+                const record = item;
+                for (const key in record) {
+                  if (record[key]) {
+                    tooltipEl.classList.add(key);
+                  }
+                }
+              } else {
+                tooltipEl.classList.add(item);
+              }
+            });
+            const rect = trigger.getBoundingClientRect();
+            const top = rect.top + window.scrollY;
+            const left = rect.left + window.scrollX;
+            tooltipEl.style.position = "absolute";
+            this.dynamicPosition = this.computePosition();
+            switch (this.dynamicPosition) {
+              case "is-top":
+                tooltipEl.style.width = `${trigger.clientWidth}px`;
+                tooltipEl.style.height = "0px";
+                tooltipEl.style.top = "0px";
+                tooltipEl.style.left = "0px";
+                break;
+              case "is-bottom":
+                tooltipEl.style.width = `${trigger.clientWidth}px`;
+                tooltipEl.style.height = "0px";
+                tooltipEl.style.top = `${trigger.clientHeight}px`;
+                tooltipEl.style.left = "0px";
+                break;
+              case "is-left":
+                tooltipEl.style.width = "0px";
+                tooltipEl.style.height = `${trigger.clientHeight}px`;
+                tooltipEl.style.top = "0px";
+                tooltipEl.style.left = "0px";
+                break;
+              case "is-right":
+                tooltipEl.style.width = "0px";
+                tooltipEl.style.height = `${trigger.clientHeight}px`;
+                tooltipEl.style.top = "0px";
+                tooltipEl.style.left = `${trigger.clientWidth}px`;
+                break;
+            }
+            const wrapper = this.$data._bodyEl;
+            wrapper.style.position = "absolute";
+            wrapper.style.top = `${top}px`;
+            wrapper.style.left = `${left}px`;
+            wrapper.style.width = "0px";
+            wrapper.style.zIndex = this.isActive || this.always ? "99" : "-1";
+            this.triggerStyle = {
+              zIndex: this.isActive || this.always ? "100" : void 0
+            };
+          }
+        },
+        onClick() {
+          if (this.triggers.indexOf("click") < 0) return;
+          this.$nextTick(() => {
+            this.timeOutID = setTimeout(() => this.open());
+          });
+        },
+        onHover() {
+          if (this.triggers.indexOf("hover") < 0) return;
+          this.open();
+        },
+        onContextMenu(e) {
+          if (this.triggers.indexOf("contextmenu") < 0) return;
+          e.preventDefault();
+          this.open();
+        },
+        onFocus() {
+          if (this.triggers.indexOf("focus") < 0) return;
+          this.open();
+        },
+        open() {
+          this.dynamicPosition = this.computePosition();
+          if (this.delay) {
+            this.timer = setTimeout(() => {
+              this.isActive = true;
+              this.timer = void 0;
+            }, this.delay);
+          } else {
+            this.isActive = true;
+          }
+        },
+        close() {
+          if (typeof this.autoClose === "boolean") {
+            if (this.autoClose && this.timer) clearTimeout(this.timer);
+            if (this.closeDelay) {
+              this.timer = setTimeout(() => {
+                this.isActive = !this.autoClose;
+                this.timer = void 0;
+              }, this.closeDelay);
+            } else {
+              this.isActive = !this.autoClose;
+            }
+          }
+        },
+        /*
+        * Close tooltip if clicked outside.
+        */
+        clickedOutside(event) {
+          if (this.isActive) {
+            if (Array.isArray(this.autoClose)) {
+              if (this.autoClose.includes("outside")) {
+                if (!this.isInWhiteList(event.target)) {
+                  this.isActive = false;
+                  return;
+                }
+              }
+              if (this.autoClose.includes("inside")) {
+                if (this.isInWhiteList(event.target)) this.isActive = false;
+              }
+            }
+          }
+        },
+        /*
+         * Keypress event that is bound to the document
+         */
+        keyPress({ key }) {
+          if (this.isActive && (key === "Escape" || key === "Esc")) {
+            if (Array.isArray(this.autoClose)) {
+              if (this.autoClose.indexOf("escape") >= 0) this.isActive = false;
+            }
+          }
+        },
+        /*
+        * White-listed items to not close when clicked.
+        */
+        isInWhiteList(el) {
+          if (el === this.$refs.content) return true;
+          if (this.$refs.content != null) {
+            const children = this.$refs.content.querySelectorAll("*");
+            for (const child of children) {
+              if (el === child) {
+                return true;
+              }
+            }
+          }
+          return false;
+        }
+      },
+      mounted() {
+        if (this.appendToBody && typeof window !== "undefined") {
+          this.controller = new window.AbortController();
+          this.$data._bodyEl = createAbsoluteElement(this.$refs.content);
+          this.updateAppendToBody();
+          const animation = this.$el.closest(".animation-content");
+          if (animation != null) {
+            const listener = () => {
+              this.updateAppendToBody();
+              animation.removeEventListener("transitionend", listener);
+            };
+            animation.addEventListener("transitionend", listener, {
+              signal: this.controller.signal
+            });
+          }
+          this.resizeListener = () => this.updateAppendToBody();
+          window.addEventListener("resize", this.resizeListener);
+          this.resizeObserver = new ResizeObserver(this.resizeListener);
+          if (this.$el.parentNode != null && this.$el.parentNode.nodeType === Node.ELEMENT_NODE) {
+            this.resizeObserver.observe(this.$el.parentNode);
+          }
+        }
+        if (this.always) {
+          this.dynamicPosition = this.computePosition();
+        }
+      },
+      created() {
+        if (typeof window !== "undefined") {
+          document.addEventListener("click", this.clickedOutside);
+          document.addEventListener("keyup", this.keyPress);
+        }
+      },
+      beforeUnmount() {
+        if (typeof window !== "undefined") {
+          document.removeEventListener("click", this.clickedOutside);
+          document.removeEventListener("keyup", this.keyPress);
+        }
+        if (this.resizeListener != null) {
+          window.removeEventListener("resize", this.resizeListener);
+        }
+        if (this.resizeObserver != null) {
+          this.resizeObserver.disconnect();
+        }
+        if (this.appendToBody) {
+          removeElement(this.$data._bodyEl);
+        }
+        if (this.controller != null) {
+          this.controller.abort();
+        }
+        clearTimeout(this.timer);
+        clearTimeout(this.timeOutID);
+      }
+    });
+
+    var _export_sfc = (sfc, props) => {
+      const target = sfc.__vccOpts || sfc;
+      for (const [key, val] of props) {
+        target[key] = val;
+      }
+      return target;
+    };
+
+    function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          ref: "tooltip",
+          class: vue.normalizeClass(_ctx.rootClasses)
+        },
+        [
+          vue.createVNode(vue.Transition, {
+            name: _ctx.newAnimation,
+            persisted: ""
+          }, {
+            default: vue.withCtx(() => [
+              vue.withDirectives(vue.createElementVNode(
+                "div",
+                {
+                  ref: "content",
+                  class: vue.normalizeClass(["tooltip-content", _ctx.contentClass])
+                },
+                [
+                  _ctx.label ? (vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    { key: 0 },
+                    [
+                      vue.createTextVNode(
+                        vue.toDisplayString(_ctx.label),
+                        1
+                        /* TEXT */
+                      )
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  )) : _ctx.$slots.content ? vue.renderSlot(_ctx.$slots, "content", { key: 1 }) : vue.createCommentVNode("v-if", true)
+                ],
+                2
+                /* CLASS */
+              ), [
+                [vue.vShow, _ctx.active && (_ctx.isActive || _ctx.always)]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name"]),
+          vue.createElementVNode(
+            "div",
+            {
+              ref: "trigger",
+              class: "tooltip-trigger",
+              style: vue.normalizeStyle(_ctx.triggerStyle),
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
+              onContextmenu: _cache[1] || (_cache[1] = (...args) => _ctx.onContextMenu && _ctx.onContextMenu(...args)),
+              onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.onHover && _ctx.onHover(...args)),
+              onFocusCapture: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+              onBlurCapture: _cache[4] || (_cache[4] = (...args) => _ctx.close && _ctx.close(...args)),
+              onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.close && _ctx.close(...args))
+            },
+            [
+              vue.renderSlot(_ctx.$slots, "default", { ref: "slot" })
+            ],
+            36
+            /* STYLE, NEED_HYDRATION */
+          )
+        ],
+        2
+        /* CLASS */
+      );
+    }
+    var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+    const registerComponent = (Vue, component, name) => {
+      const componentName = component.name;
+      if (componentName == null) {
+        throw new Error("Buefy.registerComponent: missing component name");
+      }
+      Vue.component(componentName, component);
+    };
+
+    const Plugin = {
+      install(Vue) {
+        registerComponent(Vue, Tooltip);
+      }
+    };
+
+    exports.BTooltip = Tooltip;
+    exports.default = Plugin;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/dist/components/tooltip/index.min.js

@@ -0,0 +1,2 @@
+/*! Buefy v1.0.2 | 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).Tooltip={},e.Vue)}(this,(function(e,t){"use strict";let i="is-primary",s=null,o=null;const n=["is-auto","is-top","is-bottom","is-left","is-right"];var l=((e,t)=>{const i=e.__vccOpts||e;for(const[e,s]of t)i[e]=s;return i})(t.defineComponent({name:"BTooltip",props:{active:{type:Boolean,default:!0},type:{type:String,default:()=>i},label:String,delay:{type:Number,default:()=>s},closeDelay:{type:Number,default:()=>o},position:{type:String,default:"is-auto",validator:e=>n.indexOf(e)>-1},triggers:{type:Array,default:()=>["hover"]},always:Boolean,square:Boolean,dashed:Boolean,multilined:Boolean,size:{type:String,default:"is-medium"},appendToBody:Boolean,animated:{type:Boolean,default:!0},animation:{type:String,default:"fade"},contentClass:String,autoClose:{type:[Array,Boolean],default:!0}},emits:{close:()=>!0,open:()=>!0},data:()=>({isActive:!1,triggerStyle:{},timer:void 0,_bodyEl:void 0,resizeObserver:void 0,resizeListener:void 0,timeOutID:void 0,controller:void 0,dynamicPosition:void 0}),computed:{rootClasses(){return["b-tooltip",this.type,this.dynamicPosition,this.size,{"is-square":this.square,"is-always":this.always,"is-multiline":this.multilined,"is-dashed":this.dashed}]},newAnimation(){return this.animated?this.animation:void 0}},watch:{isActive(){this.isActive?this.$emit("open"):this.$emit("close"),this.appendToBody&&this.updateAppendToBody()}},methods:{computePosition(){if("is-auto"!==this.position)return this.position;const e=this.$refs.trigger.getBoundingClientRect(),t=e.top,i=window.innerHeight-e.bottom,s=e.left,o=window.innerWidth-e.right,n=Math.min(t,i,s,o);return n===t?"is-bottom":n===i?"is-top":n===s?"is-right":"is-left"},updateAppendToBody(){const e=this.$refs.tooltip,t=this.$refs.trigger;if(e&&t){const e=this.$data._bodyEl.children[0];e.classList.forEach((t=>e.classList.remove(t))),this.rootClasses.forEach((t=>{if("object"==typeof t){const i=t;for(const t in i)i[t]&&e.classList.add(t)}else e.classList.add(t)}));const i=t.getBoundingClientRect(),s=i.top+window.scrollY,o=i.left+window.scrollX;switch(e.style.position="absolute",this.dynamicPosition=this.computePosition(),this.dynamicPosition){case"is-top":e.style.width=`${t.clientWidth}px`,e.style.height="0px",e.style.top="0px",e.style.left="0px";break;case"is-bottom":e.style.width=`${t.clientWidth}px`,e.style.height="0px",e.style.top=`${t.clientHeight}px`,e.style.left="0px";break;case"is-left":e.style.width="0px",e.style.height=`${t.clientHeight}px`,e.style.top="0px",e.style.left="0px";break;case"is-right":e.style.width="0px",e.style.height=`${t.clientHeight}px`,e.style.top="0px",e.style.left=`${t.clientWidth}px`}const n=this.$data._bodyEl;n.style.position="absolute",n.style.top=`${s}px`,n.style.left=`${o}px`,n.style.width="0px",n.style.zIndex=this.isActive||this.always?"99":"-1",this.triggerStyle={zIndex:this.isActive||this.always?"100":void 0}}},onClick(){this.triggers.indexOf("click")<0||this.$nextTick((()=>{this.timeOutID=setTimeout((()=>this.open()))}))},onHover(){this.triggers.indexOf("hover")<0||this.open()},onContextMenu(e){this.triggers.indexOf("contextmenu")<0||(e.preventDefault(),this.open())},onFocus(){this.triggers.indexOf("focus")<0||this.open()},open(){this.dynamicPosition=this.computePosition(),this.delay?this.timer=setTimeout((()=>{this.isActive=!0,this.timer=void 0}),this.delay):this.isActive=!0},close(){"boolean"==typeof this.autoClose&&(this.autoClose&&this.timer&&clearTimeout(this.timer),this.closeDelay?this.timer=setTimeout((()=>{this.isActive=!this.autoClose,this.timer=void 0}),this.closeDelay):this.isActive=!this.autoClose)},clickedOutside(e){if(this.isActive&&Array.isArray(this.autoClose)){if(this.autoClose.includes("outside")&&!this.isInWhiteList(e.target))return void(this.isActive=!1);this.autoClose.includes("inside")&&this.isInWhiteList(e.target)&&(this.isActive=!1)}},keyPress({key:e}){!this.isActive||"Escape"!==e&&"Esc"!==e||Array.isArray(this.autoClose)&&this.autoClose.indexOf("escape")>=0&&(this.isActive=!1)},isInWhiteList(e){if(e===this.$refs.content)return!0;if(null!=this.$refs.content){const t=this.$refs.content.querySelectorAll("*");for(const i of t)if(e===i)return!0}return!1}},mounted(){if(this.appendToBody&&"undefined"!=typeof window){this.controller=new window.AbortController,this.$data._bodyEl=function(e){const t=document.createElement("div");t.style.position="absolute",t.style.left="0px",t.style.top="0px",t.style.width="100%";const i=document.createElement("div");return t.appendChild(i),i.appendChild(e),document.body.appendChild(t),t}(this.$refs.content),this.updateAppendToBody();const e=this.$el.closest(".animation-content");if(null!=e){const t=()=>{this.updateAppendToBody(),e.removeEventListener("transitionend",t)};e.addEventListener("transitionend",t,{signal:this.controller.signal})}this.resizeListener=()=>this.updateAppendToBody(),window.addEventListener("resize",this.resizeListener),this.resizeObserver=new ResizeObserver(this.resizeListener),null!=this.$el.parentNode&&this.$el.parentNode.nodeType===Node.ELEMENT_NODE&&this.resizeObserver.observe(this.$el.parentNode)}this.always&&(this.dynamicPosition=this.computePosition())},created(){"undefined"!=typeof window&&(document.addEventListener("click",this.clickedOutside),document.addEventListener("keyup",this.keyPress))},beforeUnmount(){var e;"undefined"!=typeof window&&(document.removeEventListener("click",this.clickedOutside),document.removeEventListener("keyup",this.keyPress)),null!=this.resizeListener&&window.removeEventListener("resize",this.resizeListener),null!=this.resizeObserver&&this.resizeObserver.disconnect(),this.appendToBody&&(void 0!==(e=this.$data._bodyEl).remove?e.remove():void 0!==e.parentNode&&null!==e.parentNode&&e.parentNode.removeChild(e)),null!=this.controller&&this.controller.abort(),clearTimeout(this.timer),clearTimeout(this.timeOutID)}}),[["render",function(e,i,s,o,n,l){return t.openBlock(),t.createElementBlock("div",{ref:"tooltip",class:t.normalizeClass(e.rootClasses)},[t.createVNode(t.Transition,{name:e.newAnimation,persisted:""},{default:t.withCtx((()=>[t.withDirectives(t.createElementVNode("div",{ref:"content",class:t.normalizeClass(["tooltip-content",e.contentClass])},[e.label?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode(t.toDisplayString(e.label),1)],64)):e.$slots.content?t.renderSlot(e.$slots,"content",{key:1}):t.createCommentVNode("v-if",!0)],2),[[t.vShow,e.active&&(e.isActive||e.always)]])])),_:3},8,["name"]),t.createElementVNode("div",{ref:"trigger",class:"tooltip-trigger",style:t.normalizeStyle(e.triggerStyle),onClick:i[0]||(i[0]=(...t)=>e.onClick&&e.onClick(...t)),onContextmenu:i[1]||(i[1]=(...t)=>e.onContextMenu&&e.onContextMenu(...t)),onMouseenter:i[2]||(i[2]=(...t)=>e.onHover&&e.onHover(...t)),onFocusCapture:i[3]||(i[3]=(...t)=>e.onFocus&&e.onFocus(...t)),onBlurCapture:i[4]||(i[4]=(...t)=>e.close&&e.close(...t)),onMouseleave:i[5]||(i[5]=(...t)=>e.close&&e.close(...t))},[t.renderSlot(e.$slots,"default",{ref:"slot"})],36)],2)}]]);const r={install(e){((e,t)=>{const i=t.name;if(null==i)throw new Error("Buefy.registerComponent: missing component name");e.component(i,t)})(e,l)}};e.BTooltip=l,e.default=r,Object.defineProperty(e,"__esModule",{value:!0})}));