@gitlab/ui 72.12.0 → 72.12.1

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: 'text-break'
+    }, 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__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -0,0 +1,88 @@
+import memoize from 'lodash/memoize';
+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__ = __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 default __vue_component__;

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

@@ -0,0 +1,86 @@
+import compose from 'lodash/fp/compose';
+import fill from 'lodash/fp/fill';
+import filter from 'lodash/fp/filter';
+import { insert, intersperse } from '../../../utils/data_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+const containsWhitespaceOnly = vNode => vNode.text.trim() === '';
+const isTag = vNode => typeof vNode.tag === 'string';
+const filterWhitespaceNodes = filter(vNode => isTag(vNode) || !containsWhitespaceOnly(vNode));
+const insertAfterSecondLastItem = insert(-1);
+const replaceSecondLastItem = fill(-2, -1);
+
+// 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;
+  }
+  return items.length > 3 ? insertAfterSecondLastItem(lastSeparator, items) : replaceSecondLastItem(lastSeparator, items);
+};
+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 filterAndSeparate = compose(addLastSeparator(lastSeparator), intersperse(separator), filterWhitespaceNodes);
+    return createElement('span', data, filterAndSeparate(slots().default));
+  }
+};
+
+/* 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__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -0,0 +1,172 @@
+import has from 'lodash/has';
+import isString from 'lodash/isString';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+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__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

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

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

@@ -0,0 +1,111 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { POSITION } 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);
+    },
+    first() {
+      return this.text.slice(0, this.middleIndex);
+    },
+    last() {
+      return this.text.slice(this.middleIndex);
+    },
+    isTooltipDisabled() {
+      return !this.withTooltip || !this.isTruncated;
+    }
+  },
+  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",attrs:{"title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-start gl-text-overflow-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",attrs:{"title":_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",attrs:{"data-testid":"truncate-end-container","title":_vm.text}},[_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__ = __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 default __vue_component__;

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__ = __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 default __vue_component__;