@gitlab/ui 38.0.0 → 38.2.0

package/dist/components/base/dropdown/examples/dropdown.with_right_align.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Right-aligned dropdown","right":""}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],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_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.with_search.example.js

@@ -1,67 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      searchTerm: '',
-      tagNames: []
-    };
-  },
-
-  computed: {
-    filteredTagNames() {
-      return this.tagNames.filter(tagName => tagName.includes(this.searchTerm.toLowerCase()));
-    },
-
-    filteredTagNamesLength() {
-      return this.filteredTagNames.length === 0;
-    }
-
-  },
-
-  mounted() {
-    const tagNames = new Set();
-    const elements = document.querySelectorAll('*');
-    elements.forEach(element => tagNames.add(element.tagName.toLowerCase()));
-    this.tagNames = Array.from(tagNames).sort();
-  }
-
-};
-
-/* 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-dropdown',{attrs:{"text":"Select HTML tag","header-text":"Header"},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('gl-search-box-by-type',{model:{value:(_vm.searchTerm),callback:function ($$v) {_vm.searchTerm=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"searchTerm"}})]},proxy:true}])},[_vm._v(" "),_vm._l((_vm.filteredTagNames),function(tagName){return _c('gl-dropdown-item',{key:tagName},[_vm._v("\n    "+_vm._s(tagName)+"\n  ")])}),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.filteredTagNamesLength),expression:"filteredTagNamesLength"}],staticClass:"text-secondary p-2"},[_vm._v("Nothing found…")])],2)};
-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/dropdown/examples/dropdown.with_section_headers.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-section-header',[_vm._v("First group")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-section-header',[_vm._v("Second group")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],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_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/index.js

@@ -1,85 +0,0 @@
-import DropdownDefaultExample from './dropdown.default.example';
-import DropdownLinksExample from './dropdown.links.example';
-import DropdownWithAvatarAndSecondaryText from './dropdown.with_avatar_and_secondary_text.example';
-import DropdownWithCheckedItemsExample from './dropdown.with_checked_items.example';
-import DropdownClearAllExample from './dropdown.with_clear_all.example';
-import DropdownWithDividerExample from './dropdown.with_divider.example';
-import DropdownWithFormExample from './dropdown.with_form.example';
-import DropdownWithHeaderExample from './dropdown.with_header.example';
-import DropdownWithHighlightedItemsExample from './dropdown.with_highlighted_items.example';
-import DropdownWithIcons from './dropdown.with_icons.example';
-import DropdownWithRightAlignExample from './dropdown.with_right_align.example';
-import DropdownWithSearchExample from './dropdown.with_search.example';
-import DropdownWithSectionHeadersExample from './dropdown.with_section_headers.example';
-
-var index = [{
-  name: 'Dropdown',
-  items: [{
-    id: 'new-dropdown-default',
-    name: 'Default',
-    description: 'Default Dropdown',
-    component: DropdownDefaultExample
-  }, {
-    id: 'new-dropdown-links',
-    name: 'With Links',
-    description: 'Dropdown with links as items',
-    component: DropdownLinksExample
-  }, {
-    id: 'new-dropdown-with-divider',
-    name: 'With Divider',
-    description: 'Dropdown with divider',
-    component: DropdownWithDividerExample
-  }, {
-    id: 'new-dropdown-with-header',
-    name: 'With Header',
-    description: 'Dropdown with section header',
-    component: DropdownWithHeaderExample
-  }, {
-    id: 'new-dropdown-with-highlighted-items',
-    name: 'With Highlighted items',
-    description: 'Dropdown with highlighted items',
-    component: DropdownWithHighlightedItemsExample
-  }, {
-    id: 'new-dropdown-with-section-headers',
-    name: 'With Section Headers',
-    description: 'Dropdown with section headers',
-    component: DropdownWithSectionHeadersExample
-  }, {
-    id: 'new-dropdown-with-right-align',
-    name: 'With Right Alignment',
-    description: 'Dropdown aligned to the right side',
-    component: DropdownWithRightAlignExample
-  }, {
-    id: 'new-dropdown-with-search',
-    name: 'With Search',
-    description: 'Dropdown with search field',
-    component: DropdownWithSearchExample
-  }, {
-    id: 'new-dropdown-with-checked-items',
-    name: 'With Checked Items',
-    description: 'Dropdown with checked items',
-    component: DropdownWithCheckedItemsExample
-  }, {
-    id: 'new-dropdown-with-avatar-and-secondary-text',
-    name: 'With Avatar and Secondary Text',
-    description: 'Dropdown with avatar and secondary text',
-    component: DropdownWithAvatarAndSecondaryText
-  }, {
-    id: 'new-dropdown-with-icons',
-    name: 'With Icons',
-    description: 'Dropdown with icons',
-    component: DropdownWithIcons
-  }, {
-    id: 'new-dropdown-with-form',
-    name: 'With Form',
-    description: 'Dropdown with form',
-    component: DropdownWithFormExample
-  }, {
-    id: 'new-dropdown-with-clear-all',
-    name: 'With Clear all',
-    description: 'Dropdown with clear all',
-    component: DropdownClearAllExample
-  }]
-}];
-
-export default index;

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

@@ -1,422 +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" class="gl-mr-2" />
-        <gl-avatar :size="16" :entity-name="inputValue" shape="circle" class="gl-mr-2" 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: true,
-    title: 'Yes'
-  }, {
-    icon: 'eye',
-    value: false,
-    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},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__;