@gitlab/ui 96.3.0 → 97.1.0
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.
- package/CHANGELOG.md +32 -0
- package/dist/components/base/alert/alert.js +1 -1
- package/dist/components/base/avatar/avatar.js +4 -4
- package/dist/components/base/datepicker/datepicker.js +1 -1
- package/dist/components/base/drawer/drawer.js +1 -1
- package/dist/components/base/form/form_input/form_input.js +3 -3
- package/dist/components/base/form/form_select/form_select.js +3 -3
- package/dist/components/base/progress_bar/progress_bar.js +47 -5
- package/dist/components/base/toast/toast.js +1 -1
- package/dist/components/base/toggle/toggle.js +1 -1
- package/dist/components/base/token/token.js +1 -1
- package/dist/components/base/token_selector/token_selector.js +17 -7
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +2 -1
- package/dist/tokens/build/js/tokens.js +2 -1
- package/dist/tokens/css/tokens.css +1 -0
- package/dist/tokens/css/tokens.dark.css +1 -0
- package/dist/tokens/js/tokens.dark.js +1 -0
- package/dist/tokens/js/tokens.js +1 -0
- package/dist/tokens/json/tokens.dark.json +35 -0
- package/dist/tokens/json/tokens.json +35 -0
- package/dist/tokens/scss/_tokens.dark.scss +1 -0
- package/dist/tokens/scss/_tokens.scss +1 -0
- package/dist/tokens/scss/_tokens_custom_properties.scss +1 -0
- package/dist/utils/number_utils.js +9 -1
- package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -3
- package/dist/vendor/bootstrap-vue/src/index.js +0 -2
- package/package.json +7 -7
- package/src/components/base/alert/alert.vue +1 -1
- package/src/components/base/avatar/avatar.vue +4 -4
- package/src/components/base/datepicker/datepicker.vue +1 -1
- package/src/components/base/drawer/drawer.vue +1 -1
- package/src/components/base/form/form_input/form_input.scss +1 -2
- package/src/components/base/form/form_input/form_input.vue +3 -3
- package/src/components/base/form/form_select/form_select.vue +3 -3
- package/src/components/base/modal/modal.scss +1 -2
- package/src/components/base/progress_bar/progress_bar.md +25 -0
- package/src/components/base/progress_bar/progress_bar.scss +11 -0
- package/src/components/base/progress_bar/progress_bar.vue +54 -5
- package/src/components/base/toast/toast.js +1 -1
- package/src/components/base/toggle/toggle.scss +28 -7
- package/src/components/base/toggle/toggle.vue +1 -0
- package/src/components/base/token/token.vue +1 -1
- package/src/components/base/token_selector/token_selector.scss +8 -3
- package/src/components/base/token_selector/token_selector.vue +17 -9
- package/src/tokens/build/css/tokens.css +1 -0
- package/src/tokens/build/css/tokens.dark.css +1 -0
- package/src/tokens/build/js/tokens.dark.js +1 -0
- package/src/tokens/build/js/tokens.js +1 -0
- package/src/tokens/build/json/tokens.dark.json +35 -0
- package/src/tokens/build/json/tokens.json +35 -0
- package/src/tokens/build/scss/_tokens.dark.scss +1 -0
- package/src/tokens/build/scss/_tokens.scss +1 -0
- package/src/tokens/build/scss/_tokens_custom_properties.scss +1 -0
- package/src/tokens/contextual/token-selector.tokens.json +20 -0
- package/src/utils/number_utils.js +7 -0
- package/src/vendor/bootstrap-vue/package.json +3 -42
- package/src/vendor/bootstrap-vue/src/components/badge/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/breadcrumb/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/button/README.md +7 -9
- package/src/vendor/bootstrap-vue/src/components/button-group/README.md +0 -5
- package/src/vendor/bootstrap-vue/src/components/collapse/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +5 -5
- package/src/vendor/bootstrap-vue/src/components/form/README.md +21 -26
- package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +6 -6
- package/src/vendor/bootstrap-vue/src/components/form-group/README.md +6 -4
- package/src/vendor/bootstrap-vue/src/components/form-input/README.md +4 -4
- package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +1 -1
- package/src/vendor/bootstrap-vue/src/components/index.d.ts +0 -1
- package/src/vendor/bootstrap-vue/src/components/input-group/README.md +4 -9
- package/src/vendor/bootstrap-vue/src/components/layout/README.md +3 -3
- package/src/vendor/bootstrap-vue/src/components/link/README.md +1 -1
- package/src/vendor/bootstrap-vue/src/components/modal/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/nav/README.md +13 -14
- package/src/vendor/bootstrap-vue/src/components/navbar/README.md +5 -6
- package/src/vendor/bootstrap-vue/src/components/popover/README.md +4 -4
- package/src/vendor/bootstrap-vue/src/components/table/README.md +5 -5
- package/src/vendor/bootstrap-vue/src/components/tabs/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/toast/README.md +5 -5
- package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +4 -4
- package/src/vendor/bootstrap-vue/src/constants/components.js +0 -2
- package/src/vendor/bootstrap-vue/src/directives/toggle/README.md +5 -6
- package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/index.js +0 -4
- package/dist/vendor/bootstrap-vue/src/components/progress/index.js +0 -2
- package/dist/vendor/bootstrap-vue/src/components/progress/progress-bar.js +0 -128
- package/dist/vendor/bootstrap-vue/src/components/progress/progress.js +0 -56
- package/src/vendor/bootstrap-vue/nuxt/index.js +0 -164
- package/src/vendor/bootstrap-vue/nuxt/plugin.template.js +0 -29
- package/src/vendor/bootstrap-vue/src/components/progress/MODIFICATIONS.md +0 -23
- package/src/vendor/bootstrap-vue/src/components/progress/README.md +0 -363
- package/src/vendor/bootstrap-vue/src/components/progress/index.d.ts +0 -10
- package/src/vendor/bootstrap-vue/src/components/progress/index.js +0 -4
- package/src/vendor/bootstrap-vue/src/components/progress/package.json +0 -109
- package/src/vendor/bootstrap-vue/src/components/progress/progress-bar.js +0 -133
- package/src/vendor/bootstrap-vue/src/components/progress/progress-bar.spec.js +0 -270
- package/src/vendor/bootstrap-vue/src/components/progress/progress.js +0 -57
- package/src/vendor/bootstrap-vue/src/components/progress/progress.spec.js +0 -71
|
@@ -279,7 +279,7 @@ like `<b-navbar-brand>`, they'll automatically be aligned to the far right. Reve
|
|
|
279
279
|
will reverse the placement of the toggler.
|
|
280
280
|
|
|
281
281
|
See the first example on this page for reference, and also refer to
|
|
282
|
-
[`<
|
|
282
|
+
[`<gl-collapse>`](?path=/docs/base-collapse--docs) for details on the collapse component.
|
|
283
283
|
|
|
284
284
|
Internally, `<b-navbar-toggle>` uses the [`v-b-toggle` directive](/docs/directives/toggle).
|
|
285
285
|
|
|
@@ -322,12 +322,11 @@ Navbars are hidden by default when printing. Force them to be printed by setting
|
|
|
322
322
|
|
|
323
323
|
## See also
|
|
324
324
|
|
|
325
|
-
- [
|
|
325
|
+
- [collapse](?path=/docs/base-collapse--docs)
|
|
326
326
|
- [`v-b-toggle` directive](/docs/directives/toggle)
|
|
327
|
-
- [
|
|
328
|
-
aliases
|
|
327
|
+
- [nav](?path=/docs/base-nav--docs) for additional components and sub-component aliases
|
|
329
328
|
|
|
330
|
-
Refer to the [Router support](/docs
|
|
331
|
-
props.
|
|
329
|
+
Refer to the [Router support](?path=/docs/base-link--docs#router-link-support) reference page for
|
|
330
|
+
router-link specific props.
|
|
332
331
|
|
|
333
332
|
<!-- Component reference added automatically from component package.json -->
|
|
@@ -61,7 +61,7 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
|
|
|
61
61
|
`rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom` aligned.
|
|
62
62
|
Positioning is relative to the trigger element.
|
|
63
63
|
|
|
64
|
-
<
|
|
64
|
+
<section class="bd-example bd-example-popover-static">
|
|
65
65
|
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
|
|
66
66
|
<div class="arrow" style="left: calc(50% - 8px)"></div>
|
|
67
67
|
<h3 class="popover-header">Popover top</h3>
|
|
@@ -163,7 +163,7 @@ Positioning is relative to the trigger element.
|
|
|
163
163
|
</div>
|
|
164
164
|
|
|
165
165
|
<div class="clearfix"></div>
|
|
166
|
-
</
|
|
166
|
+
</section>
|
|
167
167
|
|
|
168
168
|
## Triggers
|
|
169
169
|
|
|
@@ -887,8 +887,8 @@ interacting with it (keeping focus inside the popover until it is closed by the
|
|
|
887
887
|
|
|
888
888
|
**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
|
|
889
889
|
query. See the
|
|
890
|
-
[reduced motion section of our accessibility documentation](/docs
|
|
891
|
-
additional details.
|
|
890
|
+
[reduced motion section of our accessibility documentation](?path=/docs/base-tooltip--docs#accessibility)
|
|
891
|
+
for additional details.
|
|
892
892
|
|
|
893
893
|
### Making popovers work for keyboard and assistive technology users
|
|
894
894
|
|
|
@@ -2168,7 +2168,7 @@ Setting the prop `filter` to null or an empty string will clear local items filt
|
|
|
2168
2168
|
### Debouncing filter criteria changes
|
|
2169
2169
|
|
|
2170
2170
|
<span class="badge badge-warning small">deprecated in v2.1.0</span> Use the `debounce` feature of
|
|
2171
|
-
[
|
|
2171
|
+
[form-input](?path=/docs/base-form-form-input--docst#debounce-support) instead.
|
|
2172
2172
|
|
|
2173
2173
|
If you have a text input tied to the `filter` prop of `<b-table>`, the filtering process will occur
|
|
2174
2174
|
for each character typed by the user. With large items datasets, this process can take a while and
|
|
@@ -2198,7 +2198,7 @@ at a time by setting the `per-page` prop to the maximum number of rows you would
|
|
|
2198
2198
|
use the `current-page` prop to specify which page to display (starting from page `1`). If you set
|
|
2199
2199
|
`current-page` to a value larger than the computed number of pages, then no rows will be shown.
|
|
2200
2200
|
|
|
2201
|
-
You can use the [`<
|
|
2201
|
+
You can use the [`<gl-pagination>`](?path=/docs/base-pagination--docs) component in conjunction with
|
|
2202
2202
|
`<b-table>` for providing control over pagination.
|
|
2203
2203
|
|
|
2204
2204
|
Setting `per-page` to `0` (default) will disable the local items pagination feature.
|
|
@@ -2415,9 +2415,9 @@ of records.
|
|
|
2415
2415
|
respective `no-provider-*` prop set to `true`).
|
|
2416
2416
|
- The `no-local-sorting` prop has no effect when `items` is a provider function.
|
|
2417
2417
|
- When using provider filtering, you may find that setting the
|
|
2418
|
-
[`debounce` prop on `<
|
|
2419
|
-
greater than `100` ms will help minimize the number of calls to your back end API as the
|
|
2420
|
-
types in the criteria.
|
|
2418
|
+
[`debounce` prop on `<gl-form-input>`](?path=/docs/base-form-form-input--docs#debounce-support) to
|
|
2419
|
+
a value greater than `100` ms will help minimize the number of calls to your back end API as the
|
|
2420
|
+
user types in the criteria.
|
|
2421
2421
|
|
|
2422
2422
|
### Force refreshing of table data
|
|
2423
2423
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
> cards internally, and provides full keyboard navigation control of the tabs.
|
|
5
5
|
|
|
6
6
|
For navigation based tabs (i.e. tabs that would change the URL), use the
|
|
7
|
-
[
|
|
7
|
+
[nav](?path=/docs/base-nav--docs) component instead.
|
|
8
8
|
|
|
9
9
|
## Basic usage
|
|
10
10
|
|
|
@@ -91,7 +91,7 @@ When `<b-tabs>` is in `card` mode, each `<b-tab>` sub-component will automatical
|
|
|
91
91
|
**Note:** Setting the `no-body` prop on `<b-tab>` will have no affect when `<b-tabs>` is not in
|
|
92
92
|
`card` mode (as the `card-body` class is only set when in `card` mode).
|
|
93
93
|
|
|
94
|
-
Refer to the [Cards documentation](
|
|
94
|
+
Refer to the [Cards documentation](?path=/docs/base-card--docs) for more details on card components.
|
|
95
95
|
|
|
96
96
|
## Pills variant
|
|
97
97
|
|
|
@@ -22,7 +22,7 @@ under the toast.
|
|
|
22
22
|
|
|
23
23
|
```html
|
|
24
24
|
<template>
|
|
25
|
-
<div class="p-3 bg-secondary
|
|
25
|
+
<div class="p-3 bg-secondary" style="min-height: 170px;">
|
|
26
26
|
<b-button class="mb-2" variant="primary" @click="$bvToast.show('example-toast')">
|
|
27
27
|
Show toast
|
|
28
28
|
</b-button>
|
|
@@ -36,8 +36,8 @@ under the toast.
|
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
**Note:** we are using the `static` prop in the above example to render the toast in-place in the
|
|
39
|
-
document, rather than transporting it to a `<b-toaster>` target container. And we have added
|
|
40
|
-
`bg-secondary`
|
|
39
|
+
document, rather than transporting it to a `<b-toaster>` target container. And we have added class
|
|
40
|
+
`bg-secondary` to the outer `<div>` for illustrative purposes of toast
|
|
41
41
|
transparency only.
|
|
42
42
|
|
|
43
43
|
### Toast features and notes
|
|
@@ -535,7 +535,7 @@ for generating more complex toast content:
|
|
|
535
535
|
In some cases you may need just a simple alert style message (i.e. cookie usage notifications,
|
|
536
536
|
etc.). In these cases it is usually better to use an fixed position alert instead of a toast, by
|
|
537
537
|
applying a few Bootstrap [utility classes](/docs/reference/utility-classes) and a small bit of
|
|
538
|
-
custom styling on a [`<
|
|
538
|
+
custom styling on a [`<gl-alert>`](?path=/docs/base-alert--docs) component:
|
|
539
539
|
|
|
540
540
|
```html
|
|
541
541
|
<template>
|
|
@@ -615,7 +615,7 @@ that can impact both people with and without disabilities. The following list, w
|
|
|
615
615
|
provides general guidelines when using toasts.
|
|
616
616
|
|
|
617
617
|
- If the information needed is important for the process, e.g. for a list of errors in a form, then
|
|
618
|
-
use the [`<
|
|
618
|
+
use the [`<gl-alert>`](?path=/docs/base-alert--docs) component instead of `<b-toast>`.
|
|
619
619
|
- `<b-toast>`, by default, sets the attributes `role` to `'alert'` and `aria-live` to `'assertive'`.
|
|
620
620
|
If it's an important message like an error, this default setting is appropriate, otherwise set the
|
|
621
621
|
prop `is-status` to `true` which will change the attributes `role` to `'status'` and `aria-live`
|
|
@@ -64,7 +64,7 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
|
|
|
64
64
|
`rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom` aligned.
|
|
65
65
|
The default position is `top`. Positioning is relative to the trigger element.
|
|
66
66
|
|
|
67
|
-
<
|
|
67
|
+
<section class="bd-example bd-example-tooltip-static">
|
|
68
68
|
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
|
|
69
69
|
<div class="arrow" style="left: calc(50% - 6px)"></div>
|
|
70
70
|
<div class="tooltip-inner">Tooltip on the top</div>
|
|
@@ -113,7 +113,7 @@ The default position is `top`. Positioning is relative to the trigger element.
|
|
|
113
113
|
<div class="arrow" style="top: 0px"></div>
|
|
114
114
|
<div class="tooltip-inner">Tooltip on the leftbottom</div>
|
|
115
115
|
</div>
|
|
116
|
-
</
|
|
116
|
+
</section>
|
|
117
117
|
|
|
118
118
|
Refer to the [Tooltip directive](/docs/directives/tooltip/#positioning) documentation for live
|
|
119
119
|
examples of positioning.
|
|
@@ -553,7 +553,7 @@ with the auto generated ID of the tooltip.
|
|
|
553
553
|
|
|
554
554
|
**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
|
|
555
555
|
query. See the
|
|
556
|
-
[reduced motion section of our accessibility documentation](/docs
|
|
557
|
-
additional details.
|
|
556
|
+
[reduced motion section of our accessibility documentation](?path=/docs/base-tooltip--docs#accessibility)
|
|
557
|
+
for additional details.
|
|
558
558
|
|
|
559
559
|
<!-- Component reference added automatically from component package.json -->
|
|
@@ -44,8 +44,6 @@ export const NAME_NAVBAR_BRAND = 'BNavbarBrand'
|
|
|
44
44
|
export const NAME_NAV_ITEM = 'BNavItem'
|
|
45
45
|
export const NAME_NAV_ITEM_DROPDOWN = 'BNavItemDropdown'
|
|
46
46
|
export const NAME_POPOVER = 'BPopover'
|
|
47
|
-
export const NAME_PROGRESS = 'BProgress'
|
|
48
|
-
export const NAME_PROGRESS_BAR = 'BProgressBar'
|
|
49
47
|
export const NAME_TAB = 'BTab'
|
|
50
48
|
export const NAME_TABLE = 'BTable'
|
|
51
49
|
export const NAME_TABLE_CELL = 'BTableCell'
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
# Toggle
|
|
2
2
|
|
|
3
|
-
> `v-b-toggle` is a light-weight directive for toggling the visibility of collapses,
|
|
4
|
-
>
|
|
3
|
+
> `v-b-toggle` is a light-weight directive for toggling the visibility of collapses, and includes
|
|
4
|
+
> automated [WAI-ARIA accessibility](?path=/docs/base-tooltip--docs#accessibility) attribute
|
|
5
|
+
> handling.
|
|
5
6
|
|
|
6
7
|
## Overview
|
|
7
8
|
|
|
8
9
|
The `v-b-toggle` directive can be used on interactive elements, such as buttons and to toggle the
|
|
9
|
-
visibility state of the [`<
|
|
10
|
+
visibility state of the [`<gl-collapse>`](?path=/docs/base-collapse--docs) component.
|
|
10
11
|
|
|
11
12
|
Besides toggling the visibility of the target component, the directive automatically updates ARIA
|
|
12
13
|
accessibility attributes on the element it is applied to so that they reflect the visibility state
|
|
@@ -141,6 +142,4 @@ via `v-model`, other controls with `v-b-toggle` directive, or CSS visibility).
|
|
|
141
142
|
|
|
142
143
|
## See also
|
|
143
144
|
|
|
144
|
-
- [
|
|
145
|
-
- [`<b-navbar-toggle>`](/docs/components/navbar#b-navbar-toggle-and-b-collapse-is-nav) Navbar
|
|
146
|
-
hamburger toggle button (based on `v-b-toggle` directive)
|
|
145
|
+
- [collapse](?path=/docs/base-collapse--docs) Collapsible content with accordion support
|
|
@@ -515,7 +515,7 @@ disabled.
|
|
|
515
515
|
|
|
516
516
|
## See also
|
|
517
517
|
|
|
518
|
-
- [
|
|
519
|
-
- [
|
|
518
|
+
- [tooltip](?path=/docs/base-tooltip--docs)
|
|
519
|
+
- [popover](?path=/docs/base-popover--docs)
|
|
520
520
|
|
|
521
521
|
<!-- Directive reference section auto generated from directive package.json -->
|
|
@@ -135,10 +135,6 @@ export { BNavbarBrand } from './components/navbar/navbar-brand'
|
|
|
135
135
|
// export * from './components/popover'
|
|
136
136
|
export { BPopover } from './components/popover/popover'
|
|
137
137
|
|
|
138
|
-
// export * from './components/progress'
|
|
139
|
-
export { BProgress } from './components/progress/progress'
|
|
140
|
-
export { BProgressBar } from './components/progress/progress-bar'
|
|
141
|
-
|
|
142
138
|
// export * from './components/table'
|
|
143
139
|
export { BTable } from './components/table/table'
|
|
144
140
|
export { BTableLite } from './components/table/table-lite'
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import { extend } from '../../vue';
|
|
2
|
-
import { NAME_PROGRESS_BAR } from '../../constants/components';
|
|
3
|
-
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_NUMBER_STRING } from '../../constants/props';
|
|
4
|
-
import { htmlOrText } from '../../utils/html';
|
|
5
|
-
import { isBoolean } from '../../utils/inspect';
|
|
6
|
-
import { mathMax, mathPow } from '../../utils/math';
|
|
7
|
-
import { toFloat, toInteger, toFixed } from '../../utils/number';
|
|
8
|
-
import { makePropsConfigurable, makeProp } from '../../utils/props';
|
|
9
|
-
import { toString } from '../../utils/string';
|
|
10
|
-
import { normalizeSlotMixin } from '../../mixins/normalize-slot';
|
|
11
|
-
|
|
12
|
-
// --- Props ---
|
|
13
|
-
|
|
14
|
-
const props = makePropsConfigurable({
|
|
15
|
-
animated: makeProp(PROP_TYPE_BOOLEAN, null),
|
|
16
|
-
label: makeProp(PROP_TYPE_STRING),
|
|
17
|
-
labelHtml: makeProp(PROP_TYPE_STRING),
|
|
18
|
-
max: makeProp(PROP_TYPE_NUMBER_STRING, null),
|
|
19
|
-
precision: makeProp(PROP_TYPE_NUMBER_STRING, null),
|
|
20
|
-
showProgress: makeProp(PROP_TYPE_BOOLEAN, null),
|
|
21
|
-
showValue: makeProp(PROP_TYPE_BOOLEAN, null),
|
|
22
|
-
striped: makeProp(PROP_TYPE_BOOLEAN, null),
|
|
23
|
-
value: makeProp(PROP_TYPE_NUMBER_STRING, 0),
|
|
24
|
-
variant: makeProp(PROP_TYPE_STRING)
|
|
25
|
-
}, NAME_PROGRESS_BAR);
|
|
26
|
-
|
|
27
|
-
// --- Main component ---
|
|
28
|
-
|
|
29
|
-
// @vue/component
|
|
30
|
-
const BProgressBar = /*#__PURE__*/extend({
|
|
31
|
-
name: NAME_PROGRESS_BAR,
|
|
32
|
-
mixins: [normalizeSlotMixin],
|
|
33
|
-
inject: {
|
|
34
|
-
getBvProgress: {
|
|
35
|
-
default: /* istanbul ignore next */() => () => ({})
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
props,
|
|
39
|
-
computed: {
|
|
40
|
-
bvProgress() {
|
|
41
|
-
return this.getBvProgress();
|
|
42
|
-
},
|
|
43
|
-
progressBarClasses() {
|
|
44
|
-
const {
|
|
45
|
-
computedAnimated,
|
|
46
|
-
computedVariant
|
|
47
|
-
} = this;
|
|
48
|
-
return [computedVariant ? `bg-${computedVariant}` : '', this.computedStriped || computedAnimated ? 'progress-bar-striped' : '', computedAnimated ? 'progress-bar-animated' : ''];
|
|
49
|
-
},
|
|
50
|
-
progressBarStyles() {
|
|
51
|
-
return {
|
|
52
|
-
width: 100 * (this.computedValue / this.computedMax) + '%'
|
|
53
|
-
};
|
|
54
|
-
},
|
|
55
|
-
computedValue() {
|
|
56
|
-
return toFloat(this.value, 0);
|
|
57
|
-
},
|
|
58
|
-
computedMax() {
|
|
59
|
-
// Prefer our max over parent setting
|
|
60
|
-
// Default to `100` for invalid values (`-x`, `0`, `NaN`)
|
|
61
|
-
const max = toFloat(this.max) || toFloat(this.bvProgress.max, 0);
|
|
62
|
-
return max > 0 ? max : 100;
|
|
63
|
-
},
|
|
64
|
-
computedPrecision() {
|
|
65
|
-
// Prefer our precision over parent setting
|
|
66
|
-
// Default to `0` for invalid values (`-x`, `NaN`)
|
|
67
|
-
return mathMax(toInteger(this.precision, toInteger(this.bvProgress.precision, 0)), 0);
|
|
68
|
-
},
|
|
69
|
-
computedProgress() {
|
|
70
|
-
const precision = this.computedPrecision;
|
|
71
|
-
const p = mathPow(10, precision);
|
|
72
|
-
return toFixed(100 * p * this.computedValue / this.computedMax / p, precision);
|
|
73
|
-
},
|
|
74
|
-
computedVariant() {
|
|
75
|
-
// Prefer our variant over parent setting
|
|
76
|
-
return this.variant || this.bvProgress.variant;
|
|
77
|
-
},
|
|
78
|
-
computedStriped() {
|
|
79
|
-
// Prefer our striped over parent setting
|
|
80
|
-
return isBoolean(this.striped) ? this.striped : this.bvProgress.striped || false;
|
|
81
|
-
},
|
|
82
|
-
computedAnimated() {
|
|
83
|
-
// Prefer our animated over parent setting
|
|
84
|
-
return isBoolean(this.animated) ? this.animated : this.bvProgress.animated || false;
|
|
85
|
-
},
|
|
86
|
-
computedShowProgress() {
|
|
87
|
-
// Prefer our showProgress over parent setting
|
|
88
|
-
return isBoolean(this.showProgress) ? this.showProgress : this.bvProgress.showProgress || false;
|
|
89
|
-
},
|
|
90
|
-
computedShowValue() {
|
|
91
|
-
// Prefer our showValue over parent setting
|
|
92
|
-
return isBoolean(this.showValue) ? this.showValue : this.bvProgress.showValue || false;
|
|
93
|
-
}
|
|
94
|
-
},
|
|
95
|
-
render(h) {
|
|
96
|
-
const {
|
|
97
|
-
label,
|
|
98
|
-
labelHtml,
|
|
99
|
-
computedValue,
|
|
100
|
-
computedPrecision
|
|
101
|
-
} = this;
|
|
102
|
-
let $children;
|
|
103
|
-
let domProps = {};
|
|
104
|
-
if (this.hasNormalizedSlot()) {
|
|
105
|
-
$children = this.normalizeSlot();
|
|
106
|
-
} else if (label || labelHtml) {
|
|
107
|
-
domProps = htmlOrText(labelHtml, label);
|
|
108
|
-
} else if (this.computedShowProgress) {
|
|
109
|
-
$children = this.computedProgress;
|
|
110
|
-
} else if (this.computedShowValue) {
|
|
111
|
-
$children = toFixed(computedValue, computedPrecision);
|
|
112
|
-
}
|
|
113
|
-
return h('div', {
|
|
114
|
-
staticClass: 'progress-bar',
|
|
115
|
-
class: this.progressBarClasses,
|
|
116
|
-
style: this.progressBarStyles,
|
|
117
|
-
attrs: {
|
|
118
|
-
role: 'progressbar',
|
|
119
|
-
'aria-valuemin': '0',
|
|
120
|
-
'aria-valuemax': toString(this.computedMax),
|
|
121
|
-
'aria-valuenow': toFixed(computedValue, computedPrecision)
|
|
122
|
-
},
|
|
123
|
-
domProps
|
|
124
|
-
}, $children);
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
export { BProgressBar, props };
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { extend } from '../../vue';
|
|
2
|
-
import { NAME_PROGRESS } from '../../constants/components';
|
|
3
|
-
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_NUMBER_STRING } from '../../constants/props';
|
|
4
|
-
import { omit, sortKeys } from '../../utils/object';
|
|
5
|
-
import { makePropsConfigurable, makeProp, pluckProps } from '../../utils/props';
|
|
6
|
-
import { normalizeSlotMixin } from '../../mixins/normalize-slot';
|
|
7
|
-
import { props as props$1, BProgressBar } from './progress-bar';
|
|
8
|
-
|
|
9
|
-
// --- Props ---
|
|
10
|
-
|
|
11
|
-
const progressBarProps = omit(props$1, ['label', 'labelHtml']);
|
|
12
|
-
const props = makePropsConfigurable(sortKeys({
|
|
13
|
-
...progressBarProps,
|
|
14
|
-
animated: makeProp(PROP_TYPE_BOOLEAN, false),
|
|
15
|
-
height: makeProp(PROP_TYPE_STRING),
|
|
16
|
-
max: makeProp(PROP_TYPE_NUMBER_STRING, 100),
|
|
17
|
-
precision: makeProp(PROP_TYPE_NUMBER_STRING, 0),
|
|
18
|
-
showProgress: makeProp(PROP_TYPE_BOOLEAN, false),
|
|
19
|
-
showValue: makeProp(PROP_TYPE_BOOLEAN, false),
|
|
20
|
-
striped: makeProp(PROP_TYPE_BOOLEAN, false)
|
|
21
|
-
}), NAME_PROGRESS);
|
|
22
|
-
|
|
23
|
-
// --- Main component ---
|
|
24
|
-
|
|
25
|
-
// @vue/component
|
|
26
|
-
const BProgress = /*#__PURE__*/extend({
|
|
27
|
-
name: NAME_PROGRESS,
|
|
28
|
-
mixins: [normalizeSlotMixin],
|
|
29
|
-
provide() {
|
|
30
|
-
return {
|
|
31
|
-
getBvProgress: () => this
|
|
32
|
-
};
|
|
33
|
-
},
|
|
34
|
-
props,
|
|
35
|
-
computed: {
|
|
36
|
-
progressHeight() {
|
|
37
|
-
return {
|
|
38
|
-
height: this.height || null
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
render(h) {
|
|
43
|
-
let $childNodes = this.normalizeSlot();
|
|
44
|
-
if (!$childNodes) {
|
|
45
|
-
$childNodes = h(BProgressBar, {
|
|
46
|
-
props: pluckProps(progressBarProps, this.$props)
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
return h('div', {
|
|
50
|
-
staticClass: 'progress',
|
|
51
|
-
style: this.progressHeight
|
|
52
|
-
}, [$childNodes]);
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
export { BProgress, props };
|
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
const { resolve } = require('path')
|
|
2
|
-
|
|
3
|
-
// --- Constants ---
|
|
4
|
-
|
|
5
|
-
const RX_UN_KEBAB = /-(\w)/g
|
|
6
|
-
const RX_HYPHENATE = /\B([A-Z])/g
|
|
7
|
-
|
|
8
|
-
// Path to index file when using bootstrap-vue source code
|
|
9
|
-
const srcIndex = 'bootstrap-vue/src/index.js'
|
|
10
|
-
|
|
11
|
-
// --- Utility methods ---
|
|
12
|
-
|
|
13
|
-
// Converts PascalCase or camelCase to kebab-case
|
|
14
|
-
const kebabCase = str => {
|
|
15
|
-
return str.replace(RX_HYPHENATE, '-$1').toLowerCase()
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
// Converts a kebab-case or camelCase string to PascalCase
|
|
19
|
-
const pascalCase = str => {
|
|
20
|
-
str = kebabCase(str).replace(RX_UN_KEBAB, (_, c) => (c ? c.toUpperCase() : ''))
|
|
21
|
-
return str.charAt(0).toUpperCase() + str.slice(1)
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const pickFirst = (...args) => {
|
|
25
|
-
for (const arg of args) {
|
|
26
|
-
if (arg !== undefined) {
|
|
27
|
-
return arg
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
// --- Main Nuxt.js module ---
|
|
33
|
-
module.exports = function nuxtBootstrapVue(moduleOptions = {}) {
|
|
34
|
-
this.nuxt.hook('build:before', () => {
|
|
35
|
-
// Merge moduleOptions with default
|
|
36
|
-
const options = {
|
|
37
|
-
...this.options.bootstrapVue,
|
|
38
|
-
...moduleOptions
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
// Ensure we have arrays
|
|
42
|
-
this.options.css = [].concat(this.options.css || [])
|
|
43
|
-
this.options.build.transpile = [].concat(this.options.build.transpile || [])
|
|
44
|
-
|
|
45
|
-
const bootstrapVueCSS = pickFirst(
|
|
46
|
-
options.bootstrapVueCSS,
|
|
47
|
-
options.bootstrapVueCss,
|
|
48
|
-
options.bvCSS,
|
|
49
|
-
// Defaults to `true` if no other options provided
|
|
50
|
-
true
|
|
51
|
-
)
|
|
52
|
-
if (bootstrapVueCSS) {
|
|
53
|
-
// Add BootstrapVue CSS
|
|
54
|
-
this.options.css.unshift('bootstrap-vue/dist/bootstrap-vue.css')
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
const bootstrapCSS = pickFirst(
|
|
58
|
-
options.bootstrapCSS,
|
|
59
|
-
options.bootstrapCss,
|
|
60
|
-
options.css,
|
|
61
|
-
// Defaults to `true` if no other options provided
|
|
62
|
-
true
|
|
63
|
-
)
|
|
64
|
-
if (bootstrapCSS) {
|
|
65
|
-
// Add Bootstrap CSS
|
|
66
|
-
this.options.css.unshift('bootstrap/dist/css/bootstrap.css')
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// Component src prop resolving
|
|
70
|
-
this.options.build.loaders.vue.transformAssetUrls = {
|
|
71
|
-
// Nuxt default is missing `poster` for video
|
|
72
|
-
video: ['src', 'poster'],
|
|
73
|
-
// Nuxt default is missing image
|
|
74
|
-
image: 'xlink:href',
|
|
75
|
-
// Ensure super supplied values/overrides are not lost
|
|
76
|
-
...this.options.build.loaders.vue.transformAssetUrls
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// Enable transpilation of `src/` directory
|
|
80
|
-
this.options.build.transpile.push('bootstrap-vue/src')
|
|
81
|
-
|
|
82
|
-
// Use pre-transpiled or `src/`
|
|
83
|
-
const usePretranspiled = pickFirst(options.usePretranspiled, this.options.dev, false)
|
|
84
|
-
if (!usePretranspiled) {
|
|
85
|
-
// Use bootstrap-vue source code for smaller prod builds
|
|
86
|
-
// by aliasing 'bootstrap-vue' to the source files
|
|
87
|
-
this.extendBuild(config => {
|
|
88
|
-
if (!config.resolve.alias) {
|
|
89
|
-
config.resolve.alias = {}
|
|
90
|
-
}
|
|
91
|
-
const index = require.resolve(srcIndex)
|
|
92
|
-
const srcDir = index.replace(/index\.js$/, '')
|
|
93
|
-
// We prepend a $ to ensure that it is only used for
|
|
94
|
-
// `import from 'bootstrap-vue'` not `import from 'bootstrap-vue/*'`
|
|
95
|
-
config.resolve.alias['bootstrap-vue$'] = index
|
|
96
|
-
// If users are still cherry-picking modules from esm/ or es/ (legacy),
|
|
97
|
-
// alias them to src/ to prevent duplicate code imports
|
|
98
|
-
config.resolve.alias['bootstrap-vue/esm/'] = srcDir
|
|
99
|
-
config.resolve.alias['bootstrap-vue/es/'] = srcDir
|
|
100
|
-
})
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// Base options available to template
|
|
104
|
-
const templateOptions = {
|
|
105
|
-
// Flag if we are tree shaking
|
|
106
|
-
treeShake: false
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
// Specific component and/or directive plugins
|
|
110
|
-
for (const type of ['componentPlugins', 'directivePlugins']) {
|
|
111
|
-
const bvPlugins = Array.isArray(options[type]) ? options[type] : []
|
|
112
|
-
|
|
113
|
-
templateOptions[type] = bvPlugins
|
|
114
|
-
// Normalize plugin name to `${Name}Plugin` (component) or `VB${Name}Plugin` (directive)
|
|
115
|
-
// Required for backwards compatibility with old plugin import names
|
|
116
|
-
.map(plugin => {
|
|
117
|
-
// Ensure PascalCase name
|
|
118
|
-
plugin = pascalCase(plugin)
|
|
119
|
-
// Ensure new naming convention for directive plugins prefixed with `VB`
|
|
120
|
-
plugin = type === 'directivePlugins' && !/^VB/.test(plugin) ? `VB${plugin}` : plugin
|
|
121
|
-
// Ensure prefixed with `Plugin`
|
|
122
|
-
plugin = /Plugin$/.test(plugin) ? plugin : `${plugin}Plugin`
|
|
123
|
-
return plugin
|
|
124
|
-
})
|
|
125
|
-
// Remove duplicate items
|
|
126
|
-
.filter((plugin, i, arr) => arr.indexOf(plugin) === i)
|
|
127
|
-
|
|
128
|
-
if (templateOptions[type].length > 0) {
|
|
129
|
-
templateOptions.treeShake = true
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
// Specific components and/or directives
|
|
134
|
-
for (const type of ['components', 'directives']) {
|
|
135
|
-
const ComponentsOrDirectives = Array.isArray(options[type]) ? options[type] : []
|
|
136
|
-
|
|
137
|
-
templateOptions[type] = ComponentsOrDirectives
|
|
138
|
-
// Ensure PascalCase name
|
|
139
|
-
.map(item => pascalCase(item))
|
|
140
|
-
// Ensure prefixed with `V`
|
|
141
|
-
.map(item => (type === 'directives' && !/^V/.test(item) ? `V${item}` : item))
|
|
142
|
-
// Remove duplicate items
|
|
143
|
-
.filter((item, i, arr) => arr.indexOf(item) === i)
|
|
144
|
-
|
|
145
|
-
if (templateOptions[type].length > 0) {
|
|
146
|
-
templateOptions.treeShake = true
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
// Add BootstrapVue configuration if present
|
|
151
|
-
if (options.config && Object.prototype.toString.call(options.config) === '[object Object]') {
|
|
152
|
-
templateOptions.config = { ...options.config }
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
// Register plugin, passing options to plugin template
|
|
156
|
-
this.addPlugin({
|
|
157
|
-
src: resolve(__dirname, 'plugin.template.js'),
|
|
158
|
-
fileName: 'bootstrap-vue.js',
|
|
159
|
-
options: templateOptions
|
|
160
|
-
})
|
|
161
|
-
})
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
module.exports.meta = require('../package.json')
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import Vue from 'vue';
|
|
2
|
-
|
|
3
|
-
<% if (!options.treeShake) { %>
|
|
4
|
-
import { BootstrapVue } from 'bootstrap-vue';
|
|
5
|
-
|
|
6
|
-
Vue.use(BootstrapVue, <%= JSON.stringify(options.config || {}, undefined, 2) %>);
|
|
7
|
-
<% } %>
|
|
8
|
-
<% } %>
|
|
9
|
-
|
|
10
|
-
<% if (options.treeShake) { %>
|
|
11
|
-
import {
|
|
12
|
-
<%= [].concat(
|
|
13
|
-
options.config ? 'BVConfigPlugin' : null,
|
|
14
|
-
options.componentPlugins,
|
|
15
|
-
options.directivePlugins,
|
|
16
|
-
options.components,
|
|
17
|
-
options.directives
|
|
18
|
-
).filter(Boolean).join(',\n ') %>
|
|
19
|
-
} from 'bootstrap-vue';
|
|
20
|
-
|
|
21
|
-
<% if (options.config) { %>
|
|
22
|
-
Vue.use(BVConfigPlugin, <%= JSON.stringify(options.config, undefined, 2) %>);
|
|
23
|
-
<% } %>
|
|
24
|
-
|
|
25
|
-
<%= options.componentPlugins.reduce((acc, plugin) => (acc += `Vue.use(${plugin});\n` ), '') %>
|
|
26
|
-
<%= options.directivePlugins.reduce((acc, plugin) => (acc += `Vue.use(${plugin});\n` ), '') %>
|
|
27
|
-
<%= options.components.reduce((acc, c) => (acc += `Vue.component('${c}', ${c});\n` ), '') %>
|
|
28
|
-
<%= options.directives.reduce((acc, d) => (acc += `Vue.directive('${d.replace(/^VB/, 'B')}', ${d});\n` ), '') %>
|
|
29
|
-
<% } %>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
# Modifications to Vendored Code
|
|
2
|
-
|
|
3
|
-
**Library**: BootstrapVue
|
|
4
|
-
**Version**: 2.23.1
|
|
5
|
-
|
|
6
|
-
This file documents modifications made to the original BootstrapVue component files.
|
|
7
|
-
|
|
8
|
-
## Removed variants
|
|
9
|
-
|
|
10
|
-
The following files have been modified from the original:
|
|
11
|
-
|
|
12
|
-
- `README.md`: Removed variants.
|
|
13
|
-
|
|
14
|
-
The following variants of the property `variant` have been removed as they are no longer supported
|
|
15
|
-
in our implementation:
|
|
16
|
-
|
|
17
|
-
- `secondary`
|
|
18
|
-
- `info`
|
|
19
|
-
- `light`
|
|
20
|
-
- `dark`
|
|
21
|
-
|
|
22
|
-
It was not necessary to adapt `.js` files for this change, as the propery `variant` accepts any
|
|
23
|
-
string. It would still be technically possible to pass down one of the removed variants.
|