diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-11-12 02:00:15 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-11-16 20:13:13 +0300 |
commit | d35132d82d68acbbf83d95add7290f769d3b2436 (patch) | |
tree | b2dbdaca3de10c0ab7b58b2d2dd5ea21f0a3d6df /docs/.vuepress/components/app-imports | |
parent | ff8c5cd23feb42dc90424e44af6275efb12c600d (diff) | |
download | webui-vue-d35132d82d68acbbf83d95add7290f769d3b2436.tar.xz |
Update VuePress configuration
We are moving away from importing application components directly into
the VuePress docs. We will document code snippets and add screenshots
as a visual example.
This commit removes all code and configurations that supported importing
dynamic components into VuePress and added images in place of a working
component example on the page.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9a75c5d51de8b6d941e4df7ae977d78c043d36e1
Diffstat (limited to 'docs/.vuepress/components/app-imports')
-rw-r--r-- | docs/.vuepress/components/app-imports/BVToastMixin.js | 58 | ||||
-rw-r--r-- | docs/.vuepress/components/app-imports/StatusIcon.vue | 65 |
2 files changed, 0 insertions, 123 deletions
diff --git a/docs/.vuepress/components/app-imports/BVToastMixin.js b/docs/.vuepress/components/app-imports/BVToastMixin.js deleted file mode 100644 index 10075658..00000000 --- a/docs/.vuepress/components/app-imports/BVToastMixin.js +++ /dev/null @@ -1,58 +0,0 @@ -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 deleted file mode 100644 index ef2afb72..00000000 --- a/docs/.vuepress/components/app-imports/StatusIcon.vue +++ /dev/null @@ -1,65 +0,0 @@ -<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"> -@import "src/assets/styles/bmc/helpers"; -@import "src/assets/styles/bootstrap/helpers"; -.status-icon { - vertical-align: text-bottom; - &.info { - color: theme-color('info'); - } - &.success { - color: theme-color('success'); - } - &.danger { - color: theme-color('danger'); - } - &.secondary { - color: gray('600'); - - svg { - transform: rotate(-45deg); - } - } - &.warning { - color: theme-color('warning'); - } - - svg { - fill: currentColor; - } -} -</style> |