@gitlab/ui 72.11.1 → 72.12.0

package/dist/components/base/tabs/tab/tab.js

@@ -1,83 +0,0 @@
-import { BTab } from 'bootstrap-vue/esm/index.js';
-import isPlainObject from 'lodash/isPlainObject';
-import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-var script = {
-  name: 'GlTab',
-  components: {
-    BTab
-  },
-  inheritAttrs: false,
-  props: {
-    titleLinkClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: ''
-    },
-    /**
-     * Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.
-     */
-    queryParamValue: {
-      type: String,
-      required: false,
-      default: null
-    }
-  },
-  computed: {
-    linkClass() {
-      const {
-        titleLinkClass
-      } = this;
-      if (Array.isArray(titleLinkClass)) {
-        return [...titleLinkClass, DEFAULT_TAB_TITLE_LINK_CLASS];
-      }
-      if (isPlainObject(titleLinkClass)) {
-        return {
-          ...titleLinkClass,
-          [DEFAULT_TAB_TITLE_LINK_CLASS]: true
-        };
-      }
-      return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
-    }
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tab',_vm._g(_vm._b({attrs:{"title-link-class":_vm.linkClass,"query-param-value":_vm.queryParamValue},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-tab',_vm.$attrs,false),_vm.$listeners))};
-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__ = __vue_normalize__(
-    { 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
-  );
-
-export default __vue_component__;

package/dist/components/base/tabs/tabs/scrollable_tabs.js

@@ -1,143 +0,0 @@
-import debounce from 'lodash/debounce';
-import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
-import GlIcon from '../../icon/icon';
-import GlTabs from './tabs';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const NAV_CLASS = 'gl-scrollable-tabs-nav';
-var script = {
-  name: 'GlScrollableTabs',
-  components: {
-    GlTabs,
-    GlIcon
-  },
-  directives: {
-    GlResizeObserverDirective
-  },
-  inheritAttrs: false,
-  data() {
-    return {
-      width: 0,
-      // This is a reactive value of a child element's scrollLeft. It is not two-way bound.
-      // Do not set manually outside of "scroll" callback.
-      scrollLeft: 0,
-      navScrollWidth: 0
-    };
-  },
-  computed: {
-    navClass() {
-      const attrsNavClass = this.$attrs.navClass;
-      if (!attrsNavClass) {
-        return [NAV_CLASS];
-      }
-      if (Array.isArray(attrsNavClass)) {
-        return [NAV_CLASS, ...attrsNavClass];
-      }
-      return [NAV_CLASS, attrsNavClass];
-    },
-    displayScrollLeft() {
-      // if we have scrolled && there's overflow
-      return this.scrollLeft && this.width < this.navScrollWidth;
-    },
-    displayScrollRight() {
-      // if there's more overflow to the right
-      return this.scrollLeft + this.width < this.navScrollWidth;
-    },
-    passthroughAttrs() {
-      return Object.keys(this.$attrs).filter(key => !key.startsWith('action')).reduce((acc, key) => Object.assign(acc, {
-        [key]: this.$attrs[key]
-      }), {});
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
-    this.handleNavScroll = debounce(e => {
-      this.scrollLeft = e.target.scrollLeft;
-    }, 100);
-    this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
-  },
-  beforeDestroy() {
-    this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
-  },
-  updated() {
-    // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
-  },
-  methods: {
-    handleResize(_ref) {
-      let {
-        contentRect: {
-          width
-        }
-      } = _ref;
-      this.width = width;
-      this.navScrollWidth = this.getScrollWidth();
-    },
-    scrollTabsLeft() {
-      const scrollTo = this.scrollLeft - this.width;
-      this.scrollTabs(Math.max(scrollTo, 0));
-    },
-    scrollTabsRight() {
-      const scrollTo = this.scrollLeft + this.width;
-      this.scrollTabs(Math.min(scrollTo, this.getScrollWidth() - this.width));
-    },
-    scrollTabs(scrollTo) {
-      this.getNavContainer().scrollTo({
-        left: scrollTo,
-        behavior: 'smooth'
-      });
-      this.scrollLeft = scrollTo;
-    },
-    getScrollWidth() {
-      var _this$getNavContainer;
-      return ((_this$getNavContainer = this.getNavContainer()) === null || _this$getNavContainer === void 0 ? void 0 : _this$getNavContainer.scrollWidth) || 0;
-    },
-    getNavContainer() {
-      var _this$$el;
-      return (_this$$el = this.$el) === null || _this$$el === void 0 ? void 0 : _this$$el.querySelector(`.${NAV_CLASS}`);
-    }
-  },
-  NAV_CLASS
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',_vm._g(_vm._b({directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],attrs:{"nav-class":_vm.navClass},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),{key:"tabs-start",fn:function(){return [_c('li',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-tabs-fade gl-tabs-fade-left"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":"Scroll left","tabindex":"-1"},on:{"click":_vm.scrollTabsLeft}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-left"}})],1)])]},proxy:true},{key:"tabs-end",fn:function(){return [_c('li',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-tabs-fade gl-tabs-fade-right"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":"Scroll right","tabindex":"-1"},on:{"click":_vm.scrollTabsRight}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-right"}})],1)])]},proxy:true}],null,true)},'gl-tabs',_vm.passthroughAttrs,false),_vm.$listeners))};
-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__ = __vue_normalize__(
-    { 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
-  );
-
-export default __vue_component__;

package/dist/components/base/tabs/tabs/tabs.js

@@ -1,224 +0,0 @@
-import { BTabs } from 'bootstrap-vue/esm/index.js';
-import { tabsButtonDefaults } from '../../../../utils/constants';
-import GlButton from '../../button/button';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-const validatorHelper = obj => Object.keys(obj).every(val => val === 'text' || val === 'attributes');
-var script = {
-  name: 'GlTabs',
-  components: {
-    BTabs,
-    GlButton
-  },
-  inheritAttrs: false,
-  props: {
-    actionPrimary: {
-      type: Object,
-      required: false,
-      default: null,
-      validator: obj => validatorHelper(obj)
-    },
-    actionSecondary: {
-      type: Object,
-      required: false,
-      default: null,
-      validator: obj => validatorHelper(obj)
-    },
-    actionTertiary: {
-      type: Object,
-      required: false,
-      default: null,
-      validator: obj => validatorHelper(obj)
-    },
-    contentClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: null
-    },
-    navClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: null
-    },
-    justified: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Sync active tab with query string parameters. Allows for deep linking into specific tabs.
-     */
-    syncActiveTabWithQueryParams: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Name to use for query string parameter.
-     */
-    queryParamName: {
-      type: String,
-      required: false,
-      default: 'tab'
-    },
-    value: {
-      type: Number,
-      required: false,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      activeTabIndex: 0
-    };
-  },
-  computed: {
-    hasActions() {
-      return [this.actionPrimary, this.actionSecondary, this.actionTertiary].some(Boolean);
-    },
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: this.handleInput
-      };
-    }
-  },
-  watch: {
-    value: {
-      handler(newValue) {
-        if (this.activeTabIndex !== newValue) {
-          this.activeTabIndex = newValue;
-        }
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    if (this.syncActiveTabWithQueryParams) {
-      this.syncActiveTabFromQueryParams();
-      window.addEventListener('popstate', this.syncActiveTabFromQueryParams);
-    }
-
-    // Because we are manually binding `value` attribute to `b-tabs` the `input`
-    // event is no longer automatically fired when the component is mounted.
-    // To maintain parity with original `b-tabs` functionality
-    // we manually fire the `input` event when the component is mounted.
-    this.$emit('input', this.activeTabIndex);
-  },
-  destroyed() {
-    window.removeEventListener('popstate', this.syncActiveTabFromQueryParams);
-  },
-  methods: {
-    buttonBinding(prop, name) {
-      if (!prop.attributes) {
-        return tabsButtonDefaults[name];
-      }
-      return prop.attributes;
-    },
-    primary() {
-      this.$emit('primary');
-    },
-    secondary() {
-      this.$emit('secondary');
-    },
-    tertiary() {
-      this.$emit('tertiary');
-    },
-    /**
-     * When the query parameter is updated, update the active tab to match.
-     */
-    async syncActiveTabFromQueryParams() {
-      await this.$nextTick();
-      const queryParamValue = this.getQueryParamValue();
-      const tabIndexToActivate = this.getTabs().findIndex((tab, tabIndex) => this.getTabQueryParamValue(tabIndex) === queryParamValue);
-      this.activeTabIndex = tabIndexToActivate !== -1 ? tabIndexToActivate : 0;
-    },
-    /**
-     * Returns a list of all <b-tab> instances associated with this tab control.
-     */
-    getTabs() {
-      return this.$refs.bTabs.getTabs();
-    },
-    /**
-     * Get the value of the query param as defined by the `queryParamName` prop.
-     */
-    getQueryParamValue() {
-      const searchParams = new URLSearchParams(window.location.search);
-      return searchParams.get(this.queryParamName);
-    },
-    /**
-     * Set the value of the query param as defined by the `queryParamName` prop.
-     * This method does nothing if the query param is already up to date.
-     */
-    setQueryParamValueIfNecessary(tabIndex) {
-      const currentQueryParamValue = this.getQueryParamValue();
-      const newQueryParamValue = this.getTabQueryParamValue(tabIndex);
-
-      // If the current query parameter is already up-to-date,
-      // avoid creating a duplicate history entry.
-      if (tabIndex === 0 && !currentQueryParamValue || tabIndex !== 0 && currentQueryParamValue === newQueryParamValue) {
-        return;
-      }
-      const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set(this.queryParamName, newQueryParamValue);
-      window.history.pushState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
-    },
-    /**
-     * Returns the query param value for a tab.
-     * Defaults to the tab index unless the `query-param-value` attribute is set.
-     */
-    getTabQueryParamValue(tabIndex) {
-      const tab = this.getTabs()[tabIndex];
-      return (tab === null || tab === void 0 ? void 0 : tab.$attrs['query-param-value']) || tabIndex.toString();
-    },
-    /**
-     * Event handler for `input` event.
-     */
-    handleInput(tabIndex) {
-      this.$emit('input', tabIndex);
-      this.activeTabIndex = tabIndex;
-      if (this.syncActiveTabWithQueryParams) {
-        this.setQueryParamValueIfNecessary(tabIndex);
-      }
-    }
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tabs',_vm._g(_vm._b({ref:"bTabs",staticClass:"gl-tabs",attrs:{"no-nav-style":true,"no-fade":true,"active-nav-item-class":"gl-tab-nav-item-active","content-class":[_vm.contentClass, 'gl-tab-content'],"nav-class":[_vm.navClass, 'gl-tabs-nav'],"justified":_vm.justified,"value":_vm.activeTabIndex},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),(_vm.hasActions)?{key:"tabs-start",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-start",attrs:{"data-testid":"actions-tabs-start"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null,(_vm.hasActions)?{key:"tabs-end",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-end",attrs:{"data-testid":"actions-tabs-end"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null],null,true)},'b-tabs',_vm.$attrs,false),_vm.listeners))};
-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__ = __vue_normalize__(
-    { 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
-  );
-
-export default __vue_component__;

package/dist/components/base/toast/toast.js

@@ -1,82 +0,0 @@
-import { ToastPlugin } from 'bootstrap-vue/esm/index.js';
-import isFunction from 'lodash/isFunction';
-import CloseButton from '../../shared_components/close_button/close_button';
-
-/* eslint-disable import/no-default-export */
-const DEFAULT_OPTIONS = {
-  autoHideDelay: 5000,
-  toastClass: 'gl-toast',
-  isStatus: true,
-  noCloseButton: true,
-  toaster: 'b-toaster-bottom-left'
-};
-let toastsCount = 0;
-function renderTitle(h, toast, options) {
-  const nodes = [h(CloseButton, {
-    class: ['gl-toast-close-button', 'gl-close-btn-color-inherit'],
-    on: {
-      click: toast.hide
-    }
-  })];
-  if (options.action) {
-    nodes.splice(0, 0, h('a', {
-      role: 'button',
-      class: ['gl-toast-action'],
-      on: {
-        click: e => options.action.onClick(e, toast)
-      }
-    }, options.action.text));
-  }
-  return nodes;
-}
-function showToast(message) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const id = `gl-toast-${toastsCount}`;
-  toastsCount += 1;
-  const hide = () => {
-    this.$bvToast.hide(id);
-  };
-  const toast = {
-    id,
-    hide
-  };
-  if (isFunction(options.onComplete)) {
-    const toastHiddenCallback = e => {
-      if (e.componentId === id) {
-        this.$root.$off('bv::toast:hidden', toastHiddenCallback);
-        options.onComplete(e);
-      }
-    };
-    this.$root.$on('bv::toast:hidden', toastHiddenCallback);
-  }
-  this.$bvToast.toast(message, {
-    ...DEFAULT_OPTIONS,
-    id,
-    title: renderTitle(this.$createElement, toast, options)
-  });
-  return toast;
-}
-
-/**
- * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
- * Once registered, the toast will be globally available throughout your app.
- *
- * See https://gitlab-org.gitlab.io/gitlab-ui/ for detailed documentation.
- */
-var toast = {
-  install(Vue) {
-    Vue.use(ToastPlugin);
-    Vue.mixin({
-      beforeCreate() {
-        if (this.$toast) {
-          return;
-        }
-        this.$toast = {
-          show: showToast.bind(this)
-        };
-      }
-    });
-  }
-};
-
-export default toast;