diff options
Diffstat (limited to 'docs/.vuepress/components')
-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 |
3 files changed, 120 insertions, 1 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> |