@gitlab/ui 84.1.0 → 85.0.0

package/dist/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -0,0 +1,209 @@
+import { NAME_TOAST_POP, NAME_TOASTER, NAME_TOAST } from '../../../constants/components';
+import { HOOK_EVENT_NAME_DESTROYED, EVENT_NAME_HIDDEN, EVENT_NAME_DESTROYED, EVENT_NAME_SHOW, EVENT_NAME_HIDE } from '../../../constants/events';
+import { useParentMixin } from '../../../mixins/use-parent';
+import { concat } from '../../../utils/array';
+import { getComponentConfig } from '../../../utils/config';
+import { requestAF } from '../../../utils/dom';
+import { getRootEventName, getRootActionEventName } from '../../../utils/events';
+import { isUndefined, isString } from '../../../utils/inspect';
+import { keys, omit, hasOwnProperty, defineProperty, assign, defineProperties, readonlyDescriptor } from '../../../utils/object';
+import { pluginFactory } from '../../../utils/plugins';
+import { warn, warnNotClient } from '../../../utils/warn';
+import { createNewChildComponent } from '../../../utils/create-new-child-component';
+import { getEventRoot } from '../../../utils/get-event-root';
+import { props, BToast } from '../toast';
+
+/**
+ * Plugin for adding `$bvToast` property to all Vue instances
+ */
+
+// --- Constants ---
+
+const PROP_NAME = '$bvToast';
+const PROP_NAME_PRIV = '_bv__toast';
+
+// Base toast props that are allowed
+// Some may be ignored or overridden on some message boxes
+// Prop ID is allowed, but really only should be used for testing
+// We need to add it in explicitly as it comes from the `idMixin`
+const BASE_PROPS = ['id', ...keys(omit(props, ['static', 'visible']))];
+
+// Map prop names to toast slot names
+const propsToSlots = {
+  toastContent: 'default',
+  title: 'toast-title'
+};
+
+// --- Helper methods ---
+
+// Method to filter only recognized props that are not undefined
+const filterOptions = options => {
+  return BASE_PROPS.reduce((memo, key) => {
+    if (!isUndefined(options[key])) {
+      memo[key] = options[key];
+    }
+    return memo;
+  }, {});
+};
+
+// Method to install `$bvToast` VM injection
+const plugin = Vue => {
+  // Create a private sub-component constructor that
+  // extends BToast and self-destructs after hidden
+  // @vue/component
+  const BVToastPop = Vue.extend({
+    name: NAME_TOAST_POP,
+    extends: BToast,
+    mixins: [useParentMixin],
+    destroyed() {
+      // Make sure we not in document any more
+      const {
+        $el
+      } = this;
+      if ($el && $el.parentNode) {
+        $el.parentNode.removeChild($el);
+      }
+    },
+    mounted() {
+      // Self destruct handler
+      const handleDestroy = () => {
+        // Ensure the toast has been force hidden
+        this.localShow = false;
+        this.doRender = false;
+        this.$nextTick(() => {
+          this.$nextTick(() => {
+            // In a `requestAF()` to release control back to application
+            // and to allow the portal-target time to remove the content
+            requestAF(() => {
+              this.$destroy();
+            });
+          });
+        });
+      };
+      // Self destruct if parent destroyed
+      this.bvParent.$once(HOOK_EVENT_NAME_DESTROYED, handleDestroy);
+      // Self destruct after hidden
+      this.$once(EVENT_NAME_HIDDEN, handleDestroy);
+      // Self destruct when toaster is destroyed
+      this.listenOnRoot(getRootEventName(NAME_TOASTER, EVENT_NAME_DESTROYED), toaster => {
+        /* istanbul ignore next: hard to test */
+        if (toaster === this.toaster) {
+          handleDestroy();
+        }
+      });
+    }
+  });
+
+  // Private method to generate the on-demand toast
+  const makeToast = (props, parent) => {
+    if (warnNotClient(PROP_NAME)) {
+      /* istanbul ignore next */
+      return;
+    }
+    // Create an instance of `BVToastPop` component
+    const toast = createNewChildComponent(parent, BVToastPop, {
+      // We set parent as the local VM so these toasts can emit events on the
+      // app `$root`, and it ensures `BToast` is destroyed when parent is destroyed
+      propsData: {
+        ...filterOptions(getComponentConfig(NAME_TOAST)),
+        // Add in (filtered) user supplied props
+        ...omit(props, keys(propsToSlots)),
+        // Props that can't be overridden
+        static: false,
+        visible: true
+      }
+    });
+    // Convert certain props to slots
+    keys(propsToSlots).forEach(prop => {
+      let value = props[prop];
+      if (!isUndefined(value)) {
+        // Can be a string, or array of VNodes
+        if (prop === 'title' && isString(value)) {
+          // Special case for title if it is a string, we wrap in a <strong>
+          value = [parent.$createElement('strong', {
+            class: 'mr-2'
+          }, value)];
+        }
+        toast.$slots[propsToSlots[prop]] = concat(value);
+      }
+    });
+    // Create a mount point (a DIV) and mount it (which triggers the show)
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    toast.$mount(div);
+  };
+
+  // Declare BvToast instance property class
+  class BvToast {
+    constructor(vm) {
+      // Assign the new properties to this instance
+      assign(this, {
+        _vm: vm,
+        _root: getEventRoot(vm)
+      });
+      // Set these properties as read-only and non-enumerable
+      defineProperties(this, {
+        _vm: readonlyDescriptor(),
+        _root: readonlyDescriptor()
+      });
+    }
+
+    // --- Public Instance methods ---
+
+    // Opens a user defined toast and returns immediately
+    toast(content) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (!content || warnNotClient(PROP_NAME)) {
+        /* istanbul ignore next */
+        return;
+      }
+      makeToast({
+        ...filterOptions(options),
+        toastContent: content
+      }, this._vm);
+    }
+
+    // shows a `<b-toast>` component with the specified ID
+    show(id) {
+      if (id) {
+        this._root.$emit(getRootActionEventName(NAME_TOAST, EVENT_NAME_SHOW), id);
+      }
+    }
+
+    // Hide a toast with specified ID, or if not ID all toasts
+    hide() {
+      let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      this._root.$emit(getRootActionEventName(NAME_TOAST, EVENT_NAME_HIDE), id);
+    }
+  }
+
+  // Add our instance mixin
+  Vue.mixin({
+    beforeCreate() {
+      // Because we need access to `$root` for `$emits`, and VM for parenting,
+      // we have to create a fresh instance of `BvToast` for each VM
+      this[PROP_NAME_PRIV] = new BvToast(this);
+    }
+  });
+
+  // Define our read-only `$bvToast` instance property
+  // Placed in an if just in case in HMR mode
+  if (!hasOwnProperty(Vue.prototype, PROP_NAME)) {
+    defineProperty(Vue.prototype, PROP_NAME, {
+      get() {
+        /* istanbul ignore next */
+        if (!this || !this[PROP_NAME_PRIV]) {
+          warn(`"${PROP_NAME}" must be accessed from a Vue instance "this" context.`, NAME_TOAST);
+        }
+        return this[PROP_NAME_PRIV];
+      }
+    });
+  }
+};
+const BVToastPlugin = /*#__PURE__*/pluginFactory({
+  plugins: {
+    plugin
+  }
+});
+
+export { BVToastPlugin };

package/dist/vendor/bootstrap-vue/src/components/toast/index.js

@@ -0,0 +1,19 @@
+import { BVToastPlugin } from './helpers/bv-toast';
+import { BToast } from './toast';
+export { BToast } from './toast';
+import { BToaster } from './toaster';
+export { BToaster } from './toaster';
+import { pluginFactory } from '../../utils/plugins';
+
+const ToastPlugin = /*#__PURE__*/pluginFactory({
+  components: {
+    BToast,
+    BToaster
+  },
+  // $bvToast injection
+  plugins: {
+    BVToastPlugin
+  }
+});
+
+export { ToastPlugin };

package/dist/vendor/bootstrap-vue/src/components/toast/toast.js

@@ -0,0 +1,419 @@
+import { Wormhole, Portal } from 'portal-vue';
+import { extend, COMPONENT_UID_KEY } from '../../vue';
+import { NAME_TOAST, NAME_TOASTER } from '../../constants/components';
+import { EVENT_NAME_CHANGE, EVENT_NAME_SHOW, EVENT_NAME_HIDE, EVENT_NAME_DESTROYED, EVENT_OPTIONS_NO_CAPTURE, EVENT_NAME_SHOWN, EVENT_NAME_HIDDEN } from '../../constants/events';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props';
+import { SLOT_NAME_TOAST_TITLE, SLOT_NAME_DEFAULT } from '../../constants/slots';
+import { BvEvent } from '../../utils/bv-event.class';
+import { requestAF } from '../../utils/dom';
+import { getRootActionEventName, getRootEventName, eventOnOff } from '../../utils/events';
+import { mathMax } from '../../utils/math';
+import { makeModelMixin } from '../../utils/model';
+import { toInteger } from '../../utils/number';
+import { pick, sortKeys } from '../../utils/object';
+import { makePropsConfigurable, makeProp, pluckProps } from '../../utils/props';
+import { isLink } from '../../utils/router';
+import { createNewChildComponent } from '../../utils/create-new-child-component';
+import { attrsMixin } from '../../mixins/attrs';
+import { props as props$2, idMixin } from '../../mixins/id';
+import { listenOnRootMixin } from '../../mixins/listen-on-root';
+import { normalizeSlotMixin } from '../../mixins/normalize-slot';
+import { scopedStyleMixin } from '../../mixins/scoped-style';
+import { BButtonClose } from '../button/button-close';
+import { props as props$1, BLink } from '../link/link';
+import { BVTransition } from '../transition/bv-transition';
+import { BToaster } from './toaster';
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('visible', {
+  type: PROP_TYPE_BOOLEAN,
+  defaultValue: false,
+  event: EVENT_NAME_CHANGE
+});
+const MIN_DURATION = 1000;
+
+// --- Props ---
+
+const linkProps = pick(props$1, ['href', 'to']);
+const props = makePropsConfigurable(sortKeys({
+  ...props$2,
+  ...modelProps,
+  ...linkProps,
+  appendToast: makeProp(PROP_TYPE_BOOLEAN, false),
+  autoHideDelay: makeProp(PROP_TYPE_NUMBER_STRING, 5000),
+  bodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  headerTag: makeProp(PROP_TYPE_STRING, 'header'),
+  // Switches role to 'status' and aria-live to 'polite'
+  isStatus: makeProp(PROP_TYPE_BOOLEAN, false),
+  noAutoHide: makeProp(PROP_TYPE_BOOLEAN, false),
+  noCloseButton: makeProp(PROP_TYPE_BOOLEAN, false),
+  noFade: makeProp(PROP_TYPE_BOOLEAN, false),
+  noHoverPause: makeProp(PROP_TYPE_BOOLEAN, false),
+  solid: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Render the toast in place, rather than in a portal-target
+  static: makeProp(PROP_TYPE_BOOLEAN, false),
+  title: makeProp(PROP_TYPE_STRING),
+  toastClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  toaster: makeProp(PROP_TYPE_STRING, 'b-toaster-top-right'),
+  variant: makeProp(PROP_TYPE_STRING)
+}), NAME_TOAST);
+
+// --- Main component ---
+
+// @vue/component
+const BToast = /*#__PURE__*/extend({
+  name: NAME_TOAST,
+  mixins: [attrsMixin, idMixin, modelMixin, listenOnRootMixin, normalizeSlotMixin, scopedStyleMixin],
+  inheritAttrs: false,
+  props,
+  data() {
+    return {
+      isMounted: false,
+      doRender: false,
+      localShow: false,
+      isTransitioning: false,
+      isHiding: false,
+      order: 0,
+      dismissStarted: 0,
+      resumeDismiss: 0
+    };
+  },
+  computed: {
+    toastClasses() {
+      const {
+        appendToast,
+        variant
+      } = this;
+      return {
+        'b-toast-solid': this.solid,
+        'b-toast-append': appendToast,
+        'b-toast-prepend': !appendToast,
+        [`b-toast-${variant}`]: variant
+      };
+    },
+    slotScope() {
+      const {
+        hide
+      } = this;
+      return {
+        hide
+      };
+    },
+    computedDuration() {
+      // Minimum supported duration is 1 second
+      return mathMax(toInteger(this.autoHideDelay, 0), MIN_DURATION);
+    },
+    computedToaster() {
+      return String(this.toaster);
+    },
+    transitionHandlers() {
+      return {
+        beforeEnter: this.onBeforeEnter,
+        afterEnter: this.onAfterEnter,
+        beforeLeave: this.onBeforeLeave,
+        afterLeave: this.onAfterLeave
+      };
+    },
+    computedAttrs() {
+      return {
+        ...this.bvAttrs,
+        id: this.safeId(),
+        tabindex: '0'
+      };
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue) {
+      this[newValue ? 'show' : 'hide']();
+    },
+    localShow(newValue) {
+      if (newValue !== this[MODEL_PROP_NAME]) {
+        this.$emit(MODEL_EVENT_NAME, newValue);
+      }
+    },
+    /* istanbul ignore next */
+    toaster() {
+      // If toaster target changed, make sure toaster exists
+      this.$nextTick(this.ensureToaster);
+    },
+    /* istanbul ignore next */
+    static(newValue) {
+      // If static changes to true, and the toast is showing,
+      // ensure the toaster target exists
+      if (newValue && this.localShow) {
+        this.ensureToaster();
+      }
+    }
+  },
+  created() {
+    // Create private non-reactive props
+    this.$_dismissTimer = null;
+  },
+  mounted() {
+    this.isMounted = true;
+    this.$nextTick(() => {
+      if (this[MODEL_PROP_NAME]) {
+        requestAF(() => {
+          this.show();
+        });
+      }
+    });
+    // Listen for global $root show events
+    this.listenOnRoot(getRootActionEventName(NAME_TOAST, EVENT_NAME_SHOW), id => {
+      if (id === this.safeId()) {
+        this.show();
+      }
+    });
+    // Listen for global $root hide events
+    this.listenOnRoot(getRootActionEventName(NAME_TOAST, EVENT_NAME_HIDE), id => {
+      if (!id || id === this.safeId()) {
+        this.hide();
+      }
+    });
+    // Make sure we hide when toaster is destroyed
+    /* istanbul ignore next: difficult to test */
+    this.listenOnRoot(getRootEventName(NAME_TOASTER, EVENT_NAME_DESTROYED), toaster => {
+      /* istanbul ignore next */
+      if (toaster === this.computedToaster) {
+        this.hide();
+      }
+    });
+  },
+  beforeDestroy() {
+    this.clearDismissTimer();
+  },
+  methods: {
+    show() {
+      if (!this.localShow) {
+        this.ensureToaster();
+        const showEvent = this.buildEvent(EVENT_NAME_SHOW);
+        this.emitEvent(showEvent);
+        this.dismissStarted = this.resumeDismiss = 0;
+        this.order = Date.now() * (this.appendToast ? 1 : -1);
+        this.isHiding = false;
+        this.doRender = true;
+        this.$nextTick(() => {
+          // We show the toast after we have rendered the portal and b-toast wrapper
+          // so that screen readers will properly announce the toast
+          requestAF(() => {
+            this.localShow = true;
+          });
+        });
+      }
+    },
+    hide() {
+      if (this.localShow) {
+        const hideEvent = this.buildEvent(EVENT_NAME_HIDE);
+        this.emitEvent(hideEvent);
+        this.setHoverHandler(false);
+        this.dismissStarted = this.resumeDismiss = 0;
+        this.clearDismissTimer();
+        this.isHiding = true;
+        requestAF(() => {
+          this.localShow = false;
+        });
+      }
+    },
+    buildEvent(type) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return new BvEvent(type, {
+        cancelable: false,
+        target: this.$el || null,
+        relatedTarget: null,
+        ...options,
+        vueTarget: this,
+        componentId: this.safeId()
+      });
+    },
+    emitEvent(bvEvent) {
+      const {
+        type
+      } = bvEvent;
+      this.emitOnRoot(getRootEventName(NAME_TOAST, type), bvEvent);
+      this.$emit(type, bvEvent);
+    },
+    ensureToaster() {
+      if (this.static) {
+        return;
+      }
+      const {
+        computedToaster
+      } = this;
+      if (!Wormhole.hasTarget(computedToaster)) {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const toaster = createNewChildComponent(this.bvEventRoot, BToaster, {
+          propsData: {
+            name: computedToaster
+          }
+        });
+        toaster.$mount(div);
+      }
+    },
+    startDismissTimer() {
+      this.clearDismissTimer();
+      if (!this.noAutoHide) {
+        this.$_dismissTimer = setTimeout(this.hide, this.resumeDismiss || this.computedDuration);
+        this.dismissStarted = Date.now();
+        this.resumeDismiss = 0;
+      }
+    },
+    clearDismissTimer() {
+      clearTimeout(this.$_dismissTimer);
+      this.$_dismissTimer = null;
+    },
+    setHoverHandler(on) {
+      const el = this.$refs['b-toast'];
+      eventOnOff(on, el, 'mouseenter', this.onPause, EVENT_OPTIONS_NO_CAPTURE);
+      eventOnOff(on, el, 'mouseleave', this.onUnPause, EVENT_OPTIONS_NO_CAPTURE);
+    },
+    onPause() {
+      // Determine time remaining, and then pause timer
+      if (this.noAutoHide || this.noHoverPause || !this.$_dismissTimer || this.resumeDismiss) {
+        return;
+      }
+      const passed = Date.now() - this.dismissStarted;
+      if (passed > 0) {
+        this.clearDismissTimer();
+        this.resumeDismiss = mathMax(this.computedDuration - passed, MIN_DURATION);
+      }
+    },
+    onUnPause() {
+      // Restart timer with max of time remaining or 1 second
+      if (this.noAutoHide || this.noHoverPause || !this.resumeDismiss) {
+        this.resumeDismiss = this.dismissStarted = 0;
+        return;
+      }
+      this.startDismissTimer();
+    },
+    onLinkClick() {
+      // We delay the close to allow time for the
+      // browser to process the link click
+      this.$nextTick(() => {
+        requestAF(() => {
+          this.hide();
+        });
+      });
+    },
+    onBeforeEnter() {
+      this.isTransitioning = true;
+    },
+    onAfterEnter() {
+      this.isTransitioning = false;
+      const hiddenEvent = this.buildEvent(EVENT_NAME_SHOWN);
+      this.emitEvent(hiddenEvent);
+      this.startDismissTimer();
+      this.setHoverHandler(true);
+    },
+    onBeforeLeave() {
+      this.isTransitioning = true;
+    },
+    onAfterLeave() {
+      this.isTransitioning = false;
+      this.order = 0;
+      this.resumeDismiss = this.dismissStarted = 0;
+      const hiddenEvent = this.buildEvent(EVENT_NAME_HIDDEN);
+      this.emitEvent(hiddenEvent);
+      this.doRender = false;
+    },
+    // Render helper for generating the toast
+    makeToast(h) {
+      const {
+        title,
+        slotScope
+      } = this;
+      const link = isLink(this);
+      const $headerContent = [];
+      const $title = this.normalizeSlot(SLOT_NAME_TOAST_TITLE, slotScope);
+      if ($title) {
+        $headerContent.push($title);
+      } else if (title) {
+        $headerContent.push(h('strong', {
+          staticClass: 'mr-2'
+        }, title));
+      }
+      if (!this.noCloseButton) {
+        $headerContent.push(h(BButtonClose, {
+          staticClass: 'ml-auto mb-1',
+          on: {
+            click: () => {
+              this.hide();
+            }
+          }
+        }));
+      }
+      let $header = h();
+      if ($headerContent.length > 0) {
+        $header = h(this.headerTag, {
+          staticClass: 'toast-header',
+          class: this.headerClass
+        }, $headerContent);
+      }
+      const $body = h(link ? BLink : 'div', {
+        staticClass: 'toast-body',
+        class: this.bodyClass,
+        props: link ? pluckProps(linkProps, this) : {},
+        on: link ? {
+          click: this.onLinkClick
+        } : {}
+      }, this.normalizeSlot(SLOT_NAME_DEFAULT, slotScope));
+      return h('div', {
+        staticClass: 'toast',
+        class: this.toastClass,
+        attrs: this.computedAttrs,
+        key: `toast-${this[COMPONENT_UID_KEY]}`,
+        ref: 'toast'
+      }, [$header, $body]);
+    }
+  },
+  render(h) {
+    if (!this.doRender || !this.isMounted) {
+      return h();
+    }
+    const {
+      order,
+      static: isStatic,
+      isHiding,
+      isStatus
+    } = this;
+    const name = `b-toast-${this[COMPONENT_UID_KEY]}`;
+    const $toast = h('div', {
+      staticClass: 'b-toast',
+      class: this.toastClasses,
+      attrs: {
+        // If scoped styles are applied and the toast is not static,
+        // make sure the scoped style data attribute is applied
+        ...(isStatic ? {} : this.scopedStyleAttrs),
+        id: this.safeId('_toast_outer'),
+        role: isHiding ? null : isStatus ? 'status' : 'alert',
+        'aria-live': isHiding ? null : isStatus ? 'polite' : 'assertive',
+        'aria-atomic': isHiding ? null : 'true'
+      },
+      key: name,
+      ref: 'b-toast'
+    }, [h(BVTransition, {
+      props: {
+        noFade: this.noFade
+      },
+      on: this.transitionHandlers
+    }, [this.localShow ? this.makeToast(h) : h()])]);
+    return h(Portal, {
+      props: {
+        name,
+        to: this.computedToaster,
+        order,
+        slim: true,
+        disabled: isStatic
+      }
+    }, [$toast]);
+  }
+});
+
+export { BToast, props };