@gitlab/ui 39.3.0 → 39.4.0

package/src/components/base/form/form_checkbox/form_checkbox.documentation.js

@@ -1,6 +0,0 @@
-import description from './form_checkbox.md';
-
-export default {
-  description,
-  followsDesignSystem: true,
-};

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation.js

@@ -1,5 +0,0 @@
-import * as description from './form_checkbox_tree.md';
-
-export default {
-  description,
-};

package/src/components/base/form/form_combobox/form_combobox.documentation.js

@@ -1,6 +0,0 @@
-import * as description from './form_combobox.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/form/form_group/form_group.documentation.js

@@ -1,5 +0,0 @@
-import description from './form_group.md';
-
-export default {
-  description,
-};

package/src/components/base/form/form_input/form_input.documentation.js

@@ -1,6 +0,0 @@
-import description from './form_input.md';
-
-export default {
-  description,
-  followsDesignSystem: true,
-};

package/src/components/base/form/form_input_group/form_input_group.documentation.js

@@ -1,6 +0,0 @@
-import description from './form_input_group.md';
-
-export default {
-  followsDesignSystem: false,
-  description,
-};

package/src/components/base/form/form_radio/form_radio.documentation.js

@@ -1,6 +0,0 @@
-import description from './form_radio.md';
-
-export default {
-  description,
-  followsDesignSystem: true,
-};

package/src/components/base/form/form_radio_group/form_radio_group.documentation.js

@@ -1,6 +0,0 @@
-import description from './form_radio_group.md';
-
-export default {
-  description,
-  followsDesignSystem: true,
-};

package/src/components/base/form/form_select/form_select.documentation.js

@@ -1,6 +0,0 @@
-import description from './form_select.md';
-
-export default {
-  description,
-  followDesignSystem: true,
-};

package/src/components/base/form/form_text/form_text.documentation.js

@@ -1,7 +0,0 @@
-import * as description from './form_text.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-form-text',
-  propsInfo: {},
-};

package/src/components/base/form/form_textarea/form_textarea.documentation.js

@@ -1,5 +0,0 @@
-import description from './form_textarea.md';
-
-export default {
-  description,
-};

package/src/components/base/form/input_group_text/input_group_text.documentation.js

@@ -1,5 +0,0 @@
-import * as description from './input_group_text.md';
-
-export default {
-  description,
-};

package/src/components/base/icon/icon.documentation.js

@@ -1,6 +0,0 @@
-import description from './icon.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

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

@@ -1,57 +0,0 @@
-import InfiniteScrollAllItemsExample from './infinite_scroll.all_items.example.vue';
-import InfiniteScrollBasicExample from './infinite_scroll.basic.example.vue';
-import InfiniteScrollWithFiniteTotalItemsExample from './infinite_scroll.finite_total_items.example.vue';
-import InfiniteScrollWithLargeNumberOfFetchedItemsExample from './infinite_scroll.large_fetched_items.example.vue';
-import InfiniteScrollReverseExample from './infinite_scroll.reverse.example.vue';
-import InfiniteScrollWithSmallNumberOfFetchedItemsExample from './infinite_scroll.small_fetched_items.example.vue';
-import InfiniteScrollTwoWayExample from './infinite_scroll.two_way.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'infinite-scroll-basic',
-        name: 'Basic',
-        description: 'Basic Infinite Scroll',
-        component: InfiniteScrollBasicExample,
-      },
-      {
-        id: 'infinite-scroll-with-finite-total-items',
-        name: 'Fixed items',
-        description: 'With finite total items',
-        component: InfiniteScrollWithFiniteTotalItemsExample,
-      },
-      {
-        id: 'infinite-scroll-small-fetched-items',
-        name: 'With a small number of fetched items',
-        description: 'Infinite Scroll with small number of fetched items',
-        component: InfiniteScrollWithSmallNumberOfFetchedItemsExample,
-      },
-      {
-        id: 'infinite-scroll-large-fetched-items',
-        name: 'With a large number of fetched items',
-        description: 'Infinite Scroll with large number of fetched items',
-        component: InfiniteScrollWithLargeNumberOfFetchedItemsExample,
-      },
-      {
-        id: 'infinite-scroll-all-items',
-        name: 'Showing all items',
-        description: 'Infinite Scroll with all items',
-        component: InfiniteScrollAllItemsExample,
-      },
-      {
-        id: 'infinite-scroll-reverse',
-        name: 'Reversed',
-        description: 'Infinite Scroll with items added at the top',
-        component: InfiniteScrollReverseExample,
-      },
-      {
-        id: 'infinite-scroll-two-way',
-        name: 'Two way Infinite Scroll',
-        description: 'Infinite Scroll with items added in two directions',
-        component: InfiniteScrollTwoWayExample,
-      },
-    ],
-  },
-];

package/src/components/base/infinite_scroll/examples/infinite_scroll.all_items.example.vue

@@ -1,25 +0,0 @@
-<script>
-const FETCHED_ITEMS = 5;
-
-export default {
-  data() {
-    return {
-      fetchedItems: FETCHED_ITEMS,
-    };
-  },
-};
-</script>
-<template>
-  <gl-infinite-scroll :fetched-items="fetchedItems">
-    <template #items>
-      <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
-      </ul>
-    </template>
-    <template #default>
-      <div class="gl-mt-3">
-        <span>All items loaded</span>
-      </div>
-    </template>
-  </gl-infinite-scroll>
-</template>

package/src/components/base/infinite_scroll/examples/infinite_scroll.basic.example.vue

@@ -1,43 +0,0 @@
-<script>
-const ITEMS_BATCH_SIZE = 20;
-
-export default {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
-      loadTimer: null,
-    };
-  },
-  methods: {
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
-      }, 500);
-    },
-  },
-};
-</script>
-<template>
-  <gl-infinite-scroll
-    :max-list-height="285"
-    :fetched-items="fetchedItems"
-    @bottomReached="bottomReached"
-  >
-    <template #items>
-      <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
-      </ul>
-    </template>
-
-    <template #default>
-      <div class="gl-mt-3">
-        <gl-loading-icon v-if="isLoading" />
-        <span v-else>{{ fetchedItems }} items loaded</span>
-      </div>
-    </template>
-  </gl-infinite-scroll>
-</template>

package/src/components/base/infinite_scroll/examples/infinite_scroll.finite_total_items.example.vue

@@ -1,44 +0,0 @@
-<script>
-const ITEMS_BATCH_SIZE = 60;
-const TOTAL_ITEMS = 100;
-
-export default {
-  data() {
-    return {
-      totalItems: TOTAL_ITEMS,
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
-      loadTimer: null,
-    };
-  },
-  methods: {
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      if (this.fetchedItems < TOTAL_ITEMS) {
-        this.isLoading = true;
-        this.loadTimer = setTimeout(() => {
-          this.fetchedItems += ITEMS_BATCH_SIZE;
-          if (this.fetchedItems > TOTAL_ITEMS) {
-            this.fetchedItems = TOTAL_ITEMS;
-          }
-          this.isLoading = false;
-        }, 500);
-      }
-    },
-  },
-};
-</script>
-<template>
-  <gl-infinite-scroll
-    :max-list-height="285"
-    :fetched-items="fetchedItems"
-    :total-items="totalItems"
-    @bottomReached="bottomReached"
-  >
-    <template #items>
-      <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
-      </ul>
-    </template>
-  </gl-infinite-scroll>
-</template>

package/src/components/base/infinite_scroll/examples/infinite_scroll.large_fetched_items.example.vue

@@ -1,43 +0,0 @@
-<script>
-const ITEMS_BATCH_SIZE = 1200;
-
-export default {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
-      loadTimer: null,
-    };
-  },
-  methods: {
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
-      }, 500);
-    },
-  },
-};
-</script>
-<template>
-  <gl-infinite-scroll
-    :max-list-height="285"
-    :fetched-items="fetchedItems"
-    @bottomReached="bottomReached"
-  >
-    <template #items>
-      <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
-      </ul>
-    </template>
-
-    <template #default>
-      <div class="gl-mt-3">
-        <gl-loading-icon v-if="isLoading" />
-        <span v-else>Showing {{ fetchedItems }} of 1000+ items</span>
-      </div>
-    </template>
-  </gl-infinite-scroll>
-</template>

package/src/components/base/infinite_scroll/examples/infinite_scroll.reverse.example.vue

@@ -1,46 +0,0 @@
-<script>
-const ITEMS_BATCH_SIZE = 5;
-const INIT_ITEMS_COUNT = 10;
-
-export default {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: INIT_ITEMS_COUNT,
-      loadTimer: null,
-    };
-  },
-  methods: {
-    topReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
-      }, 2000);
-    },
-  },
-};
-</script>
-<template>
-  <gl-infinite-scroll :max-list-height="285" :fetched-items="fetchedItems" @topReached="topReached">
-    <template #header>
-      <div class="gl-h-6">
-        <gl-loading-icon v-if="isLoading" />
-      </div>
-    </template>
-    <template #items>
-      <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">
-          Item #{{ Math.abs(item - fetchedItems) + 1 }}
-        </li>
-      </ul>
-    </template>
-
-    <template #default>
-      <div class="gl-mt-3">
-        <span>{{ fetchedItems }} items loaded, scroll up for more</span>
-      </div>
-    </template>
-  </gl-infinite-scroll>
-</template>

package/src/components/base/infinite_scroll/examples/infinite_scroll.small_fetched_items.example.vue

@@ -1,43 +0,0 @@
-<script>
-const ITEMS_BATCH_SIZE = 60;
-
-export default {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
-      loadTimer: null,
-    };
-  },
-  methods: {
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
-      }, 500);
-    },
-  },
-};
-</script>
-<template>
-  <gl-infinite-scroll
-    :max-list-height="285"
-    :fetched-items="fetchedItems"
-    @bottomReached="bottomReached"
-  >
-    <template #items>
-      <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
-      </ul>
-    </template>
-
-    <template #default>
-      <div class="gl-mt-3">
-        <gl-loading-icon v-if="isLoading" />
-        <span v-else>Showing {{ fetchedItems }} of 1000+ items</span>
-      </div>
-    </template>
-  </gl-infinite-scroll>
-</template>

package/src/components/base/infinite_scroll/examples/infinite_scroll.two_way.example.vue

@@ -1,75 +0,0 @@
-<script>
-const ITEMS_BATCH_SIZE = 10;
-const INIT_ITEMS_COUNT = 20;
-
-const colors = ['Violet', 'Indigo', 'Blue', 'Green', 'Yellow', 'Orange', 'Red'];
-const planets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
-
-let key = 0;
-const createItem = () => {
-  key += 1;
-  return {
-    key,
-    content: `${colors[key % colors.length]} ${planets[key % planets.length]}`,
-  };
-};
-
-const createArray = (num) => {
-  const res = [];
-  for (let i = 0; i < num; i += 1) {
-    res.push(createItem());
-  }
-  return res;
-};
-
-export default {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: createArray(INIT_ITEMS_COUNT),
-      loadTimer: null,
-    };
-  },
-  methods: {
-    topReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems.unshift(...createArray(ITEMS_BATCH_SIZE));
-        this.isLoading = false;
-      }, 1000);
-    },
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems.push(...createArray(ITEMS_BATCH_SIZE));
-        this.isLoading = false;
-      }, 1000);
-    },
-  },
-};
-</script>
-<template>
-  <gl-infinite-scroll
-    :max-list-height="285"
-    :fetched-items="fetchedItems.length"
-    @topReached="topReached"
-    @bottomReached="bottomReached"
-  >
-    <template #items>
-      <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item.key" class="list-group-item">
-          {{ item.content }}
-        </li>
-      </ul>
-    </template>
-
-    <template #default>
-      <div class="gl-mt-3">
-        <gl-loading-icon v-if="isLoading" />
-        <span v-else>{{ fetchedItems.length }} items loaded, scroll up or down for more</span>
-      </div>
-    </template>
-  </gl-infinite-scroll>
-</template>

package/src/components/base/infinite_scroll/infinite_scroll.documentation.js

@@ -1,6 +0,0 @@
-import description from './infinite_scroll.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/keyset_pagination/keyset_pagination.documentation.js

@@ -1,6 +0,0 @@
-import * as description from './keyset_pagination.md';
-
-export default {
-  description,
-  followsDesignSystem: true,
-};

package/src/components/base/label/label.documentation.js

@@ -1,6 +0,0 @@
-import description from './label.vue';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/link/link.documentation.js

@@ -1,5 +0,0 @@
-import description from './link.md';
-
-export default {
-  description,
-};

package/src/components/base/loading_icon/loading_icon.documentation.js

@@ -1,6 +0,0 @@
-import description from './loading_icon.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/markdown/markdown.documentation.js

@@ -1,5 +0,0 @@
-import * as description from './markdown.md';
-
-export default {
-  description,
-};

package/src/components/base/modal/modal.documentation.js

@@ -1,6 +0,0 @@
-import description from './modal.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/nav/nav.documentation.js

@@ -1,5 +0,0 @@
-import * as description from './nav.md';
-
-export default {
-  description,
-};

package/src/components/base/navbar/navbar.documentation.js

@@ -1,5 +0,0 @@
-import * as description from './navbar.md';
-
-export default {
-  description,
-};

package/src/components/base/paginated_list/paginated_list.documentation.js

@@ -1,5 +0,0 @@
-import description from './paginated_list.md';
-
-export default {
-  description,
-};

package/src/components/base/pagination/pagination.documentation.js

@@ -1,6 +0,0 @@
-import description from './pagination.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/path/path.documentation.js

@@ -1,6 +0,0 @@
-import description from './path.md';
-
-export default {
-  description,
-  followsDesignSystem: true,
-};

package/src/components/base/popover/popover.documentation.js

@@ -1,3 +0,0 @@
-export default {
-  followsDesignSystem: true,
-};

package/src/components/base/search_box_by_click/search_box_by_click.documentation.js

@@ -1,6 +0,0 @@
-import description from './search_box_by_click.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/search_box_by_type/search_box_by_type.documentation.js

@@ -1,6 +0,0 @@
-import description from './search_box_by_type.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/segmented_control/segmented_control.documentation.js

@@ -1,6 +0,0 @@
-import description from './segmented_control.md';
-
-export default {
-  followsDesignSystem: false,
-  description,
-};

package/src/components/base/skeleton_loader/skeleton_loader.documentation.js

@@ -1,6 +0,0 @@
-import * as description from './skeleton_loader.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};

package/src/components/base/skeleton_loading/skeleton_loading.documentation.js

@@ -1,5 +0,0 @@
-import description from './skeleton_loading.md';
-
-export default {
-  description,
-};

package/src/components/base/sorting/sorting.documentation.js

@@ -1,5 +0,0 @@
-import description from './sorting.md';
-
-export default {
-  description,
-};

package/src/components/base/sorting/sorting_item.documentation.js

@@ -1,6 +0,0 @@
-import description from './sorting_item.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-dropdown-item',
-};

package/src/components/base/table/table.documentation.js

@@ -1,6 +0,0 @@
-import description from './table.md';
-
-export default {
-  followsDesignSystem: false,
-  description,
-};

package/src/components/base/table_lite/table_lite.documentation.js

@@ -1,6 +0,0 @@
-import * as description from './table_lite.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-table-lite',
-};

package/src/components/base/tabs/tabs/tabs.documentation.js

@@ -1,6 +0,0 @@
-import description from './tabs.md';
-
-export default {
-  description,
-  followsDesignSystem: true,
-};

package/src/components/base/toast/toast.documentation.js

@@ -1,6 +0,0 @@
-import description from './toast.md';
-
-export default {
-  followsDesignSystem: true,
-  description,
-};