@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -1,122 +0,0 @@
-<script>
-import { stepIndexAndWrap } from './filtered_search_utils';
-
-const DEFER_TO_INITIAL_VALUE = -1;
-const NO_ACTIVE_ITEM = -2;
-
-export default {
-  name: 'GlFilteredSearchSuggestionList',
-  inject: ['suggestionsListClass', 'termsAsTokens'],
-  provide() {
-    return {
-      filteredSearchSuggestionListInstance: this,
-    };
-  },
-  props: {
-    /**
-     * Value to be initially selected in list.
-     */
-    initialValue: {
-      required: false,
-      validator: () => true,
-      default: null,
-    },
-  },
-
-  data() {
-    return {
-      activeIdx: DEFER_TO_INITIAL_VALUE,
-      registeredItems: [],
-    };
-  },
-
-  computed: {
-    initialActiveIdx() {
-      return this.registeredItems.findIndex((item) =>
-        this.valuesMatch(item.value, this.initialValue)
-      );
-    },
-    initialActiveItem() {
-      return this.registeredItems[this.initialActiveIdx];
-    },
-    activeItem() {
-      if (!this.termsAsTokens() && this.activeIdx === NO_ACTIVE_ITEM) return null;
-      if (this.activeIdx === DEFER_TO_INITIAL_VALUE) return this.initialActiveItem;
-      return this.registeredItems[this.activeIdx];
-    },
-    listClasses() {
-      return [this.suggestionsListClass(), 'dropdown-menu gl-filtered-search-suggestion-list'];
-    },
-  },
-
-  watch: {
-    initialValue() {
-      this.activeIdx = DEFER_TO_INITIAL_VALUE;
-    },
-  },
-
-  methods: {
-    valuesMatch(firstValue, secondValue) {
-      if (firstValue == null || secondValue == null) return false;
-
-      return typeof firstValue === 'string' && typeof secondValue === 'string'
-        ? firstValue.toLowerCase() === secondValue.toLowerCase()
-        : firstValue === secondValue;
-    },
-    register(item) {
-      this.registeredItems.push(item);
-    },
-    unregister(item) {
-      const idx = this.registeredItems.indexOf(item);
-      if (idx !== -1) {
-        this.registeredItems.splice(idx, 1);
-        if (idx === this.activeIdx) {
-          this.activeIdx = DEFER_TO_INITIAL_VALUE;
-        }
-      }
-    },
-    nextItem() {
-      if (this.termsAsTokens()) {
-        this.stepItem(1);
-      } else {
-        this.stepItem(1, this.registeredItems.length - 1);
-      }
-    },
-    prevItem() {
-      if (this.termsAsTokens()) {
-        this.stepItem(-1);
-      } else {
-        this.stepItem(-1, 0);
-      }
-    },
-    stepItem(direction, endIdx) {
-      if (
-        !this.termsAsTokens() &&
-        (this.activeIdx === endIdx ||
-          (this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx))
-      ) {
-        // The user wants to move past the end of the list, so ensure nothing is selected.
-        this.activeIdx = NO_ACTIVE_ITEM;
-      } else {
-        const index =
-          this.activeIdx === DEFER_TO_INITIAL_VALUE
-            ? // Currently active item is set by initialValue (i.e., text input matching),
-              // so step relative to that.
-              this.initialActiveIdx
-            : // Otherwise, step relative to the explicitly (via up/down arrows) activated item.
-              this.activeIdx;
-        this.activeIdx = stepIndexAndWrap(index, direction, this.registeredItems.length);
-      }
-    },
-    getValue() {
-      return this.activeItem ? this.activeItem.value : null;
-    },
-  },
-};
-</script>
-<template>
-  <ul :class="listClasses">
-    <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
-    <slot></slot>
-  </ul>
-</template>

package/src/components/base/filtered_search/filtered_search_term.md

@@ -1,7 +0,0 @@
-The filtered search term is a component for managing "free input" in the filtered search component.
-It is responsible for autocompleting available tokens and "converting" to a relevant
-component when an autocomplete item is selected.
-
-## Usage
-
-This component is internal and is not intended to be used by `@gitlab/ui` users.

package/src/components/base/filtered_search/filtered_search_term.scss

@@ -1,19 +0,0 @@
-.gl-filtered-search-term {
-  .gl-filtered-search-term-token {
-    @apply gl-cursor-text;
-  }
-}
-
-.gl-filtered-search-term-input {
-  @apply gl-p-0;
-  @apply gl-bg-transparent;
-  @apply gl-border-none;
-  @apply gl-outline-none;
-  @apply gl-h-6;
-  @apply gl-w-full;
-  min-width: $gl-dropdown-width;
-}
-
-.gl-filtered-search-term-icon {
-  @apply gl-mr-2;
-}

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -1,243 +0,0 @@
-<script>
-import GlToken from '../token/token.vue';
-import { stopEvent } from '../../../utils/utils';
-import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import {
-  INTENT_ACTIVATE_PREVIOUS,
-  TERM_TOKEN_TYPE,
-  TOKEN_CLOSE_SELECTOR,
-  match,
-  tokenToOption,
-  termTokenDefinition,
-} from './filtered_search_utils';
-
-export default {
-  name: 'GlFilteredSearchTerm',
-  components: {
-    GlFilteredSearchTokenSegment,
-    GlToken,
-  },
-  inject: ['termsAsTokens'],
-  inheritAttrs: false,
-  props: {
-    /**
-     * Tokens available for this filtered search instance.
-     */
-    availableTokens: {
-      type: Array,
-      required: true,
-    },
-    /**
-     * Determines if the term is being edited or not.
-     */
-    active: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Current term value.
-     */
-    value: {
-      type: Object,
-      required: false,
-      default: () => ({ data: '' }),
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * HTML attributes to add to the search input.
-     */
-    searchInputAttributes: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    /**
-     * If this is the last token.
-     */
-    isLastToken: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * The current `value` (tokens) of the ancestor GlFilteredSearch component.
-     */
-    currentValue: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    cursorPosition: {
-      type: String,
-      required: false,
-      default: 'end',
-      validator: (value) => ['start', 'end'].includes(value),
-    },
-    /**
-     * The title of the text search option. Ignored unless termsAsTokens is enabled.
-     */
-    searchTextOptionLabel: {
-      type: String,
-      required: false,
-      default: termTokenDefinition.title,
-    },
-    viewOnly: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    showInput() {
-      return this.termsAsTokens() || Boolean(this.placeholder);
-    },
-    showToken() {
-      return this.termsAsTokens() && Boolean(this.value.data);
-    },
-    suggestedTokens() {
-      const tokens = this.availableTokens.filter((token) => match(token.title, this.value.data));
-      if (this.termsAsTokens() && this.value.data) {
-        tokens.push({
-          ...termTokenDefinition,
-          title: this.searchTextOptionLabel,
-        });
-      }
-
-      // eslint-disable-next-line unicorn/no-array-callback-reference
-      return tokens.map(tokenToOption);
-    },
-    internalValue: {
-      get() {
-        return this.value.data;
-      },
-      set(data) {
-        /**
-         * Emitted when the token changes its value.
-         *
-         * @event input
-         * @type {object} dataObj Object containing the update value.
-         */
-        this.$emit('input', { data });
-      },
-    },
-    eventListeners() {
-      return this.viewOnly
-        ? {}
-        : { mousedown: this.stopMousedownOnCloseButton, close: this.destroyByClose };
-    },
-  },
-  methods: {
-    onBackspace() {
-      /**
-       * Emitted when token value is empty and backspace is pressed.
-       * Includes user intent to activate previous token.
-       *
-       * @event destroy
-       * @type {object} details The user intent
-       */
-      this.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
-    },
-    stopMousedownOnCloseButton(event) {
-      if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
-        stopEvent(event);
-      }
-    },
-    destroyByClose() {
-      this.$emit('destroy');
-    },
-    onComplete(type) {
-      if (type === TERM_TOKEN_TYPE) {
-        // We've completed this term token
-        this.$emit('complete');
-      } else {
-        // We're changing the current token type
-        this.$emit('replace', { type });
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="gl-filtered-search-term gl-h-auto" data-testid="filtered-search-term">
-    <!--
-      Emitted when this term token is clicked.
-      @event activate
-    -->
-
-    <!--
-      Emitted when this term token will lose its focus.
-      @event deactivate
-    -->
-
-    <!--
-      Emitted when autocomplete entry is selected.
-      @event replace
-      @property {object} token Replacement token configuration.
-    -->
-
-    <!--
-      Emitted when the token is submitted.
-      @event submit
-    -->
-
-    <!--
-      Emitted when Space is pressed in-between term text.
-      Not emitted when termsAsTokens is true.
-      @event split
-      @property {array} newTokens Token configurations
-    -->
-
-    <gl-filtered-search-token-segment
-      ref="segment"
-      v-model="internalValue"
-      is-term
-      class="gl-filtered-search-term-token"
-      :active="active"
-      :cursor-position="cursorPosition"
-      :search-input-attributes="searchInputAttributes"
-      :is-last-token="isLastToken"
-      :current-value="currentValue"
-      :view-only="viewOnly"
-      :options="suggestedTokens"
-      @activate="$emit('activate')"
-      @deactivate="$emit('deactivate')"
-      @complete="onComplete"
-      @backspace="onBackspace"
-      @submit="$emit('submit')"
-      @split="$emit('split', $event)"
-      @previous="$emit('previous')"
-      @next="$emit('next')"
-    >
-      <template #view="{ label }">
-        <gl-token
-          v-if="showToken"
-          :class="{ 'gl-cursor-pointer': !viewOnly }"
-          :view-only="viewOnly"
-          v-on="eventListeners"
-          >{{ value.data }}</gl-token
-        >
-
-        <input
-          v-else-if="showInput"
-          v-bind="searchInputAttributes"
-          class="gl-filtered-search-term-input"
-          :class="{ 'gl-bg-gray-10': viewOnly }"
-          :placeholder="placeholder"
-          :aria-label="label"
-          :readonly="viewOnly"
-          data-testid="filtered-search-term-input"
-          @focusin="$emit('activate')"
-          @focusout="$emit('deactivate')"
-        />
-
-        <template v-else>{{ value.data }}</template>
-      </template>
-    </gl-filtered-search-token-segment>
-  </div>
-</template>

package/src/components/base/filtered_search/filtered_search_token.md

@@ -1,23 +0,0 @@
-Filtered search token is a helper component, intended to
-simplify the creation of filters tokens which consist of a title, operators
-and an editable value with autocomplete. This component abstracts token management
-logic and allows you to focus on implementing autocomplete or view logic.
-
-This component is not intended to be used outside of the `GlFilteredSearch` component.
-
-## Usage
-
-Make sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:
-
-```html
-<gl-filtered-search-token title="Confidential" :active="active" :value="value" v-on="$listeners">
-  <template #suggestions>
-    <gl-filtered-search-suggestion value="Yes"
-      ><gl-icon name="eye-slash" :size="16" /> Yes</gl-filtered-search-suggestion
-    >
-    <gl-filtered-search-suggestion value="No"
-      ><gl-icon name="eye" :size="16" /> No</gl-filtered-search-suggestion
-    >
-  </template>
-</gl-filtered-search-token>
-```

package/src/components/base/filtered_search/filtered_search_token.scss

@@ -1,63 +0,0 @@
-.gl-filtered-search-token {
-  &.gl-filtered-search-token-active {
-    @apply gl-cursor-default;
-  }
-
-  @apply gl-h-6;
-  @apply gl-inline-flex;
-  @apply gl-whitespace-nowrap;
-  @apply gl-cursor-pointer;
-
-  &.gl-filtered-search-token-hover {
-    &:hover {
-      .gl-filtered-search-token-type {
-        background-color: var(--gl-filtered-search-token-type-background-color-hover);
-      }
-
-      .gl-filtered-search-token-data {
-        background-color: var(--gl-filtered-search-token-data-background-color-hover);
-      }
-
-      .gl-filtered-search-token-operator {
-        background-color: var(--gl-filtered-search-token-operator-background-color-hover);
-      }
-    }
-  }
-}
-
-.gl-token {
-  @apply gl-rounded-none;
-
-  &.gl-filtered-search-token-type {
-    @apply gl-h-6;
-    @apply gl-rounded-tr-none;
-    @apply gl-rounded-br-none;
-    @apply gl-py-2;
-    @apply gl-px-3;
-    @apply gl-mr-1;
-    background-color: var(--gl-filtered-search-token-type-background-color-default);
-  }
-
-  &.gl-filtered-search-token-operator {
-    @apply gl-h-6;
-    @apply gl-mr-1;
-    @apply gl-rounded-none;
-    background-color: var(--gl-filtered-search-token-operator-background-color-default);
-  }
-
-  &.gl-filtered-search-token-data {
-    @apply gl-h-6;
-    @apply gl-rounded-tr-small;
-    @apply gl-rounded-br-small;
-    background-color: var(--gl-filtered-search-token-data-background-color-default);
-
-    .gl-filtered-search-token-data-content {
-      @apply gl-inline-flex;
-    }
-  }
-}
-
-.gl-filtered-search-token-operator-description {
-  @apply gl-text-subtle;
-  @apply gl-ml-auto;
-}