From 8c4813e47bb0ba57a57b85d875cfdd9a1529216b Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Thu, 8 May 2025 17:52:48 -0700 Subject: [PATCH 1/2] docs: refactor examples and bring docs to parity --- .../docs/components/demo/ProgressAnimated.vue | 8 + .../components/demo/ProgressBackgrounds.vue | 8 + .../docs/components/demo/ProgressBasic.vue | 9 + .../components/demo/ProgressCustomLabels.vue | 17 ++ .../docs/components/demo/ProgressHeight.vue | 6 + .../docs/components/demo/ProgressLabels.vue | 14 ++ .../components/demo/ProgressMultipleBars.vue | 9 + .../docs/components/demo/ProgressStriped.vue | 9 + .../docs/components/demo/ProgressWidth.vue | 11 + apps/docs/src/docs/components/progress.md | 235 +++--------------- 10 files changed, 127 insertions(+), 199 deletions(-) create mode 100644 apps/docs/src/docs/components/demo/ProgressAnimated.vue create mode 100644 apps/docs/src/docs/components/demo/ProgressBackgrounds.vue create mode 100644 apps/docs/src/docs/components/demo/ProgressBasic.vue create mode 100644 apps/docs/src/docs/components/demo/ProgressCustomLabels.vue create mode 100644 apps/docs/src/docs/components/demo/ProgressHeight.vue create mode 100644 apps/docs/src/docs/components/demo/ProgressLabels.vue create mode 100644 apps/docs/src/docs/components/demo/ProgressMultipleBars.vue create mode 100644 apps/docs/src/docs/components/demo/ProgressStriped.vue create mode 100644 apps/docs/src/docs/components/demo/ProgressWidth.vue diff --git a/apps/docs/src/docs/components/demo/ProgressAnimated.vue b/apps/docs/src/docs/components/demo/ProgressAnimated.vue new file mode 100644 index 000000000..e7b6a1db8 --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressAnimated.vue @@ -0,0 +1,8 @@ + diff --git a/apps/docs/src/docs/components/demo/ProgressBackgrounds.vue b/apps/docs/src/docs/components/demo/ProgressBackgrounds.vue new file mode 100644 index 000000000..a95fe7ea0 --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressBackgrounds.vue @@ -0,0 +1,8 @@ + diff --git a/apps/docs/src/docs/components/demo/ProgressBasic.vue b/apps/docs/src/docs/components/demo/ProgressBasic.vue new file mode 100644 index 000000000..e36869c3c --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressBasic.vue @@ -0,0 +1,9 @@ + diff --git a/apps/docs/src/docs/components/demo/ProgressCustomLabels.vue b/apps/docs/src/docs/components/demo/ProgressCustomLabels.vue new file mode 100644 index 000000000..8cde6bbc1 --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressCustomLabels.vue @@ -0,0 +1,17 @@ + diff --git a/apps/docs/src/docs/components/demo/ProgressHeight.vue b/apps/docs/src/docs/components/demo/ProgressHeight.vue new file mode 100644 index 000000000..7a3711b27 --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressHeight.vue @@ -0,0 +1,6 @@ + diff --git a/apps/docs/src/docs/components/demo/ProgressLabels.vue b/apps/docs/src/docs/components/demo/ProgressLabels.vue new file mode 100644 index 000000000..183f65c2b --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressLabels.vue @@ -0,0 +1,14 @@ + diff --git a/apps/docs/src/docs/components/demo/ProgressMultipleBars.vue b/apps/docs/src/docs/components/demo/ProgressMultipleBars.vue new file mode 100644 index 000000000..ab96ca6ab --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressMultipleBars.vue @@ -0,0 +1,9 @@ + diff --git a/apps/docs/src/docs/components/demo/ProgressStriped.vue b/apps/docs/src/docs/components/demo/ProgressStriped.vue new file mode 100644 index 000000000..dbc1635d3 --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressStriped.vue @@ -0,0 +1,9 @@ + diff --git a/apps/docs/src/docs/components/demo/ProgressWidth.vue b/apps/docs/src/docs/components/demo/ProgressWidth.vue new file mode 100644 index 000000000..4fcbd57fc --- /dev/null +++ b/apps/docs/src/docs/components/demo/ProgressWidth.vue @@ -0,0 +1,11 @@ + diff --git a/apps/docs/src/docs/components/progress.md b/apps/docs/src/docs/components/progress.md index 8f7adc760..aea8313f7 100644 --- a/apps/docs/src/docs/components/progress.md +++ b/apps/docs/src/docs/components/progress.md @@ -2,244 +2,81 @@ -Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. +Use our custom progress component for displaying simple or complex progress bars, featuring +support for horizontally stacked bars, animated backgrounds, and text labels. ## Basic Usage - - - - - - - - - - +<<< DEMO ./demo/ProgressBasic.vue ## Value Set the maximum value with the `max` prop (default is `100`), and the current value via the `value` prop (default `0`). -When creating multiple bars in a single process, place the value prop on the individual `BProgressBar` sub-components (see the Multiple Bars section below for more details) +When creating multiple bars in a single process, place the value prop on the individual `BProgressBar` sub-components (see the [Multiple Bars](#multiple-bars) section below for more details) ## Labels Add labels to your progress bars by either enabling `show-progress` (percentage of max) or `show-value` for the current absolute value. You may also set the precision (number of digits after the decimal) via the `precision` prop (default is `0` digits after the decimal). - - -
No label
- -
Value label
- -
Progress label
- -
Value label with precision
- -
Progress label with precision
- - - - +<<< DEMO ./demo/ProgressLabels.vue ### Custom progress label -Need more control over the label? Provide your own label by using the default slot within a `BProgressBar` sub-component, or by using the `label` or `label-html` property on `BProgressBar`: - - - -
Custom label via default slot
- - - Progress: {{ (33.333333).toFixed(2) }} / {{ 50 }} - - -
Custom label via property
- - - -
Custom label via property (HTML support)
- - - {{33.333333}} - - - - - +Need more control over the label? Provide your own label by using the default slot within a `BProgressBar` sub-component, or by using the `label` property on `BProgressBar`: -## Height +<<< DEMO ./demo/ProgressCustomLabels.vue -The height of the progress bar can be controlled with the height prop. The height value should be a standard CSS dimension (px, rem, em, etc.). The default height is 1rem. +## Width - - - - - - - +## Height -## Backgrounds +The height of the progress bar can be controlled with the height prop. The height value should be a standard CSS dimension (px, rem, em, etc.). The default height is 1rem. -Use background variants to change the appearance of individual progress bars. The default variant is `primary`. +<<< DEMO ./demo/ProgressHeight.vue - - - - - - - - - +## Backgrounds -## Multiple bars +Use background variants to change the appearance of individual progress bars. The default variant is `primary`. -Include multiple `BProgressBar` sub-components in a `BProgress` component to build a horizontally stacked set of progress bars. +<<< DEMO ./demo/ProgressBackgrounds.vue - - - - - - - - - - - -## Striped +## Striped Background Set `striped` to apply a stripe via CSS gradient over the progress bar's background variant. - - - - - - - - - - - -## Animated stripes +<<< DEMO ./demo/ProgressStriped.vue + +## Animated Background The striped gradient can also be animated by setting the `animated` prop. - - - - Toggle animation - - - +::: From 6c7b390a5ca7d1a8115c6b8de0d69bda664446c0 Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Fri, 9 May 2025 10:15:37 -0700 Subject: [PATCH 2/2] docs(BProgress): Fill out component reference --- .../docs/src/data/components/progress.data.ts | 51 +++++++++---------- 1 file changed, 23 insertions(+), 28 deletions(-) diff --git a/apps/docs/src/data/components/progress.data.ts b/apps/docs/src/data/components/progress.data.ts index 4cf7a8f47..3e22cd4df 100644 --- a/apps/docs/src/data/components/progress.data.ts +++ b/apps/docs/src/data/components/progress.data.ts @@ -1,5 +1,6 @@ import type {BvnComponentProps} from 'bootstrap-vue-next' import type {ComponentReference, PropertyReference} from '../../types' +import {buildCommonProps, pick} from '../../utils' export default { load: (): ComponentReference[] => [ @@ -11,55 +12,52 @@ export default { animated: { type: 'boolean', default: undefined, - }, - bgVariant: { - type: 'ColorVariant | null', - default: undefined, + description: "Enable the animated background. Also automatically sets 'striped'", }, height: { type: 'string', default: undefined, + description: + 'Override the default height by specifying a CSS height value (including units)', }, max: { type: 'Numberish', default: 100, + description: 'Set the maximum value', }, precision: { type: 'Numberish', default: undefined, + description: 'The number of digits after the decimal to round the value to', }, showProgress: { type: 'boolean', default: undefined, + description: 'Displays the current progress value as a percentage', }, showValue: { type: 'boolean', default: undefined, + description: 'Displays the current progress value', }, striped: { type: 'boolean', default: undefined, - }, - textVariant: { - type: 'TextColorVariant | null', - default: undefined, + description: 'Enable the striped background', }, value: { type: 'Numberish', default: undefined, + description: 'The current value of the progress bar', }, - variant: { - type: 'ColorVariant | null', - default: undefined, - }, + ...pick(buildCommonProps(), ['bgVariant', 'textVariant', 'variant']), } satisfies Record, }, emits: [], slots: [ { - description: '', name: 'default', - scope: [], + description: 'Content (progress bars) to place in the progress element', }, ], }, @@ -71,55 +69,52 @@ export default { animated: { type: 'boolean', default: false, - }, - bgVariant: { - type: 'ColorVariant | null', - default: null, + description: "Enable the animated background. Also automatically sets 'striped'", }, label: { type: 'string', default: undefined, + description: 'Text string to explicitly set the label as', }, max: { type: 'Numberish', default: undefined, + description: 'Set the maximum value', }, precision: { type: 'Numberish', default: 0, + description: 'The number of digits after the decimal to round the value to', }, showProgress: { type: 'boolean', default: false, + description: 'Displays the current progress value as a percentage', }, showValue: { type: 'boolean', default: false, + description: 'Displays the current progress value', }, striped: { type: 'boolean', default: false, - }, - textVariant: { - type: 'TextColorVariant | null', - default: null, + description: 'Enable the striped background', }, value: { type: 'Numberish', default: 0, + description: 'The current value of the progress bar', }, - variant: { - type: 'ColorVariant | null', - default: null, - }, + ...pick(buildCommonProps(), ['bgVariant', 'textVariant', 'variant']), } satisfies Record, }, emits: [], slots: [ { - description: '', name: 'default', - scope: [], + description: + 'Content to place in the progress bar. Overrides the `label`, `show-progress` and `show-value` props', }, ], },