@gitlab/ui 38.0.1 → 38.1.0

package/src/components/base/filtered_search/examples/filtered_search.multi_select.example.vue

@@ -1,132 +0,0 @@
-<script>
-const fakeUsers = [
-  { id: 1, name: 'User Alpha', username: 'alpha' },
-  { id: 2, name: 'User Beta', username: 'beta' },
-  { id: 3, name: 'User Gamma', username: 'gamma' },
-  { id: 4, name: 'User Delta', username: 'delta' },
-  { id: 5, name: 'User Epsilon', username: 'epsilon' },
-];
-
-const UserToken = {
-  props: ['value', 'active', 'config'],
-  inheritAttrs: false,
-  data() {
-    return {
-      users: fakeUsers,
-      selectedUsernames: this.value.data ? this.value.data.split(',') : [],
-      activeUser: null,
-    };
-  },
-  computed: {
-    filteredUsers() {
-      return this.users.filter((user) => user.username.includes(this.value.data));
-    },
-    selectedUsers() {
-      return this.config.multiSelect
-        ? this.users.filter((user) => this.selectedUsernames.includes(user.username))
-        : this.users.filter((user) => user.username === this.activeUser);
-    },
-  },
-  methods: {
-    loadView() {
-      this.activeUser = fakeUsers.find((u) => u.username === this.value.data);
-    },
-    loadSuggestions() {
-      this.users = fakeUsers;
-    },
-    handleSelect(username) {
-      if (!this.config.multiSelect) {
-        return;
-      }
-
-      if (this.selectedUsernames.includes(username)) {
-        this.selectedUsernames = this.selectedUsernames.filter((user) => user !== username);
-      } else {
-        this.selectedUsernames.push(username);
-      }
-    },
-    isLastUser(index) {
-      return index === this.selectedUsers.length - 1;
-    },
-  },
-  watch: {
-    // eslint-disable-next-line func-names
-    'value.data': function () {
-      if (this.active) {
-        this.loadSuggestions();
-      }
-    },
-    active: {
-      immediate: true,
-      handler(newValue) {
-        if (!newValue) {
-          this.loadView();
-        } else {
-          this.loadSuggestions();
-        }
-      },
-    },
-  },
-  template: `
-    <gl-filtered-search-token
-      v-bind="{ ...this.$props, ...this.$attrs }"
-      v-on="$listeners"
-      :multi-select-values="selectedUsernames"
-      @select="handleSelect"
-    >
-    <template #view="{ inputValue }">
-      <template v-for="(user, index) in selectedUsers">
-        <gl-avatar :size="16" :entity-name="user.username" shape="circle" />
-        {{ user.name }}
-        <span v-if="!isLastUser(index)" class="gl-mx-2">,&nbsp;</span>
-      </template>
-    </template>
-    <template #suggestions>
-      <gl-filtered-search-suggestion :key="user.id" v-for="user in filteredUsers" :value="user.username">
-        <div class="gl-display-flex gl-align-items-center">
-          <gl-icon
-            v-if="config.multiSelect"
-            name="check"
-            class="gl-mr-3 gl-text-gray-700"
-            :class="{ 'gl-visibility-hidden': !selectedUsernames.includes(user.username) }"
-          />
-          <gl-avatar :size="32" :entity-name="user.username" />
-          <div>
-            <p class="gl-m-0">{{ user.name }}</p>
-            <p class="gl-m-0">@{{ user.username }}</p>
-          </div>
-        </div>
-      </gl-filtered-search-suggestion>
-    </template>
-    </gl-filtered-search-token>
-  `,
-};
-
-const tokens = [
-  {
-    type: 'assignee',
-    icon: 'user',
-    title: 'Assignee',
-    token: UserToken,
-    operators: [
-      { value: '=', description: 'is', default: 'true' },
-      { value: '!=', description: 'is not one of' },
-      { value: '||', description: 'is one of' },
-    ],
-    multiSelect: true,
-  },
-];
-
-export default {
-  data() {
-    return {
-      tokens,
-      value: [{ type: 'assignee', value: { data: 'alpha,beta', operator: '=' } }],
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-filtered-search v-model="value" :available-tokens="tokens" :show-friendly-text="true" />
-</template>

package/src/components/base/filtered_search/examples/filtered_search.single_unique.example.vue

@@ -1,31 +0,0 @@
-<script>
-const testTokens = [
-  {
-    type: 'unique',
-    title: 'Unique',
-    icon: 'document',
-    token: 'gl-filtered-search-token',
-    operators: [{ value: '=', description: 'is', default: 'true' }],
-    options: [
-      { icon: 'heart', title: 'heart', value: 1 },
-      { icon: 'hook', title: 'hook', value: 2 },
-    ],
-    unique: true,
-  },
-];
-
-export default {
-  data() {
-    return {
-      tokens: testTokens,
-      value: [],
-    };
-  },
-};
-</script>
-<template>
-  <div>
-    {{ value }}
-    <gl-filtered-search v-model="value" :available-tokens="tokens" />
-  </div>
-</template>

package/src/components/base/filtered_search/examples/index.js

@@ -1,38 +0,0 @@
-import FilteredSearchDefaultExample from './filtered_search.default.example.vue';
-import FilteredSearchFriendlyExample from './filtered_search.friendly.example.vue';
-import FilteredSearchHistoryExample from './filtered_search.history.example.vue';
-import FilteredSearchMultiSelectExample from './filtered_search.multi_select.example.vue';
-import FilteredSearchSingleUniqueExample from './filtered_search.single_unique.example.vue';
-
-export default [
-  {
-    name: 'Filtered search',
-    items: [
-      {
-        id: 'filtered-search',
-        name: 'default',
-        component: FilteredSearchDefaultExample,
-      },
-      {
-        id: 'filtered-search-single-unique',
-        name: 'single-unique',
-        component: FilteredSearchSingleUniqueExample,
-      },
-      {
-        id: 'filtered-search-history',
-        name: 'with-history',
-        component: FilteredSearchHistoryExample,
-      },
-      {
-        id: 'filtered-search-friendly-text',
-        name: 'with-friendly-text',
-        component: FilteredSearchFriendlyExample,
-      },
-      {
-        id: 'filtered-search-multi-select',
-        name: 'with-multi-select',
-        component: FilteredSearchMultiSelectExample,
-      },
-    ],
-  },
-];