@gitlab/ui 131.3.0 → 131.3.1

package/dist/components/base/keyset_pagination/keyset_pagination.js

@@ -1,152 +0,0 @@
-import GlButton from '../button/button';
-import GlButtonGroup from '../button_group/button_group';
-import GlIcon from '../icon/icon';
-import { translate } from '../../../utils/i18n';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlKeysetPagination',
-  components: {
-    GlButtonGroup,
-    GlButton,
-    GlIcon
-  },
-  inheritAttrs: false,
-  props: {
-    // The following 4 properties match the default names of the
-    // [PageInfo](https://docs.gitlab.com/ee/api/graphql/reference/index.html#pageinfo)
-    // GraphQL type, allowing the returned `pageInfo` object to
-    // be bound directly to this component:
-    // `<gl-keyset-pagination v-bind="pageInfo">`
-    /**
-     * Whether or not the "Prev" button should be enabled
-     */
-    hasPreviousPage: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Whether or not the "Next" button should be enabled
-     */
-    hasNextPage: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * A cursor that points to the first item in the current page.
-     * Will be passed as an event parameter when the "prev" event is fired.
-     */
-    startCursor: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * A cursor that points to the last item in the current page.
-     * Will be passed as an event parameter when the "next" event is fired.
-     */
-    endCursor: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * The text that will be rendered inside the "Previous" button.
-     * It's important to provide this parameter since the default text is not translatable.
-     */
-    prevText: {
-      type: String,
-      required: false,
-      default: () => translate('GlKeysetPagination.prevText', 'Previous')
-    },
-    /**
-     * A link that will be used as the "Prev" button\'s "href" attribute.
-     * If provided, the "Prev" button renders as a link button; otherwise, it is rendered as a regular button.
-     */
-    prevButtonLink: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * The aria-label that needs to be set for the
-     * pagination landmark region.
-     */
-    navigationLabel: {
-      type: String,
-      required: false,
-      default: () => translate('GlKeysetPagination.navigationLabel', 'Pagination')
-    },
-    /**
-     * The text that will be rendered inside the "Next" button.
-     * It's important to provide this parameter since the default text is not translatable.
-     */
-    nextText: {
-      type: String,
-      required: false,
-      default: () => translate('GlKeysetPagination.nextText', 'Next')
-    },
-    /**
-     * A link that will be used as the "Next" button\'s "href" attribute.
-     * If provided, the "Next" button renders as a link button; otherwise, it is rendered as a regular button.
-     */
-    nextButtonLink: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * Whether or not both buttons should be disabled (regardless of the "hasPreviousPage" and "hasNextPage" values).
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    isVisible() {
-      return this.hasPreviousPage || this.hasNextPage;
-    }
-  }
-};
-
-/* 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.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination gl-gap-3"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton","category":"tertiary"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-align-center gl-flex"},[_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":"chevron-lg-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton","category":"tertiary"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-align-center gl-flex"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{staticClass:"gl-ml-2",attrs:{"name":"chevron-lg-right"}})],1)]})],2)],1)],1):_vm._e()};
-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__*/__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 { __vue_component__ as default };

package/dist/components/base/label/label.js

@@ -1,174 +0,0 @@
-import { labelColorOptions } from '../../../utils/constants';
-import { colorFromBackground } from '../../../utils/utils';
-import { translate } from '../../../utils/i18n';
-import GlButton from '../button/button';
-import GlIcon from '../icon/icon';
-import GlLink from '../link/link';
-import GlTooltip from '../tooltip/tooltip';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlLabel',
-  components: {
-    GlButton,
-    GlIcon,
-    GlLink,
-    GlTooltip
-  },
-  props: {
-    /**
-     * Background color of the label in hex, rgb, or rgba format
-     */
-    backgroundColor: {
-      type: String,
-      required: true,
-      validator: value => /^(#|rgb|rgba)/.test(value)
-    },
-    /**
-     * Title text of the label
-     */
-    title: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    /**
-     * Description text shown in tooltip
-     */
-    description: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Placement of the tooltip
-     */
-    tooltipPlacement: {
-      type: String,
-      required: false,
-      default: 'top'
-    },
-    /**
-     * Target URL for the label link
-     */
-    target: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Whether the label is scoped (uses :: separator)
-     */
-    scoped: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Whether to show the close button
-     */
-    showCloseButton: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Whether the label is disabled
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    removeButtonAriaLabel() {
-      return translate('GlLabel.removeButtonAriaLabel', 'Remove label - %{label}', {
-        label: this.title
-      });
-    },
-    cssClasses() {
-      const textColorVariant = colorFromBackground(this.backgroundColor);
-      return {
-        'gl-label-scoped': this.scoped,
-        'gl-label-text-dark': textColorVariant === labelColorOptions.dark,
-        'gl-label-text-light': textColorVariant === labelColorOptions.light
-      };
-    },
-    cssVariables() {
-      return {
-        '--label-background-color': this.backgroundColor,
-        '--label-inset-border': `inset 0 0 0 2px ${this.backgroundColor}`
-      };
-    },
-    splitScopedLabelIndex() {
-      return this.title.lastIndexOf('::');
-    },
-    scopedKey() {
-      return this.scoped ? this.title.slice(0, this.splitScopedLabelIndex) : this.title;
-    },
-    scopedValue() {
-      return this.title.slice(this.splitScopedLabelIndex + 2);
-    },
-    labelComponent() {
-      return this.target ? GlLink : 'span';
-    },
-    tooltipTarget() {
-      return this.target ? this.$refs.labelTitle.$el : this.$refs.labelTitle;
-    }
-  },
-  methods: {
-    onClick(e) {
-      /**
-       * Emitted when the label is clicked.
-       * @event click
-       */
-      this.$emit('click', e);
-    },
-    onClose(e) {
-      /**
-       * Emitted when the close button is clicked.
-       * @event close
-       */
-      this.$emit('close', e);
-    }
-  }
-};
-
-/* 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('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",class:{ 'gl-label-link-underline': _vm.target },attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('gl-button',{staticClass:"gl-label-close !gl-p-0",attrs:{"category":"tertiary","size":"small","variant":"reset","aria-label":_vm.removeButtonAriaLabel,"disabled":_vm.disabled},on:{"click":_vm.onClose}},[_c('gl-icon',{attrs:{"name":"close-xs","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
-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__*/__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 { __vue_component__ as default };

package/dist/components/base/link/link.js

@@ -1,332 +0,0 @@
-import { isString, isObject, toString, isBoolean, concat, isFunction } from 'lodash-es';
-import { SafeLinkDirective, isExternalURL } from '../../../directives/safe_link/safe_link';
-import { stopEvent } from '../../../utils/utils';
-import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
-import { stringifyQueryObj } from '../../../vendor/bootstrap-vue/src/utils/router';
-import { safeVueInstance } from '../../../vendor/bootstrap-vue/src/utils/safe-vue-instance';
-import { attemptFocus, attemptBlur } from '../../../vendor/bootstrap-vue/src/utils/dom';
-import { linkVariantOptions, isVue3, linkVariantUnstyled, linkVariantInline, linkVariantMeta } from '../../../utils/constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const ANCHOR_TAG = 'a';
-const NUXT_LINK_TAG = 'nuxt-link';
-const VUE_ROUTER_LINK_TAG = 'router-link';
-var script = {
-  name: 'GlLink',
-  directives: {
-    SafeLink: SafeLinkDirective
-  },
-  inheritAttrs: false,
-  props: {
-    /**
-     * Denotes the target URL of the link for standard links.
-     */
-    href: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * When set to `true`, disables the component's functionality and places it in a disabled state.
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Skips sanitization of href if true. This should be used sparingly.
-     * Consult security team before setting to true.
-     */
-    isUnsafeLink: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Sets the 'rel' attribute on the rendered link.
-     */
-    rel: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * Sets the 'target' attribute on the rendered link.
-     */
-    target: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * When set to `true`, places the component in the active state with active styling
-     */
-    active: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * <router-link> prop: Denotes the target route of the link.
-     * When clicked, the value of the to prop will be passed to `router.push()` internally,
-     * so the value can be either a string or a Location descriptor object.
-     */
-    to: {
-      type: [Object, String],
-      required: false,
-      default: undefined
-    },
-    /**
-     * <router-link> prop: Configure the active CSS class applied when the link is active.
-     */
-    activeClass: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * <router-link> prop: Configure the active CSS class applied when the link is active with exact match.
-     */
-    exactActiveClass: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * <router-link> prop: Setting the replace prop will call `router.replace()` instead of `router.push()`
-     * when clicked, so the navigation will not leave a history record.
-     */
-    replace: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * <nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport,
-     * Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
-     */
-    prefetch: {
-      type: Boolean,
-      required: false,
-      // Must be `null` to fall back to the value defined in the
-      // `nuxt.config.js` configuration file for `router.prefetchLinks`
-      // We convert `null` to `undefined`, so that Nuxt.js will use the
-      // compiled default
-      // Vue treats `undefined` as default of `false` for Boolean props,
-      // so we must set it as `null` here to be a true tri-state prop
-      default: null
-    },
-    /**
-     * Controls ↗ character visibility for external links
-     */
-    showExternalIcon: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Link variant
-     */
-    variant: {
-      type: String,
-      required: false,
-      default: null,
-      validator: value => value && Object.hasOwn(linkVariantOptions, value)
-    }
-  },
-  computed: {
-    safeLinkConfig() {
-      return {
-        skipSanitization: this.isUnsafeLink
-      };
-    },
-    tag() {
-      const hasRouter = Boolean(safeVueInstance(this).$router);
-      const hasNuxt = Boolean(safeVueInstance(this).$nuxt);
-      if (!hasRouter || this.disabled || !this.to) {
-        return ANCHOR_TAG;
-      }
-      return hasNuxt ? NUXT_LINK_TAG : VUE_ROUTER_LINK_TAG;
-    },
-    isRouterLink() {
-      return this.tag !== ANCHOR_TAG;
-    },
-    isVue3RouterLink() {
-      return this.tag === VUE_ROUTER_LINK_TAG && isVue3;
-    },
-    shouldShowExternalIcon() {
-      const allowedVariants = [linkVariantInline, linkVariantMeta, null]; // null represents default/UI variant
-      return this.showExternalIcon && allowedVariants.includes(this.variant) && this.href && isExternalURL(this.target, this.href);
-    },
-    computedHref() {
-      const fallback = '#';
-      const toFallback = '/';
-      const {
-        to
-      } = this;
-
-      // Return `href` when explicitly provided
-      if (this.href) {
-        return this.href;
-      }
-      if (isString(to)) {
-        return to || toFallback;
-      }
-
-      // Fallback to `to.path' + `to.query` + `to.hash` prop (if `to` is an object)
-      if (isObject(to) && (to.path || to.query || to.hash)) {
-        const path = toString(to.path);
-        const query = stringifyQueryObj(to.query);
-        let hash = toString(to.hash);
-        hash = !hash || hash.charAt(0) === '#' ? hash : `#${hash}`;
-        return `${path}${query}${hash}` || fallback;
-      }
-      return fallback;
-    },
-    computedProps() {
-      const baseRouterLinkProps = {
-        to: this.to,
-        activeClass: this.activeClass,
-        exactActiveClass: this.exactActiveClass,
-        replace: this.replace,
-        ...(isBoolean(this.prefetch) ? {
-          prefetch: this.prefetch
-        } : {})
-      };
-      if (this.isRouterLink) {
-        if (this.isVue3RouterLink) {
-          return baseRouterLinkProps;
-        }
-        return {
-          ...baseRouterLinkProps,
-          ...this.$attrs
-        };
-      }
-      return {
-        disabled: this.disabled,
-        ...(this.disabled ? {
-          'aria-disabled': 'true',
-          tabindex: '-1'
-        } : {}),
-        rel: this.rel,
-        target: this.target,
-        href: this.computedHref,
-        ...this.$attrs
-      };
-    },
-    computedListeners() {
-      const {
-        click,
-        ...listenersWithoutClick
-      } = this.$listeners;
-      return listenersWithoutClick;
-    },
-    computedClass() {
-      if (this.variant === linkVariantUnstyled) {
-        return [];
-      }
-      return ['gl-link', linkVariantOptions[this.variant], {
-        disabled: this.disabled,
-        active: this.active,
-        'gl-link-external': this.shouldShowExternalIcon
-      }];
-    }
-  },
-  methods: {
-    onClick(event, navigate) {
-      const eventIsEvent = isEvent(event);
-      const suppliedHandler = this.$listeners.click;
-      if (eventIsEvent && this.disabled) {
-        // Stop event from bubbling up
-        // Kill the event loop attached to this specific `EventTarget`
-        // Needed to prevent `vue-router` from navigating
-        stopEvent(event, {
-          immediatePropagation: true
-        });
-      } else {
-        // Router links do not emit instance `click` events, so we
-        // add in an `$emit('click', event)` on its Vue instance
-        //
-        // seems not to be required for Vue3 compat build
-        if (this.isRouterLink) {
-          var _event$currentTarget$;
-          // eslint-disable-next-line no-underscore-dangle
-          (_event$currentTarget$ = event.currentTarget.__vue__) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.$emit('click', event);
-        }
-
-        // Call the suppliedHandler(s), if any provided
-        concat([], suppliedHandler).filter(h => isFunction(h)).forEach(handler => {
-          // eslint-disable-next-line prefer-rest-params
-          handler(...arguments);
-        });
-
-        // this navigate function comes from Vue 3 router
-        // See https://router.vuejs.org/guide/advanced/extending-router-link.html#Extending-RouterLink
-        if (isFunction(navigate)) {
-          navigate(event);
-        }
-
-        // TODO: Remove deprecated 'clicked::link' event
-        this.$root.$emit('clicked::link', event);
-      }
-      // Stop scroll-to-top behavior or navigation on
-      // regular links when href is just '#'
-      if (eventIsEvent && !this.isRouterLink && this.computedHref === '#') {
-        stopEvent(event, {
-          stopPropagation: false
-        });
-      }
-    },
-    focus() {
-      attemptFocus(this.$el);
-    },
-    blur() {
-      attemptBlur(this.$el);
-    }
-  }
-};
-
-/* 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.isVue3RouterLink)?_c(_vm.tag,_vm._b({tag:"component",attrs:{"custom":""},scopedSlots:_vm._u([{key:"default",fn:function(ref){
-var _obj;
-
-var routerLinkHref = ref.href;
-var isActive = ref.isActive;
-var isExactActive = ref.isExactActive;
-var navigate = ref.navigate;return [_c('a',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],class:[_vm.computedClass, ( _obj = {}, _obj[_vm.activeClass] = isActive, _obj[_vm.exactActiveClass] = isExactActive, _obj )],attrs:{"href":routerLinkHref},on:{"click":function($event){return _vm.onClick($event, navigate)}}},'a',_vm.$attrs,false),_vm.computedListeners),[_vm._t("default")],2)]}}],null,true)},'component',_vm.computedProps,false)):(_vm.isRouterLink)?_c(_vm.tag,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.computedClass,nativeOn:{"click":function($event){return _vm.onClick.apply(null, arguments)}}},'component',_vm.computedProps,false),_vm.computedListeners),[_vm._t("default")],2):_c(_vm.tag,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.computedClass,on:{"click":_vm.onClick}},'component',_vm.computedProps,false),_vm.computedListeners),[_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__*/__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 { __vue_component__ as default };