npm - @gitlab/ui - Versions diffs - 39.2.0 → 39.3.1 - Mend

@gitlab/ui 39.2.0 → 39.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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>