buefy 0.9.26 → 0.9.28

package/dist/esm/DropdownItem-55682322.js

@@ -0,0 +1,556 @@
+import { e as _toConsumableArray, l as _createForOfIteratorHelper, b as _typeof } from './_rollupPluginBabelHelpers-df313029.js';
+import { t as trapFocus } from './trapFocus-f0736873.js';
+import { c as config } from './config-e7d4b9c2.js';
+import { toCssWidth, isCustomElement, createAbsoluteElement, removeElement } from './helpers.js';
+import { P as ProviderParentMixin, I as InjectedChildMixin } from './InjectedChildMixin-b4220787.js';
+import { n as normalizeComponent } from './plugins-218aea86.js';
+
+var DEFAULT_CLOSE_OPTIONS = ['escape', 'outside'];
+var script$1 = {
+  name: 'BDropdown',
+  directives: {
+    trapFocus: trapFocus
+  },
+  mixins: [ProviderParentMixin('dropdown')],
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object, Array, Function],
+      default: null
+    },
+    disabled: Boolean,
+    inline: Boolean,
+    scrollable: Boolean,
+    maxHeight: {
+      type: [String, Number],
+      default: 200
+    },
+    position: {
+      type: String,
+      validator: function validator(value) {
+        return ['is-top-right', 'is-top-left', 'is-bottom-left', 'is-bottom-right'].indexOf(value) > -1;
+      }
+    },
+    triggers: {
+      type: Array,
+      default: function _default() {
+        return ['click'];
+      }
+    },
+    mobileModal: {
+      type: Boolean,
+      default: function _default() {
+        return config.defaultDropdownMobileModal;
+      }
+    },
+    ariaRole: {
+      type: String,
+      validator: function validator(value) {
+        return ['menu', 'list', 'dialog'].indexOf(value) > -1;
+      },
+      default: null
+    },
+    animation: {
+      type: String,
+      default: 'fade'
+    },
+    multiple: Boolean,
+    trapFocus: {
+      type: Boolean,
+      default: function _default() {
+        return config.defaultTrapFocus;
+      }
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    },
+    canClose: {
+      type: [Array, Boolean],
+      default: true
+    },
+    expanded: Boolean,
+    appendToBody: Boolean,
+    appendToBodyCopyParent: Boolean,
+    triggerTabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data: function data() {
+    return {
+      selected: this.value,
+      style: {},
+      isActive: false,
+      isHoverable: false,
+      maybeTap: false,
+      isTouchEnabled: false,
+      _bodyEl: undefined,
+      // Used to append to body
+      timeOutID: null,
+      timeOutID2: null
+    };
+  },
+  computed: {
+    rootClasses: function rootClasses() {
+      return [this.position, {
+        'is-disabled': this.disabled,
+        'is-hoverable': this.hoverable,
+        'is-inline': this.inline,
+        'is-active': this.isActive || this.inline,
+        'is-mobile-modal': this.isMobileModal,
+        'is-expanded': this.expanded,
+        'is-touch-enabled': this.isTouchEnabled
+      }];
+    },
+    isMobileModal: function isMobileModal() {
+      return this.mobileModal && !this.inline;
+    },
+    cancelOptions: function cancelOptions() {
+      return typeof this.canClose === 'boolean' ? this.canClose ? DEFAULT_CLOSE_OPTIONS : [] : this.canClose;
+    },
+    contentStyle: function contentStyle() {
+      return {
+        maxHeight: this.scrollable ? toCssWidth(this.maxHeight) : null,
+        overflow: this.scrollable ? 'auto' : null
+      };
+    },
+    hoverable: function hoverable() {
+      return this.triggers.indexOf('hover') >= 0;
+    }
+  },
+  watch: {
+    /**
+    * When v-model is changed set the new selected item.
+    */
+    value: function value(_value) {
+      this.selected = _value;
+    },
+    /**
+    * Emit event when isActive value is changed.
+    *
+    * Also resets `isTouchEnabled` when it turns inactive.
+    */
+    isActive: function isActive(value) {
+      var _this = this;
+      this.$emit('active-change', value);
+      if (!value) {
+        // delays to reset the touch enabled flag until the dropdown
+        // menu disappears to avoid glitches
+        // also takes care of chattering, e.g., repeated quick taps,
+        // otherwise the flag may become inconsistent with the actual
+        // state of the dropdown menu
+        this.timeOutID = setTimeout(function () {
+          if (!_this.isActive) {
+            _this.isTouchEnabled = false;
+          }
+        }, 250);
+      }
+      this.handleScroll();
+      if (this.appendToBody) {
+        this.$nextTick(function () {
+          _this.updateAppendToBody();
+        });
+      }
+    },
+    isHoverable: function isHoverable(value) {
+      if (this.hoverable) {
+        this.$emit('active-change', value);
+      }
+    }
+  },
+  methods: {
+    handleScroll: function handleScroll() {
+      if (typeof window === 'undefined') return;
+      if (this.isMobileModal) {
+        if (this.isActive) {
+          document.documentElement.classList.add('is-clipped-touch');
+        } else {
+          document.documentElement.classList.remove('is-clipped-touch');
+        }
+      }
+    },
+    /**
+     * Click listener from DropdownItem.
+     *   1. Set new selected item.
+     *   2. Emit input event to update the user v-model.
+     *   3. Close the dropdown.
+     */
+    selectItem: function selectItem(value) {
+      if (this.multiple) {
+        if (this.selected) {
+          if (this.selected.indexOf(value) === -1) {
+            // Add value
+            this.selected = [].concat(_toConsumableArray(this.selected), [value]);
+          } else {
+            // Remove value
+            this.selected = this.selected.filter(function (val) {
+              return val !== value;
+            });
+          }
+        } else {
+          this.selected = [value];
+        }
+        this.$emit('change', this.selected);
+      } else {
+        if (this.selected !== value) {
+          this.selected = value;
+          this.$emit('change', this.selected);
+        }
+      }
+      this.$emit('input', this.selected);
+      if (!this.multiple) {
+        this.isActive = !this.closeOnClick;
+        if (this.hoverable && this.closeOnClick) {
+          this.isHoverable = false;
+        }
+      }
+    },
+    /**
+    * White-listed items to not close when clicked.
+    */
+    isInWhiteList: function isInWhiteList(el) {
+      if (el === this.$refs.dropdownMenu) return true;
+      if (el === this.$refs.trigger) return true;
+      // All chidren from dropdown
+      if (this.$refs.dropdownMenu !== undefined) {
+        var children = this.$refs.dropdownMenu.querySelectorAll('*');
+        var _iterator = _createForOfIteratorHelper(children),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var child = _step.value;
+            if (el === child) {
+              return true;
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+      // All children from trigger
+      if (this.$refs.trigger !== undefined) {
+        var _children = this.$refs.trigger.querySelectorAll('*');
+        var _iterator2 = _createForOfIteratorHelper(_children),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var _child = _step2.value;
+            if (el === _child) {
+              return true;
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+      return false;
+    },
+    /**
+    * Close dropdown if clicked outside.
+    */
+    clickedOutside: function clickedOutside(event) {
+      if (this.cancelOptions.indexOf('outside') < 0) return;
+      if (this.inline) return;
+      var target = isCustomElement(this) ? event.composedPath()[0] : event.target;
+      if (!this.isInWhiteList(target)) this.isActive = false;
+    },
+    /**
+     * Keypress event that is bound to the document
+     */
+    keyPress: function keyPress(_ref) {
+      var key = _ref.key;
+      if (this.isActive && (key === 'Escape' || key === 'Esc')) {
+        if (this.cancelOptions.indexOf('escape') < 0) return;
+        this.isActive = false;
+      }
+    },
+    onClick: function onClick() {
+      // hover precedes
+      if (this.triggers.indexOf('hover') !== -1) return;
+      if (this.triggers.indexOf('click') < 0) return;
+      this.toggle();
+    },
+    onContextMenu: function onContextMenu() {
+      if (this.triggers.indexOf('contextmenu') < 0) return;
+      this.toggle();
+    },
+    onHover: function onHover() {
+      if (this.triggers.indexOf('hover') < 0) return;
+      // touch precedes
+      if (this.isTouchEnabled) return;
+      this.isHoverable = true;
+    },
+    // takes care of touch-enabled devices
+    // - does nothing if hover trigger is disabled
+    // - suppresses hover trigger by setting isTouchEnabled
+    // - handles only a tap; i.e., touchstart on the trigger immediately
+    //   folowed by touchend
+    onTouchStart: function onTouchStart() {
+      this.maybeTap = true;
+    },
+    onTouchMove: function onTouchMove() {
+      this.maybeTap = false;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (this.triggers.indexOf('hover') === -1) return;
+      if (!this.maybeTap) return;
+      // tap on dropdown contents may happen without preventDefault
+      e.preventDefault();
+      this.maybeTap = false;
+      this.isTouchEnabled = true;
+      this.toggle();
+    },
+    onFocus: function onFocus() {
+      if (this.triggers.indexOf('focus') < 0) return;
+      this.toggle();
+    },
+    /**
+    * Toggle dropdown if it's not disabled.
+    */
+    toggle: function toggle() {
+      var _this2 = this;
+      if (this.disabled) return;
+      if (!this.isActive) {
+        // if not active, toggle after clickOutside event
+        // this fixes toggling programmatic
+        this.$nextTick(function () {
+          var value = !_this2.isActive;
+          _this2.isActive = value;
+          // Vue 2.6.x ???
+          _this2.timeOutID2 = setTimeout(function () {
+            return _this2.isActive = value;
+          });
+        });
+      } else {
+        this.isActive = !this.isActive;
+      }
+    },
+    updateAppendToBody: function updateAppendToBody() {
+      var dropdown = this.$refs.dropdown;
+      var dropdownMenu = this.$refs.dropdownMenu;
+      var trigger = this.$refs.trigger;
+      if (dropdownMenu && trigger) {
+        // update wrapper dropdown
+        var dropdownWrapper = this.$data._bodyEl.children[0];
+        dropdownWrapper.classList.forEach(function (item) {
+          return dropdownWrapper.classList.remove(item);
+        });
+        dropdownWrapper.classList.add('dropdown');
+        dropdownWrapper.classList.add('dropdown-menu-animation');
+        if (this.$vnode && this.$vnode.data && this.$vnode.data.staticClass) {
+          dropdownWrapper.classList.add(this.$vnode.data.staticClass);
+        }
+        this.rootClasses.forEach(function (item) {
+          // skip position prop
+          if (item && _typeof(item) === 'object') {
+            for (var key in item) {
+              if (item[key]) {
+                dropdownWrapper.classList.add(key);
+              }
+            }
+          }
+        });
+        if (this.appendToBodyCopyParent) {
+          var parentNode = this.$refs.dropdown.parentNode;
+          var parent = this.$data._bodyEl;
+          parent.classList.forEach(function (item) {
+            return parent.classList.remove(item);
+          });
+          parentNode.classList.forEach(function (item) {
+            parent.classList.add(item);
+          });
+        }
+        var rect = trigger.getBoundingClientRect();
+        var top = rect.top + window.scrollY;
+        var left = rect.left + window.scrollX;
+        if (!this.position || this.position.indexOf('bottom') >= 0) {
+          top += trigger.clientHeight;
+        } else {
+          top -= dropdownMenu.clientHeight;
+        }
+        if (this.position && this.position.indexOf('left') >= 0) {
+          left -= dropdownMenu.clientWidth - trigger.clientWidth;
+        }
+        this.style = {
+          position: 'absolute',
+          top: "".concat(top, "px"),
+          left: "".concat(left, "px"),
+          zIndex: '99',
+          width: this.expanded ? "".concat(dropdown.offsetWidth, "px") : undefined
+        };
+      }
+    }
+  },
+  mounted: function mounted() {
+    if (this.appendToBody) {
+      this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdownMenu);
+      this.updateAppendToBody();
+    }
+  },
+  created: function created() {
+    if (typeof window !== 'undefined') {
+      document.addEventListener('click', this.clickedOutside);
+      document.addEventListener('keyup', this.keyPress);
+    }
+  },
+  beforeDestroy: function beforeDestroy() {
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('click', this.clickedOutside);
+      document.removeEventListener('keyup', this.keyPress);
+    }
+    if (this.appendToBody) {
+      removeElement(this.$data._bodyEl);
+    }
+    clearTimeout(this.timeOutID);
+    clearTimeout(this.timeOutID2);
+  }
+};
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"dropdown",staticClass:"dropdown dropdown-menu-animation",class:_vm.rootClasses,on:{"mouseleave":function($event){_vm.isHoverable = false;}}},[(!_vm.inline)?_c('div',{ref:"trigger",staticClass:"dropdown-trigger",attrs:{"tabindex":_vm.disabled ? false : _vm.triggerTabindex,"aria-haspopup":"true"},on:{"click":_vm.onClick,"contextmenu":function($event){$event.preventDefault();return _vm.onContextMenu($event)},"mouseenter":_vm.onHover,"!focus":function($event){return _vm.onFocus($event)},"touchstart":_vm.onTouchStart,"touchmove":_vm.onTouchMove,"touchend":_vm.onTouchEnd}},[_vm._t("trigger",null,{"active":_vm.isActive})],2):_vm._e(),_c('transition',{attrs:{"name":_vm.animation}},[(_vm.isMobileModal)?_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isActive),expression:"isActive"}],staticClass:"background",attrs:{"aria-hidden":!_vm.isActive}}):_vm._e()]),_c('transition',{attrs:{"name":_vm.animation}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:((!_vm.disabled && (_vm.isActive || _vm.isHoverable)) || _vm.inline),expression:"(!disabled && (isActive || isHoverable)) || inline"},{name:"trap-focus",rawName:"v-trap-focus",value:(_vm.trapFocus),expression:"trapFocus"}],ref:"dropdownMenu",staticClass:"dropdown-menu",style:(_vm.style),attrs:{"aria-hidden":!_vm.isActive}},[_c('div',{staticClass:"dropdown-content",style:(_vm.contentStyle),attrs:{"role":_vm.ariaRole,"aria-modal":!_vm.inline}},[_vm._t("default")],2)])])],1)};
+var __vue_staticRenderFns__$1 = [];
+
+  /* style */
+  const __vue_inject_styles__$1 = undefined;
+  /* scoped */
+  const __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$1 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$1 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+  var Dropdown = __vue_component__$1;
+
+//
+var script = {
+  name: 'BDropdownItem',
+  mixins: [InjectedChildMixin('dropdown')],
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object, Array, Function],
+      default: null
+    },
+    separator: Boolean,
+    disabled: Boolean,
+    custom: Boolean,
+    focusable: {
+      type: Boolean,
+      default: true
+    },
+    paddingless: Boolean,
+    hasLink: Boolean,
+    ariaRole: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    anchorClasses: function anchorClasses() {
+      return {
+        'is-disabled': this.parent.disabled || this.disabled,
+        'is-paddingless': this.paddingless,
+        'is-active': this.isActive
+      };
+    },
+    itemClasses: function itemClasses() {
+      return {
+        'dropdown-item': !this.hasLink,
+        'is-disabled': this.disabled,
+        'is-paddingless': this.paddingless,
+        'is-active': this.isActive,
+        'has-link': this.hasLink
+      };
+    },
+    ariaRoleItem: function ariaRoleItem() {
+      return this.ariaRole === 'menuitem' || this.ariaRole === 'listitem' ? this.ariaRole : null;
+    },
+    isClickable: function isClickable() {
+      return !this.parent.disabled && !this.separator && !this.disabled && !this.custom;
+    },
+    isActive: function isActive() {
+      if (this.parent.selected === null) return false;
+      if (this.parent.multiple) return this.parent.selected.indexOf(this.value) >= 0;
+      return this.value === this.parent.selected;
+    },
+    isFocusable: function isFocusable() {
+      return this.hasLink ? false : this.focusable;
+    }
+  },
+  methods: {
+    /**
+    * Click listener, select the item.
+    */
+    selectItem: function selectItem() {
+      if (!this.isClickable) return;
+      this.parent.selectItem(this.value);
+      this.$emit('click');
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.separator)?_c('hr',{staticClass:"dropdown-divider"}):(!_vm.custom && !_vm.hasLink)?_c('a',{staticClass:"dropdown-item",class:_vm.anchorClasses,attrs:{"role":_vm.ariaRoleItem,"tabindex":_vm.isFocusable ? 0 : null},on:{"click":_vm.selectItem}},[_vm._t("default")],2):_c('div',{class:_vm.itemClasses,attrs:{"role":_vm.ariaRoleItem,"tabindex":_vm.isFocusable ? 0 : null},on:{"click":_vm.selectItem}},[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+  var DropdownItem = __vue_component__;
+
+export { DropdownItem as D, Dropdown as a };