summaryrefslogtreecommitdiff
path: root/docs/guide/components
diff options
context:
space:
mode:
authorPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
committerPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
commit7385e139b0c9efca7430458cee982e63e282f4ae (patch)
tree1bbdb0164e556b76eec72cb558c66974c8f95dd8 /docs/guide/components
parentb24a483eda5ca0b0ecdb4f0c61b90d76d0d8e1e0 (diff)
downloadwebui-vue-7385e139b0c9efca7430458cee982e63e282f4ae.tar.xz
prettier: re-format
Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML files to have consistent formatting for these file types. Re-run the formatter on the whole repository. Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779 Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
Diffstat (limited to 'docs/guide/components')
-rw-r--r--docs/guide/components/alerts/index.md6
-rw-r--r--docs/guide/components/buttons/index.md6
-rw-r--r--docs/guide/components/file-upload/readme.md10
-rw-r--r--docs/guide/components/info-tooltip/index.md7
-rw-r--r--docs/guide/components/page-section/index.md5
-rw-r--r--docs/guide/components/page-title/index.md8
-rw-r--r--docs/guide/components/readme.md3
-rw-r--r--docs/guide/components/status-icon/readme.md17
-rw-r--r--docs/guide/components/table/index.md165
-rw-r--r--docs/guide/components/toasts/index.md7
10 files changed, 107 insertions, 127 deletions
diff --git a/docs/guide/components/alerts/index.md b/docs/guide/components/alerts/index.md
index aa2c5e13..0ce5167c 100644
--- a/docs/guide/components/alerts/index.md
+++ b/docs/guide/components/alerts/index.md
@@ -1,11 +1,11 @@
# Alerts
+
An alert is an inline message that contains a short description that a user
cannot manually dismiss. With exception to the error message on the login page,
alerts are not triggered by user action. Success and error notifications based
on user actions are created using a toast component.
-[Learn more about Bootstrap-vue alert
-options](https://bootstrap-vue.js.org/docs/components/alert)
+[Learn more about Bootstrap-vue alert options](https://bootstrap-vue.js.org/docs/components/alert)
![Alert examples](./alert.png)
@@ -13,4 +13,4 @@ options](https://bootstrap-vue.js.org/docs/components/alert)
<alert show variant="warning">This is a warning message</alert>
<alert show variant="danger">This is an error message</alert>
<alert show variant="info">This is an info message</alert>
-``` \ No newline at end of file
+```
diff --git a/docs/guide/components/buttons/index.md b/docs/guide/components/buttons/index.md
index 83b8e8a7..251316ff 100644
--- a/docs/guide/components/buttons/index.md
+++ b/docs/guide/components/buttons/index.md
@@ -6,10 +6,10 @@ can be themed by setting the `variant` prop on the component to one of the
[theme-color map keys](/guide/guidelines/colors). To create a button that looks
like a link, set the variant value to `link`.
-[Learn more about Bootstrap-vue
-buttons](https://bootstrap-vue.js.org/docs/components/button)
+[Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button)
### Icon only buttons
+
Add `btn-icon-only` class to the button and add `title` attribute to get helper
text on hover over the button.
@@ -57,4 +57,4 @@ text on hover over the button.
<b-button disabled variant="link" title="Delete" class="btn-icon-only">
<icon-trashcan />
</b-button>
-``` \ No newline at end of file
+```
diff --git a/docs/guide/components/file-upload/readme.md b/docs/guide/components/file-upload/readme.md
index fb833648..e0819a85 100644
--- a/docs/guide/components/file-upload/readme.md
+++ b/docs/guide/components/file-upload/readme.md
@@ -4,12 +4,13 @@
component. The purpose of this component is to upload files to the BMC.
To use this component:
+
1. Import it into the single file component (SFC)
2. Add the `<form-file />` tag
3. Add the optional `id` , `disabled`, `accept` and `state` prop as required
-[Learn more about the Bootstrap-vue Form File
-component](https://bootstrap-vue.org/docs/components/form-file)
+[Learn more about the Bootstrap-vue Form File component](https://bootstrap-vue.org/docs/components/form-file)
+
### Optional properties
- `id`- Used to set the `id` attribute on the rendered content, and used as the
@@ -23,10 +24,7 @@ component](https://bootstrap-vue.org/docs/components/form-file)
## Example of form file
```vue
-<form-file
- id="image-file"
- accept=".tar"
- >
+<form-file id="image-file" accept=".tar">
</form-file>
```
diff --git a/docs/guide/components/info-tooltip/index.md b/docs/guide/components/info-tooltip/index.md
index b6117924..4b6416c9 100644
--- a/docs/guide/components/info-tooltip/index.md
+++ b/docs/guide/components/info-tooltip/index.md
@@ -4,15 +4,12 @@ The `InfoTooltip` is a custom component that uses a Bootstrap-vue tooltip with
an info icon. This custom component requires a title property containing the
tooltip text to display to the user.
-[Read more about the Bootstrap-vue tooltip
-component](https://bootstrap-vue.org/docs/components/tooltip)
+[Read more about the Bootstrap-vue tooltip component](https://bootstrap-vue.org/docs/components/tooltip)
## Example
```vue
-<info-tooltip
- :title="Title" //should be translated
-/>
+<info-tooltip :title="Title" //should be translated />
```
![Tooltip example](./info-tooltip.png)
diff --git a/docs/guide/components/page-section/index.md b/docs/guide/components/page-section/index.md
index 2a8a22ef..94113c58 100644
--- a/docs/guide/components/page-section/index.md
+++ b/docs/guide/components/page-section/index.md
@@ -4,10 +4,9 @@ The `<page-section>` component will render semantic HTML. By adding a
`:section-title` prop to the `<page-section>` component, the localized text
string will be rendered in an `h2` header element.
-``` vue
+```vue
// Example: `src/views/AccessControl/Ldap/Ldap.vue`
<page-section :section-title="$t('pageLdap.settings')">
```
-[View the page section component source
-code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue). \ No newline at end of file
+[View the page section component source code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue).
diff --git a/docs/guide/components/page-title/index.md b/docs/guide/components/page-title/index.md
index db43f29f..2f635e74 100644
--- a/docs/guide/components/page-title/index.md
+++ b/docs/guide/components/page-title/index.md
@@ -1,4 +1,5 @@
# Page title
+
The `<page-title>` component will automatically render the page title that
corresponds with the title property set in the route record's meta field in
`src/router/routes.js`.
@@ -19,10 +20,9 @@ Optional page descriptions can be included by using the description prop
`:description` prop and passing in the i18n localized text string. Translations
are found in the `src/locales` folder.
-``` vue
+```vue
// Example: `src/views/AccessControl/Ldap/Ldap.vue`
- <page-title :description="$t('pageLdap.pageDescription')" />
+<page-title :description="$t('pageLdap.pageDescription')" />
```
-[View the page title component source
-code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue).
+[View the page title component source code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue).
diff --git a/docs/guide/components/readme.md b/docs/guide/components/readme.md
index aef688af..b200b305 100644
--- a/docs/guide/components/readme.md
+++ b/docs/guide/components/readme.md
@@ -1,4 +1,5 @@
# Overview
+
Vue components are the building blocks of the OpenBMC Web UI. It uses both
Boostrap-Vue components, as well as custom components. Using these components
assures consistency throughout the application. They also improve the developer
@@ -7,4 +8,4 @@ HTML markup. If the feature you're working on includes a new layout pattern,
rather than adding raw markup to the page, consider creating a component that
other sections of the application can use as well.
-[Learn more about Vue components](https://vuejs.org/v2/guide/components.html) \ No newline at end of file
+[Learn more about Vue components](https://vuejs.org/v2/guide/components.html)
diff --git a/docs/guide/components/status-icon/readme.md b/docs/guide/components/status-icon/readme.md
index aef1f93c..e2041986 100644
--- a/docs/guide/components/status-icon/readme.md
+++ b/docs/guide/components/status-icon/readme.md
@@ -9,6 +9,7 @@ following statuses:
- danger
To use this component:
+
1. Import it into the single file component (SFC)
2. Add the `<status-icon />` tag
3. Add the optional status prop and set the value to one of the statuses
@@ -29,9 +30,7 @@ import StatusIcon from '@/components/Global/StatusIcon'
## Status icon with success status
```vue
-<status-icon
-:status="success"
-/>
+<status-icon :status="success" />
```
![StatusIcon success icon example](./success.png)
@@ -39,9 +38,7 @@ import StatusIcon from '@/components/Global/StatusIcon'
## Status icon with info status
```vue
-<status-icon
-:status="info"
-/>
+<status-icon :status="info" />
```
![StatusIcon info icon example](./info.png)
@@ -49,9 +46,7 @@ import StatusIcon from '@/components/Global/StatusIcon'
## Status icon with warning status
```vue
-<status-icon
-:status="warning"
-/>
+<status-icon :status="warning" />
```
![StatusIcon warning icon example](./warning.png)
@@ -59,9 +54,7 @@ import StatusIcon from '@/components/Global/StatusIcon'
## Status icon with danger status
```vue
-<status-icon
-:status="danger"
-/>
+<status-icon :status="danger" />
```
![StatusIcon danger icon example](./danger.png)
diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
index 614ef60f..47bc51d8 100644
--- a/docs/guide/components/table/index.md
+++ b/docs/guide/components/table/index.md
@@ -1,17 +1,16 @@
# Table
-All tables in the application are using the [BoostrapVue table
-component](https://bootstrap-vue.org/docs/components/table).
+All tables in the application are using the
+[BoostrapVue table component](https://bootstrap-vue.org/docs/components/table).
To use the component, include the `<b-table>` tag in the template. The component
is registered globally so does not need to be imported in each SFC.
## Basic table
-There are a few required properties to maintain consistency across the
-application. The full list of options can be viewed on the [Bootstrap-vue table
-component's documentation
-page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props).
+There are a few required properties to maintain consistency across the
+application. The full list of options can be viewed on the
+[Bootstrap-vue table component's documentation page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props).
### Required properties
@@ -20,12 +19,13 @@ page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props).
- `hover` - enables table row hover state
- `responsive` or `stacked` - makes the table responsive (enables horizontal
scrolling or stacked view) at the defined breakpoint
-- `show-empty` *(required if table data is generated dynamically)* - shows an
+- `show-empty` _(required if table data is generated dynamically)_ - shows an
empty message if there are no items in the table
-- `empty-text` *(required if table data is generated dynamically)* - the
+- `empty-text` _(required if table data is generated dynamically)_ - the
translated empty message
-![Basic table example](./table.png) ![Basic empty table
+![Basic table example](./table.png)
+![Basic empty table
example](./table-empty.png)
```vue
@@ -41,36 +41,36 @@ example](./table-empty.png)
</template>
<script>
- export default {
- data() {
- items: [
- {
- name: 'Babe',
- age: '3 years',
- color: 'white, orange, grey'
- },
- {
- name: 'Grey Boy',
- age: '4 months',
- color: 'grey'
- },
- ],
- fields: [
- {
- key: 'name',
- label: this.$t('table.name') //translated label
- },
- {
- key: 'age',
- label: this.$t('table.age') //translated label
- },
- {
- key: 'color',
- label: this.$t('table.color') // translated label
- }
- ]
- }
+export default {
+ data() {
+ items: [
+ {
+ name: 'Babe',
+ age: '3 years',
+ color: 'white, orange, grey'
+ },
+ {
+ name: 'Grey Boy',
+ age: '4 months',
+ color: 'grey'
+ },
+ ],
+ fields: [
+ {
+ key: 'name',
+ label: this.$t('table.name') //translated label
+ },
+ {
+ key: 'age',
+ label: this.$t('table.age') //translated label
+ },
+ {
+ key: 'color',
+ label: this.$t('table.color') // translated label
+ }
+ ]
}
+}
</script>
```
@@ -85,7 +85,6 @@ columns and add the following props to the `<b-table>` component:
![Table sort example](./table-sort.png)
-
```vue
<template>
<b-table
@@ -130,9 +129,9 @@ export default {
To add an expandable row in the table, add a column for the expand button in the
fields array. Include the tdClass `table-row-expand` to ensure icon rotation is
-handled. Use the built in [cell
-slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to
-target the expand button column and add a button with the chevron icon.
+handled. Use the built in
+[cell slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots)
+to target the expand button column and add a button with the chevron icon.
Include the
[TableRowExpandMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js).
@@ -141,9 +140,10 @@ need to be included with the expand button. The `toggleRowDetails` method should
be the button's click event callback. Be sure to pass the `row` object to the
function.
-Use the [row-details
-slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to
-format the expanded row content. The slot has access to the row `item` property.
+Use the
+[row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots)
+to format the expanded row content. The slot has access to the row `item`
+property.
### Summary
@@ -159,12 +159,7 @@ format the expanded row content. The slot has access to the row `item` property.
```vue
<template>
- <b-table
- hover
- responsive="md"
- :items="items"
- :fields="fields"
- >
+ <b-table hover responsive="md" :items="items" :fields="fields">
<template #cell(expandRow)="row">
<b-button
variant="link"
@@ -208,9 +203,9 @@ export default {
## Search
-The table is leveraging [BootstrapVue table
-filtering](https://bootstrap-vue.org/docs/components/table#filtering) for
-search. Add the
+The table is leveraging
+[BootstrapVue table filtering](https://bootstrap-vue.org/docs/components/table#filtering)
+for search. Add the
[@filtered](https://bootstrap-vue.org/docs/components/table#filter-events) event
listener onto the `<b-table>` component. The event callback should track the
total filtered items count.
@@ -240,29 +235,29 @@ if there are no search matches.
```vue
<template>
<b-container>
- <b-row>
- <b-col>
- <search
- @changeSearch="onChangeSearchInput"
- @clearSearch="onClearSearchInput"
- />
- </b-col>
- <b-col>
- <table-cell-count
- :filtered-items-count="filteredItemsCount"
- :total-number-of-cells="items.length"
- />
- </b-col>
- </b-row>
- <b-table
- hover
- responsive="md"
- :items="items"
- :fields="fields"
- :filter="searchFilter"
- :empty-filtered-text="$t('global.table.emptySearchMessage')"
- @filtered="onFiltered"
- />
+ <b-row>
+ <b-col>
+ <search
+ @changeSearch="onChangeSearchInput"
+ @clearSearch="onClearSearchInput"
+ />
+ </b-col>
+ <b-col>
+ <table-cell-count
+ :filtered-items-count="filteredItemsCount"
+ :total-number-of-cells="items.length"
+ />
+ </b-col>
+ </b-row>
+ <b-table
+ hover
+ responsive="md"
+ :items="items"
+ :fields="fields"
+ :filter="searchFilter"
+ :empty-filtered-text="$t('global.table.emptySearchMessage')"
+ @filtered="onFiltered"
+ />
</b-container>
</template>
<script>
@@ -383,6 +378,7 @@ export default {
## Filters
To add a table dropdown filter:
+
1. Import the `<table-filter> `component and TableFilterMixin.
1. Add a filters prop to the `<table-filters>` component. This prop should be an
array of filter groups–each required to have a key, label, and values prop.
@@ -411,12 +407,7 @@ from the TableFilterMixin to show the filtered table data.
/>
</b-col>
</b-row>
- <b-table
- hover
- responsive="md"
- :items="filteredItems"
- :fields="fields"
- />
+ <b-table hover responsive="md" :items="filteredItems" :fields="fields" />
</b-container>
</template>
<script>
@@ -454,20 +445,19 @@ export default {
</script>
```
-
### Date filter
To add a date filter, import the `<table-date-filter>` component. It will emit a
`@change` event with the user input date values. There is a date filter method,
`getFilteredTableDataByDate`, in the `TableFilterMixin`.
-
## Batch actions
Batch actions allow a user to take a single action on many items in a table at
once.
To add table batch actions:
+
1. Import the `<table-toolbar> `component and BVTableSelectableMixin
1. Add the `selectable`, `no-select-on-click` props and a unique `ref` to the
table. The table will emit a `@row-selected` event. Use the `onRowSelected`
@@ -571,10 +561,10 @@ export default {
</script>
```
-
## Pagination
To add table pagination:
+
1. Import the BVPaginationMixin
1. Add the `per-page` and `current-page` props to the `<table>` component.
1. Add the below HTML snippet to the template. Make sure to update the
@@ -607,6 +597,7 @@ To add table pagination:
</b-col>
</b-row>
```
+
![Table pagination example](./table-pagination.png)
```vue
@@ -667,4 +658,4 @@ export default {
}
}
</script>
-``` \ No newline at end of file
+```
diff --git a/docs/guide/components/toasts/index.md b/docs/guide/components/toasts/index.md
index 3f0c815d..b19643de 100644
--- a/docs/guide/components/toasts/index.md
+++ b/docs/guide/components/toasts/index.md
@@ -1,12 +1,13 @@
# Toasts
+
Use a toast message to indicate the status of a user action. For example, a user
saves a form successfully, a toast message with the `success` variant is
-displayed. If the user action was not successful, a toast message with the
+displayed. If the user action was not successful, a toast message with the
`danger` variant is displayed.
There are different transitions for the toast messages. The `success` toast
message will auto-hide after 10 seconds. The user must manually dismiss the
-`informational`, `warning`, and `error` toast messages. The `BVToastMixin`
+`informational`, `warning`, and `error` toast messages. The `BVToastMixin`
provides a simple API that generates a toast message that meets the transition
guidelines.
@@ -67,4 +68,4 @@ methods: {
})
}
}
-``` \ No newline at end of file
+```