@gitlab/ui 92.2.0 → 92.3.0

package/src/vendor/bootstrap-vue/src/components/pagination/README.md

@@ -1,430 +0,0 @@
-# Pagination
-
-> Quick first, previous, next, last, and page buttons for pagination control of another component
-> (such as `<b-table>` or lists).
-
-## Overview
-
-`<b-pagination>` is a custom input component that provides a current page number input control. The
-value should be bound via `v-model` in your app. Page numbers are indexed from 1. The number of
-pages is computed from the provided prop values for `total-rows` and `per-page`.
-
-For pagination that changes to a new URL, use the
-[`<b-pagination-nav>`](/docs/components/pagination-nav) component instead.
-
-**Example Usage with `<b-table>`:**
-
-```html
-<template>
-  <div class="overflow-auto">
-    <b-pagination
-      v-model="currentPage"
-      :total-rows="rows"
-      :per-page="perPage"
-      aria-controls="my-table"
-    ></b-pagination>
-
-    <p class="mt-3">Current Page: {{ currentPage }}</p>
-
-    <b-table
-      id="my-table"
-      :items="items"
-      :per-page="perPage"
-      :current-page="currentPage"
-      small
-    ></b-table>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        perPage: 3,
-        currentPage: 1,
-        items: [
-          { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
-          { id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
-          { id: 3, first_name: 'Barney', last_name: 'Rubble' },
-          { id: 4, first_name: 'Betty', last_name: 'Rubble' },
-          { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
-          { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
-          { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
-          { id: 8, first_name: 'Rockhead', last_name: 'Slate' },
-          { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
-        ]
-      }
-    },
-    computed: {
-      rows() {
-        return this.items.length
-      }
-    }
-  }
-</script>
-
-<!-- b-pagination.vue -->
-```
-
-## Customizing appearance
-
-`<b-pagination>` supports several props/slots that allow you to customize the appearance. All
-`*-text` props are text-only and strip out HTML but you can use their equally named slot
-counterparts for that.
-
-### Limiting the number of displayed buttons
-
-To restrict the number of page buttons (including the ellipsis, but excluding the first, prev, next,
-and last buttons) shown, use the `limit` prop to specify the desired number of page buttons
-(including the ellipsis, if shown). The default `limit` is `5`. The minimum supported value is `3`.
-When `limit` is set to `3`, no ellipsis indicators will be shown for practical purposes.
-
-The `first` and `last` buttons can be optionally hidden by setting the `hide-goto-end-buttons` prop.
-
-The showing of the `ellipsis` can be optionally disabled by setting the `hide-ellipsis` prop.
-
-#### Small screen support
-
-On smaller screens (i.e. mobile), some of the `<b-pagination>` buttons will be hidden to minimize
-the potential of the pagination interface wrapping onto multiple lines:
-
-- The ellipsis indicators will be hidden on screens `xs` and smaller.
-- Page number buttons will be limited to a maximum of 3 visible on `xs` screens and smaller.
-
-This ensures that no more than 3 page number buttons are visible, along with the goto _first_,
-_prev_, _next_, and _last_ buttons.
-
-### Button content
-
-For a full list of all available slots see the [Slots](#comp-ref-b-pagination-slots) section below.
-
-```html
-<template>
-  <div class="overflow-auto">
-    <!-- Use text in props -->
-    <b-pagination
-      v-model="currentPage"
-      :total-rows="rows"
-      :per-page="perPage"
-      first-text="First"
-      prev-text="Prev"
-      next-text="Next"
-      last-text="Last"
-    ></b-pagination>
-
-    <!-- Use emojis in props -->
-    <b-pagination
-      v-model="currentPage"
-      :total-rows="rows"
-      :per-page="perPage"
-      first-text="⏮"
-      prev-text="⏪"
-      next-text="⏩"
-      last-text="⏭"
-      class="mt-4"
-    ></b-pagination>
-
-    <!-- Use HTML and sub-components in slots -->
-    <b-pagination
-      v-model="currentPage"
-      :total-rows="rows"
-      :per-page="perPage"
-      class="mt-4"
-    >
-      <template #first-text><span class="text-success">First</span></template>
-      <template #prev-text><span class="text-danger">Prev</span></template>
-      <template #next-text><span class="text-warning">Next</span></template>
-      <template #last-text><span class="text-info">Last</span></template>
-      <template #ellipsis-text>
-        <b-spinner small type="grow"></b-spinner>
-        <b-spinner small type="grow"></b-spinner>
-        <b-spinner small type="grow"></b-spinner>
-      </template>
-      <template #page="{ page, active }">
-        <b v-if="active">{{ page }}</b>
-        <i v-else>{{ page }}</i>
-      </template>
-    </b-pagination>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        rows: 100,
-        perPage: 10,
-        currentPage: 1
-      }
-    }
-  }
-</script>
-
-<!-- b-pagination-appearance.vue -->
-```
-
-The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `next-text` and
-`last-text` are optionally scoped. The `ellipsis-text` slot is not scoped.
-
-**Scoped variables properties available to the `page` slot:**
-
-| Property   | Type    | Description                                          |
-| ---------- | ------- | ---------------------------------------------------- |
-| `page`     | Number  | Page number (from `1` to `numberOfPages`)            |
-| `index`    | Number  | Page number (indexed from `0` to `numberOfPages -1`) |
-| `active`   | Boolean | If the page is the active page                       |
-| `disabled` | Boolean | If the page button is disabled                       |
-| `content`  | String  | Page number as a string                              |
-
-**Scoped variables properties available to the `first-text`, `prev-text`, `next-text` and
-`last-text` slots:**
-
-| Property   | Type    | Description                                          |
-| ---------- | ------- | ---------------------------------------------------- |
-| `page`     | Number  | Page number (from `1` to `numberOfPages`)            |
-| `index`    | Number  | Page number (indexed from `0` to `numberOfPages -1`) |
-| `disabled` | Boolean | If the page button is disabled                       |
-
-### Goto first/last button type
-
-If you prefer to have buttons with the first and last page number to go to the corresponding page,
-use the `first-number` and `last-number` props.
-
-```html
-<template>
-  <div class="overflow-auto">
-    <div>
-      <h6>Goto first button number</h6>
-      <b-pagination
-        v-model="currentPage"
-        :total-rows="rows"
-        :per-page="perPage"
-        first-number
-      ></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6>Goto last button number</h6>
-      <b-pagination
-        v-model="currentPage"
-        :total-rows="rows"
-        :per-page="perPage"
-        last-number
-      ></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6>Goto first and last button number</h6>
-      <b-pagination
-        v-model="currentPage"
-        :total-rows="rows"
-        :per-page="perPage"
-        first-number
-        last-number
-      ></b-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        rows: 100,
-        perPage: 1,
-        currentPage: 5
-      }
-    }
-  }
-</script>
-
-<!-- b-pagination-goto-first-last-number.vue -->
-```
-
-### Button size
-
-Optionally change from the default button size by setting the `size` prop to either `'sm'` for
-smaller buttons or `'lg'` for larger buttons.
-
-```html
-<template>
-  <div class="overflow-auto">
-    <div>
-      <h6>Small</h6>
-      <b-pagination v-model="currentPage" :total-rows="rows" size="sm"></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6>Default</h6>
-      <b-pagination v-model="currentPage" :total-rows="rows"></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6>Large</h6>
-      <b-pagination v-model="currentPage" :total-rows="rows" size="lg"></b-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        rows: 100,
-        currentPage: 1
-      }
-    }
-  }
-</script>
-
-<!-- b-pagination-size.vue -->
-```
-
-### Pill style
-
-Easily switch to pill style buttons by setting the `pills` prop
-
-```html
-<template>
-  <div class="overflow-auto">
-    <div>
-      <h6>Small Pills</h6>
-      <b-pagination v-model="currentPage" pills :total-rows="rows" size="sm"></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6>Default Pills</h6>
-      <b-pagination v-model="currentPage" pills :total-rows="rows"></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6>Large Pills</h6>
-      <b-pagination v-model="currentPage" pills :total-rows="rows" size="lg"></b-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        rows: 100,
-        currentPage: 1
-      }
-    }
-  }
-</script>
-
-<!-- b-pagination-pills.vue -->
-```
-
-**Note:** Pill styling requires BootstrapVue's custom CSS/SCSS.
-
-### Alignment
-
-By default the pagination component is left aligned. Change the alignment to `center`, `right`
-(`right` is an alias for `end`), or `fill` by setting the prop `align` to the appropriate value.
-
-```html
-<template>
-  <div class="overflow-auto">
-    <div>
-      <h6>Left alignment (default)</h6>
-      <b-pagination v-model="currentPage" :total-rows="rows"></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6 class="text-center">Center alignment</h6>
-      <b-pagination v-model="currentPage" :total-rows="rows" align="center"></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6 class="text-right">Right (end) alignment</h6>
-      <b-pagination v-model="currentPage" :total-rows="rows" align="right"></b-pagination>
-    </div>
-
-    <div class="mt-3">
-      <h6 class="text-center">Fill alignment</h6>
-      <b-pagination v-model="currentPage" :total-rows="rows" align="fill"></b-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        rows: 100,
-        currentPage: 3
-      }
-    }
-  }
-</script>
-
-<!-- b-pagination-alignment.vue -->
-```
-
-## Preventing a page from being selected
-
-You can listen for the `page-click` event, which provides an option to prevent the page from being
-selected. The event is emitted with two arguments:
-
-- `bvEvent`: The `BvEvent` object. Call `bvEvent.preventDefault()` to cancel page selection
-- `page`: Page number to select (starting with `1`)
-
-For accessibility reasons, when using the `page-click` event to prevent a page from being selected,
-you should provide some means of notification to the user as to why the page is not able to be
-selected. It is recommended to use the `disabled` attribute on the `<b-pagination>` component
-instead of using the `page-click` event (as `disabled` is more intuitive for screen reader users).
-
-## Accessibility
-
-The `<b-pagination>` component provides many features to support assistive technology users, such as
-`aria-` attributes and keyboard navigation.
-
-### `aria-controls`
-
-When pagination is controlling another component on the page (such as `<b-table>`), set the
-`aria-controls` prop to the `id` of the element it is controlling. This will help non-sighted users
-know what component is being updated/controlled.
-
-### ARIA labels
-
-`<b-pagination>` provides various `*-label-*` props which are used to set the `aria-label`
-attributes on the various elements within the component, which will help users of assistive
-technology.
-
-| Prop               | `aria-label` content default                            |
-| ------------------ | ------------------------------------------------------- |
-| `label-first-page` | "Goto first page"                                       |
-| `label-prev-page`  | "Goto previous page"                                    |
-| `label-next-page`  | "Goto next page"                                        |
-| `label-last-page`  | "Goto last page"                                        |
-| `label-page`       | "Goto page", appended with the page number              |
-| `aria-label`       | "Pagination", applied to the outer pagination container |
-
-The `label-page` will optionally accept a function to generate the aria-label. The function is
-passed a single argument which is the page number (indexed from 1 to number of pages).
-
-You can remove any label by setting the prop to an empty string (`''`), although this is not
-recommended unless the content of the button textually conveys its purpose.
-
-### Keyboard navigation support
-
-`<b-pagination>` supports keyboard navigation out of the box, and follows the
-[WAI-ARIA roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_roving_tabindex)
-pattern.
-
-- Tabbing into the pagination component will autofocus the current active page button
-- <kbd>Left</kbd> (or <kbd>Up</kbd>) and <kbd>Right</kbd> (or <kbd>Down</kbd>) arrow keys will focus
-  the previous and next buttons, respectively, in the page list
-- <kbd>Enter</kbd> or <kbd>Space</kbd> keys will select (click) the currently focused page button
-- Pressing <kbd>Tab</kbd> will move to the next control or link on the page, while pressing
-  <kbd>Shift</kbd>+<kbd>Tab</kbd> will move to the previous control or link on the page.
-
-## See also
-
-For navigation based pagination, please see the
-[`<b-pagination-nav>`](/docs/components/pagination-nav) component.
-
-<!-- Component reference added automatically from component package.json -->

package/src/vendor/bootstrap-vue/src/components/pagination/_pagination.scss

@@ -1,26 +0,0 @@
-// <pagination> and <pagination-nav> require the helper utility classes
-@import "../../utilities";
-
-$bv-pagination-classes-defined: false !default;
-
-// Make sure to include these style definitions only once
-@if $bv-pagination-classes-defined == false {
-  $bv-pagination-classes-defined: true;
-
-  // Pagination pill style
-  .b-pagination-pills {
-    .page-item {
-      .page-link {
-        border-radius: 50rem !important;
-        margin-left: 0.25rem;
-        line-height: 1;
-      }
-
-      &:first-child {
-        .page-link {
-          margin-left: 0;
-        }
-      }
-    }
-  }
-}

package/src/vendor/bootstrap-vue/src/components/pagination/index.d.ts

@@ -1,11 +0,0 @@
-//
-// Pagination
-//
-import Vue from 'vue'
-import { BvPlugin, BvComponent } from '../../'
-
-// Plugin
-export declare const PaginationPlugin: BvPlugin
-
-// Component: b-pagination
-export declare class BPagination extends BvComponent {}

package/src/vendor/bootstrap-vue/src/components/pagination/index.js

@@ -1,8 +0,0 @@
-import { BPagination } from './pagination'
-import { pluginFactory } from '../../utils/plugins'
-
-const PaginationPlugin = /*#__PURE__*/ pluginFactory({
-  components: { BPagination }
-})
-
-export { PaginationPlugin, BPagination }

package/src/vendor/bootstrap-vue/src/components/pagination/index.scss

@@ -1 +0,0 @@
-@import "pagination";