@gitlab/ui 32.43.3 → 32.44.0

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

@@ -1,43 +0,0 @@
-import PaginationBasicExample from './pagination.basic.example.vue';
-import PaginationCompactExample from './pagination.compact.example.vue';
-import PaginationDoubleTruncation from './pagination.double_truncation.example.vue';
-import PaginationEventExample from './pagination.event.example.vue';
-import PaginationLinksExample from './pagination.links.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'pagination-basic',
-        name: 'Basic',
-        description: 'Basic Pagination',
-        component: PaginationBasicExample,
-      },
-      {
-        id: 'pagination-double-truncation',
-        name: 'Double truncation',
-        description: 'Double truncation',
-        component: PaginationDoubleTruncation,
-      },
-      {
-        id: 'pagination-compact',
-        name: 'Compact',
-        description: 'Compact Pagination',
-        component: PaginationCompactExample,
-      },
-      {
-        id: 'pagination-links',
-        name: 'Link based pagination',
-        description: 'Link based pagination',
-        component: PaginationLinksExample,
-      },
-      {
-        id: 'pagination-event',
-        name: 'Page change event',
-        description: 'Page change event',
-        component: PaginationEventExample,
-      },
-    ],
-  },
-];

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

@@ -1,17 +0,0 @@
-<script>
-export default {
-  data: () => ({
-    page: 2,
-  }),
-};
-</script>
-
-<template>
-  <gl-pagination
-    v-model="page"
-    :per-page="10"
-    :total-items="100"
-    prev-text="Prev"
-    next-text="Next"
-  />
-</template>

package/src/components/base/pagination/examples/pagination.compact.example.vue

@@ -1,33 +0,0 @@
-<script>
-const LAST_PAGE = 3;
-
-export default {
-  lastPage: LAST_PAGE,
-  data: () => ({
-    page: 1,
-  }),
-  computed: {
-    prevPage() {
-      return Math.max(this.page - 1, 0);
-    },
-    nextPage() {
-      const nextPage = this.page + 1;
-      return nextPage > LAST_PAGE ? 0 : nextPage;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="text-center">
-    <gl-pagination
-      v-model="page"
-      :prev-page="prevPage"
-      :next-page="nextPage"
-      prev-text="Prev"
-      next-text="Next"
-      align="center"
-    />
-    Page {{ page }} of {{ $options.lastPage }}
-  </div>
-</template>

package/src/components/base/pagination/examples/pagination.double_truncation.example.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  data: () => ({
-    page: 15,
-  }),
-};
-</script>
-
-<template>
-  <gl-pagination v-model="page" :per-page="10" :total-items="300" />
-</template>

package/src/components/base/pagination/examples/pagination.event.example.vue

@@ -1,26 +0,0 @@
-<script>
-export default {
-  data: () => ({
-    page: 2,
-  }),
-  methods: {
-    logEvent(page) {
-      console.log(`page changed to ${page}`); // eslint-disable-line
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <p>Change events are logged to the console</p>
-    <gl-pagination
-      v-model="page"
-      :per-page="10"
-      :total-items="100"
-      prev-text="Prev"
-      next-text="Next"
-      @input="logEvent"
-    />
-  </div>
-</template>

package/src/components/base/pagination/examples/pagination.links.example.vue

@@ -1,18 +0,0 @@
-<script>
-export default {
-  data: () => ({
-    page: 2,
-  }),
-};
-</script>
-
-<template>
-  <gl-pagination
-    v-model="page"
-    :per-page="10"
-    :total-items="100"
-    :link-gen="(page) => `#page${page}`"
-    prev-text="Prev"
-    next-text="Next"
-  />
-</template>

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

@@ -1,22 +0,0 @@
-import SegmentedControlBasicExample from './segmented_control.basic.example.vue';
-import SegmentedControlWhitespaceExample from './segmented_control.whitespace.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'segmented-control-basic',
-        name: 'Basic',
-        description: 'Basic Segmented Control',
-        component: SegmentedControlBasicExample,
-      },
-      {
-        id: 'segmented-control-whitespace',
-        name: 'Whitespace',
-        description: 'Whitespace Segmented control',
-        component: SegmentedControlWhitespaceExample,
-      },
-    ],
-  },
-];

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

@@ -1,19 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      options: [
-        { value: 1, text: 'First' },
-        { value: 2, text: 'Second', disabled: true },
-        { value: 3, text: 'Third' },
-        { value: 4, text: 'Fourth' },
-        { value: 5, text: 'Fifth' },
-      ],
-      selected: 1,
-    };
-  },
-};
-</script>
-<template>
-  <gl-segmented-control v-model="selected" :options="options" />
-</template>

package/src/components/base/segmented_control/examples/segmented_control.whitespace.example.vue

@@ -1,18 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      options: [
-        { value: true, text: 'Show' },
-        { value: false, text: 'Hide' },
-      ],
-      selected: true,
-    };
-  },
-};
-</script>
-<template>
-  <gl-form-group id="group-id" label="Whitespace" label-size="sm" label-for="select1">
-    <gl-segmented-control id="select1" v-model="selected" :options="options" />
-  </gl-form-group>
-</template>