@gitlab/ui 132.0.1 → 132.0.3

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

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,174 @@
+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

@@ -0,0 +1,330 @@
+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 { buildQueryString } from '../../../utils/url_utils';
+import { safeVueInstance, isVue3 } from '../../../utils/vue_utils';
+import { linkVariantOptions, 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(this);
+    },
+    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 = buildQueryString(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 = event instanceof 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() {
+      this.$el.focus();
+    },
+    blur() {
+      this.$el.blur();
+    }
+  }
+};
+
+/* 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 };