@gitlab/ui 131.3.0 → 131.3.1

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

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

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

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

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

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

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

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

@@ -1,146 +0,0 @@
-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 };