@gitlab/ui 132.0.0 → 132.0.2

package/dist/components/utilities/intersection_observer/intersection_observer.js

@@ -0,0 +1,88 @@
+import { memoize } from 'lodash-es';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const getObserver = memoize(options => new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    entry.target.$_gl_intersectionHandler(entry);
+  });
+}, options || {}));
+var script = {
+  name: 'GlIntersectionObserver',
+  props: {
+    /**
+     * Extra options to pass directly to the intersection observer API.
+     */
+    options: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  mounted() {
+    const observer = getObserver(this.options);
+    this.$el.$_gl_intersectionHandler = entry => {
+      /**
+       * Emitted when the element's visibility changes
+       */
+      this.$emit('update', entry);
+      if (entry.isIntersecting) {
+        /**
+         * Emitted when the element appears on the page
+         */
+        this.$emit('appear');
+      } else {
+        /**
+         * Emitted when the element disappears from the page
+         */
+        this.$emit('disappear');
+      }
+    };
+    this.$el.$_gl_intersectionObserver = observer;
+    observer.observe(this.$el);
+  },
+  destroyed() {
+    this.$el.$_gl_intersectionObserver.unobserve(this.$el);
+    delete this.$el.$_gl_intersectionHandler;
+    delete this.$el.$_gl_intersectionObserver;
+  },
+  // Expose getObserver method for tests
+  getObserver
+};
+
+/* 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',[_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 };

package/dist/components/utilities/intersperse/intersperse.js

@@ -0,0 +1,104 @@
+import Vue from 'vue';
+import { intersperse, insert } from '../../../utils/data_utils';
+import { isVnodeEmpty } from '../../../utils/is_slot_empty';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const filterEmptyNodesVue2 = vNodes => vNodes.filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
+const {
+  Fragment
+} = Vue;
+const filterEmptyNodesVue3 = vNode => {
+  return vNode.reduce((acc, node) => {
+    if (Fragment && node.type === Fragment && Array.isArray(node.children)) {
+      acc.push(...node.children);
+    } else {
+      acc.push(node);
+    }
+    return acc;
+  }, []).filter(node => !isVnodeEmpty(node));
+};
+const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
+
+// handles the addition of the lastSeparator in these two cases:
+// item1, item2, item3 => item1, item2, and item3
+// item1, item2 => item1 and item2
+const addLastSeparator = (lastSeparator, items) => {
+  if (!lastSeparator) {
+    return items;
+  }
+  if (items.length > 3) {
+    return insert(-1, lastSeparator, items);
+  }
+
+  // Replace the second-to-last item with lastSeparator
+  const result = [...items];
+  result[result.length - 2] = lastSeparator;
+  return result;
+};
+var script = {
+  name: 'GlIntersperse',
+  functional: true,
+  props: {
+    separator: {
+      type: String,
+      default: ', ',
+      required: false
+    },
+    lastSeparator: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  render(createElement, context) {
+    const {
+      props: {
+        separator,
+        lastSeparator
+      },
+      slots,
+      data
+    } = context;
+    const slotContent = slots().default || [];
+    const filtered = filterEmptyNodes(slotContent);
+    const separated = intersperse(separator, filtered);
+    const withLastSeparator = addLastSeparator(lastSeparator, separated);
+    return createElement('span', data, withLastSeparator);
+  }
+};
+
+/* 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 };

package/dist/components/utilities/sprintf/sprintf.js

@@ -0,0 +1,171 @@
+import { isString, has } from 'lodash-es';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* eslint-disable no-continue */
+const PREFIX = '%{';
+const SUFFIX = '}';
+const START_SUFFIX = 'Start';
+const END_SUFFIX = 'End';
+const PLACE_HOLDER_REGEX = new RegExp(`(${PREFIX}[a-z]+[\\w-]*[a-z0-9]+${SUFFIX})`, 'gi');
+function groupPlaceholdersByStartTag() {
+  let placeholders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return Object.entries(placeholders).reduce((acc, _ref) => {
+    let [slotName, [startTag, endTag]] = _ref;
+    acc[startTag] = {
+      slotName,
+      endTag
+    };
+    return acc;
+  }, {});
+}
+function getPlaceholderDefinition(chunk, placeholdersByStartTag) {
+  const tagName = chunk.slice(PREFIX.length, -SUFFIX.length);
+  if (has(placeholdersByStartTag, tagName)) {
+    // Use provided custom placeholder definition
+    return {
+      ...placeholdersByStartTag[tagName],
+      tagName
+    };
+  }
+  if (tagName.endsWith(START_SUFFIX)) {
+    // Tag conforms to default start/end tag naming convention
+    const slotName = tagName.slice(0, -START_SUFFIX.length);
+    return {
+      slotName,
+      endTag: `${slotName}${END_SUFFIX}`,
+      tagName
+    };
+  }
+  return {
+    slotName: tagName,
+    endTag: undefined,
+    tagName
+  };
+}
+var script = {
+  name: 'GlSprintf',
+  functional: true,
+  props: {
+    /**
+     * A translated string with named placeholders, e.g., "Written by %{author}".
+     */
+    message: {
+      type: String,
+      required: true
+    },
+    /**
+     * An object mapping slot names to custom start/end placeholders. Use this
+     * to avoid changing an existing message, and in turn invalidating existing
+     * translations, in the case it uses non-default placeholders.
+     */
+    placeholders: {
+      type: Object,
+      required: false,
+      default: undefined,
+      validator: value => Object.values(value).every(
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      tagPair => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(isString))
+    }
+  },
+  /**
+   * Available slots are determined by the placeholders in the provided
+   * message prop. For example, a message of "Written by %{author}" has
+   * a slot called "author", and its content is used to replace "%{author}"
+   * in the rendered output. When two placeholders indicate a start and an
+   * end region in the message, e.g., "%{linkStart}foo%{linkEnd}", the common
+   * base name can be used as a scoped slot, where the content between the
+   * placeholders is passed via the `content` scoped slot prop.
+   * @slot * (arbitrary)
+   * @binding {string} content The content to place between start and end placeholders.
+   */
+  render(createElement, context) {
+    // While a functional style is generally preferred, an imperative style is
+    // used here, as it lends itself better to the message parsing algorithm.
+    // This approach is also more performant, as it minimizes (relatively) object
+    // creation/garbage collection, which is important given how frequently this
+    // code may run on a given page.
+
+    let i = 0;
+    const vnodes = [];
+    const slots = context.scopedSlots;
+    const chunks = context.props.message.split(PLACE_HOLDER_REGEX);
+    const placeholdersByStartTag = groupPlaceholdersByStartTag(context.props.placeholders);
+    while (i < chunks.length) {
+      const chunk = chunks[i];
+      // Skip past this chunk now we have it
+      i += 1;
+      if (!PLACE_HOLDER_REGEX.test(chunk)) {
+        // Not a placeholder, so pass through as-is
+        vnodes.push(chunk);
+        continue;
+      }
+      const {
+        slotName,
+        endTag,
+        tagName
+      } = getPlaceholderDefinition(chunk, placeholdersByStartTag);
+      if (endTag) {
+        // Peek ahead to find end placeholder, if any
+        const indexOfEnd = chunks.indexOf(`${PREFIX}${endTag}${SUFFIX}`, i);
+        if (indexOfEnd > -1) {
+          // We have a valid start/end placeholder pair! Extract the content
+          // between them and skip past the end placeholder
+          const content = chunks.slice(i, indexOfEnd);
+          i = indexOfEnd + 1;
+          if (!has(slots, slotName)) {
+            // Slot hasn't been provided; return placeholders and content as-is
+            vnodes.push(chunk, ...content, chunks[indexOfEnd]);
+            continue;
+          }
+
+          // Provide content to provided scoped slot
+          vnodes.push(slots[slotName]({
+            content: content.join('')
+          }));
+          continue;
+        }
+      }
+
+      // By process of elimination, chunk must be a plain placeholder
+      vnodes.push(has(slots, tagName) ? slots[tagName]() : chunk);
+      continue;
+    }
+    return vnodes;
+  }
+};
+
+/* 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 };

package/dist/components/utilities/truncate/constants.js

@@ -0,0 +1,8 @@
+const POSITION = {
+  START: 'start',
+  MIDDLE: 'middle',
+  END: 'end'
+};
+const ZERO_WIDTH_SPACE = '\u200b';
+
+export { POSITION, ZERO_WIDTH_SPACE };

package/dist/components/utilities/truncate/truncate.js

@@ -0,0 +1,154 @@
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { POSITION, ZERO_WIDTH_SPACE } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTruncate',
+  POSITION,
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlResizeObserver: GlResizeObserverDirective
+  },
+  props: {
+    /**
+     * Text to be ellipsized
+     */
+    text: {
+      type: String,
+      required: true
+    },
+    /**
+     * Ellipsis position
+     */
+    position: {
+      type: String,
+      required: false,
+      default: POSITION.END,
+      validator: value => Object.values(POSITION).includes(value)
+    },
+    /**
+     * Display the full text in a tooltip only if it is being truncated
+     */
+    withTooltip: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isTruncated: false
+    };
+  },
+  computed: {
+    middleIndex() {
+      return Math.floor(this.text.length / 2);
+    },
+    preventWhitespaceCollapse() {
+      // We don't use `\s` here since it includes non-breaking spaces and other
+      // non-collapsible whitespace characters.
+      // See https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace
+      // and https://infra.spec.whatwg.org/#ascii-whitespace.
+      const collapsibleWhitespaceChar = /^[ \n\t\r\f]$/;
+      const {
+        text,
+        middleIndex
+      } = this;
+      const lastCharOfFirstIsCollapsibleWhitespace = collapsibleWhitespaceChar.test(text.charAt(middleIndex - 1));
+      const firstCharOfLastIsCollapsibleWhitespace = collapsibleWhitespaceChar.test(text.charAt(middleIndex));
+      return lastCharOfFirstIsCollapsibleWhitespace && !firstCharOfLastIsCollapsibleWhitespace;
+    },
+    first() {
+      const first = this.text.slice(0, this.middleIndex);
+      if (this.preventWhitespaceCollapse) {
+        // Because this component's root element has an internal flex layout,
+        // whitespace at the end of the first child span and at the beginning
+        // of the second child span would be ignored (i.e., totally collapsed).
+        //
+        // This means that strings with a space character in the middle would
+        // render as if there were no space, which would be incorrect (e.g.,
+        // "Gap here" would render as "Gaphere").
+        //
+        // So, in that case, we insert a zero-width space at the end of the
+        // first child span to prevent that whitespace from being totally
+        // collapsed. In other words:
+        // 'first-part-with-space ' → 'first-part-with-space ​'
+        //
+        // If there's a whitespace character at the begging of the second child
+        // span, we do *not* do this, since the left-to-right mark (‎) just
+        // before `{{ last }}` in the template prevents the collapse of any
+        // whitespace at the start of `last`. If we ignored this edge case,
+        // we'd render a double space, which wouldn't correspond to how the
+        // string would normally render.
+        //
+        // See
+        // https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_in_block_formatting_contexts
+        // for more information on how browsers treat whitespace.
+        return `${first}${ZERO_WIDTH_SPACE}`;
+      }
+      return first;
+    },
+    last() {
+      return this.text.slice(this.middleIndex);
+    },
+    isTooltipDisabled() {
+      return !this.withTooltip || !this.isTruncated;
+    },
+    title() {
+      return this.withTooltip ? this.text : undefined;
+    }
+  },
+  watch: {
+    withTooltip(withTooltip) {
+      if (withTooltip) {
+        this.checkTruncationState();
+      }
+    }
+  },
+  methods: {
+    checkTruncationState() {
+      if (this.withTooltip) {
+        this.isTruncated = this.$refs.text.scrollWidth > this.$refs.text.offsetWidth;
+      }
+    }
+  }
+};
+
+/* 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.position === _vm.$options.POSITION.START)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate-component",attrs:{"title":_vm.title}},[_c('span',{ref:"text",staticClass:"gl-truncate-start !gl-text-ellipsis"},[_vm._v("‎"+_vm._s(_vm.text)+"‎")])]):(_vm.position === _vm.$options.POSITION.MIDDLE)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate-component",attrs:{"title":_vm.title,"aria-label":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.first))]),_c('span',{staticClass:"gl-truncate-start"},[_vm._v("‎"+_vm._s(_vm.last)+"‎")])]):_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate-component",attrs:{"data-testid":"truncate-end-container","title":_vm.title}},[_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.text))])])};
+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/truncate_text/constants.js

@@ -0,0 +1,7 @@
+const STATES = {
+  INITIAL: 'initial',
+  TRUNCATED: 'truncated',
+  EXTENDED: 'extended'
+};
+
+export { STATES };

package/dist/components/utilities/truncate_text/truncate_text.js

@@ -0,0 +1,146 @@
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import GlButton from '../../base/button/button';
+import { STATES } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTruncateText',
+  components: {
+    GlButton
+  },
+  directives: {
+    GlResizeObserver: GlResizeObserverDirective
+  },
+  props: {
+    /**
+     * The text for the 'Show more' button
+     */
+    showMoreText: {
+      type: String,
+      required: false,
+      default: 'Show more'
+    },
+    /**
+     * The text for the 'Show less' button
+     */
+    showLessText: {
+      type: String,
+      required: false,
+      default: 'Show less'
+    },
+    /**
+     * The number of lines that are initially visible on larger screens
+     */
+    lines: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    /**
+     * The number of lines that are initially visible on smaller screens
+     */
+    mobileLines: {
+      type: Number,
+      required: false,
+      default: 10
+    },
+    /**
+     * Props that are passed to the toggle button
+     */
+    toggleButtonProps: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      state: STATES.INITIAL
+    };
+  },
+  computed: {
+    showTruncationToggle() {
+      return this.isTruncated || this.isExtended;
+    },
+    truncationToggleText() {
+      return this.isTruncated ? this.showMoreText : this.showLessText;
+    },
+    cssVariables() {
+      return {
+        '--lines': this.lines,
+        '--mobile-lines': this.mobileLines
+      };
+    },
+    truncationClasses() {
+      return this.isExtended ? null : 'gl-truncate-text gl-overflow-hidden';
+    },
+    ariaExpanded() {
+      return (!this.isTruncated).toString();
+    },
+    isTruncated() {
+      return this.state === STATES.TRUNCATED;
+    },
+    isExtended() {
+      return this.state === STATES.EXTENDED;
+    }
+  },
+  methods: {
+    onResize(_ref) {
+      let {
+        target
+      } = _ref;
+      if (target.scrollHeight > target.offsetHeight) {
+        this.state = STATES.TRUNCATED;
+      } else if (this.isTruncated) {
+        this.state = STATES.INITIAL;
+      }
+    },
+    toggleTruncation() {
+      if (this.isTruncated) {
+        this.state = STATES.EXTENDED;
+      } else if (this.isExtended) {
+        this.state = STATES.TRUNCATED;
+      }
+    }
+  }
+};
+
+/* 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',[_c('article',{directives:[{name:"gl-resize-observer",rawName:"v-gl-resize-observer",value:(_vm.onResize),expression:"onResize"}],class:_vm.truncationClasses,style:(_vm.cssVariables),attrs:{"aria-expanded":_vm.ariaExpanded}},[_vm._t("default")],2),_vm._v(" "),(_vm.showTruncationToggle)?_c('gl-button',_vm._b({attrs:{"variant":"link"},on:{"click":_vm.toggleTruncation}},'gl-button',_vm.toggleButtonProps,false),[_vm._v(_vm._s(_vm.truncationToggleText))]):_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 };