diff options
| -rw-r--r-- | docs/.vuepress/components/BmcToasts.vue | 2 | ||||
| -rw-r--r-- | docs/.vuepress/components/app-imports/BVToastMixin.js | 58 | ||||
| -rw-r--r-- | docs/.vuepress/components/app-imports/StatusIcon.vue | 61 | ||||
| -rw-r--r-- | docs/.vuepress/config.js | 9 | ||||
| -rw-r--r-- | docs/.vuepress/enhanceApp.js | 2 |
5 files changed, 129 insertions, 3 deletions
diff --git a/docs/.vuepress/components/BmcToasts.vue b/docs/.vuepress/components/BmcToasts.vue index 4c9d30f3..6f90d1f1 100644 --- a/docs/.vuepress/components/BmcToasts.vue +++ b/docs/.vuepress/components/BmcToasts.vue @@ -8,7 +8,7 @@ </template> <script> -import BVToastMixin from '@/src/components/Mixins/BVToastMixin'; +import BVToastMixin from './app-imports/BVToastMixin'; export default { name: 'BmcToasts', mixins: [BVToastMixin], diff --git a/docs/.vuepress/components/app-imports/BVToastMixin.js b/docs/.vuepress/components/app-imports/BVToastMixin.js new file mode 100644 index 00000000..10075658 --- /dev/null +++ b/docs/.vuepress/components/app-imports/BVToastMixin.js @@ -0,0 +1,58 @@ +import StatusIcon from './StatusIcon'; +const BVToastMixin = { + components: { + StatusIcon + }, + methods: { + toastTitle(title, status) { + // Create title with icon + const titleWithIcon = this.$createElement( + 'strong', + { class: 'toast-icon' }, + [ + this.$createElement('StatusIcon', { props: { status: status } }), + title + ] + ); + return titleWithIcon; + }, + successToast(message, title = 'Success') { + this.$root.$bvToast.toast(message, { + title: this.toastTitle(title, 'success'), + variant: 'success', + autoHideDelay: 10000, //auto hide in milliseconds + isStatus: true, + solid: true + }); + }, + errorToast(message, title = 'Error') { + this.$root.$bvToast.toast(message, { + title: this.toastTitle(title, 'danger'), + variant: 'danger', + noAutoHide: true, + isStatus: true, + solid: true + }); + }, + warningToast(message, title = 'Warning') { + this.$root.$bvToast.toast(message, { + title: this.toastTitle(title, 'warning'), + variant: 'warning', + noAutoHide: true, + isStatus: true, + solid: true + }); + }, + infoToast(message, title = 'Informational') { + this.$root.$bvToast.toast(message, { + title: this.toastTitle(title, 'info'), + variant: 'info', + noAutoHide: true, + isStatus: true, + solid: true + }); + } + } +}; + +export default BVToastMixin; diff --git a/docs/.vuepress/components/app-imports/StatusIcon.vue b/docs/.vuepress/components/app-imports/StatusIcon.vue new file mode 100644 index 00000000..954e4775 --- /dev/null +++ b/docs/.vuepress/components/app-imports/StatusIcon.vue @@ -0,0 +1,61 @@ +<template> + <span :class="['status-icon', status]"> + <icon-info v-if="status === 'info'" /> + <icon-success v-else-if="status === 'success'" /> + <icon-warning v-else-if="status === 'warning'" /> + <icon-danger v-else-if="status === 'danger'" /> + <icon-secondary v-else /> + </span> +</template> + +<script> +import IconInfo from '@carbon/icons-vue/es/information--filled/20'; +import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20'; +import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; +import IconError from '@carbon/icons-vue/es/error--filled/20'; +import IconMisuse from '@carbon/icons-vue/es/misuse/20'; + +export default { + name: 'StatusIcon', + components: { + IconInfo: IconInfo, + iconSuccess: IconCheckmark, + iconDanger: IconMisuse, + iconSecondary: IconError, + iconWarning: IconWarning + }, + props: { + status: { + type: String, + default: '' + } + } +}; +</script> + +<style lang="scss" scoped> +@import "src/assets/styles/bmc/helpers"; +@import "src/assets/styles/bootstrap/helpers"; +.status-icon { + vertical-align: text-bottom; + &.info { + fill: theme-color('info'); + } + &.success { + fill: theme-color('success'); + } + &.danger { + fill: theme-color('danger'); + } + &.secondary { + fill: gray('600'); + + svg { + transform: rotate(-45deg); + } + } + &.warning { + fill: theme-color('warning'); + } +} +</style> diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index dd112e61..8b7be97c 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,3 +1,5 @@ +const path = require('path'); + module.exports = { base: "/webui-vue/", title: "OpenBMC Web UI Style Guide", @@ -53,5 +55,12 @@ module.exports = { ], "/themes/": ["", "customize"] }, + }, + configureWebpack: { + resolve: { + alias: { + '@': path.resolve(__dirname, '../../src') + } + } } };
\ No newline at end of file diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 9a3b2b64..c0f3dfba 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -1,7 +1,6 @@ import "./styles/_index.scss"; import Alert from "../../src/components/Global/Alert"; -import BVToastMixin from "../../src/components/Mixins/BVToastMixin"; // Bootstrap-vue Plugin imports import { @@ -18,5 +17,4 @@ export default ({ Vue }) => { // BMC Components and Mixins Vue.component('Alert', Alert); - Vue.mixin('BVToastMixin', BVToastMixin); }
\ No newline at end of file |