@gitlab/ui 132.0.0 → 132.0.2

package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js

@@ -0,0 +1,53 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDashboardSkeleton',
+  props: {
+    /**
+     * Number of cards to be shown
+     */
+    cards: {
+      type: Number,
+      required: false,
+      default: 3
+    }
+  }
+};
+
+/* 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('div',{staticClass:"row dashboard-cards"},_vm._l((_vm.cards),function(index){return _c('div',{key:index,staticClass:"col-12 col-md-6 col-xl-4 gl-px-3"},[_c('div',{staticClass:"gl-rounded-t-default gl-bg-status-neutral gl-py-6"}),_vm._v(" "),_vm._m(0,true)])}),0)};
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dashboard-card-body card-body gl-bg-gray-50"},[_c('div',{staticClass:"row"},[_c('div',{staticClass:"col-1 gl-self-center"},[_c('div',{staticClass:"gl-rounded-full gl-bg-status-neutral gl-p-5"})]),_vm._v(" "),_c('div',{staticClass:"col-10 col-sm-6 gl-self-center gl-pl-6"},[_c('div',{staticClass:"dashboard-card-skeleton-info gl-mb-3 gl-w-full gl-bg-status-neutral gl-py-3"}),_vm._v(" "),_c('div',{staticClass:"dashboard-card-skeleton-info gl-w-full gl-bg-status-neutral gl-py-3"})]),_vm._v(" "),_c('div',{staticClass:"col-sm-5 gl-hidden gl-self-center @sm:gl-block"},[_c('div',{staticClass:"dashboard-card-skeleton-info gl-w-full gl-bg-status-neutral gl-py-3"})])]),_vm._v(" "),_c('div',{staticClass:"dashboard-card-footer gl-mt-5 gl-bg-status-neutral gl-py-5"})])}];
+
+  /* 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/regions/empty_state/empty_state.js

@@ -0,0 +1,181 @@
+import GlButton from '../../base/button/button';
+import GlIllustration from '../../base/illustration/illustration';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlEmptyState',
+  components: {
+    GlButton,
+    GlIllustration
+  },
+  props: {
+    /**
+     * The title (heading) of the empty state.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The header tag used in the empty state component (h1/h2/h3/h4/h5/h6).
+     * For accessibility this should be set to an appropriate value in the context where the component is used.
+     * Defaults to `h2`
+     */
+    headerLevel: {
+      type: Number,
+      required: false,
+      default: 2,
+      validator(value) {
+        return value > 0 && value <= 6;
+      }
+    },
+    /**
+     * The illustration's name.
+     */
+    illustrationName: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The illustration's URL.
+     */
+    svgPath: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The illustration's height used to prevent content reflow.
+     */
+    svgHeight: {
+      type: Number,
+      required: false,
+      default: 144
+    },
+    /**
+     * The desciption/body text of the empty state.
+     */
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The primary GlButton's href.
+     */
+    primaryButtonLink: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The primary GlButton's text. If falsey, the button is not shown.
+     */
+    primaryButtonText: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The secondary GlButton's href.
+     */
+    secondaryButtonLink: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The secondary GlButton's text. If falsey, the button is not shown.
+     */
+    secondaryButtonText: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Determines whether to render the compact layout.
+     */
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    invertInDarkMode: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * CSS classes to add to the content container
+     */
+    contentClass: {
+      type: [Array, String, Object],
+      required: false,
+      default: () => []
+    }
+  },
+  computed: {
+    headerComponent() {
+      const level = this.headerLevel;
+      return `h${level}`;
+    },
+    height() {
+      return this.shouldPreventImageReflow ? this.svgHeight : null;
+    },
+    shouldPreventImageReflow() {
+      return Boolean(this.svgHeight) && !this.illustrationName;
+    },
+    shouldRenderPrimaryButton() {
+      return Boolean(this.primaryButtonLink && this.primaryButtonText);
+    },
+    shouldRenderSecondaryButton() {
+      return Boolean(this.secondaryButtonLink && this.secondaryButtonText);
+    },
+    contentClasses() {
+      return [this.compact ? 'gl-grow gl-basis-0 gl-px-4' : 'gl-m-auto gl-p-5', this.contentClass];
+    }
+  }
+};
+
+/* 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('section',{staticClass:"gl-flex",class:{
+    'gl-empty-state gl-flex-col gl-text-center': !_vm.compact,
+    'gl-flex-row': _vm.compact,
+  }},[_c('div',{class:{ 'gl-hidden gl-px-4 @sm:gl-block': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.illustrationName)?_c('gl-illustration',{attrs:{"name":_vm.illustrationName}}):(_vm.svgPath)?_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","height":_vm.height}}):_vm._e()],1),_vm._v(" "),_c('div',{staticClass:"gl-empty-state-content gl-mx-auto gl-my-0",class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_vm._t("title",function(){return [_c(_vm.headerComponent,{tag:"component",staticClass:"gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")])]}),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mb-0 gl-mt-4 gl-text-subtle"},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(_vm.description)+"\n      ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-mt-5 gl-flex gl-flex-wrap",class:{ 'gl-justify-center': !_vm.compact }},[_vm._t("actions",function(){return [(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ '!gl-mx-2': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n        ")]):_vm._e()]})],2)],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 };

package/dist/components/shared_components/clear_icon_button/clear_icon_button.js

@@ -0,0 +1,64 @@
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import GlButton from '../../base/button/button';
+import { translate } from '../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'ClearIconButton',
+  components: {
+    GlButton
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: () => translate('ClearIconButton.title', 'Clear')
+    },
+    tooltipContainer: {
+      required: false,
+      default: false,
+      validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
+    }
+  }
+};
+
+/* 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-button',_vm._g({directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],staticClass:"gl-clear-icon-button",attrs:{"variant":"default","category":"tertiary","size":"small","name":"clear","icon":"clear","title":_vm.title,"aria-label":_vm.title}},_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__ = /*#__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/shared_components/clipboard_button/clipboard_button.js

@@ -0,0 +1,100 @@
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import GlButton from '../../base/button/button';
+import { translate } from '../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'ClipboardButton',
+  components: {
+    GlButton
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    /**
+     * The text to copy to clipboard
+     */
+    text: {
+      type: String,
+      required: true
+    },
+    /**
+     * The tooltip text shown on hover
+     */
+    title: {
+      type: String,
+      required: false,
+      default: () => translate('ClipboardButton.title', 'Copy to clipboard')
+    },
+    /**
+     * Button size
+     */
+    size: {
+      type: String,
+      required: false,
+      default: 'medium'
+    }
+  },
+  data() {
+    return {
+      localTitle: this.title,
+      titleTimeout: null
+    };
+  },
+  methods: {
+    updateTooltip(title) {
+      this.localTitle = title;
+      clearTimeout(this.titleTimeout);
+      this.titleTimeout = setTimeout(() => {
+        this.localTitle = this.title;
+      }, 1000);
+    },
+    async handleClick() {
+      try {
+        await navigator.clipboard.writeText(this.text);
+        this.updateTooltip(translate('ClipboardButton.copied', 'Copied'));
+      } catch {
+        this.updateTooltip(translate('ClipboardButton.error', 'Copy failed'));
+      }
+    }
+  }
+};
+
+/* 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-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover.focus.top",modifiers:{"hover":true,"focus":true,"top":true}}],attrs:{"variant":"default","category":"tertiary","icon":"copy-to-clipboard","size":_vm.size,"title":_vm.localTitle,"aria-label":_vm.localTitle},on:{"click":_vm.handleClick}})};
+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/shared_components/close_button/close_button.js

@@ -0,0 +1,55 @@
+import { translate } from '../../../utils/i18n';
+import GlButton from '../../base/button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'CloseButton',
+  components: {
+    GlButton
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: () => translate('CloseButton.title', 'Close')
+    }
+  }
+};
+
+/* 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-button',_vm._g(_vm._b({attrs:{"category":"tertiary","size":"small","icon":"close","aria-label":_vm.label}},'gl-button',_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__ = /*#__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/utilities/animated_number/animated_number.js

@@ -0,0 +1,131 @@
+import { formatNumberToLocale } from '../../../utils/number_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'AnimatedNumber',
+  props: {
+    number: {
+      type: Number,
+      required: true
+    },
+    /**
+     * Controls how long it takes for the animation to complete.
+     */
+    duration: {
+      type: Number,
+      required: false,
+      default: 2000
+    },
+    /**
+     * Controls the number of decimal places displayed in the output.
+     */
+    decimalPlaces: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    useDelimiters: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    animateOnMount: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      displayNumber: 0,
+      startTime: null
+    };
+  },
+  computed: {
+    animatedNumber() {
+      const number = this.displayNumber.toFixed(this.decimalPlaces);
+      if (this.useDelimiters) {
+        return formatNumberToLocale(number, {
+          minimumFractionDigits: this.decimalPlaces
+        });
+      }
+      return number;
+    }
+  },
+  ready() {
+    this.displayNumber = this.number ? this.number : 0;
+  },
+  watch: {
+    number() {
+      this.animate();
+    }
+  },
+  mounted() {
+    if (this.animateOnMount) {
+      this.animate();
+    } else {
+      this.displayNumber = this.number;
+    }
+  },
+  methods: {
+    animate() {
+      this.$emit('animating');
+      window.requestAnimationFrame(this.count);
+    },
+    count(timestamp) {
+      if (!this.startTime) {
+        this.startTime = timestamp;
+      }
+      const progress = timestamp - this.startTime;
+      if (progress < this.duration) {
+        if (this.displayNumber !== this.number) {
+          const change = (this.number - this.displayNumber) / (this.duration / 100);
+          this.displayNumber += change;
+        }
+        window.requestAnimationFrame(this.count);
+      } else {
+        this.displayNumber = this.number; // Ensures that the final number is accurate.
+        this.startTime = null;
+        this.$emit('animated');
+      }
+    }
+  }
+};
+
+/* 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._v(_vm._s(_vm.animatedNumber))])};
+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/utilities/friendly_wrap/friendly_wrap.js

@@ -0,0 +1,75 @@
+import { intersperse } from '../../../utils/data_utils';
+import { splitAfterSymbols } from '../../../utils/string_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFriendlyWrap',
+  functional: true,
+  props: {
+    /**
+     * Text to be wrapped.
+     */
+    text: {
+      type: String,
+      required: true
+    },
+    /**
+     * A list of strings representing the break-words.
+     */
+    symbols: {
+      type: Array,
+      required: false,
+      default: () => ['/']
+    }
+  },
+  render(createElement, _ref) {
+    let {
+      props
+    } = _ref;
+    const {
+      symbols,
+      text
+    } = props;
+    const textParts = splitAfterSymbols(symbols, text !== null && text !== void 0 ? text : '');
+    const content = intersperse(() => createElement('wbr'), textParts);
+    return createElement('span', {
+      class: 'gl-break-words'
+    }, content);
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* 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__ = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };