@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/components/utilities/sprintf/sprintf.vue

@@ -1,142 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-/* eslint-disable no-continue */
-import has from 'lodash/has';
-import isString from 'lodash/isString';
-
-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(placeholders = {}) {
-  return Object.entries(placeholders).reduce((acc, [slotName, [startTag, endTag]]) => {
-    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,
-  };
-}
-
-export default {
-  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>

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

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

package/src/components/utilities/truncate/truncate.md

@@ -1,14 +0,0 @@
-The `GlTruncate` component lets you truncate the long texts with ellipsis.
-
-> **Tip:** Try resizing the side panel for truncation.
-
-## Usage
-
-```html
-<gl-truncate :text="text" :position="position" />
-```
-
-By default, the ellipsis position is at the `end`.
-
-Pro Tip: Truncating long filepaths from the `middle` / `start` can help preventing the important
-information in the end, i.e. filenames.

package/src/components/utilities/truncate/truncate.scss

@@ -1,21 +0,0 @@
-.gl-truncate-component {
-  display: inline-flex;
-  max-width: 100%;
-}
-
-.gl-truncate-start,
-.gl-truncate-end {
-  flex: 0 1 auto;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.gl-truncate-start {
-  direction: rtl;
-  text-align: left;
-  text-overflow: '';
-}
-
-.gl-truncate-end {
-  text-overflow: ellipsis;
-}

package/src/components/utilities/truncate/truncate.vue

@@ -1,109 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import { POSITION } from './constants';
-
-export default {
-  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>
-
-<template>
-  <span
-    v-if="position === $options.POSITION.START"
-    v-gl-tooltip="{ disabled: isTooltipDisabled }"
-    v-gl-resize-observer:[withTooltip]="checkTruncationState"
-    class="gl-truncate-component"
-    :title="text"
-  >
-    <span ref="text" class="gl-truncate-start !gl-text-ellipsis">&lrm;{{ text }}&lrm;</span>
-  </span>
-
-  <span
-    v-else-if="position === $options.POSITION.MIDDLE"
-    v-gl-tooltip="{ disabled: isTooltipDisabled }"
-    v-gl-resize-observer:[withTooltip]="checkTruncationState"
-    class="gl-truncate-component"
-    :title="text"
-  >
-    <span ref="text" class="gl-truncate-end">{{ first }}</span
-    ><span class="gl-truncate-start">&lrm;{{ last }}&lrm;</span>
-  </span>
-
-  <span
-    v-else
-    v-gl-tooltip="{ disabled: isTooltipDisabled }"
-    v-gl-resize-observer:[withTooltip]="checkTruncationState"
-    class="gl-truncate-component"
-    data-testid="truncate-end-container"
-    :title="text"
-  >
-    <span ref="text" class="gl-truncate-end">{{ text }}</span>
-  </span>
-</template>

package/src/components/utilities/truncate_text/constants.js

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

package/src/components/utilities/truncate_text/truncate_text.md

@@ -1,26 +0,0 @@
-The `GlTruncateText` component lets you truncate a large text by number of lines.
-The last line ends with an ellipsis if the text is truncated.
-Truncation can be toggled by a 'Show more' / 'Show less' button.
-The button will not be shown when no truncation is necessary.
-There is a separate property to set the number of lines initially shown on small screens.
-Use the `showMoreText` and `showLessText` properties to provide translated strings.
-
-> **Tip:** Try resizing the side panel to see the truncated number of lines change.
-
-## Usage
-
-```html
-<gl-truncate-text :show-more-text="__('Show more')" :show-less-text="__('Show less')" :lines="3" :mobile-lines="10">
-  {{ largeText }}
-</gl-truncate-text>
-```
-
-## Usage caveats
-
-When the size of the window is large,
-and the text is displayed on a number of lines greater than the value of the `lines` property,
-but smaller than the value of the `mobileLines` property,
-and the `Show more` button has been clicked to show the entire content of the text,
-and the window is resized to a small size,
-then instead of disappearing,
-the `Show less` button will remain visible and will do nothing when clicked.

package/src/components/utilities/truncate_text/truncate_text.scss

@@ -1,14 +0,0 @@
-/**
-  Note: although vendor-prefixes are used here, these properties are supported by all browsers.
-  See https://caniuse.com/css-line-clamp
-**/
-.gl-truncate-text {
-  // stylelint-disable-next-line value-no-vendor-prefix
-  display: -webkit-box;
-  -webkit-line-clamp: var(--mobile-lines);
-  -webkit-box-orient: vertical;
-
-  @include gl-media-breakpoint-up(sm) {
-    -webkit-line-clamp: var(--lines);
-  }
-}

package/src/components/utilities/truncate_text/truncate_text.vue

@@ -1,124 +0,0 @@
-<script>
-import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import GlButton from '../../base/button/button.vue';
-import { STATES } from './constants';
-
-export default {
-  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({ target }) {
-      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>
-
-<template>
-  <section>
-    <article
-      v-gl-resize-observer="onResize"
-      :class="truncationClasses"
-      :style="cssVariables"
-      :aria-expanded="ariaExpanded"
-    >
-      <!-- @slot Text content -->
-      <slot></slot>
-    </article>
-    <gl-button
-      v-if="showTruncationToggle"
-      v-bind="toggleButtonProps"
-      variant="link"
-      @click="toggleTruncation"
-      >{{ truncationToggleText }}</gl-button
-    >
-  </section>
-</template>

package/src/directives/collapse_toggle.js

@@ -1 +0,0 @@
-export { VBToggle as GlCollapseToggleDirective } from '../vendor/bootstrap-vue/src/directives/toggle/toggle';

package/src/directives/hover_load/hover_load.js

@@ -1,46 +0,0 @@
-import isFunction from 'lodash/isFunction';
-
-export const DELAY_ON_HOVER = 100;
-let mouseOverTimer;
-let mouseOverHandler;
-
-const bind = (el, { value: loadHandler }) => {
-  if (!isFunction(loadHandler)) {
-    throw TypeError('Directive value must be a function');
-  }
-
-  const mouseOutHandler = () => {
-    if (mouseOverTimer) {
-      clearTimeout(mouseOverTimer);
-      mouseOverTimer = undefined;
-    }
-  };
-
-  mouseOverHandler = () => {
-    el.addEventListener('mouseout', mouseOutHandler, { passive: true });
-
-    mouseOverTimer = setTimeout(() => {
-      loadHandler(el);
-
-      // Only execute once
-      el.removeEventListener('mouseover', mouseOverHandler, true);
-      el.removeEventListener('mouseout', mouseOutHandler);
-
-      mouseOverTimer = undefined;
-    }, DELAY_ON_HOVER);
-  };
-
-  el.addEventListener('mouseover', mouseOverHandler, {
-    capture: true,
-    passive: true,
-  });
-};
-
-const unbind = (el) => {
-  el.removeEventListener('mouseover', mouseOverHandler, true);
-};
-
-export const HoverLoadDirective = {
-  bind,
-  unbind,
-};

package/src/directives/hover_load/hover_load.md

@@ -1,22 +0,0 @@
-A Vue Directive to help with preloading resources when hovering over an element.
-
-## Usage
-
-```html
-<script>
-import { GlHoverLoadDirective } from '@gitlab/ui';
-
-export default {
-  directives: { GlHoverLoadDirective },
-  methods: {
-    handlePreload() {
-      fetch('some/endpoint');
-    },
-  },
-};
-</script>
-
-<template>
-  <div v-gl-hover-load="handlePreload">Hover me to preload</div>
-</template>
-```

package/src/directives/modal.js

@@ -1 +0,0 @@
-export { VBModal as GlModalDirective } from '../vendor/bootstrap-vue/src/directives/modal/modal';

package/src/directives/outside/outside.js

@@ -1,151 +0,0 @@
-/**
- * Map<HTMLElement, { callback: Function, eventTypes: Array<string> }>
- */
-const callbacks = new Map();
-const click = 'click';
-const focusin = 'focusin';
-const supportedEventTypes = [click, focusin];
-const defaultEventType = click;
-
-/**
- * A Set to keep track of currently active event types.
- * This ensures that event listeners are only added for the event types that are in use.
- *
- * @type {Set<string>}
- */
-const activeEventTypes = new Set();
-let lastMousedown = null;
-
-const globalListener = (event) => {
-  callbacks.forEach(({ callback, eventTypes }, element) => {
-    const originalEvent = event.type === click ? lastMousedown || event : event;
-    if (
-      // Ignore events that aren't targeted outside the element
-      element.contains(originalEvent.target) ||
-      // Ignore events that aren't the specified types for this element
-      !eventTypes.includes(event.type)
-    ) {
-      return;
-    }
-
-    try {
-      callback(event);
-    } catch (e) {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.error(e);
-      }
-    }
-  });
-  if (event.type === click) {
-    lastMousedown = null;
-  }
-};
-
-// We need to listen for mouse events because text selection fires click event only when selection ends.
-// This means that the click event target could differ from the element where it originally started.
-// As example: if we use mouse events we could guarantee that selecting text within a dropdown won't close it.
-const onMousedown = (event) => {
-  lastMousedown = event;
-};
-
-const startListening = (eventTypes) => {
-  eventTypes.forEach((eventType) => {
-    if (!activeEventTypes.has(eventType)) {
-      // Listening to mousedown events, ensures that a text selection doesn't trigger the
-      // GlOutsideDirective 'click' callback if the selection started within the target element.
-      if (eventType === click) {
-        document.addEventListener('mousedown', onMousedown);
-      }
-
-      // Added { capture: true } to all event types to prevent the behavior discussed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1686#note_412545027
-      // Ensures the event listener handles the event in the capturing phase, avoiding issues encountered previously.
-      // Cannot be tested with Jest or Cypress, but can be tested with Playwright in the future: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4272#note_1947425384
-      document.addEventListener(eventType, globalListener, { capture: true });
-      activeEventTypes.add(eventType);
-    }
-  });
-
-  lastMousedown = null;
-};
-
-const stopListening = (eventTypesToUnbind) => {
-  eventTypesToUnbind.forEach((eventType) => {
-    if (activeEventTypes.has(eventType)) {
-      if ([...callbacks.values()].every(({ eventTypes }) => !eventTypes.includes(eventType))) {
-        document.removeEventListener(eventType, globalListener);
-        activeEventTypes.delete(eventType);
-      }
-    }
-  });
-
-  if (eventTypesToUnbind.includes(click) && !activeEventTypes.has(click)) {
-    document.removeEventListener('mousedown', onMousedown);
-  }
-};
-
-function parseBinding({ arg, value, modifiers }) {
-  const modifiersList = Object.keys(modifiers);
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof value !== 'function') {
-      throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
-    }
-
-    if (typeof arg !== 'undefined') {
-      throw new Error(
-        `[GlOutsideDirective] Arguments are not supported. Consider using modifiers instead.`
-      );
-    }
-
-    const unsupportedModifiers = modifiersList.filter(
-      (modifier) => !supportedEventTypes.includes(modifier)
-    );
-
-    if (unsupportedModifiers.length > 0) {
-      throw new Error(
-        `[GlOutsideDirective] Cannot bind ${unsupportedModifiers.join(', ')} events; supported event types are: ${supportedEventTypes.join(
-          ', '
-        )}`
-      );
-    }
-  }
-
-  return {
-    callback: value,
-    eventTypes: modifiersList.length > 0 ? modifiersList : [defaultEventType],
-  };
-}
-
-const bind = (el, bindings) => {
-  const { callback, eventTypes } = parseBinding(bindings);
-
-  if (callbacks.has(el)) {
-    // This element is already bound. This is possible if two components, which
-    // share the same root node, (i.e., one is a higher-order component
-    // wrapping another) _both_ have this directive applied.
-    //
-    // Because Vue binds directives in the direction towards the root, only the
-    // deepest instance of this directive will be bound.
-    //
-    // A future iteration may add support for binding all instances on a given
-    // element.
-    return;
-  }
-
-  callbacks.set(el, { callback, eventTypes });
-  startListening(eventTypes);
-};
-
-const unbind = (el) => {
-  const entry = callbacks.get(el);
-  if (entry) {
-    callbacks.delete(el);
-    stopListening(entry.eventTypes);
-  }
-};
-
-export const OutsideDirective = {
-  bind,
-  unbind,
-};