@gitlab/duo-ui 0.1.0

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

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

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

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

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

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

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