@gitlab/ui 38.0.1 → 38.2.1

package/dist/components/base/filtered_search/examples/filtered_search.friendly.example.js

@@ -1,423 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-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 fakeMilestones = [{
-  id: 1,
-  title: '12.7',
-  name: '%12.7'
-}, {
-  id: 2,
-  title: '12.8',
-  name: '%12.8'
-}, {
-  id: 3,
-  title: '12.9',
-  name: '%12.9'
-}, {
-  id: 4,
-  title: '12.10',
-  name: '%12.10'
-}, {
-  id: 5,
-  title: 'Backlog',
-  name: 'Backlog'
-}];
-const fakeLabels = [{
-  id: 1,
-  title: 'Bug',
-  color: '#D9534F',
-  text_color: '#FFFFFF'
-}, {
-  id: 2,
-  title: 'Enhancement',
-  color: '#F0AD4E',
-  text_color: '#FFFFFF'
-}, {
-  id: 3,
-  title: 'Backlog',
-  color: '#cccccc',
-  text_color: '#333333'
-}, {
-  id: 4,
-  title: 'Feature',
-  color: '#A8D695',
-  text_color: '#333333'
-}, {
-  id: 5,
-  title: 'Documentation',
-  color: '#5CB85C',
-  text_color: '#FFFFFF'
-}];
-const UserToken = {
-  props: ['value', 'active'],
-  inheritAttrs: false,
-
-  data() {
-    return {
-      loadingView: false,
-      loadingSuggestions: false,
-      users: [],
-      activeUser: null
-    };
-  },
-
-  methods: {
-    loadView() {
-      this.loadingView = true;
-      setTimeout(() => {
-        this.loadingView = false;
-        this.activeUser = fakeUsers.find(u => u.username === this.value.data);
-      }, 1000);
-    },
-
-    loadSuggestions() {
-      this.loadingSuggestions = true;
-      setTimeout(() => {
-        this.loadingSuggestions = false;
-        this.users = fakeUsers;
-      }, 2000);
-    }
-
-  },
-  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"
-    >
-    <template #view="{ inputValue }">
-      <gl-loading-icon size="sm" v-if="loadingView" />
-      <gl-avatar :size="16" :entity-name="inputValue" shape="circle" v-else />
-      {{ activeUser ? activeUser.name : inputValue }}
-    </template>
-    <template #suggestions>
-      <template v-if="loadingSuggestions">
-        <gl-loading-icon />
-      </template>
-      <template v-else>
-        <gl-filtered-search-suggestion :key="user.id" v-for="user in users" :value="user.username">
-          <div class="gl-display-flex">
-            <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>
-    </template>
-    </gl-filtered-search-token>
-  `
-};
-const MilestoneToken = {
-  props: ['value', 'active'],
-  inheritAttrs: false,
-
-  data() {
-    return {
-      loadingView: false,
-      loadingSuggestions: false,
-      milestones: []
-    };
-  },
-
-  methods: {
-    loadSuggestions() {
-      this.loadingSuggestions = true;
-      setTimeout(() => {
-        this.loadingSuggestions = false;
-        this.milestones = fakeMilestones;
-      }, 2000);
-    }
-
-  },
-  watch: {
-    // eslint-disable-next-line func-names
-    'value.data': function () {
-      if (this.active) {
-        this.loadSuggestions();
-      }
-    },
-    active: {
-      immediate: true,
-
-      handler(newValue) {
-        if (newValue) {
-          this.loadSuggestions();
-        }
-      }
-
-    }
-  },
-  template: `
-    <gl-filtered-search-token
-      v-bind="{ ...this.$props, ...this.$attrs }"
-      v-on="$listeners"
-    >
-    <template #suggestions>
-      <gl-filtered-search-suggestion value="None">None</gl-filtered-search-suggestion>
-      <gl-filtered-search-suggestion value="Any">Any</gl-filtered-search-suggestion>
-      <gl-filtered-search-suggestion value="Upcoming">Upcoming</gl-filtered-search-suggestion>
-      <gl-filtered-search-suggestion value="Started">Started</gl-filtered-search-suggestion>
-      <gl-dropdown-divider v-if="loadingSuggestions || milestones.length" />
-      <template v-if="loadingSuggestions">
-        <gl-loading-icon />
-      </template>
-      <template v-else>
-        <gl-filtered-search-suggestion :key="milestone.id" v-for="milestone in milestones"
-                                       :value="milestone.name">
-          {{ milestone.title }}
-        </gl-filtered-search-suggestion>
-      </template>
-    </template>
-    </gl-filtered-search-token>
-  `
-};
-const LabelToken = {
-  props: ['value', 'active'],
-  inheritAttrs: false,
-
-  data() {
-    return {
-      loadingView: false,
-      loadingSuggestions: false,
-      labels: [],
-      activeLabel: null
-    };
-  },
-
-  computed: {
-    currentValue() {
-      return this.value.data.toLowerCase();
-    },
-
-    containerStyle() {
-      if (this.activeLabel) {
-        const {
-          color,
-          text_color
-        } = this.activeLabel;
-        return {
-          backgroundColor: color,
-          color: text_color
-        };
-      }
-
-      return {};
-    }
-
-  },
-  methods: {
-    loadView() {
-      this.loadingView = true;
-      setTimeout(() => {
-        this.loadingView = false;
-        this.activeLabel = fakeLabels.find(l => l.title === this.value.data);
-      }, 100);
-    },
-
-    loadSuggestions() {
-      this.loadingSuggestions = true;
-      setTimeout(() => {
-        this.loadingSuggestions = false;
-        this.labels = fakeLabels;
-      }, 2000);
-    }
-
-  },
-  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"
-    >
-    <template #view-token="{ inputValue, cssClasses, listeners }">
-      <gl-token variant="search-value" :class="cssClasses" :style="containerStyle" v-on="listeners">
-        {{ activeLabel ? activeLabel.title : inputValue }}
-      </gl-token>
-    </template>
-    <template #suggestions>
-      <gl-filtered-search-suggestion value="None">None</gl-filtered-search-suggestion>
-      <gl-filtered-search-suggestion value="Any">Any</gl-filtered-search-suggestion>
-      <gl-dropdown-divider v-if="loadingSuggestions || labels.length" />
-      <template v-if="loadingSuggestions">
-        <gl-loading-icon />
-      </template>
-      <template v-else>
-        <gl-filtered-search-suggestion :key="label.id" v-for="label in labels" :value="label.title">
-          <div class="d-flex">
-            <span
-              :style="{ backgroundColor: label.color, height: '16px', width: '16px' }"
-              class="d-inline-block mr-2"
-            ></span>
-            {{ label.title }}
-          </div>
-        </gl-filtered-search-suggestion>
-      </template>
-    </template>
-    </gl-filtered-search-token>
-  `
-};
-const tokens = [{
-  type: 'author',
-  icon: 'pencil',
-  title: 'Author',
-  dataType: 'user',
-  unique: true,
-  token: UserToken
-}, {
-  type: 'user',
-  icon: 'user',
-  title: 'Assignee',
-  dataType: 'user',
-  token: UserToken
-}, {
-  type: 'milestone',
-  icon: 'clock',
-  title: 'Milestone',
-  unique: true,
-  token: MilestoneToken
-}, {
-  type: 'label',
-  icon: 'labels',
-  title: 'Label',
-  token: LabelToken
-}, {
-  type: 'weight',
-  icon: 'weight',
-  title: 'Weight',
-  unique: true,
-  token: 'gl-filtered-search-token'
-}, {
-  type: 'confidential',
-  icon: 'eye-slash',
-  title: 'Confidential',
-  unique: true,
-  token: 'gl-filtered-search-token',
-  options: [{
-    icon: 'eye-slash',
-    value: 'Yes',
-    title: 'Yes'
-  }, {
-    icon: 'eye',
-    value: 'No',
-    title: 'No'
-  }]
-}];
-var script = {
-  data() {
-    return {
-      tokens,
-      value: [{
-        type: 'author',
-        value: {
-          data: 'beta',
-          operator: '='
-        }
-      }, {
-        type: 'label',
-        value: {
-          data: 'Bug',
-          operator: '='
-        }
-      }, 'raw text']
-    };
-  }
-
-};
-
-/* 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('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens,"show-friendly-text":true},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
-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/base/filtered_search/examples/filtered_search.history.example.js

@@ -1,91 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const testTokens = [{
-  type: 'demotoken',
-  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
-}];
-var script = {
-  data() {
-    return {
-      tokens: testTokens,
-      value: [],
-      historyItems: [[{
-        type: 'demotoken',
-        value: {
-          operator: '=',
-          data: 1
-        }
-      }, 'item 1'], ['item 2', {
-        type: 'demotoken',
-        value: {
-          operator: '=',
-          data: 2
-        }
-      }]]
-    };
-  },
-
-  methods: {
-    isString(val) {
-      return typeof val === 'string';
-    }
-
-  }
-};
-
-/* 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._v("\n  "+_vm._s(_vm.value)+"\n  "),_c('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens,"history-items":_vm.historyItems},scopedSlots:_vm._u([{key:"history-item",fn:function(ref){
-var historyItem = ref.historyItem;
-return [_vm._l((historyItem),function(token,idx){return [(_vm.isString(token))?_c('span',{key:idx,staticClass:"gl-px-1"},[_vm._v(_vm._s(token))]):_c('span',{key:idx,staticClass:"gl-px-1"},[_c('strong',[_vm._v(_vm._s(token.type))]),_vm._v(" "+_vm._s(token.value.operator)+"\n          "),_c('strong',[_vm._v(_vm._s(token.value.data))])])]})]}}]),model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],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__;

package/dist/components/base/filtered_search/examples/filtered_search.multi_select.example.js

@@ -1,196 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-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
-}];
-var script = {
-  data() {
-    return {
-      tokens,
-      value: [{
-        type: 'assignee',
-        value: {
-          data: 'alpha,beta',
-          operator: '='
-        }
-      }]
-    };
-  }
-
-};
-
-/* 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('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens,"show-friendly-text":true},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
-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__;