deploygh-pages

author: GitHub Action <action@github.com> 2022-03-25 21:22:29 +0300
committer: GitHub Action <action@github.com> 2022-03-25 21:22:29 +0300
commit: 6d8f40c4ac31386460f33d0b4522ea8357e03894 (patch)
tree: dead2423a6c240256a28d4eb9c55cac2b45d71d0
download: webui-vue-gh-pages.tar.xz
85 files changed, 2395 insertions, 0 deletions
diff --git a/404.html b/404.html
new file mode 100644
index 00000000..79e6cddb
--- /dev/null
+++ b/404.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/20.afaf92e0.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/2.3066748c.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>How did we get here?</blockquote> <a href="/webui-vue/" class="router-link-active">
+      Take me home.
+    </a></div></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/20.afaf92e0.js" defer></script>
+  </body>
+</html>
diff --git a/assets/css/0.styles.ee48119c.css b/assets/css/0.styles.ee48119c.css
new file mode 100644
index 00000000..2056a1ed
--- /dev/null
+++ b/assets/css/0.styles.ee48119c.css
@@ -0,0 +1 @@
+code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#3eaf7c}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#3eaf7c}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#nprogress{pointer-events:none}#nprogress .bar{background:#3eaf7c;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #3eaf7c,0 0 5px #3eaf7c;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#3eaf7c transparent transparent #3eaf7c;border-style:solid;border-width:2px;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#3eaf7c;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #389d70}.home .hero .action-button:hover{background-color:#4abf8a}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/webui-vue/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#3eaf7c}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#3eaf7c}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #3eaf7c;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper.open:blur{display:none}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#3eaf7c}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #46bd87}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-heading.clickable:hover{color:#3eaf7c}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#3eaf7c}a.sidebar-link.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.page-nav,.theme-default-content:not(.custom){max-width:72ch;margin:0;padding:2rem}li p{margin-bottom:.5rem;margin-top:.5rem}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.color-tile-container{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:1rem 0}.color-tile{display:block;height:140px}.color-tile--border{border:1px dashed #ccc}.color-tile-desc{margin:.5rem 0}.color-tile-desc dt{display:inline;font-weight:700}.color-tile-desc dd{display:inline;margin:0}.page-nav[data-v-15b7b770],.theme-default-content[data-v-15b7b770]:not(.custom){max-width:72ch;margin:0;padding:2rem}li p[data-v-15b7b770]{margin-bottom:.5rem;margin-top:.5rem}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.page-nav[data-v-deefee04],.theme-default-content[data-v-deefee04]:not(.custom){max-width:72ch;margin:0;padding:2rem}li p[data-v-deefee04]{margin-bottom:.5rem;margin-top:.5rem}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983}
+\ No newline at end of file
diff --git a/assets/img/alert.9abfc445.png b/assets/img/alert.9abfc445.png
new file mode 100644
index 00000000..7a368f7f
--- /dev/null
+++ b/assets/img/alert.9abfc445.png
diff --git a/assets/img/appHeaderWithStatusIcon.8a62f412.png b/assets/img/appHeaderWithStatusIcon.8a62f412.png
new file mode 100644
index 00000000..bb557f3c
--- /dev/null
+++ b/assets/img/appHeaderWithStatusIcon.8a62f412.png
diff --git a/assets/img/eventLogsWithSatusIcon.52c6d53a.png b/assets/img/eventLogsWithSatusIcon.52c6d53a.png
new file mode 100644
index 00000000..dc276ac1
--- /dev/null
+++ b/assets/img/eventLogsWithSatusIcon.52c6d53a.png
diff --git a/assets/img/search.83621669.svg b/assets/img/search.83621669.svg
new file mode 100644
index 00000000..03d83913
--- /dev/null
+++ b/assets/img/search.83621669.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
diff --git a/assets/img/table-batch-action-active.f9a8c36f.png b/assets/img/table-batch-action-active.f9a8c36f.png
new file mode 100644
index 00000000..3e0f6c95
--- /dev/null
+++ b/assets/img/table-batch-action-active.f9a8c36f.png
diff --git a/assets/img/table-batch-action.97b76488.png b/assets/img/table-batch-action.97b76488.png
new file mode 100644
index 00000000..6b95c1fc
--- /dev/null
+++ b/assets/img/table-batch-action.97b76488.png
diff --git a/assets/img/table-empty.239c6ec7.png b/assets/img/table-empty.239c6ec7.png
new file mode 100644
index 00000000..90ecfc14
--- /dev/null
+++ b/assets/img/table-empty.239c6ec7.png
diff --git a/assets/img/table-expand-row.fa48151d.png b/assets/img/table-expand-row.fa48151d.png
new file mode 100644
index 00000000..b8ee9c96
--- /dev/null
+++ b/assets/img/table-expand-row.fa48151d.png
diff --git a/assets/img/table-filter-active.e3119ef9.png b/assets/img/table-filter-active.e3119ef9.png
new file mode 100644
index 00000000..b280ad9f
--- /dev/null
+++ b/assets/img/table-filter-active.e3119ef9.png
diff --git a/assets/img/table-filter.9b3a7161.png b/assets/img/table-filter.9b3a7161.png
new file mode 100644
index 00000000..7927c7b2
--- /dev/null
+++ b/assets/img/table-filter.9b3a7161.png
diff --git a/assets/img/table-pagination.7f542578.png b/assets/img/table-pagination.7f542578.png
new file mode 100644
index 00000000..88134d8f
--- /dev/null
+++ b/assets/img/table-pagination.7f542578.png
diff --git a/assets/img/table-row-actions.cfff2d58.png b/assets/img/table-row-actions.cfff2d58.png
new file mode 100644
index 00000000..4574570e
--- /dev/null
+++ b/assets/img/table-row-actions.cfff2d58.png
diff --git a/assets/img/table-search-active.8622acb6.png b/assets/img/table-search-active.8622acb6.png
new file mode 100644
index 00000000..4fe5c44a
--- /dev/null
+++ b/assets/img/table-search-active.8622acb6.png
diff --git a/assets/img/table-search-empty.a9a05017.png b/assets/img/table-search-empty.a9a05017.png
new file mode 100644
index 00000000..5fee6100
--- /dev/null
+++ b/assets/img/table-search-empty.a9a05017.png
diff --git a/assets/img/table-search.50bb96ff.png b/assets/img/table-search.50bb96ff.png
new file mode 100644
index 00000000..8621d17d
--- /dev/null
+++ b/assets/img/table-search.50bb96ff.png
diff --git a/assets/img/table-sort.6a74b1a4.png b/assets/img/table-sort.6a74b1a4.png
new file mode 100644
index 00000000..af6d831e
--- /dev/null
+++ b/assets/img/table-sort.6a74b1a4.png
diff --git a/assets/img/table.2f5c6005.png b/assets/img/table.2f5c6005.png
new file mode 100644
index 00000000..0160013e
--- /dev/null
+++ b/assets/img/table.2f5c6005.png
diff --git a/assets/img/toast-options.5d0a9c44.png b/assets/img/toast-options.5d0a9c44.png
new file mode 100644
index 00000000..f4d725de
--- /dev/null
+++ b/assets/img/toast-options.5d0a9c44.png
diff --git a/assets/img/toast.9ff5053e.png b/assets/img/toast.9ff5053e.png
new file mode 100644
index 00000000..97f9bc4c
--- /dev/null
+++ b/assets/img/toast.9ff5053e.png
diff --git a/assets/js/10.eff1bc3e.js b/assets/js/10.eff1bc3e.js
new file mode 100644
index 00000000..297f8dae
--- /dev/null
+++ b/assets/js/10.eff1bc3e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{324:function(e,a,r){},385:function(e,a,r){"use strict";r(324)},397:function(e,a,r){"use strict";r.r(a);var l={data:function(){return{themeColors:[{name:"primary",variable:"blue",hex:"#2d60e5"},{name:"secondary",variable:"gray-800",hex:"#3f3f3f"},{name:"light",variable:"gray-100",hex:"#f4f4f4",border:!0},{name:"dark",variable:"gray-900",hex:"#161616"},{name:"info",variable:"blue",hex:"#2d60e5"},{name:"success",variable:"green",hex:"#0a7d06"},{name:"warning",variable:"yellow",hex:"#efc100"},{name:"danger",variable:"red",hex:"#da1416"}]}}},n=(r(385),r(41)),i=Object(n.a)(l,(function(){var e=this,a=e.$createElement,r=e._self._c||a;return r("div",[r("div",{staticClass:"color-tile-container"},e._l(e.themeColors,(function(a){return r("div",[r("div",{staticClass:"color-tile",class:{"color-tile--border":a.border},style:{backgroundColor:a.hex}}),e._v(" "),r("dl",{staticClass:"color-tile-desc"},[r("dt",[e._v("Color variable:")]),e._v(" "),r("dd",[e._v("$"+e._s(a.name))])]),e._v(" "),r("dl",{staticClass:"color-tile-desc"},[r("dt",[e._v("Color variable:")]),e._v(" "),r("dd",[e._v("$"+e._s(a.variable))])])])})),0)])}),[],!1,null,null,null);a.default=i.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/11.f760a167.js b/assets/js/11.f760a167.js
new file mode 100644
index 00000000..aff63104
--- /dev/null
+++ b/assets/js/11.f760a167.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{325:function(l,t,e){},386:function(l,t,e){"use strict";e(325)},398:function(l,t,e){"use strict";e.r(t);var o={data:function(){return{colors:[{variable:"yellow-500",hex:"#efc100"}]}}},r=(e(386),e(41)),s=Object(r.a)(o,(function(){var l=this,t=l.$createElement,e=l._self._c||t;return e("div",[e("div",{staticClass:"color-tile-container"},l._l(l.colors,(function(t){return e("div",[e("div",{staticClass:"color-tile",class:{"color-tile--border":t.border},style:{backgroundColor:t.hex}}),l._v(" "),e("dl",{staticClass:"color-tile-desc"},[e("dt",[l._v("Color variable:")]),l._v(" "),e("dd",[l._v("$"+l._s(t.variable))])]),l._v(" "),e("dl",{staticClass:"color-tile-desc"},[e("dt",[l._v("Hex:")]),l._v(" "),e("dd",[l._v(l._s(t.hex))])])])})),0)])}),[],!1,null,null,null);t.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/12.05e32ea2.js b/assets/js/12.05e32ea2.js
new file mode 100644
index 00000000..60c8b4c9
--- /dev/null
+++ b/assets/js/12.05e32ea2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{326:function(t,e,n){},387:function(t,e,n){"use strict";n(326)},426:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(387),n(41)),p=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=p.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/13.3011b8ba.js b/assets/js/13.3011b8ba.js
new file mode 100644
index 00000000..bf814bef
--- /dev/null
+++ b/assets/js/13.3011b8ba.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{327:function(t,e,a){},388:function(t,e,a){"use strict";a(327)},399:function(t,e,a){"use strict";a.r(e);var n={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted:function(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(388),a(41)),s=Object(i.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/14.366e135a.js b/assets/js/14.366e135a.js
new file mode 100644
index 00000000..12d6ab55
--- /dev/null
+++ b/assets/js/14.366e135a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{328:function(e,t,a){},389:function(e,t,a){"use strict";a(328)},400:function(e,t,a){"use strict";a.r(t);a(64),a(27),a(92);var o={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){var e=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){return Boolean(e.componentOptions)})).map((function(t,a){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},n=(a(389),a(41)),c=Object(n.a)(o,(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ClientOnly",[a("div",{staticClass:"theme-code-group"},[a("div",{staticClass:"theme-code-group__nav"},[a("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,o){return a("li",{key:t.title,staticClass:"theme-code-group__li"},[a("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n            "+e._s(t.title)+"\n          ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?a("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/15.9a576a5a.js b/assets/js/15.9a576a5a.js
new file mode 100644
index 00000000..a09bf0e8
--- /dev/null
+++ b/assets/js/15.9a576a5a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{354:function(t,a){t.exports="data:image/png;base64,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"},355:function(t,a){t.exports="data:image/png;base64,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"},405:function(t,a,s){"use strict";s.r(a);var n=s(41),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"buttons"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#buttons"}},[t._v("#")]),t._v(" Buttons")]),t._v(" "),n("p",[t._v("Buttons are used to perform an action. The main buttons in the application are\nthe "),n("code",[t._v("primary")]),t._v(" and "),n("code",[t._v("secondary")]),t._v(" buttons. Buttons, like all Boostrap-vue components\ncan be themed by setting the "),n("code",[t._v("variant")]),t._v(" prop on the component to one of the\n"),n("a",{attrs:{href:"/guide/guidelines/colors"}},[t._v("theme-color map keys")]),t._v(". To create a button that looks\nlike a link, set the variant value to "),n("code",[t._v("link")]),t._v(".")]),t._v(" "),n("p",[n("a",{attrs:{href:"https://bootstrap-vue.js.org/docs/components/button",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about Bootstrap-vue\nbuttons"),n("OutboundLink")],1)]),t._v(" "),n("h3",{attrs:{id:"icon-only-buttons"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#icon-only-buttons"}},[t._v("#")]),t._v(" Icon only buttons")]),t._v(" "),n("p",[t._v("Add "),n("code",[t._v("btn-icon-only")]),t._v(" class to the button and add "),n("code",[t._v("title")]),t._v(" attribute to get helper\ntext on hover over the button.")]),t._v(" "),n("h3",{attrs:{id:"enabled-buttons"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#enabled-buttons"}},[t._v("#")]),t._v(" Enabled buttons")]),t._v(" "),n("p",[n("img",{attrs:{src:s(354),alt:"Button examples"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[t._v("// Enabled Buttons\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("primary"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Primary"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("primary"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-add")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Primary with icon"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("span")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("secondary"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Secondary"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("danger"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Danger"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("link"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Link Button"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("link"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-add")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Link Button"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("span")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("link"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("title")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Delete"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn-icon-only"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-trashcan")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h3",{attrs:{id:"disabled-buttons"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#disabled-buttons"}},[t._v("#")]),t._v(" Disabled buttons")]),t._v(" "),n("p",[n("img",{attrs:{src:s(355),alt:"Disabled button examples"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[t._v("// Disabled Buttons\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("primary"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Primary"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("primary"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-add")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Primary with icon"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("span")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("secondary"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Secondary"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("danger"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Danger"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("link"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Link Button"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("link"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-add")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Link Button"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("span")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("link"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("title")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Delete"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn-icon-only"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-trashcan")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/16.8d8a2baa.js b/assets/js/16.8d8a2baa.js
new file mode 100644
index 00000000..fd03a67f
--- /dev/null
+++ b/assets/js/16.8d8a2baa.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{378:function(t,s,a){t.exports=a.p+"assets/img/toast.9ff5053e.png"},379:function(t,s,a){t.exports=a.p+"assets/img/toast-options.5d0a9c44.png"},415:function(t,s,a){"use strict";a.r(s);var n=a(41),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"toasts"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#toasts"}},[t._v("#")]),t._v(" Toasts")]),t._v(" "),n("p",[t._v("Use a toast message to indicate the status of a user action. For example, a user\nsaves a form successfully, a toast message with the "),n("code",[t._v("success")]),t._v(" variant is\ndisplayed.  If the user action was not successful, a toast message with the\n"),n("code",[t._v("danger")]),t._v(" variant is displayed.")]),t._v(" "),n("p",[t._v("There are different transitions for the toast messages. The "),n("code",[t._v("success")]),t._v(" toast\nmessage will auto-hide after 10 seconds. The user must manually dismiss the\n"),n("code",[t._v("informational")]),t._v(", "),n("code",[t._v("warning")]),t._v(", and "),n("code",[t._v("error")]),t._v(" toast messages.  The "),n("code",[t._v("BVToastMixin")]),t._v("\nprovides a simple API that generates a toast message that meets the transition\nguidelines.")]),t._v(" "),n("img",{staticStyle:{"max-width":"350px"},attrs:{src:a(378),alt:"Toast message examples"}}),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("div",{staticClass:"highlight-lines"},[n("br"),n("br"),n("br"),n("br"),n("div",{staticClass:"highlighted"},[t._v(" ")]),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br")]),n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Sample method from Reboot BMC page")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("rebootBmc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$store\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'controls/rebootBmc'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("message")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("successToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("message"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" message "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("errorToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("message"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Methods used in this example")]),t._v("\nmethods"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("makeSuccessToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("successToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'This is a success toast and will be dismissed after 10 seconds.'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("makeErrorToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("errorToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'This is an error toast and must be dismissed by the user.'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("makeWarningToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("warningToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'This is a warning toast and must be dismissed by the user.'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("makeInfoToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("infoToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'This is an info toast and must be dismissed by the user.'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"additional-options"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#additional-options"}},[t._v("#")]),t._v(" Additional options")]),t._v(" "),n("p",[t._v("The first argument for each method will be the toast body content. It accepts a\nstring value or an array of strings for toasts needing to display multiple lines\nof content.")]),t._v(" "),n("p",[t._v("The BVToastMixin also accepts additional options as a second argument. Pass an\nobject with a "),n("code",[t._v("title")]),t._v(" property to change the default toast title. Include a\n"),n("code",[t._v("refreshAction")]),t._v(" property, set to true, to include a link that refreshes the\napplication. Include a "),n("code",[t._v("timestamp")]),t._v(" property, set to true, to include a timestamp\nin the toast.")]),t._v(" "),n("p",[n("img",{staticStyle:{"max-width":"350px"},attrs:{src:a(379),alt:"Toast message options example"}})]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("\nmethods"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("makeInfoToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("infoToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'This is a toast with multi-lined body content.'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Just pass an array of strings!'")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      title"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'This is an example'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      refreshAction"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      timestamp"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/17.067a94f4.js b/assets/js/17.067a94f4.js
new file mode 100644
index 00000000..ed1a38e8
--- /dev/null
+++ b/assets/js/17.067a94f4.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{353:function(t,a,s){t.exports=s.p+"assets/img/alert.9abfc445.png"},404:function(t,a,s){"use strict";s.r(a);var n=s(41),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"alerts"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#alerts"}},[t._v("#")]),t._v(" Alerts")]),t._v(" "),n("p",[t._v("An alert is an inline message that contains a short description that a user\ncannot manually dismiss. With exception to the error message on the login page,\nalerts are not triggered by user action. Success and error notifications based\non user actions are created using a toast component.")]),t._v(" "),n("p",[n("a",{attrs:{href:"https://bootstrap-vue.js.org/docs/components/alert",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about Bootstrap-vue alert\noptions"),n("OutboundLink")],1)]),t._v(" "),n("p",[n("img",{attrs:{src:s(353),alt:"Alert examples"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("alert")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("warning"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This is a warning message"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("alert")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("alert")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("danger"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This is an error message"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("alert")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("alert")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("info"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This is an info message"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("alert")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/18.88267105.js b/assets/js/18.88267105.js
new file mode 100644
index 00000000..87653332
--- /dev/null
+++ b/assets/js/18.88267105.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{356:function(t,e){t.exports="data:image/png;base64,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"},407:function(t,e,a){"use strict";a.r(e);var n=a(41),s=Object(n.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"formfile"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#formfile"}},[t._v("#")]),t._v(" FormFile")]),t._v(" "),n("p",[n("code",[t._v("FormFile")]),t._v(" is a custom component wrapper around the Bootstrap-vue Form File\ncomponent. The purpose of this component is to upload files to the BMC.")]),t._v(" "),n("p",[t._v("To use this component:")]),t._v(" "),n("ol",[n("li",[t._v("Import it into the single file component (SFC)")]),t._v(" "),n("li",[t._v("Add the "),n("code",[t._v("<form-file />")]),t._v(" tag")]),t._v(" "),n("li",[t._v("Add the optional "),n("code",[t._v("id")]),t._v(" , "),n("code",[t._v("disabled")]),t._v(", "),n("code",[t._v("accept")]),t._v(" and "),n("code",[t._v("state")]),t._v(" prop as required")])]),t._v(" "),n("p",[n("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/form-file",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about the Bootstrap-vue Form File\ncomponent"),n("OutboundLink")],1)]),t._v(" "),n("h3",{attrs:{id:"optional-properties"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optional-properties"}},[t._v("#")]),t._v(" Optional properties")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("id")]),t._v("- Used to set the "),n("code",[t._v("id")]),t._v(" attribute on the rendered content, and used as the\nbase to generate any additional element IDs as needed")]),t._v(" "),n("li",[n("code",[t._v("disabled")]),t._v(" - When set to "),n("code",[t._v("true")]),t._v(", disables the component's functionality and\nplaces it in a disabled state")]),t._v(" "),n("li",[n("code",[t._v("accept")]),t._v(" - Set value to specify which file types to allow")]),t._v(" "),n("li",[n("code",[t._v("state")]),t._v(" - Controls the validation state appearance of the component. "),n("code",[t._v("true")]),t._v("\nfor valid, "),n("code",[t._v("false")]),t._v(" for invalid, or "),n("code",[t._v("null")]),t._v(" for no validation state")])]),t._v(" "),n("h2",{attrs:{id:"example-of-form-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#example-of-form-file"}},[t._v("#")]),t._v(" Example of form file")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form-file")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("image-file"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("accept")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v(".tar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("form-file")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[n("img",{attrs:{src:a(356),alt:"Formfile example in firmware"}})])])}),[],!1,null,null,null);e.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/19.781066f3.js b/assets/js/19.781066f3.js
new file mode 100644
index 00000000..5ec06cd8
--- /dev/null
+++ b/assets/js/19.781066f3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{357:function(t,e){t.exports="data:image/png;base64,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"},408:function(t,e,o){"use strict";o.r(e);var r=o(41),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"infotooltip"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#infotooltip"}},[t._v("#")]),t._v(" InfoTooltip")]),t._v(" "),r("p",[t._v("The "),r("code",[t._v("InfoTooltip")]),t._v(" is a custom component that uses a Bootstrap-vue tooltip with\nan info icon. This custom component requires a title property containing the\ntooltip text to display to the user.")]),t._v(" "),r("p",[r("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/tooltip",target:"_blank",rel:"noopener noreferrer"}},[t._v("Read more about the Bootstrap-vue tooltip\ncomponent"),r("OutboundLink")],1)]),t._v(" "),r("h2",{attrs:{id:"example"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),r("div",{staticClass:"language-vue extra-class"},[r("pre",{pre:!0,attrs:{class:"language-vue"}},[r("code",[t._v('<info-tooltip\n  :title="Title" //should be translated\n/>\n')])])]),r("p",[r("img",{attrs:{src:o(357),alt:"Tooltip example"}})])])}),[],!1,null,null,null);e.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/2.3066748c.js b/assets/js/2.3066748c.js
new file mode 100644
index 00000000..2b4ba995
--- /dev/null
+++ b/assets/js/2.3066748c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{298:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return l})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return v})),n.d(e,"j",(function(){return m}));n(65),n(42),n(299),n(300),n(162),n(64),n(92),n(27);var i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function u(t){return s.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(u(t))return t;var e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function p(t,e){var n=decodeURIComponent(t.hash),r=function(t){var e=t.match(i);if(e)return e[0]}(e);return(!r||n===r)&&o(t.path)===o(e)}function f(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){var i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;var r=e.split("/");n&&r[r.length-1]||r.pop();for(var a=t.replace(/^\//,"").split("/"),s=0;s<a.length;s++){var o=a[s];".."===o?r.pop():"."!==o&&r.push(o)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));for(var i=o(e),r=0;r<t.length;r++)if(o(t[r].regularPath)===i)return Object.assign({},t[r],{type:"page",path:h(t[r].path)});return console.error('[vuepress] No matching page found for sidebar item "'.concat(e,'"')),{}}function d(t,e,n,i){var r=n.pages,a=n.themeConfig,s=i&&a.locales&&a.locales[i]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return g(t);var o=s.sidebar||a.sidebar;if(o){var u=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(var n in e)if(0===(i=t,/(\.html|\/)$/.test(i)?i:i+"/").indexOf(encodeURI(n)))return{base:n,config:e[n]};var i;return{}}(e,o),l=u.base,c=u.config;return"auto"===c?g(t):c?c.map((function(t){return function t(e,n,i){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;if("string"==typeof e)return f(n,e,i);if(Array.isArray(e))return Object.assign(f(n,e[0],i),{title:e[1]});var a=e.children||[];return 0===a.length&&e.path?Object.assign(f(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map((function(e){return t(e,n,i,r+1)})),collapsable:!1!==e.collapsable}}(t,r,l)})):[]}return[]}function g(t){var e=v(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map((function(e){return{type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}}))}]}function v(t){var e;return(t=t.map((function(t){return Object.assign({},t)}))).forEach((function(t){2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)})),t.filter((function(t){return 2===t.level}))}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},299:function(t,e,n){"use strict";var i=n(158),r=n(5),a=n(13),s=n(23),o=n(160),u=n(161);i("match",1,(function(t,e,n){return[function(e){var n=s(this),i=null==e?void 0:e[t];return void 0!==i?i.call(e,n):new RegExp(e)[t](String(n))},function(t){var i=n(e,t,this);if(i.done)return i.value;var s=r(t),l=String(this);if(!s.global)return u(s,l);var c=s.unicode;s.lastIndex=0;for(var h,p=[],f=0;null!==(h=u(s,l));){var d=String(h[0]);p[f]=d,""===d&&(s.lastIndex=o(l,a(s.lastIndex),c)),f++}return 0===f?null:p}]}))},300:function(t,e,n){"use strict";var i=n(158),r=n(157),a=n(5),s=n(23),o=n(95),u=n(160),l=n(13),c=n(161),h=n(67),p=n(2),f=[].push,d=Math.min,g=!p((function(){return!RegExp(4294967295,"y")}));i("split",2,(function(t,e,n){var i;return i="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var i=String(s(this)),a=void 0===n?4294967295:n>>>0;if(0===a)return[];if(void 0===t)return[i];if(!r(t))return e.call(i,t,a);for(var o,u,l,c=[],p=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),d=0,g=new RegExp(t.source,p+"g");(o=h.call(g,i))&&!((u=g.lastIndex)>d&&(c.push(i.slice(d,o.index)),o.length>1&&o.index<i.length&&f.apply(c,o.slice(1)),l=o[0].length,d=u,c.length>=a));)g.lastIndex===o.index&&g.lastIndex++;return d===i.length?!l&&g.test("")||c.push(""):c.push(i.slice(d)),c.length>a?c.slice(0,a):c}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:e.call(this,t,n)}:e,[function(e,n){var r=s(this),a=null==e?void 0:e[t];return void 0!==a?a.call(e,r,n):i.call(String(r),e,n)},function(t,r){var s=n(i,t,this,r,i!==e);if(s.done)return s.value;var h=a(t),p=String(this),f=o(h,RegExp),v=h.unicode,m=(h.ignoreCase?"i":"")+(h.multiline?"m":"")+(h.unicode?"u":"")+(g?"y":"g"),b=new f(g?h:"^(?:"+h.source+")",m),k=void 0===r?4294967295:r>>>0;if(0===k)return[];if(0===p.length)return null===c(b,p)?[p]:[];for(var _=0,x=0,C=[];x<p.length;){b.lastIndex=g?x:0;var $,y=c(b,g?p:p.slice(x));if(null===y||($=d(l(b.lastIndex+(g?0:x)),p.length))===_)x=u(p,x,v);else{if(C.push(p.slice(_,x)),C.length===k)return C;for(var L=1;L<=y.length-1;L++)if(C.push(y[L]),C.length===k)return C;x=_=$}}return C.push(p.slice(_)),C}]}),!g)},301:function(t,e,n){},302:function(t,e,n){"use strict";var i=n(0),r=n(335).trim;i({target:"String",proto:!0,forced:n(336)("trim")},{trim:function(){return r(this)}})},303:function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},304:function(t,e,n){var i=n(8),r=n(3),a=n(94),s=n(337),o=n(7).f,u=n(66).f,l=n(157),c=n(159),h=n(165),p=n(18),f=n(2),d=n(28).set,g=n(164),v=n(1)("match"),m=r.RegExp,b=m.prototype,k=/a/g,_=/a/g,x=new m(k)!==k,C=h.UNSUPPORTED_Y;if(i&&a("RegExp",!x||C||f((function(){return _[v]=!1,m(k)!=k||m(_)==_||"/a/i"!=m(k,"i")})))){for(var $=function(t,e){var n,i=this instanceof $,r=l(t),a=void 0===e;if(!i&&r&&t.constructor===$&&a)return t;x?r&&!a&&(t=t.source):t instanceof $&&(a&&(e=c.call(t)),t=t.source),C&&(n=!!e&&e.indexOf("y")>-1)&&(e=e.replace(/y/g,""));var o=s(x?new m(t,e):m(t,e),i?this:b,$);return C&&n&&d(o,{sticky:n}),o},y=function(t){t in $||o($,t,{configurable:!0,get:function(){return m[t]},set:function(e){m[t]=e}})},L=u(m),w=0;L.length>w;)y(L[w++]);b.constructor=$,$.prototype=b,p(r,"RegExp",$)}g("RegExp")},305:function(t,e,n){"use strict";var i=n(18),r=n(5),a=n(2),s=n(159),o=RegExp.prototype,u=o.toString,l=a((function(){return"/a/b"!=u.call({source:"a",flags:"b"})})),c="toString"!=u.name;(l||c)&&i(RegExp.prototype,"toString",(function(){var t=r(this),e=String(t.source),n=t.flags;return"/"+e+"/"+String(void 0===n&&t instanceof RegExp&&!("flags"in o)?s.call(t):n)}),{unsafe:!0})},306:function(t,e,n){},307:function(t,e,n){},308:function(t,e,n){},309:function(t,e,n){},310:function(t,e,n){},311:function(t,e,n){},312:function(t,e){t.exports=function(t){return null==t}},313:function(t,e,n){},314:function(t,e,n){},315:function(t,e,n){},316:function(t,e,n){},317:function(t,e,n){},318:function(t,e,n){},329:function(t,e,n){"use strict";n.r(e);var i=n(298),r={name:"SidebarGroup",components:{DropdownTransition:n(330).a},props:["item","open","collapsable","depth"],beforeCreate:function(){this.$options.components.SidebarLinks=n(329).default},methods:{isActive:i.e}},a=(n(349),n(41)),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?n("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):n("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),n("DropdownTransition",[t.open||!t.collapsable?n("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;n(350),n(64);function o(t,e,n,i,r){var a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}};return r>2&&(a.style={"padding-left":r+"rem"}),t("RouterLink",a,n)}function u(t,e,n,r,a){var s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||s>a?null:t("ul",{class:"sidebar-sub-headers"},e.map((function(e){var l=Object(i.e)(r,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,l,e.level-1),u(t,e.children,n,r,a,s+1)])})))}var l={functional:!0,props:["item","sidebarDepth"],render:function(t,e){var n=e.parent,r=n.$page,a=(n.$site,n.$route),s=n.$themeConfig,l=n.$themeLocaleConfig,c=e.props,h=c.item,p=c.sidebarDepth,f=Object(i.e)(a,h.path),d="auto"===h.type?f||h.children.some((function(t){return Object(i.e)(a,h.basePath+"#"+t.slug)})):f,g="external"===h.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,h.path,h.title||h.path):o(t,h.path,h.title||h.path,d),v=[r.frontmatter.sidebarDepth,p,l.sidebarDepth,s.sidebarDepth,1].find((function(t){return void 0!==t})),m=l.displayAllHeaders||s.displayAllHeaders;return"auto"===h.type?[g,u(t,h.children,h.basePath,a,v)]:(d||m)&&h.headers&&!i.d.test(h.path)?[g,u(t,Object(i.c)(h.headers),h.path,a,v)]:g}};n(351);function c(t,e){if("group"===e.type){var n=e.path&&Object(i.e)(t,e.path),r=e.children.some((function(e){return"group"===e.type?c(t,e):"page"===e.type&&Object(i.e)(t,e.path)}));return n||r}return!1}var h={name:"SidebarLinks",components:{SidebarGroup:s,SidebarLink:Object(a.a)(l,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data:function(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route:function(){this.refreshIndex()}},created:function(){this.refreshIndex()},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n<e.length;n++){var i=e[n];if(c(t,i))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Object(i.e)(this.$route,t.regularPath)}}},p=Object(a.a)(h,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.items.length?n("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(e,i){return n("li",{key:i},["group"===e.type?n("SidebarGroup",{attrs:{item:e,open:i===t.openGroupIndex,collapsable:e.collapsable||e.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):n("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:e}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=p.exports},330:function(t,e,n){"use strict";var i={name:"DropdownTransition",methods:{setHeight:function(t){t.style.height=t.scrollHeight+"px"},unsetHeight:function(t){t.style.height=""}}},r=(n(341),n(41)),a=Object(r.a)(i,(function(){var t=this.$createElement;return(this._self._c||t)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},331:function(t,e,n){"use strict";var i=n(0),r=n(332);i({target:"String",proto:!0,forced:n(333)("link")},{link:function(t){return r(this,"a","href",t)}})},332:function(t,e,n){var i=n(23),r=/"/g;t.exports=function(t,e,n,a){var s=String(i(t)),o="<"+e;return""!==n&&(o+=" "+n+'="'+String(a).replace(r,"&quot;")+'"'),o+">"+s+"</"+e+">"}},333:function(t,e,n){var i=n(2);t.exports=function(t){return i((function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}))}},334:function(t,e,n){"use strict";n(301)},335:function(t,e,n){var i=n(23),r="["+n(303)+"]",a=RegExp("^"+r+r+"*"),s=RegExp(r+r+"*$"),o=function(t){return function(e){var n=String(i(e));return 1&t&&(n=n.replace(a,"")),2&t&&(n=n.replace(s,"")),n}};t.exports={start:o(1),end:o(2),trim:o(3)}},336:function(t,e,n){var i=n(2),r=n(303);t.exports=function(t){return i((function(){return!!r[t]()||"᠎"!="᠎"[t]()||r[t].name!==t}))}},337:function(t,e,n){var i=n(4),r=n(163);t.exports=function(t,e,n){var a,s;return r&&"function"==typeof(a=e.constructor)&&a!==n&&i(s=a.prototype)&&s!==n.prototype&&r(t,s),t}},338:function(t,e,n){"use strict";var i,r=n(0),a=n(24).f,s=n(13),o=n(96),u=n(23),l=n(97),c=n(20),h="".endsWith,p=Math.min,f=l("endsWith");r({target:"String",proto:!0,forced:!!(c||f||(i=a(String.prototype,"endsWith"),!i||i.writable))&&!f},{endsWith:function(t){var e=String(u(this));o(t);var n=arguments.length>1?arguments[1]:void 0,i=s(e.length),r=void 0===n?i:p(s(n),i),a=String(t);return h?h.call(e,a,r):e.slice(r-a.length,r)===a}})},339:function(t,e,n){"use strict";n(306)},340:function(t,e,n){"use strict";n(307)},341:function(t,e,n){"use strict";n(308)},342:function(t,e,n){"use strict";n(309)},343:function(t,e,n){"use strict";n(310)},344:function(t,e,n){"use strict";n(311)},345:function(t,e,n){"use strict";n(313)},346:function(t,e,n){var i=n(29),r=n(14),a=n(25);t.exports=function(t){return"string"==typeof t||!r(t)&&a(t)&&"[object String]"==i(t)}},347:function(t,e,n){"use strict";n(314)},348:function(t,e,n){"use strict";n(315)},349:function(t,e,n){"use strict";n(316)},350:function(t,e,n){"use strict";var i=n(0),r=n(43).find,a=n(93),s=!0;"find"in[]&&Array(1).find((function(){s=!1})),i({target:"Array",proto:!0,forced:s},{find:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}}),a("find")},351:function(t,e,n){"use strict";n(317)},352:function(t,e,n){"use strict";n(318)},390:function(t,e,n){"use strict";n.r(e);n(331),n(91);var i=n(298),r={name:"NavLink",props:{item:{required:!0}},computed:{link:function(){return Object(i.b)(this.item.link)},exact:function(){var t=this;return this.$site.locales?Object.keys(this.$site.locales).some((function(e){return e===t.link})):"/"===this.link},isNonHttpURI:function(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget:function(){return"_blank"===this.target},isInternal:function(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target:function(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel:function(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction:function(){this.$emit("focusout")}}},a=n(41),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isInternal?n("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction(e)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):n("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?n("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:s},computed:{data:function(){return this.$page.frontmatter},actionLink:function(){return{link:this.data.actionLink,text:this.data.actionText}}}},u=(n(334),Object(a.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[n("header",{staticClass:"hero"},[t.data.heroImage?n("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?n("h1",{attrs:{id:"main-title"}},[t._v("\n      "+t._s(t.data.heroText||t.$title||"Hello")+"\n    ")]):t._e(),t._v(" "),null!==t.data.tagline?n("p",{staticClass:"description"},[t._v("\n      "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n    ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?n("p",{staticClass:"action"},[n("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?n("div",{staticClass:"features"},t._l(t.data.features,(function(e,i){return n("div",{key:i,staticClass:"feature"},[n("h2",[t._v(t._s(e.title))]),t._v(" "),n("p",[t._v(t._s(e.details))])])})),0):t._e(),t._v(" "),n("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?n("div",{staticClass:"footer"},[t._v("\n    "+t._s(t.data.footer)+"\n  ")]):t._e()],1)}),[],!1,null,null,null).exports),l=(n(302),n(27),n(299),n(42),n(166),n(167),n(162),n(65),n(304),n(305),n(64),n(300),n(338),n(169)),c=n.n(l),h=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=c()(e,"title","");return c()(e,"frontmatter.tags")&&(i+=" ".concat(e.frontmatter.tags.join(" "))),n&&(i+=" ".concat(n)),p(t,i)},p=function(t,e){var n=function(t){return t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")},i=new RegExp("[^\0-]"),r=t.split(/\s+/g).map((function(t){return t.trim()})).filter((function(t){return!!t}));if(i.test(t))return r.some((function(t){return e.toLowerCase().indexOf(t)>-1}));var a=t.endsWith(" ");return new RegExp(r.map((function(t,e){return r.length!==e+1||a?"(?=.*\\b".concat(n(t),"\\b)"):"(?=.*\\b".concat(n(t),")")})).join("")+".+","gi").test(e)},f={name:"SearchBox",data:function(){return{query:"",focused:!1,focusIndex:0,placeholder:void 0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var t=this.query.trim().toLowerCase();if(t){for(var e=this.$site.pages,n=this.$site.themeConfig.searchMaxSuggestions||5,i=this.$localePath,r=[],a=0;a<e.length&&!(r.length>=n);a++){var s=e[a];if(this.getPageLocalePath(s)===i&&this.isSearchable(s))if(h(t,s))r.push(s);else if(s.headers)for(var o=0;o<s.headers.length&&!(r.length>=n);o++){var u=s.headers[o];u.title&&h(t,s,u.title)&&r.push(Object.assign({},s,{path:s.path+"#"+u.slug,header:u}))}}return r}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted:function(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy:function(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath:function(t){for(var e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable:function(t){var e=null;return null===e||(e=Array.isArray(e)?e:new Array(e)).filter((function(e){return t.path.match(e)})).length>0},onHotkey:function(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex<this.suggestions.length-1?this.focusIndex++:this.focusIndex=0)},go:function(t){this.showSuggestions&&(this.$router.push(this.suggestions[t].path),this.query="",this.focusIndex=0)},focus:function(t){this.focusIndex=t},unfocus:function(){this.focusIndex=-1}}},d=(n(339),Object(a.a)(f,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"search-box"},[n("input",{ref:"input",class:{focused:t.focused},attrs:{"aria-label":"Search",placeholder:t.placeholder,autocomplete:"off",spellcheck:"false"},domProps:{value:t.query},on:{input:function(e){t.query=e.target.value},focus:function(e){t.focused=!0},blur:function(e){t.focused=!1},keyup:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.go(t.focusIndex)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:t.onUp(e)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:t.onDown(e)}]}}),t._v(" "),t.showSuggestions?n("ul",{staticClass:"suggestions",class:{"align-right":t.alignRight},on:{mouseleave:t.unfocus}},t._l(t.suggestions,(function(e,i){return n("li",{key:i,staticClass:"suggestion",class:{focused:i===t.focusIndex},on:{mousedown:function(e){return t.go(i)},mouseenter:function(e){return t.focus(i)}}},[n("a",{attrs:{href:e.path},on:{click:function(t){t.preventDefault()}}},[n("span",{staticClass:"page-title"},[t._v(t._s(e.title||e.path))]),t._v(" "),e.header?n("span",{staticClass:"header"},[t._v("> "+t._s(e.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(340),Object(a.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[n("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[n("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),v=n(39),m=(n(168),n(330)),b=n(170),k=n.n(b),_={name:"DropdownLink",components:{NavLink:s,DropdownTransition:m.a},props:{item:{required:!0}},data:function(){return{open:!1}},computed:{dropdownAriaLabel:function(){return this.item.ariaLabel||this.item.text}},watch:{$route:function(){this.open=!1}},methods:{setOpen:function(t){this.open=t},isLastItemOfArray:function(t,e){return k()(e)===t},handleDropdown:function(){0===event.detail&&this.setOpen(!this.open)}}},x=(n(342),{name:"NavLinks",components:{NavLink:s,DropdownLink:Object(a.a)(_,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[n("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow down"})]),t._v(" "),n("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),n("DropdownTransition",[n("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(e,i){return n("li",{key:e.link||i,staticClass:"dropdown-item"},["links"===e.type?n("h4",[t._v("\n          "+t._s(e.text)+"\n        ")]):t._e(),t._v(" "),"links"===e.type?n("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(e.items,(function(i){return n("li",{key:i.link,staticClass:"dropdown-subitem"},[n("NavLink",{attrs:{item:i},on:{focusout:function(n){t.isLastItemOfArray(i,e.items)&&t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0):n("NavLink",{attrs:{item:e},on:{focusout:function(n){t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav:function(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav:function(){var t=this,e=this.$site.locales;if(e&&Object.keys(e).length>1){var n=this.$page.path,i=this.$router.options.routes,r=this.$site.themeConfig.locales||{},a={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(e).map((function(a){var s,o=e[a],u=r[a]&&r[a].label||o.lang;return o.lang===t.$lang?s=n:(s=n.replace(t.$localeConfig.path,a),i.some((function(t){return t.path===s}))||(s=a)),{text:u,link:s}}))};return[].concat(Object(v.a)(this.userNav),[a])}return this.userNav},userLinks:function(){return(this.nav||[]).map((function(t){return Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)})}))},repoLink:function(){var t=this.$site.themeConfig.repo;return t?/^https?:/.test(t)?t:"https://github.com/".concat(t):null},repoLabel:function(){if(this.repoLink){if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;for(var t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"],n=0;n<e.length;n++){var i=e[n];if(new RegExp(i,"i").test(t))return i}return"Source"}}}}),C=(n(343),Object(a.a)(x,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.userLinks.length||t.repoLink?n("nav",{staticClass:"nav-links"},[t._l(t.userLinks,(function(t){return n("div",{key:t.link,staticClass:"nav-item"},["links"===t.type?n("DropdownLink",{attrs:{item:t}}):n("NavLink",{attrs:{item:t}})],1)})),t._v(" "),t.repoLink?n("a",{staticClass:"repo-link",attrs:{href:t.repoLink,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n    "+t._s(t.repoLabel)+"\n    "),n("OutboundLink")],1):t._e()],2):t._e()}),[],!1,null,null,null).exports);function $(t,e){return t.ownerDocument.defaultView.getComputedStyle(t,null)[e]}var y={name:"Navbar",components:{SidebarButton:g,NavLinks:C,SearchBox:d,AlgoliaSearchBox:{}},data:function(){return{linksWrapMaxWidth:null}},computed:{algolia:function(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch:function(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}},mounted:function(){var t=this,e=parseInt($(this.$el,"paddingLeft"))+parseInt($(this.$el,"paddingRight")),n=function(){document.documentElement.clientWidth<719?t.linksWrapMaxWidth=null:t.linksWrapMaxWidth=t.$el.offsetWidth-e-(t.$refs.siteName&&t.$refs.siteName.offsetWidth||0)};n(),window.addEventListener("resize",n,!1)}},L=(n(344),Object(a.a)(y,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("header",{staticClass:"navbar"},[n("SidebarButton",{on:{"toggle-sidebar":function(e){return t.$emit("toggle-sidebar")}}}),t._v(" "),n("RouterLink",{staticClass:"home-link",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?n("img",{staticClass:"logo",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(" "),t.$siteTitle?n("span",{ref:"siteName",staticClass:"site-name",class:{"can-hide":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(" "),n("div",{staticClass:"links",style:t.linksWrapMaxWidth?{"max-width":t.linksWrapMaxWidth+"px"}:{}},[t.isAlgoliaSearch?n("AlgoliaSearchBox",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search&&!1!==t.$page.frontmatter.search?n("SearchBox"):t._e(),t._v(" "),n("NavLinks",{staticClass:"can-hide"})],1)],1)}),[],!1,null,null,null).exports),w=n(312),S=n.n(w),O={name:"PageEdit",computed:{lastUpdated:function(){return this.$page.lastUpdated},lastUpdatedText:function(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink:function(){var t=S()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,e=this.$site.themeConfig,n=e.repo,i=e.docsDir,r=void 0===i?"":i,a=e.docsBranch,s=void 0===a?"master":a,o=e.docsRepo,u=void 0===o?n:o;return t&&u&&this.$page.relativePath?this.createEditLink(n,u,r,s,this.$page.relativePath):null},editLinkText:function(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink:function(t,e,n,r,a){if(/bitbucket.org/.test(e))return e.replace(i.a,"")+"/src"+"/".concat(r,"/")+(n?n.replace(i.a,"")+"/":"")+a+"?mode=edit&spa=0&at=".concat(r,"&fileviewer=file-view-default");return/gitlab.com/.test(e)?e.replace(i.a,"")+"/-/edit"+"/".concat(r,"/")+(n?n.replace(i.a,"")+"/":"")+a:(i.i.test(e)?e:"https://github.com/".concat(e)).replace(i.a,"")+"/edit"+"/".concat(r,"/")+(n?n.replace(i.a,"")+"/":"")+a}}},I=(n(345),Object(a.a)(O,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("footer",{staticClass:"page-edit"},[t.editLink?n("div",{staticClass:"edit-link"},[n("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),n("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?n("div",{staticClass:"last-updated"},[n("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),n("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null).exports),E=n(346),j=n.n(E),N={name:"PageNav",props:["sidebarItems"],computed:{prev:function(){return R(T.PREV,this)},next:function(){return R(T.NEXT,this)}}};var T={NEXT:{resolveLink:function(t,e){return P(t,e,1)},getThemeLinkConfig:function(t){return t.nextLinks},getPageLinkConfig:function(t){return t.frontmatter.next}},PREV:{resolveLink:function(t,e){return P(t,e,-1)},getThemeLinkConfig:function(t){return t.prevLinks},getPageLinkConfig:function(t){return t.frontmatter.prev}}};function R(t,e){var n=e.$themeConfig,r=e.$page,a=e.$route,s=e.$site,o=e.sidebarItems,u=t.resolveLink,l=t.getThemeLinkConfig,c=t.getPageLinkConfig,h=l(n),p=c(r),f=S()(p)?h:p;return!1===f?void 0:j()(f)?Object(i.k)(s.pages,f,a.path):u(r,o)}function P(t,e,n){var i=[];!function t(e,n){for(var i=0,r=e.length;i<r;i++)"group"===e[i].type?t(e[i].children||[],n):n.push(e[i])}(e,i);for(var r=0;r<i.length;r++){var a=i[r];if("page"===a.type&&a.path===decodeURIComponent(t.path))return i[r+n]}}var A=N,D=(n(347),{components:{PageEdit:I,PageNav:Object(a.a)(A,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.prev||t.next?n("div",{staticClass:"page-nav"},[n("p",{staticClass:"inner"},[t.prev?n("span",{staticClass:"prev"},[t._v("\n      ←\n      "),"external"===t.prev.type?n("a",{staticClass:"prev",attrs:{href:t.prev.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n\n        "),n("OutboundLink")],1):n("RouterLink",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n      ")])],1):t._e(),t._v(" "),t.next?n("span",{staticClass:"next"},["external"===t.next.type?n("a",{attrs:{href:t.next.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n\n        "),n("OutboundLink")],1):n("RouterLink",{attrs:{to:t.next.path}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n      ")]),t._v("\n      →\n    ")],1):t._e()])]):t._e()}),[],!1,null,null,null).exports},props:["sidebarItems"]}),U=(n(348),Object(a.a)(D,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"page"},[t._t("top"),t._v(" "),n("Content",{staticClass:"theme-default-content"}),t._v(" "),n("PageEdit"),t._v(" "),n("PageNav",t._b({},"PageNav",{sidebarItems:t.sidebarItems},!1)),t._v(" "),t._t("bottom")],2)}),[],!1,null,null,null).exports),H={name:"Sidebar",components:{SidebarLinks:n(329).default,NavLinks:C},props:["items"]},W=(n(352),{name:"Layout",components:{Home:u,Page:U,Sidebar:Object(a.a)(H,(function(){var t=this.$createElement,e=this._self._c||t;return e("aside",{staticClass:"sidebar"},[e("NavLinks"),this._v(" "),this._t("top"),this._v(" "),e("SidebarLinks",{attrs:{depth:0,items:this.items}}),this._v(" "),this._t("bottom")],2)}),[],!1,null,null,null).exports,Navbar:L},data:function(){return{isSidebarOpen:!1}},computed:{shouldShowNavbar:function(){var t=this.$site.themeConfig;return!1!==this.$page.frontmatter.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar:function(){var t=this.$page.frontmatter;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems:function(){return Object(i.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses:function(){var t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted:function(){var t=this;this.$router.afterEach((function(){t.isSidebarOpen=!1}))},methods:{toggleSidebar:function(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)},onTouchStart:function(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd:function(t){var e=t.changedTouches[0].clientX-this.touchStart.x,n=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),G=Object(a.a)(W,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?n("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),n("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),n("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?n("Home"):n("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.default=G.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/20.afaf92e0.js b/assets/js/20.afaf92e0.js
new file mode 100644
index 00000000..5900d9e1
--- /dev/null
+++ b/assets/js/20.afaf92e0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{391:function(t,e,s){"use strict";s.r(e);var n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(41),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n      Take me home.\n    ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/21.f51dd518.js b/assets/js/21.f51dd518.js
new file mode 100644
index 00000000..1f118a94
--- /dev/null
+++ b/assets/js/21.f51dd518.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{401:function(e,t,a){"use strict";a.r(t);var o=a(41),s=Object(o.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"build-customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-customization"}},[e._v("#")]),e._v(" Build Customization")]),e._v(" "),a("p",[e._v("This document provides instructions for how to add environment specific\nmodifications to the Web UI.")]),e._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"#setup"}},[e._v("Setup")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#store"}},[e._v("Store")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#router"}},[e._v("Router")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#app-navigation"}},[e._v("App Navigation")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#theming"}},[e._v("Theming")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#local-development"}},[e._v("Local development")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#production-build"}},[e._v("Production build")])])]),e._v(" "),a("h2",{attrs:{id:"setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),a("ol",[a("li",[e._v("Create a "),a("code",[e._v(".env.<ENV_NAME>")]),e._v(" file in the project root")]),e._v(" "),a("li",[e._v("Add "),a("code",[e._v("NODE_ENV=production")]),e._v(" key value pair in the file")]),e._v(" "),a("li",[e._v("Add "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" key with the value set to the new environment name")])]),e._v(" "),a("p",[e._v("Example "),a("code",[e._v(".env.ibm")]),e._v(":")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("NODE_ENV=production\nVUE_APP_ENV_NAME=ibm\n")])])]),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[e._v("#")]),e._v(" Store")]),e._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[e._v("TIP")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://vuex.vuejs.org/guide/modules.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuex store modules"),a("OutboundLink")],1),e._v(" contain the\napplication's API calls.")])]),e._v(" "),a("ol",[a("li",[e._v("If making customizations to the default store, add "),a("code",[e._v("CUSTOM_STORE=true")]),e._v(" key\nvalue pair to the new .env file.")]),e._v(" "),a("li",[e._v("Create a "),a("code",[e._v("<ENV_NAME>.js")]),e._v(" file in "),a("code",[e._v("src/env/store")]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),a("p",[e._v("The filename needs to match the "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" value defined in the\n.env file. The store import in "),a("code",[e._v("src/main.js")]),e._v(" will resolve to this new\nfile.")])])]),e._v(" "),a("li",[e._v("Import the base store")]),e._v(" "),a("li",[e._v("Import environment specific store modules")]),e._v(" "),a("li",[e._v("Use the "),a("a",{attrs:{href:"https://vuex.vuejs.org/api/#registermodule",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuex"),a("OutboundLink")],1),e._v(" "),a("code",[e._v("registerModule")]),e._v("\nand "),a("code",[e._v("unregisterModule")]),e._v(" instance methods to add/remove store modules")]),e._v(" "),a("li",[e._v("Add default export")])]),e._v(" "),a("p",[e._v("Example "),a("code",[e._v("src/env/store/ibm.js")]),e._v(":")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("import store from '@/store; //@ aliases to src directory\nimport HmcStore from './Hmc/HmcStore';\n\nstore.registerModule('hmc', HmcStore);\n\nexport default store;\n")])])]),a("h2",{attrs:{id:"router"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#router"}},[e._v("#")]),e._v(" Router")]),e._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[e._v("TIP")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://router.vuejs.org/guide/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue Router"),a("OutboundLink")],1),e._v(" determines which pages are\naccessible in the UI.")])]),e._v(" "),a("ol",[a("li",[e._v("If making customizations to the default router, add "),a("code",[e._v("CUSTOM_ROUTER=true")]),e._v(" key\nvalue pair to the new .env file.")]),e._v(" "),a("li",[e._v("Create a "),a("code",[e._v("<ENV_NAME>.js")]),e._v(" file in "),a("code",[e._v("src/env/router")]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),a("p",[e._v("The filename needs to match the "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" value defined in the\n.env file. The routes import in "),a("code",[e._v("src/router/index.js")]),e._v(" will resolve to this\nnew file.")])])]),e._v(" "),a("li",[e._v("Define new "),a("a",{attrs:{href:"https://router.vuejs.org/api/#routes",target:"_blank",rel:"noopener noreferrer"}},[e._v("routes"),a("OutboundLink")],1),e._v("."),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[e._v("TIP")]),e._v(" "),a("p",[e._v("Use static imports (over lazy-loading routes) to avoid creating separate\nJS chunks. Static imports also helps to keep the total build size down.")])])]),e._v(" "),a("li",[e._v("Add default export")])]),e._v(" "),a("h2",{attrs:{id:"app-navigation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#app-navigation"}},[e._v("#")]),e._v(" App navigation")]),e._v(" "),a("p",[e._v("The Vue Router definition is closely tied to the app navigation but should be\nconfigured separately. The Vue Router is responsible for defining the\napplication routes which is not always the same as what is visible in the app\nnavigation. This configuration will make customizations to the rendered markup\nin src/components/AppNavigation/AppNavigation.vue.")]),e._v(" "),a("ol",[a("li",[e._v("If making customizations to the app navigation, add "),a("code",[e._v("CUSTOM_APP_NAV=true")]),e._v(" key\nvalue pair to the new .env file.")]),e._v(" "),a("li",[e._v("Create a "),a("code",[e._v("<ENV_NAME>.js")]),e._v(" file in "),a("code",[e._v("src/env/components/AppNavigation")]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),a("p",[e._v("The filename needs to match the "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" value defined in the\n.env file. The AppNavigationMixin import in\n"),a("code",[e._v("src/components/AppNavigation/AppNavigation.vue")]),e._v(" will resolve to this new\nfile.")])])]),e._v(" "),a("li",[e._v("Your custom mixin should follow a very similar structure to the default\nAppNavigationMixin.js file. It should include a data property named\n"),a("code",[e._v("navigationItems")]),e._v(" that should be an array of of navigation objects. Each\nnavigation object should have an "),a("code",[e._v("id")]),e._v(" and "),a("code",[e._v("label")]),e._v(" property defined.\nOptionally it can include "),a("code",[e._v("icon")]),e._v(", "),a("code",[e._v("route")]),e._v(", or "),a("code",[e._v("children")]),e._v(" properties.")]),e._v(" "),a("li",[e._v("Add default export")])]),e._v(" "),a("h2",{attrs:{id:"theming"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theming"}},[e._v("#")]),e._v(" Theming")]),e._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[e._v("TIP")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.5/getting-started/theming/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Bootstrap theming"),a("OutboundLink")],1),e._v("\nallows for easy visual customizations.")])]),e._v(" "),a("ol",[a("li",[e._v("If making customizations to the default styles, add "),a("code",[e._v("CUSTOM_STYLES=true")]),e._v(" key\nvalue pair to the new .env file.")]),e._v(" "),a("li",[e._v("Create a "),a("code",[e._v("_<ENV_NAME>.scss")]),e._v(" partial in "),a("code",[e._v("src/env/assets/styles")]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),a("p",[e._v("The filename needs to match the "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" value defined in the\n.env file. The webpack sass loader will attempt to import a file with this\nname.")])])]),e._v(" "),a("li",[e._v("Add style customizations. Refer to "),a("a",{attrs:{href:"https://getbootstrap.com/docs/4.5/getting-started/theming/",target:"_blank",rel:"noopener noreferrer"}},[e._v("bootstrap documentation"),a("OutboundLink")],1),e._v("\nfor details about "),a("a",{attrs:{href:"https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults",target:"_blank",rel:"noopener noreferrer"}},[e._v("color\noverrides"),a("OutboundLink")],1),e._v("\nand "),a("a",{attrs:{href:"https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options",target:"_blank",rel:"noopener noreferrer"}},[e._v("other customizable\noptions"),a("OutboundLink")],1),e._v(".")])]),e._v(" "),a("p",[e._v("Example for adding custom colors")]),e._v(" "),a("p",[a("code",[e._v("src/env/assets/styles/_ibm.scss")])]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("// Custom theme colors\n\n$primary: rebeccapurple;\n$success: lime;\n")])])]),a("h2",{attrs:{id:"local-development"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-development"}},[e._v("#")]),e._v(" Local development")]),e._v(" "),a("ol",[a("li",[e._v("Add the same "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" key value pair to your\n"),a("code",[e._v("env.development.local")]),e._v(" file.")]),e._v(" "),a("li",[e._v("Use serve script"),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("npm run serve\n")])])])])]),e._v(" "),a("h2",{attrs:{id:"production-build"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#production-build"}},[e._v("#")]),e._v(" Production build")]),e._v(" "),a("p",[e._v("Run npm build script with vue-cli "),a("code",[e._v("--mode")]),e._v(" "),a("a",{attrs:{href:"https://cli.vuejs.org/guide/mode-and-env.html#modes",target:"_blank",rel:"noopener noreferrer"}},[e._v("option\nflag"),a("OutboundLink")],1),e._v(". This requires\n"),a("a",{attrs:{href:"#setup"}},[e._v("corresponding .env file to exist")]),e._v(".")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("npm run build -- --mode ibm\n")])])]),a("p",[a("strong",[e._v("OR")])]),e._v(" "),a("p",[e._v("pass env variable directly to script")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("VUE_APP_ENV_NAME=ibm npm run build\n")])])])])}),[],!1,null,null,null);t.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/22.22ba3b96.js b/assets/js/22.22ba3b96.js
new file mode 100644
index 00000000..96220691
--- /dev/null
+++ b/assets/js/22.22ba3b96.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{402:function(s,t,a){"use strict";a.r(t);var n=a(41),e=Object(n.a)({},(function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[a("h1",{attrs:{id:"presentation-layer-architecture"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#presentation-layer-architecture"}},[s._v("#")]),s._v(" Presentation Layer Architecture")]),s._v(" "),a("p",[s._v("This section discusses the structure and purpose of the SCSS files and how to\ncustomize the application using Bootstrap theming.")]),s._v(" "),a("p",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming",target:"_blank",rel:"noopener noreferrer"}},[s._v("Read more about Bootstrap\nTheming"),a("OutboundLink")],1)]),s._v(" "),a("h2",{attrs:{id:"scss-directory-structure"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scss-directory-structure"}},[s._v("#")]),s._v(" SCSS Directory Structure")]),s._v(" "),a("h3",{attrs:{id:"bmc-directory"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bmc-directory"}},[s._v("#")]),s._v(" "),a("code",[s._v("bmc")]),s._v(" Directory")]),s._v(" "),a("p",[s._v("The "),a("code",[s._v("bmc")]),s._v(" directory contains Sass helpers and default styles for customizing the OpenBMC\nWeb UI.")]),s._v(" "),a("div",{staticClass:"language- extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[s._v(".\n├─ src\n   ├─ assets\n      ├─ styles\n         ├─ bmc\n            ├─ custom\n            └─ helpers\n         ├─ bootstrap\n         └─ _obmc-custom.scss\n")])])]),a("h3",{attrs:{id:"custom-directory"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-directory"}},[s._v("#")]),s._v(" "),a("code",[s._v("custom")]),s._v(" Directory")]),s._v(" "),a("p",[s._v("The "),a("code",[s._v("custom")]),s._v(" Directory imports all the styles needed to customize the UI. These\nare small changes used to reach parity with the OpenBMC Design Workgroup's\nagreed-upon design. The file naming convention closely follows the Bootstrap or\nBoostrap-vue library file naming since most of the ruleset selectors in these\nfiles are based on these two libraries.")]),s._v(" "),a("div",{staticClass:"language- extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[s._v(".\n├─ src\n   ├─ assets\n      ├─ styles\n         ├─ bmc\n            ├─ custom\n               ├─ alert.scss\n               ├─ _badge.scss\n               ├─ _base.scss\n               ├─ _bootstrap-grid.scss\n               ├─ _buttons.scss\n               ├─ _calendar.scss\n               ├─ _card.scss\n               ├─ _dropdown.scss\n               ├─ _forms.scss\n               ├─ _index.scss\n               ├─ _kvm.scss\n               ├─ _modal.scss\n               ├─ _pagination.scss\n               ├─ _sol.scss\n               ├─ _tables.scss\n               └─ _toasts.scss\n         ├─ helpers\n         ├─ bootstrap\n         └─ _obmc-custom.scss\n")])])]),a("h3",{attrs:{id:"helpers-directory"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#helpers-directory"}},[s._v("#")]),s._v(" "),a("code",[s._v("helpers")]),s._v(" Directory")]),s._v(" "),a("p",[s._v("The "),a("code",[s._v("helpers")]),s._v(" directory contains a set of Sass helper files containing Sass\nvariables that establish the custom theme of the application.")]),s._v(" "),a("div",{staticClass:"language- extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[s._v(".\n├─ src\n   ├─ assets\n      ├─ styles\n         ├─ bmc\n         ├─ helpers\n                ├─ _colors.scss\n                ├─ _functions.scss\n                ├─ _index.scss\n                ├─ _motion.scss\n                └─ _variables.scss\n         ├─ bootstrap\n         └─ _obmc-custom.scss\n")])])]),a("h4",{attrs:{id:"colors-scss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colors-scss"}},[s._v("#")]),s._v(" "),a("code",[s._v("_colors.scss")])]),s._v(" "),a("p",[s._v("The "),a("code",[s._v("_colors.scss")]),s._v(" file sets all the SASS variables and color maps for the OpenBMC\nWeb UI. Any color settings needed to meet company brand guidelines will happen\nin this file.")]),s._v(" "),a("h5",{attrs:{id:"sass-color-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sass-color-variables"}},[s._v("#")]),s._v(" Sass Color Variables")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$black")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #000"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$white")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #fff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$blue-500")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #2d60e5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$green-500")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #0a7d06"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$red-500")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #da1416"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$yellow-500")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #efc100"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-100")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #f4f4f4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-200")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #e6e6e6"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-300")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #d8d8d8"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-400")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #cccccc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-500")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #b3b3b3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-600")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #999999"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-700")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #666666"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-800")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #3f3f3f"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-900")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #161616"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h5",{attrs:{id:"custom-color-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-color-variables"}},[s._v("#")]),s._v(" Custom Color Variables")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Sass Base Color Variables")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$blue")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$blue-500")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$green")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$green-500")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$red")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$red-500")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$yellow")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$yellow-500")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h5",{attrs:{id:"custom-colors-map"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-colors-map"}},[s._v("#")]),s._v(" Custom Colors Map")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$colors")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"blue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$blue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"green"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$green")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"red"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$red")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"yellow"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$yellow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h5",{attrs:{id:"custom-theme-color-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme-color-variables"}},[s._v("#")]),s._v(" Custom Theme Color Variables")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Sass Theme Color Variables")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Can be used as variants")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$danger")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$red")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$dark")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-900")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$info")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$blue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$light")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-100")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$primary")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$blue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$secondary")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$gray-800")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$success")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$green")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$warning")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$yellow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h5",{attrs:{id:"custom-theme-colors-map"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme-colors-map"}},[s._v("#")]),s._v(" Custom Theme Colors Map")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$theme-colors")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"primary"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$primary")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"secondary"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$secondary")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"dark"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$dark")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"light"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$light")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"danger"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$danger")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"info"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$info")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"success"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$success")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"warning"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$warning")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h5",{attrs:{id:"color-resources"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-resources"}},[s._v("#")]),s._v(" Color Resources")]),s._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#color",target:"_blank",rel:"noopener noreferrer"}},[s._v("Learn more about Bootstrap\ncolors"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables",target:"_blank",rel:"noopener noreferrer"}},[s._v("Learn more about Bootstrap\nvariables"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"/guide/guidelines/colors"}},[s._v("View the color palette and hex values in the color\nguidelines")])])]),s._v(" "),a("h4",{attrs:{id:"functions-scss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#functions-scss"}},[s._v("#")]),s._v(" "),a("code",[s._v("_functions.scss")])]),s._v(" "),a("p",[s._v("Two functions provide a customized way to set color highlights. The\n"),a("code",[s._v("theme-color-light")]),s._v(" and "),a("code",[s._v("theme-color-dark")]),s._v(" are custom functions used to create\ncolors for the "),a("code",[s._v("alert")]),s._v(", "),a("code",[s._v("badge")]),s._v(", "),a("code",[s._v("card")]),s._v(", and "),a("code",[s._v("toast")]),s._v(" components. They have also\nset color highlights for some pseudo-elements like "),a("code",[s._v(": hover")]),s._v(".")]),s._v(" "),a("h5",{attrs:{id:"functions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#functions"}},[s._v("#")]),s._v(" Functions")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// This function is usually used to get a lighter")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// theme variant color to use as a background color")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("@function")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color-light")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("@return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color-level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" -11.3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("@function")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color-dark")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("@return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color-level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),a("h5",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[s._v("#")]),s._v(" Examples")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".b-table-sort-icon-left ")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-position")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" left "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("calc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("1.5rem "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("/")]),s._v(" 2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" center "),a("span",{pre:!0,attrs:{class:"token important"}},[s._v("!important")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("padding-left")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("calc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("1.2rem "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("+")]),s._v(" 0.65em"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token important"}},[s._v("!important")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token selector"}},[a("span",{pre:!0,attrs:{class:"token parent important"}},[s._v("&")]),s._v(":focus ")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("outline")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" inset 0 0 0 2px "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'primary'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token important"}},[s._v("!important")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token selector"}},[a("span",{pre:!0,attrs:{class:"token parent important"}},[s._v("&")]),s._v(":hover ")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color-dark")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'light'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[a("span",{pre:!0,attrs:{class:"token parent important"}},[s._v("&")]),s._v(".alert-info ")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("border-left-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"info"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color-light")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"info"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("fill")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("theme-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"info"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),a("h4",{attrs:{id:"motion-scss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#motion-scss"}},[s._v("#")]),s._v(" "),a("code",[s._v("_motion.scss")])]),s._v(" "),a("p",[s._v("This bezier curves and durations in this file determine the motion styles\nthroughout the application. These guidelines from the Cabon Design System avoid\neasing curves that are unnatural, distracting, or purely decorative.")]),s._v(" "),a("h5",{attrs:{id:"motion-styles"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#motion-styles"}},[s._v("#")]),s._v(" Motion Styles")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$duration--fast-01")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 70ms"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//Micro-interactions such as button and toggle")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$duration--fast-02")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 110ms"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//Micro-interactions such as fade")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$duration--moderate-01")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 150ms"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//Micro-interactions, small expansion, short distance movements")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$duration--moderate-02")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 240ms"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//Expansion, system communication, toast")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$duration--slow-01")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 400ms"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//Large expansion, important system notifications")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$duration--slow-02")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 700ms"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//Background dimming")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$standard-easing--productive")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("cubic-bezier")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.38"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.9"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$standard-easing--expressive")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("cubic-bezier")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("0.4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.14"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$entrance-easing--productive")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("cubic-bezier")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.38"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.9"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$entrance-easing--expressive")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("cubic-bezier")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$exit-easing--productive")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("cubic-bezier")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.9"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$exit-easing--expressive")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("cubic-bezier")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("0.4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 0.14"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h5",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[s._v("#")]),s._v(" Example")]),s._v(" "),a("div",{staticClass:"language-scss extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("br"),a("br"),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".link-skip-nav ")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("position")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" -60px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("left")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 0.5rem"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("z-index")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$zindex-popover")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("transition")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$duration--moderate-01")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$exit-easing--expressive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[a("span",{pre:!0,attrs:{class:"token parent important"}},[s._v("&")]),s._v(":focus ")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 0.5rem"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("transition-timing-function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$entrance-easing--expressive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),a("h5",{attrs:{id:"motion-resources"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#motion-resources"}},[s._v("#")]),s._v(" Motion Resources")]),s._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://www.smashingmagazine.com/2019/02/animation-design-system/",target:"_blank",rel:"noopener noreferrer"}},[s._v("Including Animation In Your Design\nSystem"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"https://www.carbondesignsystem.com/guidelines/motion/basics/",target:"_blank",rel:"noopener noreferrer"}},[s._v("Carbon Design System motion\nguidelines"),a("OutboundLink")],1)])]),s._v(" "),a("h4",{attrs:{id:"variables-scss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#variables-scss"}},[s._v("#")]),s._v(" "),a("code",[s._v("_variables.scss")])]),s._v(" "),a("p",[s._v("This file contains all the global Sass options. There are Bootstrap option\noverrides, Bootstrap global variable overrides, and custom BMC global variables.\nRead more about these in the "),a("a",{attrs:{href:"/customize/theme"}},[s._v("Customization section")]),s._v(".")]),s._v(" "),a("h3",{attrs:{id:"bootstrap-directory"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bootstrap-directory"}},[s._v("#")]),s._v(" "),a("code",[s._v("bootstrap")]),s._v(" Directory")]),s._v(" "),a("p",[s._v("The "),a("code",[s._v("bootstrap")]),s._v(" directory contains all the import references. The references are\nsplit into multiple files to support import order based on dependency. Helper\nstyles need to be imported before all other styles.")]),s._v(" "),a("div",{staticClass:"language- extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[s._v(" ")]),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[s._v(".\n├─ src\n   ├─ assets\n      ├─ styles\n         ├─ bmc\n         ├─ bootstrap\n            ├─ _helpers.scss\n            └─ _index.scss\n         └─ _obmc-custom.scss\n")])])]),a("h4",{attrs:{id:"helpers-scss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#helpers-scss"}},[s._v("#")]),s._v(" "),a("code",[s._v("_helpers.scss")])]),s._v(" "),a("p",[s._v("This file contains all the helper import references for Bootstrap.")]),s._v(" "),a("h4",{attrs:{id:"index-scss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#index-scss"}},[s._v("#")]),s._v(" "),a("code",[s._v("_index.scss")])]),s._v(" "),a("p",[s._v("This file contains all the import references needed to support the base,\ncomponents, and utility styles.")]),s._v(" "),a("h3",{attrs:{id:"obmc-custom-scss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#obmc-custom-scss"}},[s._v("#")]),s._v(" "),a("code",[s._v("_obmc-custom.scss")])]),s._v(" "),a("div",{staticClass:"language- extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[s._v(".\n├─ src\n   ├─ assets\n      ├─ styles\n         ├─ bmc\n         ├─ bootstrap\n         └─ _obmc-custom.scss\n")])])]),a("p",[s._v("The "),a("code",[s._v("obmc-custom.scss")]),s._v(" file defines all of the presentational layer\ndependencies.")]),s._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options",target:"_blank",rel:"noopener noreferrer"}},[s._v("Read more about Bootstrap\noptions"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#importing",target:"_blank",rel:"noopener noreferrer"}},[s._v("Read more about\nImporting"),a("OutboundLink")],1)])]),s._v(" "),a("h2",{attrs:{id:"component-view-styles"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#component-view-styles"}},[s._v("#")]),s._v(" Component / View Styles")]),s._v(" "),a("p",[s._v("Some stylistic changes only apply to a single-file component or view instance.\nIn this case, rather than adding a Sass file, the scoped styles include the\nstyles in the component's "),a("code",[s._v("<style>")]),s._v(" block. It is required to import the\n"),a("code",[s._v("_helpers")]),s._v(" Sass file when using a BMC or Bootstrap variable in the component's\n"),a("code",[s._v("<style>")]),s._v(" block. Without this import, webpack cannot compile the OpenBMC Web UI\nCSS styles correctly.")]),s._v(" "),a("h3",{attrs:{id:"scoped-style-block-using-sass"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-style-block-using-sass"}},[s._v("#")]),s._v(" Scoped style block using SASS")]),s._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("scoped")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("lang")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("scss"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  ...\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n")])])]),a("h3",{attrs:{id:"scoped-style-block-using-css"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-style-block-using-css"}},[s._v("#")]),s._v(" Scoped style block using CSS")]),s._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("scoped")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  ..."),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n")])])]),a("h3",{attrs:{id:"example-pagesection-vue"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example-pagesection-vue"}},[s._v("#")]),s._v(" Example - PageSection.vue")]),s._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("lang")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("scss"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),s._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("scoped")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".page-section")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("margin-bottom")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" $spacer * 2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[s._v("h2")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token atrule"}},[a("span",{pre:!0,attrs:{class:"token rule"}},[s._v("@include")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("$h3-font-size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")])]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("margin-bottom")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" $spacer"),a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(";\n    &::after")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('""')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 100px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 1px solid $gray-300"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("margin-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 10px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n")])])]),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[s._v("TIP")]),s._v(" "),a("p",[s._v("You might notice that there is an HTML element, "),a("code",[s._v("<h2>")]),s._v(", used in the example. This is an anti-pattern in global "),a("code",[s._v(".scss")]),s._v(" files. However, in a single file component that generates the markup it is acceptable.")])]),s._v(" "),a("p",[a("a",{attrs:{href:"https://vuejs.org/v2/guide/single-file-components.html",target:"_blank",rel:"noopener noreferrer"}},[s._v("Learn more about single file components"),a("OutboundLink")],1)]),s._v(" "),a("p",[s._v("Customization of the application requires knowledge of Sass and CSS. It also\nwill require becoming familiar with the Bootstrap and Bootstrap-Vue component\nlibraries. This section outlines the global options and variables that can be\nremoved or updated to meet organizational brand guidelines.")])])}),[],!1,null,null,null);t.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/23.42b49486.js b/assets/js/23.42b49486.js
new file mode 100644
index 00000000..321dd587
--- /dev/null
+++ b/assets/js/23.42b49486.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{406:function(e,t,a){"use strict";a.r(t);var s=a(41),o=Object(s.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"theme-customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme-customization"}},[e._v("#")]),e._v(" Theme customization")]),e._v(" "),a("p",[e._v("Customization of the application requires knowledge of Sass and CSS. It also\nwill require becoming familiar with the Bootstrap and Bootstrap-Vue component\nlibraries. This section outlines the global options and variables that can be\nremoved or updated to meet organizational brand guidelines.")]),e._v(" "),a("h2",{attrs:{id:"environment-specific-builds"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#environment-specific-builds"}},[e._v("#")]),e._v(" Environment specific builds")]),e._v(" "),a("p",[e._v("Any organization can create a build that meets their branding and other\ncustomization needs. This includes customization of the state store, routing,\napplication navigation, and theming.")]),e._v(" "),a("p",[a("a",{attrs:{href:"/customization/build"}},[e._v("Read more in the Build Customization section")])]),e._v(" "),a("h3",{attrs:{id:"configuring-environment-specific-builds"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#configuring-environment-specific-builds"}},[e._v("#")]),e._v(" Configuring environment specific builds")]),e._v(" "),a("p",[e._v("The complete instructions can be found in the "),a("code",[e._v("env")]),e._v(" directory in a file called\nenv.md or by viewing the "),a("RouterLink",{attrs:{to:"/customization/env.html"}},[e._v("Configuring environment specific builds\npage")])],1),e._v(" "),a("h2",{attrs:{id:"bootstrap-sass-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bootstrap-sass-options"}},[e._v("#")]),e._v(" Bootstrap Sass Options")]),e._v(" "),a("p",[e._v("The Bootstrap Sass options are global styling toggles. The naming convention for\nthese built-in variables is "),a("code",[e._v("enabled-*")]),e._v(".")]),e._v(" "),a("h3",{attrs:{id:"enable-rounded"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enable-rounded"}},[e._v("#")]),e._v(" $enable-rounded")]),e._v(" "),a("p",[e._v("This option enables or disables the border-radius styles on various components.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("false")]),e._v(" to remove rounded corners on all container elements and buttons")])]),e._v(" "),a("h3",{attrs:{id:"enable-validation-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enable-validation-icons"}},[e._v("#")]),e._v(" $enable-validation-icons")]),e._v(" "),a("p",[e._v("This option enables or disables background-image icons within textual inputs and\nsome custom forms for validation states.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("false")]),e._v(" due to inability to style icons using CSS")])]),e._v(" "),a("h3",{attrs:{id:"more-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-information"}},[e._v("#")]),e._v(" More information")]),e._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options",target:"_blank",rel:"noopener noreferrer"}},[e._v("View all the Bootstrap Sass\nOptions"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"bootstrap-sass-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bootstrap-sass-variables"}},[e._v("#")]),e._v(" Bootstrap Sass Variables")]),e._v(" "),a("p",[e._v("These are global variables that Bootstrap defines in the\n"),a("code",[e._v("/node_modules/bootstrap/scss/variables.scss")]),e._v(" helper file. Adding a variable\nlisted in this file to the "),a("code",[e._v("/src/assets/styles/bmc/helpers/_variables.scss")]),e._v(" file\nwill override the Bootstrap defined value.")]),e._v(" "),a("h3",{attrs:{id:"transition-base"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transition-base"}},[e._v("#")]),e._v(" $transition-base")]),e._v(" "),a("p",[e._v("This variable sets the base CSS transition style throughout the application.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("all $duration--moderate-02 $standard-easing--productive")])])]),e._v(" "),a("h3",{attrs:{id:"transition-fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transition-fade"}},[e._v("#")]),e._v(" $transition-fade")]),e._v(" "),a("p",[e._v("This variable sets the transition when showing and hiding elements.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("opacity $duration--moderate-01 $standard-easing--productive")])])]),e._v(" "),a("h3",{attrs:{id:"transition-collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transition-collapse"}},[e._v("#")]),e._v(" $transition-collapse")]),e._v(" "),a("p",[e._v("This variable sets the CSS transitions throughout the application when expanding\nand collapsing elements.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("height $duration--slow-01 $standard-easing--expressive")])])]),e._v(" "),a("h3",{attrs:{id:"more-information-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-information-2"}},[e._v("#")]),e._v(" More Information")]),e._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://www.carbondesignsystem.com/guidelines/motion/basics/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Carbon Design System Motion\nGuidelines"),a("OutboundLink")],1)]),e._v(" "),a("li",[a("a",{attrs:{href:"https://www.smashingmagazine.com/2019/02/animation-design-system/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Including Animation In Your Design\nSystem"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"openbmc-custom-sass-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#openbmc-custom-sass-options"}},[e._v("#")]),e._v(" OpenBMC Custom Sass Options")]),e._v(" "),a("h3",{attrs:{id:"responsive-layout-bp"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout-bp"}},[e._v("#")]),e._v(" $responsive-layout-bp")]),e._v(" "),a("p",[e._v("This variable determines when the primary navigation is hidden and when the\nhamburger menu is displayed. The breakpoint is defined using a Bootstrap\nfunction that only accepts a key from the Bootstrap "),a("code",[e._v("$grid-breakpoints")]),e._v(" map.")]),e._v(" "),a("ul",[a("li",[e._v("xs - Navigation is always displayed")]),e._v(" "),a("li",[e._v("sm - Navigation displayed when the viewport is greater than 576px")]),e._v(" "),a("li",[e._v("md - Navigation displayed when the viewport is greater than 768px")]),e._v(" "),a("li",[e._v("lg - Navigation displayed when the viewport is greater than 992px")]),e._v(" "),a("li",[e._v("xl - Navigation displayed when the viewport is less than 1200px")])]),e._v(" "),a("h4",{attrs:{id:"responsive-resources"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-resources"}},[e._v("#")]),e._v(" Responsive Resources")]),e._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints",target:"_blank",rel:"noopener noreferrer"}},[e._v("Bootstrap responsive\nbreakpoints"),a("OutboundLink")],1)]),e._v(" "),a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints",target:"_blank",rel:"noopener noreferrer"}},[e._v("Bootstrap Sass\nMixins"),a("OutboundLink")],1)]),e._v(" "),a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints",target:"_blank",rel:"noopener noreferrer"}},[e._v("Customizing the Bootstrap\nGrid"),a("OutboundLink")],1)])]),e._v(" "),a("h3",{attrs:{id:"header-height"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#header-height"}},[e._v("#")]),e._v(" $header-height")]),e._v(" "),a("p",[e._v("This variable determines the height of the OpenBMC Web UI header element.")]),e._v(" "),a("ul",[a("li",[e._v("Default value: 56px")])]),e._v(" "),a("h3",{attrs:{id:"navigation-width"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navigation-width"}},[e._v("#")]),e._v(" $navigation-width")]),e._v(" "),a("p",[e._v("This variable determines the width of the primary navigation menu when expanded.")]),e._v(" "),a("ul",[a("li",[e._v("Default value: 300px")])]),e._v(" "),a("h3",{attrs:{id:"container-bgd"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container-bgd"}},[e._v("#")]),e._v(" $container-bgd")]),e._v(" "),a("p",[e._v("This option sets the background of page containers. Changing the value of this\nvariable will change the background color for the following elements:")]),e._v(" "),a("ul",[a("li",[e._v("Login page")]),e._v(" "),a("li",[e._v("Primary navigation section")]),e._v(" "),a("li",[e._v("Quick links section on the overview page")])]),e._v(" "),a("h4",{attrs:{id:"value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#value"}},[e._v("#")]),e._v(" Value")]),e._v(" "),a("ul",[a("li",[e._v("Default value: $gray-200")])]),e._v(" "),a("h3",{attrs:{id:"primary-nav-hover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#primary-nav-hover"}},[e._v("#")]),e._v(" $primary-nav-hover")]),e._v(" "),a("p",[e._v("The semantic naming of this variable identifies its purpose. This color should\nalways be slightly darker than the "),a("code",[e._v("$container-bgd")]),e._v(" value.")]),e._v(" "),a("ul",[a("li",[e._v("Default value: $gray-300")])]),e._v(" "),a("h2",{attrs:{id:"updating-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#updating-colors"}},[e._v("#")]),e._v(" Updating Colors")]),e._v(" "),a("p",[e._v("Supporting a different color palette is a simple process. The default color\npalette is supported using the Sass variables outlined in the color guidelines\nand color maps outlined in the theme's overview.  The following sections provide\ndirections to update the settings to meet your organization's needs.")]),e._v(" "),a("h3",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color"}},[e._v("#")]),e._v(" Color")]),e._v(" "),a("p",[e._v("The OpenBMC Web UI uses Sass variables and maps to build its layout and\ncomponents. Bootstrap variables and maps use the "),a("code",[e._v("!default")]),e._v(" flag to allow for\noverrides. There are three Sass maps created to establish the color palette.\nThese include the "),a("code",[e._v("color")]),e._v(" map, "),a("code",[e._v("theme-color")]),e._v(" map, and "),a("code",[e._v("gray")]),e._v(" map. These maps are\nused by Bootstrap to build the application's CSS stylesheets.")]),e._v(" "),a("h4",{attrs:{id:"all-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#all-colors"}},[e._v("#")]),e._v(" All Colors")]),e._v(" "),a("p",[e._v("The OpenBMC Web UI custom colors are available as Sass variables and a Sass map\nin "),a("code",[e._v("/src/assets/styles/bmc/helpers/_variables.scss")]),e._v(". The OpenBMC theme only\nrequires a subset of the colors to create the look and feel of the application.\nAdding, removing, or updating the color variables and map is how the application\ncolor palette can be customized. Using these variables outside of the helper\nfiles is discouraged to avoid tightly coupling the OpenBMC Web UI theme to\nspecific colors.")]),e._v(" "),a("p",[e._v("The "),a("code",[e._v("color")]),e._v(" map is not as important as the "),a("code",[e._v("theme-color")]),e._v(" map. A tight-coupling\nof the Sass variable name to the color name makes it hard to use the "),a("code",[e._v("color")]),e._v(" map\nkeys for customization. Using these keys in Sass stylesheets or single-file\ncomponents is discouraged.")]),e._v(" "),a("h4",{attrs:{id:"theme-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme-colors"}},[e._v("#")]),e._v(" Theme Colors")]),e._v(" "),a("p",[e._v("The theme color variables and the "),a("code",[e._v("theme-color")]),e._v(" map consist of a subset of the\ncolor variables. This smaller color palette creates a scheme that is not\ndependent on specific colors like blue or green. Several of the Bootstrap\n"),a("code",[e._v("theme-color")]),e._v(" map keys are required to generate the CSS styles. The OpenBMC Web\nUI "),a("code",[e._v("theme-color")]),e._v(" map has the same keys as the Bootstrap "),a("code",[e._v("theme-color")]),e._v(" map with\ncustom values.")]),e._v(" "),a("p",[e._v("The "),a("code",[e._v("theme-color")]),e._v(" map is used heavily throughout the application. The\nBootstrap-Vue components "),a("code",[e._v("variant")]),e._v(" prop also utilizes the "),a("code",[e._v("theme-color")]),e._v(" map.\nThis map is the key to customizing the application's color palette. Take a look\nat the "),a("a",{attrs:{href:"/guide/guidelines/colors"}},[e._v("color guidelines")]),e._v(" to better understand default\ntheme-colors map.")]),e._v(" "),a("h4",{attrs:{id:"gray-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gray-colors"}},[e._v("#")]),e._v(" Gray Colors")]),e._v(" "),a("p",[e._v("The gray color palette contains nine shades of gray that range from light to\ndark. Bootstrap sets a default gray color value for each color variable from\n100-900 in increments of one hundred, for example, "),a("code",[e._v("$gray-100")]),e._v(", "),a("code",[e._v("$gray-200")]),e._v(",\n"),a("code",[e._v("$gray-300")]),e._v(" through "),a("code",[e._v("gray-900")]),e._v(". Bootstrap does not create a color map for any of\nthe colors except gray. The Bootstrap documentation indicates that adding color\nmaps for all the default colors is scheduled to be delivered in a future patch.\nThe OpenBMC Web UI color theme overrides all shades of the Bootstrap default\ngray variable values.")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#color",target:"_blank",rel:"noopener noreferrer"}},[e._v("Learn more about Bootstrap\ncolors"),a("OutboundLink")],1)]),e._v(" "),a("h3",{attrs:{id:"bootstrap-color-functions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bootstrap-color-functions"}},[e._v("#")]),e._v(" Bootstrap Color Functions")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("color('<color map key>)")])]),e._v(" "),a("li",[a("code",[e._v("theme-color('<theme color map key>)")])]),e._v(" "),a("li",[a("code",[e._v("gray('<gray color palette key'>)")])])]),e._v(" "),a("h4",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[e._v("#")]),e._v(" Example")]),e._v(" "),a("div",{staticClass:"language-SCSS extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[e._v(".some-selector ")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[e._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v('"blue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[e._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("theme-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v('"light"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[e._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 1px solid "),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("gray")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v('"900"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),a("p",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#functions",target:"_blank",rel:"noopener noreferrer"}},[e._v("Learn more about using Bootstrap\nfunctions"),a("OutboundLink")],1)]),e._v(" "),a("h2",{attrs:{id:"adding-a-logo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#adding-a-logo"}},[e._v("#")]),e._v(" Adding a logo")]),e._v(" "),a("p",[e._v("The updated page header can include a small logo. The guidelines for adding a\nlogo and the suggested logo dimensions are currently in progress. It may be\nchallenging to meet all organization brand guidelines due to the minimal height\nof the page header. The company logo might be able to be set in the primary\nnavigation, but a design supporting that option will be the focus of future\ndesign work.")])])}),[],!1,null,null,null);t.default=o.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/24.7c316dcb.js b/assets/js/24.7c316dcb.js
new file mode 100644
index 00000000..6aa00b56
--- /dev/null
+++ b/assets/js/24.7c316dcb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{403:function(e,t,r){"use strict";r.r(t);var n=r(41),s=Object(n.a)({},(function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h1",{attrs:{id:"accessibility-conventions-and-standards"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#accessibility-conventions-and-standards"}},[e._v("#")]),e._v(" Accessibility Conventions and Standards")]),e._v(" "),r("p",[e._v("It is important that the OpenBMC Web UI meet accessibility guidelines\nestablished by the "),r("a",{attrs:{href:"https://www.w3.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("World Wide Web Consortium (W3C)"),r("OutboundLink")],1),e._v(". These\nguidelines are known as the "),r("a",{attrs:{href:"https://www.w3.org/WAI/standards-guidelines/wcag/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Web Content Accessibility Guidelines\n(WCAG)"),r("OutboundLink")],1),e._v(". Making the Web UI\naccessible to as many users as possible is the right thing to do. In many\ncountries, it is also legally required. Organizations providing interfaces that\nusers with permanent or temporary disabilities can not use, may lose sales or be\nsusceptible to discriminatory lawsuits.")]),e._v(" "),r("h2",{attrs:{id:"accessibility-principles"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#accessibility-principles"}},[e._v("#")]),e._v(" Accessibility Principles")]),e._v(" "),r("p",[e._v("These\n"),r("a",{attrs:{href:"https://www.w3.org/WAI/fundamentals/accessibility-principles/",target:"_blank",rel:"noopener noreferrer"}},[e._v("principles"),r("OutboundLink")],1),e._v("\nreference a set of international standards from the "),r("a",{attrs:{href:"https://www.w3.org/WAI/",target:"_blank",rel:"noopener noreferrer"}},[e._v("W3C Web Accessibility\nIntitiative (WAI)"),r("OutboundLink")],1),e._v(".")]),e._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable",target:"_blank",rel:"noopener noreferrer"}},[e._v("Perceiveable"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://www.w3.org/WAI/fundamentals/accessibility-principles/#operable",target:"_blank",rel:"noopener noreferrer"}},[e._v("Operable"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://www.w3.org/WAI/fundamentals/accessibility-principles/#understandable",target:"_blank",rel:"noopener noreferrer"}},[e._v("Understandable"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://www.w3.org/WAI/fundamentals/accessibility-principles/#robust",target:"_blank",rel:"noopener noreferrer"}},[e._v("Robust"),r("OutboundLink")],1)])]),e._v(" "),r("h2",{attrs:{id:"semantic-html"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#semantic-html"}},[e._v("#")]),e._v(" Semantic HTML")]),e._v(" "),r("p",[e._v("Coding the UI using semantic markup is the most important step in creating an\ninclusive interface. The use of\n"),r("a",{attrs:{href:"https://www.w3.org/WAI/standards-guidelines/aria/",target:"_blank",rel:"noopener noreferrer"}},[e._v("WAI-ARIA"),r("OutboundLink")],1),e._v(" can help make an\ninterface accessible to assistive technologies. However, there are two critical\nrules to follow:")]),e._v(" "),r("ol",[r("li",[e._v("Always favor semantic markup over ARIA")]),e._v(" "),r("li",[e._v("No ARIA is better than Bad ARIA")])]),e._v(" "),r("h2",{attrs:{id:"testing"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#testing"}},[e._v("#")]),e._v(" Testing")]),e._v(" "),r("p",[e._v("Assuring the Web UI meets accessibility guidelines requires a combination of\nautomated and manual testing. Automated tests will test the application against\ncommon problems such as color contrast and ARIA use. Automated testing can be\nbuilt into the CI process, integrated with code editors, and run using browser\nextensions.")]),e._v(" "),r("p",[e._v("The OpenBMC Web UI developers should test their development pages using one of\nthe tools listed in the tools section below. If using Chrome, the Lighthouse\napplication comes bundled with the browser and also includes testing for\nperformance and best practices. If there is an issue that is created when using\na Bootstrap-Vue component, we can "),r("a",{attrs:{href:"https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose",target:"_blank",rel:"noopener noreferrer"}},[e._v("create an issue in the Bootstrap-vue\nrepo"),r("OutboundLink")],1),e._v(".\nContributing to the Bootstrap-Vue open-source library, when possible, is\nstrongly encouraged.")]),e._v(" "),r("h2",{attrs:{id:"tools"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#tools"}},[e._v("#")]),e._v(" Tools")]),e._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"https://www.deque.com/axe/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Deque Axe"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector",target:"_blank",rel:"noopener noreferrer"}},[e._v("Firefox Accessibility\nInspector"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://www.ibm.com/able/toolkit/tools",target:"_blank",rel:"noopener noreferrer"}},[e._v("IBM Accessibility Tools"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://developers.google.com/web/tools/lighthouse",target:"_blank",rel:"noopener noreferrer"}},[e._v("Lighthouse"),r("OutboundLink")],1)])]),e._v(" "),r("h2",{attrs:{id:"screen-readers"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#screen-readers"}},[e._v("#")]),e._v(" Screen Readers")]),e._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"https://webaim.org/articles/jaws/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Jaws - (Windows only)"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1",target:"_blank",rel:"noopener noreferrer"}},[e._v("Narrator - (Windows\nonly)"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://webaim.org/articles/nvda/",target:"_blank",rel:"noopener noreferrer"}},[e._v("NVDA (Windows only)"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://webaim.org/articles/voiceover/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Voiceover (Mac only)"),r("OutboundLink")],1)])]),e._v(" "),r("h2",{attrs:{id:"resources"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#resources"}},[e._v("#")]),e._v(" Resources")]),e._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility",target:"_blank",rel:"noopener noreferrer"}},[e._v("Mozilla Developer Network -\nAccessibility"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://www.w3.org/WAI/standards-guidelines/wcag/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Web Content Accessibility Guidelines\n(WCAG)"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://www.w3.org/TR/wai-aria-practices/",target:"_blank",rel:"noopener noreferrer"}},[e._v("WAI-ARIA Authoring Practices"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics",target:"_blank",rel:"noopener noreferrer"}},[e._v("WAI-ARIA\nBasics"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://webaim.org/articles/",target:"_blank",rel:"noopener noreferrer"}},[e._v("WebAIM Articles"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://a11yproject.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("A11Y Project"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://www.ibm.com/able/",target:"_blank",rel:"noopener noreferrer"}},[e._v("IBM Accessibility"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://inclusive-components.design/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Inclusive Components"),r("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/25.79d3357c.js b/assets/js/25.79d3357c.js
new file mode 100644
index 00000000..588ce31e
--- /dev/null
+++ b/assets/js/25.79d3357c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{413:function(e,t,r){"use strict";r.r(t);var n=r(41),i=Object(n.a)({},(function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h1",{attrs:{id:"javascript-and-sass"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#javascript-and-sass"}},[e._v("#")]),e._v(" JavaScript and SASS")]),e._v(" "),r("p",[e._v("This project uses the following libraries to determine the best practices and\nguidelines for both SCSS and JavaScript syntax.")]),e._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"https://eslint.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("ESLint"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://prettier.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Prettier"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://eslint.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("ESLint Plugin for Vue"),r("OutboundLink")],1)])]),e._v(" "),r("p",[e._v("The guidelines we are following are:")]),e._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-3-x",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue\nRecommended"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://eslint.org/docs/rules/",target:"_blank",rel:"noopener noreferrer"}},[e._v("ESLint Recommended"),r("OutboundLink")],1)]),e._v(" "),r("li",[r("a",{attrs:{href:"https://prettier.io/docs/en/options.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Prettier"),r("OutboundLink")],1)])]),e._v(" "),r("p",[e._v("The rules are applied in the following order:")]),e._v(" "),r("ol",[r("li",[e._v("Vue rules")]),e._v(" "),r("li",[e._v("ESLint recommended")]),e._v(" "),r("li",[e._v("Prettier")])]),e._v(" "),r("h2",{attrs:{id:"overrides"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#overrides"}},[e._v("#")]),e._v(" Overrides")]),e._v(" "),r("p",[e._v("Any overrides to a rule are located in the ESLint configuration file,\n"),r("code",[e._v(".eslintrc.js")]),e._v(", located in the root directory.")]),e._v(" "),r("h2",{attrs:{id:"running-the-lint-test"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#running-the-lint-test"}},[e._v("#")]),e._v(" Running the lint test")]),e._v(" "),r("p",[e._v("To test all files for linting, run "),r("code",[e._v("npm run lint")]),e._v(". This command will evaluate\nthe syntax of all files and update any code that that does not require manual\nreview.")]),e._v(" "),r("p",[e._v("The linting script runs when code is committed,  during pre-commit, and when the\nCI tool runs after a push to Gerrit. There is a shell script named\n"),r("code",[e._v("format-code.sh")]),e._v(" that installs node package dependencies and runs the test\nscript in your CI.")])])}),[],!1,null,null,null);t.default=i.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/26.c82c48a9.js b/assets/js/26.c82c48a9.js
new file mode 100644
index 00000000..b78f8e37
--- /dev/null
+++ b/assets/js/26.c82c48a9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{409:function(t,e,a){"use strict";a.r(e);var n=a(41),s=Object(n.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"page-section"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#page-section"}},[t._v("#")]),t._v(" Page section")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("<page-section>")]),t._v(" component will render semantic HTML. By adding a\n"),a("code",[t._v(":section-title")]),t._v(" prop to the "),a("code",[t._v("<page-section>")]),t._v(" component, the localized text\nstring will be rendered in an "),a("code",[t._v("h2")]),t._v(" header element.")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[t._v("// Example: `src/views/AccessControl/Ldap/Ldap.vue`\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("page-section")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":section-title")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("pageLdap.settings"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("a",{attrs:{href:"https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("View the page section component source\ncode"),a("OutboundLink")],1),t._v(".")])])}),[],!1,null,null,null);e.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/27.f4d5e099.js b/assets/js/27.f4d5e099.js
new file mode 100644
index 00000000..12891c70
--- /dev/null
+++ b/assets/js/27.f4d5e099.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{410:function(t,a,s){"use strict";s.r(a);var e=s(41),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"page-title"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#page-title"}},[t._v("#")]),t._v(" Page title")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("<page-title>")]),t._v(" component will automatically render the page title that\ncorresponds with the title property set in the route record's meta field in\n"),s("code",[t._v("src/router/routes.js")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/router/routes.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    path"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'login'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    component"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Login"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    meta"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'appPageTitle.login'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("Optional page descriptions can be included by using the description prop\n"),s("code",[t._v(":description")]),t._v(" prop and passing in the i18n localized text string. Translations\nare found in the "),s("code",[t._v("src/locales")]),t._v(" folder.")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[t._v("// Example: `src/views/AccessControl/Ldap/Ldap.vue`\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("page-title")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":description")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("pageLdap.pageDescription"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[s("a",{attrs:{href:"https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("View the page title component source\ncode"),s("OutboundLink")],1),t._v(".")])])}),[],!1,null,null,null);a.default=n.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/28.e8d46e0f.js b/assets/js/28.e8d46e0f.js
new file mode 100644
index 00000000..b181f7cd
--- /dev/null
+++ b/assets/js/28.e8d46e0f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{411:function(e,t,n){"use strict";n.r(t);var o=n(41),s=Object(o.a)({},(function(){var e=this.$createElement,t=this._self._c||e;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"overview"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#overview"}},[this._v("#")]),this._v(" Overview")]),this._v(" "),t("p",[this._v("Vue components are the building blocks of the OpenBMC Web UI. It uses both\nBoostrap-Vue components, as well as custom components. Using these components\nassures consistency throughout the application. They also improve the developer\nexperience and increase efficiency. Review the existing components before using\nHTML markup. If the feature you're working on includes a new layout pattern,\nrather than adding raw markup to the page, consider creating a component that\nother sections of the application can use as well.")]),this._v(" "),t("p",[t("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html",target:"_blank",rel:"noopener noreferrer"}},[this._v("Learn more about Vue components"),t("OutboundLink")],1)])])}),[],!1,null,null,null);t.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/29.a85a251f.js b/assets/js/29.a85a251f.js
new file mode 100644
index 00000000..af00a332
--- /dev/null
+++ b/assets/js/29.a85a251f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{416:function(e,t,o){"use strict";o.r(t);var r=o(41),s=Object(r.a)({},(function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[o("h1",{attrs:{id:"colors"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#colors"}},[e._v("#")]),e._v(" Colors")]),e._v(" "),o("p",[e._v("This color palette has been agreed upon by the OpenBMC community and differs\nfrom the Bootstrap color patterns. The OpenBMC palette includes custom hex\nvalues, along with additional blue, green, red, and yellow color variables used\nas accent colors for components. The "),o("code",[e._v(".scss")]),e._v(" component files use these accent\ncolors to override default styles set by the Bootstrap library.")]),e._v(" "),o("ul",[o("li",[o("RouterLink",{attrs:{to:"/customization/theme/"}},[e._v("Learn more about theme customization")])],1),e._v(" "),o("li",[o("a",{attrs:{href:"https://github.com/openbmc/webui-vue/issues/new/choose",target:"_blank",rel:"noopener noreferrer"}},[e._v("Open an issue in the OpenBMC webui-vue\nrepo"),o("OutboundLink")],1),e._v(" to request a\nchange")]),e._v(" "),o("li",[o("a",{attrs:{href:"https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors",target:"_blank",rel:"noopener noreferrer"}},[e._v("Learn more about Bootstrap\ncolors"),o("OutboundLink")],1)])]),e._v(" "),o("h2",{attrs:{id:"grays"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#grays"}},[e._v("#")]),e._v(" Grays")]),e._v(" "),o("colors-grays"),e._v(" "),o("h2",{attrs:{id:"blues"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#blues"}},[e._v("#")]),e._v(" Blues")]),e._v(" "),o("colors-blues"),e._v(" "),o("h2",{attrs:{id:"greens"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#greens"}},[e._v("#")]),e._v(" Greens")]),e._v(" "),o("colors-greens"),e._v(" "),o("h2",{attrs:{id:"reds"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#reds"}},[e._v("#")]),e._v(" Reds")]),e._v(" "),o("colors-reds"),e._v(" "),o("h2",{attrs:{id:"yellows"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#yellows"}},[e._v("#")]),e._v(" Yellows")]),e._v(" "),o("colors-yellows"),e._v(" "),o("h2",{attrs:{id:"all-colors"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#all-colors"}},[e._v("#")]),e._v(" All Colors")]),e._v(" "),o("p",[o("code",[e._v("All Colors")]),e._v(" is the term Bootstrap uses to describe the colors that make up the\n"),o("code",[e._v("colors")]),e._v(" map. These colors and the Grays color variables define the\n"),o("code",[e._v("theme-colors")]),e._v(" map colors.")]),e._v(" "),o("p",[o("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors",target:"_blank",rel:"noopener noreferrer"}},[e._v("Learn more about the Bootstrap color\nmaps"),o("OutboundLink")],1),e._v(".\n"),o("colors-all")],1),e._v(" "),o("h2",{attrs:{id:"theme-colors"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#theme-colors"}},[e._v("#")]),e._v(" Theme Colors")]),e._v(" "),o("p",[e._v("The theme colors are keys in the "),o("code",[e._v("theme-colors")]),e._v(" map. Bootstrap-Vue has a variant\nprop that accepts any of the "),o("code",[e._v("theme-colors")]),e._v(" keys to set the theme of a\ncomponent.")]),e._v(" "),o("p",[o("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors",target:"_blank",rel:"noopener noreferrer"}},[e._v("Learn more about the Bootstrap theme-colors\nmaps"),o("OutboundLink")],1),e._v(".")]),e._v(" "),o("colors-theme")],1)}),[],!1,null,null,null);t.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/3.4aa24478.js b/assets/js/3.4aa24478.js
new file mode 100644
index 00000000..5ca00767
--- /dev/null
+++ b/assets/js/3.4aa24478.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{365:function(t,a,s){t.exports=s.p+"assets/img/table.2f5c6005.png"},366:function(t,a,s){t.exports=s.p+"assets/img/table-empty.239c6ec7.png"},367:function(t,a,s){t.exports=s.p+"assets/img/table-sort.6a74b1a4.png"},368:function(t,a,s){t.exports=s.p+"assets/img/table-expand-row.fa48151d.png"},369:function(t,a,s){t.exports=s.p+"assets/img/table-search.50bb96ff.png"},370:function(t,a,s){t.exports=s.p+"assets/img/table-search-active.8622acb6.png"},371:function(t,a,s){t.exports=s.p+"assets/img/table-search-empty.a9a05017.png"},372:function(t,a,s){t.exports=s.p+"assets/img/table-row-actions.cfff2d58.png"},373:function(t,a,s){t.exports=s.p+"assets/img/table-filter.9b3a7161.png"},374:function(t,a,s){t.exports=s.p+"assets/img/table-filter-active.e3119ef9.png"},375:function(t,a,s){t.exports=s.p+"assets/img/table-batch-action.97b76488.png"},376:function(t,a,s){t.exports=s.p+"assets/img/table-batch-action-active.f9a8c36f.png"},377:function(t,a,s){t.exports=s.p+"assets/img/table-pagination.7f542578.png"},414:function(t,a,s){"use strict";s.r(a);var n=s(41),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"table"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#table"}},[t._v("#")]),t._v(" Table")]),t._v(" "),n("p",[t._v("All tables in the application are using the "),n("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/table",target:"_blank",rel:"noopener noreferrer"}},[t._v("BoostrapVue table\ncomponent"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("To use the component, include the "),n("code",[t._v("<b-table>")]),t._v(" tag in the template. The component\nis registered globally so does not need to be imported in each SFC.")]),t._v(" "),n("h2",{attrs:{id:"basic-table"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#basic-table"}},[t._v("#")]),t._v(" Basic table")]),t._v(" "),n("p",[t._v("There are a few required properties to maintain consistency across the\napplication. The full list of options can be viewed on the "),n("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props",target:"_blank",rel:"noopener noreferrer"}},[t._v("Bootstrap-vue table\ncomponent's documentation\npage"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("h3",{attrs:{id:"required-properties"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#required-properties"}},[t._v("#")]),t._v(" Required properties")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("items")]),t._v(" - renders table items")]),t._v(" "),n("li",[n("code",[t._v("fields")]),t._v(" - renders table header")]),t._v(" "),n("li",[n("code",[t._v("hover")]),t._v(" - enables table row hover state")]),t._v(" "),n("li",[n("code",[t._v("responsive")]),t._v(" or "),n("code",[t._v("stacked")]),t._v(" - makes the table responsive (enables horizontal\nscrolling or stacked view) at the defined breakpoint")]),t._v(" "),n("li",[n("code",[t._v("show-empty")]),t._v(" "),n("em",[t._v("(required if table data is generated dynamically)")]),t._v(" - shows an\nempty message if there are no items in the table")]),t._v(" "),n("li",[n("code",[t._v("empty-text")]),t._v(" "),n("em",[t._v("(required if table data is generated dynamically)")]),t._v(" - the\ntranslated empty message")])]),t._v(" "),n("p",[n("img",{attrs:{src:s(365),alt:"Basic table example"}}),t._v(" "),n("img",{attrs:{src:s(366),alt:"Basic empty tableexample"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-table")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hover")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show-empty")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("responsive")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fields")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fields"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":empty-text")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("global.table.emptyMessage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      items"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Babe'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          age"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'3 years'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          color"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'white, orange, grey'")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Grey Boy'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          age"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'4 months'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          color"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'grey'")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fields"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'table.name'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//translated label")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'table.age'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//translated label")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'table.color'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// translated label")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h2",{attrs:{id:"sort"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#sort"}},[t._v("#")]),t._v(" Sort")]),t._v(" "),n("p",[t._v("To enable table sort, include "),n("code",[t._v("sortable: true")]),t._v(" in the fields array for sortable\ncolumns and add the following props to the "),n("code",[t._v("<b-table>")]),t._v(" component:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("sort-by")])]),t._v(" "),n("li",[n("code",[t._v("no-sort-reset")])]),t._v(" "),n("li",[n("code",[t._v("sort-icon-left")])])]),t._v(" "),n("p",[n("img",{attrs:{src:s(367),alt:"Table sort example"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-table")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hover")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("no-sort-reset")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sort-icon-left")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sort-by")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("rank"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("responsive")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fields")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fields"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      items"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fields"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Name'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//should be translated")]),t._v("\n          sortable"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'rank'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Rank'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//should be translated")]),t._v("\n          sortable"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'description'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Description'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//should be translated")]),t._v("\n          sortable"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h2",{attrs:{id:"expandable-rows"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#expandable-rows"}},[t._v("#")]),t._v(" Expandable rows")]),t._v(" "),n("p",[t._v("To add an expandable row in the table, add a column for the expand button in the\nfields array. Include the tdClass "),n("code",[t._v("table-row-expand")]),t._v(" to ensure icon rotation is\nhandled. Use the built in "),n("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots",target:"_blank",rel:"noopener noreferrer"}},[t._v("cell\nslot"),n("OutboundLink")],1),t._v(" to\ntarget the expand button column and add a button with the chevron icon.")]),t._v(" "),n("p",[t._v("Include the\n"),n("a",{attrs:{href:"https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("TableRowExpandMixin"),n("OutboundLink")],1),t._v(".\nThe mixin contains the dynamic "),n("code",[t._v("aria-label")]),t._v(" and "),n("code",[t._v("title")]),t._v(" attribute values that\nneed to be included with the expand button. The "),n("code",[t._v("toggleRowDetails")]),t._v(" method should\nbe the button's click event callback. Be sure to pass the "),n("code",[t._v("row")]),t._v(" object to the\nfunction.")]),t._v(" "),n("p",[t._v("Use the "),n("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots",target:"_blank",rel:"noopener noreferrer"}},[t._v("row-details\nslot"),n("OutboundLink")],1),t._v(" to\nformat the expanded row content. The slot has access to the row "),n("code",[t._v("item")]),t._v(" property.")]),t._v(" "),n("h3",{attrs:{id:"summary"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#summary"}},[t._v("#")]),t._v(" Summary")]),t._v(" "),n("ol",[n("li",[t._v("Add a column for the expansion row button with the tdClass,\n"),n("code",[t._v("table-row-expand")])]),t._v(" "),n("li",[t._v("Include the "),n("code",[t._v("TableRowExpandMixin")]),t._v(" to handle the dynamic aria label, title,\nand row expansion toggling")]),t._v(" "),n("li",[t._v("Use the "),n("code",[t._v("#cell")]),t._v(" slot to target the expandable row column and add the button\nwith accessible markup and click handler")]),t._v(" "),n("li",[t._v("Use the "),n("code",[t._v("#row-details")]),t._v(" slot to format expanded row content")])]),t._v(" "),n("p",[n("img",{attrs:{src:s(368),alt:"Table row expand example"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-table")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hover")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("responsive")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fields")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fields"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("#cell(expandRow)")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("link"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":aria-label")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("expandRowLabel"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":title")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("expandRowLabel"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("toggleRowDetails(row)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-chevron")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("#row-details")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Expanded row details"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      {{ row.item }}\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-table")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" IconChevron "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@carbon/icons-vue/es/chevron--down/20'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" TableRowExpandMixin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" expandRowLabel "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Mixins/TableRowExpandMixin'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  components"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" IconChevron "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mixins"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" TableRowExpandMixin "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      items"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fields"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'expandRow'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          tdClass"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'table-row-expand'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      expandRowLabel\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h2",{attrs:{id:"search"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#search"}},[t._v("#")]),t._v(" Search")]),t._v(" "),n("p",[t._v("The table is leveraging "),n("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/table#filtering",target:"_blank",rel:"noopener noreferrer"}},[t._v("BootstrapVue table\nfiltering"),n("OutboundLink")],1),t._v(" for\nsearch. Add the\n"),n("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/table#filter-events",target:"_blank",rel:"noopener noreferrer"}},[t._v("@filtered"),n("OutboundLink")],1),t._v(" event\nlistener onto the "),n("code",[t._v("<b-table>")]),t._v(" component. The event callback should track the\ntotal filtered items count.")]),t._v(" "),n("p",[t._v("Import the "),n("code",[t._v("<search>")]),t._v(" and "),n("code",[t._v("<table-cell-count>")]),t._v(" components and include them in\nthe template above the "),n("code",[t._v("<b-table>")]),t._v(" component.")]),t._v(" "),n("p",[t._v("Include the\n"),n("a",{attrs:{href:"https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/SearchFilterMixin.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("SearchFilterMixin"),n("OutboundLink")],1),t._v(".\nAdd the "),n("code",[t._v("@change-search")]),t._v(" and "),n("code",[t._v("@clear-search")]),t._v(" event listeners on the "),n("code",[t._v("<search>")]),t._v("\ncomponent and use the corresponding "),n("code",[t._v("onChangeSearchInput")]),t._v(" and\n"),n("code",[t._v("onClearSearchInput")]),t._v(" methods as the event callbacks. The table should also\ninclude the dynamic "),n("code",[t._v(":filter")]),t._v(" prop with "),n("code",[t._v("searchFilter")]),t._v(" set as the value.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("<table-cell-count>")]),t._v(" component requires two properties, total table item\ncount and total filtered items count.")]),t._v(" "),n("p",[t._v("Add the "),n("code",[t._v(":empty-filtered-text")]),t._v(" prop to the table to show the translated message\nif there are no search matches.")]),t._v(" "),n("p",[n("img",{attrs:{src:s(369),alt:"Table search example"}})]),t._v(" "),n("p",[n("img",{attrs:{src:s(370),alt:"Table search active example"}})]),t._v(" "),n("p",[n("img",{attrs:{src:s(371),alt:"Table search empty example"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-container")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("search")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@changeSearch")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onChangeSearchInput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@clearSearch")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onClearSearchInput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("table-cell-count")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":filtered-items-count")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("filteredItemsCount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":total-number-of-cells")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("items.length"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-table")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hover")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("responsive")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fields")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fields"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":filter")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("searchFilter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":empty-filtered-text")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("global.table.emptySearchMessage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@filtered")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onFiltered"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-container")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Search "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/Search'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" TableCellCount "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/TableCellCount'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" SearchFilterMixin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" searchFilter "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Mixins/SearchFilterMixin'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  components"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Search"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" TableCellCount "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mixins"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" SearchFilterMixin "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      items"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fields"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      searchFilter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      filteredItems"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  computed"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("filteredItemsCount")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("filteredItems"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  methods"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("onFiltered")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("items")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("filteredItems "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h2",{attrs:{id:"row-actions"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#row-actions"}},[t._v("#")]),t._v(" Row actions")]),t._v(" "),n("p",[t._v("To add table row actions, add a column for the action buttons in the table. Then\nin the array of table items, add a corresponding array of actions for each item.\nThe array should have each desired row action with a "),n("code",[t._v("value")]),t._v(" and "),n("code",[t._v("title")]),t._v("\nproperty.")]),t._v(" "),n("p",[t._v("Import the "),n("code",[t._v("<table-row-action>")]),t._v(" component. Provide the "),n("code",[t._v("value")]),t._v(" and "),n("code",[t._v("title")]),t._v(" props\nto the component and use the named "),n("code",[t._v("#icons")]),t._v(" slot to include an icon. The\ncomponent will emit a "),n("code",[t._v("@click-table-action")]),t._v(" with the event value.")]),t._v(" "),n("p",[n("img",{attrs:{src:s(372),alt:"Table row actions example"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-table")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hover")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("responsive")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("itemsWithActions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fields")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fields"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("#cell(actions)")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("table-row-action")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(action, index) in row.item.actions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":value")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("action.value"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":title")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("action.title"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click-table-action")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTableRowAction($event, row.item)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("#icon")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-edit")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("action.value === "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("edit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("icon-delete")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("action.value === "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("delete"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("table-row-action")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-table")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" IconDelete "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@carbon/icons-vue/es/trash-can/20'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" IconEdit "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@carbon/icons-vue/es/edit/20'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" TableRowAction "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/TableRowAction'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  components"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" IconDelete"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" IconEdit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" TableRowAction "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      items"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fields"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actions'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          tdClass"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text-right text-nowrap'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  computed"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("itemsWithActions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("item"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          actions"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              value"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'edit'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              title"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'global.action.edit'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              value"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'delete'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              title"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'global.action.delete'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  methods"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("onTableRowAction")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// row action callback")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h2",{attrs:{id:"filters"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#filters"}},[t._v("#")]),t._v(" Filters")]),t._v(" "),n("p",[t._v("To add a table dropdown filter:")]),t._v(" "),n("ol",[n("li",[t._v("Import the "),n("code",[t._v("<table-filter>")]),t._v("component and TableFilterMixin.")]),t._v(" "),n("li",[t._v("Add a filters prop to the "),n("code",[t._v("<table-filters>")]),t._v(" component. This prop should be an\narray of filter groups–each required to have a key, label, and values prop.")])]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("label")]),t._v(" prop value should be the translated filter group label. The "),n("code",[t._v("key")]),t._v("\nprop will usually match the filtered by table column key. The "),n("code",[t._v("values")]),t._v(" prop\nshould be an array of filter values that will render as a list of checkbox items\nin the dropdown.")]),t._v(" "),n("p",[t._v("The component will emit a "),n("code",[t._v("@filter-change")]),t._v(" event that will provide the filter\ngroup and all selected values in the group. Use the getFilteredTableData method\nfrom the TableFilterMixin to show the filtered table data.")]),t._v(" "),n("p",[n("img",{attrs:{src:s(373),alt:"Table filter example"}})]),t._v(" "),n("p",[n("img",{attrs:{src:s(374),alt:"Table filter active example"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-container")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-col")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("table-filter")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":filters")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tableFilters"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@filter-change")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTableFilterChange"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-table")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hover")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("responsive")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("filteredItems"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fields")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fields"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-container")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" TableFilter "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/TableFilter'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" TableFilterMixin "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Mixins/TableFilterMixin'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  components"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" TableFilter "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mixins"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" TableFilterMixin "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      items"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fields"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      tableFilters"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'table.status'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" status"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          values"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Open'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Closed'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      activeFilters"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  computed"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("filteredItems")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getFilteredTableData")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeFilters"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  methods"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("onTableFilterChange")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" activeFilters "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeFilters "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" activeFilters"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h3",{attrs:{id:"date-filter"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#date-filter"}},[t._v("#")]),t._v(" Date filter")]),t._v(" "),n("p",[t._v("To add a date filter, import the "),n("code",[t._v("<table-date-filter>")]),t._v(" component. It will emit a\n"),n("code",[t._v("@change")]),t._v(" event with the user input date values. There is a date filter method,\n"),n("code",[t._v("getFilteredTableDataByDate")]),t._v(", in the "),n("code",[t._v("TableFilterMixin")]),t._v(".")]),t._v(" "),n("h2",{attrs:{id:"batch-actions"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#batch-actions"}},[t._v("#")]),t._v(" Batch actions")]),t._v(" "),n("p",[t._v("Batch actions allow a user to take a single action on many items in a table at\nonce.")]),t._v(" "),n("p",[t._v("To add table batch actions:")]),t._v(" "),n("ol",[n("li",[t._v("Import the "),n("code",[t._v("<table-toolbar>")]),t._v("component and BVTableSelectableMixin")]),t._v(" "),n("li",[t._v("Add the "),n("code",[t._v("selectable")]),t._v(", "),n("code",[t._v("no-select-on-click")]),t._v(" props and a unique "),n("code",[t._v("ref")]),t._v(" to the\ntable. The table will emit a "),n("code",[t._v("@row-selected")]),t._v(" event. Use the "),n("code",[t._v("onRowSelected")]),t._v("\nmixin method as a callback and provide the "),n("code",[t._v("$event")]),t._v(" as the first argument and\nthe total table items count as the second argument.")]),t._v(" "),n("li",[t._v("Add a table column for checkboxes. The table header checkbox should use the\n"),n("code",[t._v("tableHeaderCheckboxModel")]),t._v(" and "),n("code",[t._v("tableHeaderCheckboxIndeterminate")]),t._v(" values\nprovided by the mixin. The table header checkbox should also use the\n"),n("code",[t._v("onChangeHeaderCheckbox")]),t._v(" method as a callback for the "),n("code",[t._v("@change")]),t._v(" event with\nthe table "),n("code",[t._v("ref")]),t._v(" passed as an argument. The table row checkboxes should use\nthe "),n("code",[t._v("toggleSelectRow")]),t._v(" method as a callback for the "),n("code",[t._v("@change")]),t._v(" event with the\ntable "),n("code",[t._v("ref")]),t._v(" passed as the first argument and the row index passed as the\nsecond argument.")]),t._v(" "),n("li",[t._v("Add an actions prop to the "),n("code",[t._v("<table-toolbar>")]),t._v(" component. This prop should be\nan array of toolbar actions–required to have a value and label prop. Add the\n"),n("code",[t._v("selected-items-count")]),t._v(" prop to the "),n("code",[t._v("<table-toolbar>")]),t._v(" component. The component\nwill emit a "),n("code",[t._v("@batch-action")]),t._v(" event that will provide the user selected action.\nIt will also emit a "),n("code",[t._v("@clear-selected")]),t._v(" event. Provide the "),n("code",[t._v("clearSelectedRows")]),t._v("\nas a callback with the table "),n("code",[t._v("ref")]),t._v(" passed as an argument.")])]),t._v(" "),n("p",[n("img",{attrs:{src:s(375),alt:"Table batch action example"}})]),t._v(" "),n("p",[n("img",{attrs:{src:s(376),alt:"Table batch action active example"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-container")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("table-toolbar")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":selected-items-count")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("selectedRows.length"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":actions")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tableToolbarActions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@clear-selected")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("clearSelectedRows($refs.table)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@batch-action")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onBatchAction"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-table")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ref")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("table"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hover")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("selectable")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("no-select-on-click")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("responsive")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("filteredItems"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fields")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fields"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@row-selected")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onRowSelected($event, items.length)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("#head(checkbox)")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-checkbox")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tableHeaderCheckboxModel"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":indeterminate")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tableHeaderCheckboxIndeterminate"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@change")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onChangeHeaderCheckbox($refs.table)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("#cell(checkbox)")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-checkbox")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("row.rowSelected"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@change")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("toggleSelectRow($refs.table, row.index)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-table")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-container")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" TableToolbar "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/TableToolbar'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" BVTableSelectableMixin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tableHeaderCheckboxModel"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  tableHeaderCheckboxIndeterminate"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  selectedRows\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Mixins/BVTableSelectableMixin'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  components"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" TableToolbar "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mixins"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" BVTableSelectableMixin "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      items"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fields"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          key"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'checkbox'")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      tableToolbarActions"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          value"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'edit'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'global.action.edit'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          value"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'delete'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          label"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'global.action.delete'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      tableHeaderCheckboxModel"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      tableHeaderCheckboxIndeterminate"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      selectedRows\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  methods"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("onBatchAction")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("action")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Do something with selected batch action and selected rows")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h2",{attrs:{id:"pagination"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#pagination"}},[t._v("#")]),t._v(" Pagination")]),t._v(" "),n("p",[t._v("To add table pagination:")]),t._v(" "),n("ol",[n("li",[t._v("Import the BVPaginationMixin")]),t._v(" "),n("li",[t._v("Add the "),n("code",[t._v("per-page")]),t._v(" and "),n("code",[t._v("current-page")]),t._v(" props to the "),n("code",[t._v("<table>")]),t._v(" component.")]),t._v(" "),n("li",[t._v("Add the below HTML snippet to the template. Make sure to update the\n"),n("code",[t._v("total-rows")]),t._v(" prop.")])]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("div",{staticClass:"highlight-lines"},[n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("br"),n("div",{staticClass:"highlighted"},[t._v(" ")]),n("br"),n("br"),n("br"),n("br"),n("br")]),n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-col")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("6"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-group")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("table-pagination-select"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":label")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("global.table.itemsPerPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("label-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pagination-items-per-page"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-select")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pagination-items-per-page"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("perPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":options")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("itemsPerPageOptions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-form-group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-col")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("6"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-pagination")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("first-number")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("last-number")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":per-page")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("perPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":total-rows")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getTotalRowCount(items.length)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("aria-controls")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("table-event-logs"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[n("img",{attrs:{src:s(377),alt:"Table pagination example"}})]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-container")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-table")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hover")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("responsive")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("filteredItems"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fields")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fields"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":per-page")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("perPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":current-page")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-col")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("6"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-group")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("table-pagination-select"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":label")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("global.table.itemsPerPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("label-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pagination-items-per-page"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-select")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pagination-items-per-page"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("perPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":options")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("itemsPerPageOptions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-form-group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-col")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("6"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-pagination")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("first-number")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("last-number")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":per-page")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("perPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":total-rows")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getTotalRowCount(items.length)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("aria-controls")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("table-event-logs"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-col")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-row")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-container")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" BVPaginationMixin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  currentPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  perPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  itemsPerPageOptions\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Mixins/BVPaginationMixin'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  mixins"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" BVPaginationMixin "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      items"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fields"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      currentPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      perPage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      itemsPerPageOptions\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/30.994c9683.js b/assets/js/30.994c9683.js
new file mode 100644
index 00000000..2c5e764c
--- /dev/null
+++ b/assets/js/30.994c9683.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{417:function(t,a,s){"use strict";s.r(a);var e=s(41),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"internationalization"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#internationalization"}},[t._v("#")]),t._v(" Internationalization")]),t._v(" "),s("p",[t._v("The OpenBMC Web UI implements internationalization and separates the language-\nspecific parts of the interface from the rest of the code, so they can be\neasily replaced. The OpenBMC Web UI uses the following library for\ninternationalization:")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://kazupon.github.io/vue-i18n/introduction.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue I18n"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"key-naming-convention"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#key-naming-convention"}},[t._v("#")]),t._v(" Key naming convention")]),t._v(" "),s("p",[t._v("The OpenBMC Web UI follows the following key naming conventions:")]),t._v(" "),s("ul",[s("li",[t._v("Page specific labels should be nested in an object with a key prefixed "),s("code",[t._v("page")]),t._v("\nfollowed by the page title. Formatting in this manner provides a systematic\nstructure and improves readability of the language file.\n"),s("ul",[s("li",[t._v("e.g. "),s("code",[t._v("pageLocalUserManagement.editUser")])])])]),t._v(" "),s("li",[t._v("Any 'major' child components should be nested inside page specific objects\n(ex. table, modal)\n"),s("ul",[s("li",[t._v("e.g. "),s("code",[t._v("pageEventLogs.table.eventType")])])])]),t._v(" "),s("li",[t._v("Avoid any complex linked locale messages.")]),t._v(" "),s("li",[t._v("Alphabetize object keys. This helps in locating the keys.")]),t._v(" "),s("li",[t._v("We use the "),s("code",[t._v("$t()")]),t._v(" function in markup and "),s("code",[t._v("this.$t")]),t._v(" in scripts (which Vue I18n\nprovides to our components) for outputting translation messages.")])]),t._v(" "),s("h2",{attrs:{id:"using-the-vue-i18n-plugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-the-vue-i18n-plugin"}},[t._v("#")]),t._v(" Using the Vue I18n plugin")]),t._v(" "),s("ul",[s("li",[t._v("A new "),s("code",[t._v("src/i18n.js")]),t._v(" file is added and it registers Vue I18n as a plugin to\nour Vue instance via the "),s("code",[t._v("Vue.use()")]),t._v(" function.")]),t._v(" "),s("li",[t._v("The CLI creates a "),s("code",[t._v("src/locales/en-US.json")]),t._v(" file, which contains our default\ntranslation messages.")]),t._v(" "),s("li",[t._v("The keys are placed in the "),s("code",[t._v("src/locales/en-US.json")]),t._v(" file and then the "),s("code",[t._v("$t()")]),t._v("\nfunction is used to output the translation messages.")]),t._v(" "),s("li",[t._v("After adding or removing calls to "),s("code",[t._v("$t")]),t._v(" please run this to ensure consistent\nEnglish translation (note: using variable expansion in key names is not\nhandled automatically, you need to manually check them):")])]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[t._v("node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/**/*.?(js|vue)'")]),t._v(" -l "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/locales/en-US.json'")]),t._v("\n")])])]),s("ul",[s("li",[t._v("If you're working on updating a translation for another language (e.g.\nRussian), run this to see the omissions (as well as cruft) and add the\nnecessary keys automatically:")])]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[t._v("node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/**/*.?(js|vue)'")]),t._v(" -l "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/locales/ru-RU.json'")]),t._v(" -a\n")])])]),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pageDumps"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"dumpsAvailableOnBmc"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Dumps available on BMC"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-Vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("page-section")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":section-title")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("pageDumps.dumpsAvailableOnBmc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("ul",[s("li",[t._v("Vue I18n’s "),s("code",[t._v("$tc()")]),t._v(" function can help with displaying plurals.\n"),s("a",{attrs:{href:"https://kazupon.github.io/vue-i18n/guide/pluralization.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about\npluralization."),s("OutboundLink")],1)])]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"modal"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"deleteDump"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Delete dump | Delete dumps"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-JS extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$bvModal\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("msgBoxConfirm")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$tc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pageDumps.modal.deleteDumpConfirmation'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$tc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pageDumps.modal.deleteDump'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   okTitle"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$tc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pageDumps.modal.deleteDump'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   cancelTitle"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'global.action.cancel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=n.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/31.06af27be.js b/assets/js/31.06af27be.js
new file mode 100644
index 00000000..afa14c9c
--- /dev/null
+++ b/assets/js/31.06af27be.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{418:function(e,t,n){"use strict";n.r(t);var a=n(41),s=Object(a.a)({},(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[n("h1",{attrs:{id:"motion"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#motion"}},[e._v("#")]),e._v(" Motion")]),e._v(" "),n("p",[e._v("The motion guidelines are based on Carbon Design System guidelines. These\nguidelines avoid easing curves that are unnatural, distracting, or purely\ndecorative. "),n("a",{attrs:{href:"https://www.carbondesignsystem.com/guidelines/motion/basics/",target:"_blank",rel:"noopener noreferrer"}},[e._v("The documentation below is attributed to Carbon's animation\ndocumentation"),n("OutboundLink")],1),e._v(".")]),e._v(" "),n("h2",{attrs:{id:"easing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#easing"}},[e._v("#")]),e._v(" Easing")]),e._v(" "),n("h3",{attrs:{id:"productive-motion"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#productive-motion"}},[e._v("#")]),e._v(" Productive motion")]),e._v(" "),n("p",[e._v("Productive motion creates a sense of efficiency and responsiveness, while\nremaining subtle and out of the way. Productive motion is appropriate for\nmoments when the user needs to focus on completing tasks.")]),e._v(" "),n("h3",{attrs:{id:"expressive-motion"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#expressive-motion"}},[e._v("#")]),e._v(" Expressive motion")]),e._v(" "),n("p",[e._v("Expressive motion delivers enthusiastic, vibrant, and highly visible movement.\nUse expressive motion for significant moments such as opening a new page,\nclicking the primary action button, or when the movement itself conveys a\nmeaning. System alerts and the appearance of notification boxes are great cases\nfor expressive motion.")]),e._v(" "),n("h3",{attrs:{id:"easing-tokens"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#easing-tokens"}},[e._v("#")]),e._v(" Easing tokens")]),e._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[e._v("$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);\n$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);\n$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);\n$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);\n$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);\n$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);\n")])])]),n("h2",{attrs:{id:"duration"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#duration"}},[e._v("#")]),e._v(" Duration")]),e._v(" "),n("p",[e._v("Duration is calculated based on the style and size of the motion. Among the two\nmotion styles, productive motion is significantly faster than expressive motion.\nMotion’s duration should be dynamic based on the size of the animation; the\nlarger the change in distance (traveled) or size (scaling) of the element, the\nlonger the animation takes.")]),e._v(" "),n("h3",{attrs:{id:"duration-tokens"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#duration-tokens"}},[e._v("#")]),e._v(" Duration tokens")]),e._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[e._v("$duration--fast-01: 70ms; //Micro-interactions such as button and toggle\n$duration--fast-02: 110ms; //Micro-interactions such as fade\n$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements\n$duration--moderate-02: 240ms; //Expansion, system communication, toast\n$duration--slow-01: 400ms; //Large expansion, important system notifications\n$duration--slow-02: 700ms; //Background dimming\n")])])])])}),[],!1,null,null,null);t.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/32.57a17f1c.js b/assets/js/32.57a17f1c.js
new file mode 100644
index 00000000..31605cc2
--- /dev/null
+++ b/assets/js/32.57a17f1c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{419:function(t,s,r){"use strict";r.r(s);var a=r(41),e=Object(a.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"typography"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#typography"}},[this._v("#")]),this._v(" Typography")])])}),[],!1,null,null,null);s.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/33.b9e5db10.js b/assets/js/33.b9e5db10.js
new file mode 100644
index 00000000..6c128beb
--- /dev/null
+++ b/assets/js/33.b9e5db10.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{420:function(t,a,s){"use strict";s.r(a);var n=s(41),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"forms"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forms"}},[t._v("#")]),t._v(" Forms")]),t._v(" "),s("p",[t._v("Forms are created using the "),s("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/form",target:"_blank",rel:"noopener noreferrer"}},[t._v("bootstrap-vue form\ncomponent"),s("OutboundLink")],1),t._v("\nand validated with the "),s("a",{attrs:{href:"https://vuelidate.js.org/#sub-installation",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vuelidate"),s("OutboundLink")],1),t._v("\nplugin.")]),t._v(" "),s("h2",{attrs:{id:"form-component"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#form-component"}},[t._v("#")]),t._v(" Form component")]),t._v(" "),s("p",[t._v("When creating a new form, use the "),s("code",[t._v("<b-form>")]),t._v(" "),s("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/form",target:"_blank",rel:"noopener noreferrer"}},[t._v("form\ncomponent"),s("OutboundLink")],1),t._v(". Use the "),s("code",[t._v(".prevent")]),t._v("\nevent modifier on submit to prevent the submit event from reloading the page.")]),t._v(" "),s("h2",{attrs:{id:"form-group-component"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#form-group-component"}},[t._v("#")]),t._v(" Form group component")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("<b-form-group>")]),t._v(" "),s("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/form-group",target:"_blank",rel:"noopener noreferrer"}},[t._v("form group\ncomponent"),s("OutboundLink")],1),t._v("\npairs form controls with a legend or label, helper text, invalid/valid\nfeedback text, and visual validation state feedback. Learn more about\ncommonly used form components:")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/form-checkbox",target:"_blank",rel:"noopener noreferrer"}},[t._v("Form checkbox"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/form-input",target:"_blank",rel:"noopener noreferrer"}},[t._v("Form input"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/form-radio",target:"_blank",rel:"noopener noreferrer"}},[t._v("Form radio"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://bootstrap-vue.org/docs/components/form-select",target:"_blank",rel:"noopener noreferrer"}},[t._v("Form select"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"/guide/components/file-upload"}},[t._v("Form file custom component")])])]),t._v(" "),s("p",[t._v("When helper text is provided, use the "),s("code",[t._v("<b-form-text>")]),t._v(" component and "),s("code",[t._v("aria-describedby")]),t._v(" on the\nform group component the helper text describes.")]),t._v(" "),s("h2",{attrs:{id:"validation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#validation"}},[t._v("#")]),t._v(" Validation")]),t._v(" "),s("p",[t._v("For custom form validation messages, disable browser native HTML5\nvalidation by setting the "),s("code",[t._v("novalidate")]),t._v(" prop on "),s("code",[t._v("<b-form>")]),t._v(". Use Vuelidate to\ncheck the form validation state and add\ncustom validation messages in the "),s("code",[t._v("<b-form-invalid-feedback>")]),t._v(" component.")]),t._v(" "),s("p",[t._v("When creating a new form add the "),s("code",[t._v("VuelidateMixin")]),t._v("\nto the "),s("code",[t._v("scripts")]),t._v(" block and import any\n"),s("a",{attrs:{href:"https://vuelidate.js.org/#validators",target:"_blank",rel:"noopener noreferrer"}},[t._v("validators"),s("OutboundLink")],1),t._v(" needed\nsuch as: "),s("code",[t._v("required")]),t._v(", "),s("code",[t._v("requiredIf")]),t._v(", etc. The use of built-in validators is\npreferred.")]),t._v(" "),s("h2",{attrs:{id:"complete-form"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#complete-form"}},[t._v("#")]),t._v(" Complete form")]),t._v(" "),s("p",[t._v("A complete form will look like this.")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("novalidate")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@submit.prevent")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleSubmit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-group")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":label")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("pageName.form.inputLabel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("label-for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("form-input-id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-text")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("form-input-helper-text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        {{ $t('pageName.form.helperText') }}\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-form-text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-input")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("form-input-id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("form.input"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("aria-describedby")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("form-input-helper-text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":state")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getValidationState($v.form.input)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@change")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$v.form.input.$touch()"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-form-invalid-feedback")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("role")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("alert"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("!$v.form.input.required"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          {{ $t('global.form.fieldRequired') }}\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-form-invalid-feedback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-form-group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("variant")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("primary"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("submit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mb-3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      {{ $t('global.action.save') }}\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" VuelidateMixin "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Mixins/VuelidateMixin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" required "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuelidate/lib/validators'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'PageName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  components"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mixins"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("VuelidateMixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    form"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      input"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("validations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      form"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        input"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" required "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  computed"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  methods"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleSubmit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$touch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$invalid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$store\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pageName/updateFormData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          formData\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("success")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("successToast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("success"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" message "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("errorToast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finally")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("form"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$reset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("endLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/34.0e496acd.js b/assets/js/34.0e496acd.js
new file mode 100644
index 00000000..f98026ef
--- /dev/null
+++ b/assets/js/34.0e496acd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{421:function(t,a,s){"use strict";s.r(a);var n=s(41),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"page-anatomy"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#page-anatomy"}},[t._v("#")]),t._v(" Page Anatomy")]),t._v(" "),s("p",[t._v("Single-file components (SFC) consist of a "),s("code",[t._v("template")]),t._v(", "),s("code",[t._v("script")]),t._v(" and "),s("code",[t._v("style")]),t._v("\nblock.")]),t._v(" "),s("h2",{attrs:{id:"template-block"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#template-block"}},[t._v("#")]),t._v(" Template block")]),t._v(" "),s("p",[t._v("When creating a new page, each template consists of at least 3 components:")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("<b-container>")])]),t._v(" "),s("li",[s("code",[t._v("<page-title>")])]),t._v(" "),s("li",[s("code",[t._v("<page-section>")])])]),t._v(" "),s("p",[t._v("Learn more about the "),s("a",{attrs:{href:"/guide/components/page-title"}},[t._v("page title")]),t._v("and "),s("a",{attrs:{href:"/guide/components/page-section"}},[t._v("page\nsection")]),t._v(" components.")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("fluid")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("xl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("page-title")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("page-section")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":section-title")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("pageName.sectionTitle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      // Page content goes here\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("page-section")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"scripts-block"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scripts-block"}},[t._v("#")]),t._v(" Scripts block")]),t._v(" "),s("p",[t._v("In the scripts section, be sure to import the "),s("code",[t._v("PageTitle")]),t._v(" and "),s("code",[t._v("PageSection")]),t._v("\ncomponents and declare them in the "),s("code",[t._v("components")]),t._v(" property.")]),t._v(" "),s("p",[t._v("Importing "),s("code",[t._v("BContainer")]),t._v(" in the "),s("a",{attrs:{href:"#scripts-block"}},[t._v("scripts block")]),t._v(" is not required as\nit is already registered globally.")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" PageTitle "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/PageTitle'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" PageSection "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/PageSection'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'PageName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  components"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" PageTitle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" PageSection "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"style-block"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#style-block"}},[t._v("#")]),t._v(" Style block")]),t._v(" "),s("p",[t._v("Add the "),s("code",[t._v("scoped")]),t._v(" attribute to the style block to keep the styles isolated to the\nSFC. While the "),s("code",[t._v("scoped")]),t._v(" attribute is optional, it is preferred and global\nchanges should be done in global style sheets.")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scss"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v(" ")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"complete-single-file-component-sfc"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#complete-single-file-component-sfc"}},[t._v("#")]),t._v(" Complete single-file component (SFC)")]),t._v(" "),s("p",[t._v("The final SFC will look like this.")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("b-container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("fluid")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("xl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("page-title")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":description")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("pageName.pageDescription"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("page-section")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":section-title")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("pageName.sectionTitle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      // Page content goes here\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("page-section")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("b-container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" PageTitle "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/PageTitle'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" PageSection "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/components/Global/PageSection'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'PageName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  components"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" PageTitle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" PageSection "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scss"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".example-class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Styles go here */")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n ")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/35.49b0ff49.js b/assets/js/35.49b0ff49.js
new file mode 100644
index 00000000..a1a4b819
--- /dev/null
+++ b/assets/js/35.49b0ff49.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{422:function(t,s,a){"use strict";a.r(s);var n=a(41),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"store-anatomy"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store-anatomy"}},[t._v("#")]),t._v(" Store Anatomy")]),t._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" Store")]),t._v(" "),a("p",[t._v('A "store" is a container that holds the application\'s state. '),a("a",{attrs:{href:"https://vuex.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about\nVuex."),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-sh extra-class"},[a("pre",{pre:!0,attrs:{class:"language-sh"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Store structure")]),t._v("\n└── store\n    ├── api.js                             "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# axios requests")]),t._v("\n    ├── index.js                           "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# import store modules")]),t._v("\n    ├── plugins\n    └── modules\n        └── FeatureName                    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# feature module")]),t._v("\n            ├── FeatureStore.js            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# feature store")]),t._v("\n            ├── AdditionalFeatureStore.js  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# additional features per store")]),t._v("\n            ├── AnotherFeatureStore.js     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# additional features per store")]),t._v("\n")])])]),a("h3",{attrs:{id:"modules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modules"}},[t._v("#")]),t._v(" Modules")]),t._v(" "),a("p",[t._v("The application store is divided into modules to prevent the store from getting\nbloated. Each module contains its own state, mutations, actions, and getters.\n"),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/modules.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about Vuex modules."),a("OutboundLink")],1)]),t._v(" "),a("h4",{attrs:{id:"module-anatomy"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#module-anatomy"}},[t._v("#")]),t._v(" Module Anatomy")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("State:")]),t._v(" You cannot directly mutate the store's state. "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/state.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about\nstate."),a("OutboundLink")],1)]),t._v(" "),a("li",[a("strong",[t._v("Getters:")]),t._v(" Getters are used to compute derived state based on store state.\n"),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/getters.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about getters."),a("OutboundLink")],1)]),t._v(" "),a("li",[a("strong",[t._v("Mutations:")]),t._v(" The only way to mutate the state is by committing mutations,\nwhich are synchronous transactions. "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/mutations.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about\nmutations."),a("OutboundLink")],1)]),t._v(" "),a("li",[a("strong",[t._v("Actions:")]),t._v(" Asynchronous logic should be encapsulated in, and can be composed\nwith actions. "),a("a",{attrs:{href:"https://vuex.vuejs.org/guide/actions.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn more about\nactions."),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("Import new store modules in "),a("code",[t._v("src/store/index.js")]),t._v(".")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `src/store/index.js`")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vuex "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuex'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" FeatureNameStore "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./modules/FeatureNameStore'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nVue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Vuex"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vuex"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mutations"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  actions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  modules"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    feature"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" FeatureNameStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store names can be renamed for brevity")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"complete-store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#complete-store"}},[t._v("#")]),t._v(" Complete store")]),t._v(" "),a("p",[t._v("A store module will look like this.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" api "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/store/api'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/i18n'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" FeatureNameStore "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// getters, actions, and mutations will be namespaced")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// based on the path the module is registered at")]),t._v("\n  namespaced"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  state"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    exampleValue"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Off'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  getters"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// namespace -> getters['featureNameStore/getExampleValue']")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getExampleValue")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exampleValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mutations"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// namespace -> commit('featureNameStore/setExampleValue)")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("setExampleValue")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exampleValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  actions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// namespace -> dispatch('featureNameStore/getExampleValue')")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getExampleValue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" api\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/redfish/v1/../..'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setExampleValue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" response"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// namespace -> ('featureNameStore/saveExampleValue', payload)")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("saveExampleValue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" api\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("patch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/redfish/v1/../..'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" payload "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setExampleValue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" FeatureNameStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/36.dbed5155.js b/assets/js/36.dbed5155.js
new file mode 100644
index 00000000..b0b95552
--- /dev/null
+++ b/assets/js/36.dbed5155.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{423:function(t,e,n){"use strict";n.r(e);var o=n(41),r=Object(o.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"getting-started"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[t._v("#")]),t._v(" Getting Started")]),t._v(" "),n("p",[t._v("This guide outlines the architecture and technologies used to build the OpenBMC\nWeb UI. This guide exists to serve the following goals:")]),t._v(" "),n("ol",[n("li",[t._v("Improve contributor efficiency while maintaining the quality and consistency\nof the user interface")]),t._v(" "),n("li",[t._v("Act as a collection of community agreed-upon standards")])]),t._v(" "),n("h2",{attrs:{id:"coding-standards"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#coding-standards"}},[t._v("#")]),t._v(" Coding Standards")]),t._v(" "),n("p",[t._v("Having an understanding of semantic HTML, CSS, and JavaScript is the critical\nknowledge required to contribute to this project. The frameworks and libraries\nused to build this UI include:")]),t._v(" "),n("ul",[n("li",[n("a",{attrs:{href:"https://vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://vuex.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vuex"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://router.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue Router"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/axios/axios",target:"_blank",rel:"noopener noreferrer"}},[t._v("Axios"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://bootstrap-vue.js.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Bootstrap-vue"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://vuelidate.js.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vuelidate"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://kazupon.github.io/vue-i18n/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue I18n"),n("OutboundLink")],1)])]),t._v(" "),n("div",{staticClass:"custom-block tip"},[n("p",{staticClass:"custom-block-title"},[t._v("Acquiring an understanding of these technologies will also be necessary.")])]),t._v(" "),n("p",[t._v("You will find more information about the standards and best practices in the\n"),n("RouterLink",{attrs:{to:"/guide/coding-standards/"}},[t._v("Coding Standards section of this guide")]),t._v(".")],1),t._v(" "),n("h2",{attrs:{id:"guidelines"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#guidelines"}},[t._v("#")]),t._v(" Guidelines")]),t._v(" "),n("p",[t._v("The "),n("RouterLink",{attrs:{to:"/guide/guidelines/colors.html"}},[t._v("guidelines section")]),t._v(" contains the OpenBMC\ncommunity agreed-upon decisions on color, motion, and typography within the\napplication. How to theme the application to meet company brand guidelines is\ndocumented in "),n("RouterLink",{attrs:{to:"/customization/"}},[t._v("Customization")]),t._v(".")],1),t._v(" "),n("h2",{attrs:{id:"components"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[t._v("#")]),t._v(" Components")]),t._v(" "),n("p",[t._v("The "),n("RouterLink",{attrs:{to:"/guide/components/"}},[t._v("components section")]),t._v(" is a guide to using both custom Vue\ncomponents and components from the Bootstrap-Vue library.")],1)])}),[],!1,null,null,null);e.default=r.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/37.c48db488.js b/assets/js/37.c48db488.js
new file mode 100644
index 00000000..ee716728
--- /dev/null
+++ b/assets/js/37.c48db488.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{424:function(t,e,s){"use strict";s.r(e);var n=s(41),a=Object(n.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"unit-testing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unit-testing"}},[t._v("#")]),t._v(" Unit Testing")]),t._v(" "),s("p",[t._v("The goal of a unit test is to improve code quality and assure future\ndevelopment or refactoring does not result in broken builds and functionality.\nTests that require consistent updating when refactoring code are likely tightly\ncoupled to the internals of the component.")]),t._v(" "),s("blockquote",[s("p",[t._v("Writing unit tests is a constant struggle between writing enough tests and\nnot writing too many. I call this the unit testing Goldilocks rule—not too\nmany, not too few, but just enough. Thousands of tests for a small\napplication can be as damaging to development time as no tests.")]),t._v(" "),s("p",[t._v("-- "),s("cite",[t._v("Ed Yerburgh, Testing Vue Applications (New York: Manning\nPublications, 2019)")])])]),t._v(" "),s("h2",{attrs:{id:"test-libraries"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#test-libraries"}},[t._v("#")]),t._v(" Test Libraries")]),t._v(" "),s("p",[t._v("The OpenBMC Web UI unit test framework uses the Jest test runner and relies on\nthe following libraries:")]),t._v(" "),s("ul",[s("li",[t._v("@vue/cli-plugin-unit-jest")]),t._v(" "),s("li",[t._v("@vue/test-utils")])]),t._v(" "),s("h2",{attrs:{id:"test-specification-location-and-naming-conventions"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#test-specification-location-and-naming-conventions"}},[t._v("#")]),t._v(" Test specification location and naming conventions")]),t._v(" "),s("ul",[s("li",[t._v("Create the test files in the /tests/unit directory")]),t._v(" "),s("li",[t._v("The naming convention is to replicate the folder and component name")])]),t._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("ul",[s("li",[t._v("The AppHeader.vue single-file component's (SFC) spec file is named\n"),s("code",[t._v("AppHeader.spec.js")])]),t._v(" "),s("li",[t._v("Create a global component like "),s("code",[t._v("PageSection.vue")]),t._v(" in the "),s("code",[t._v("/tests/global")]),t._v("\ndirectory with the name "),s("code",[t._v("PageSection.spec.js")])]),t._v(" "),s("li",[t._v("Create a mixin like BVToastMixin  in the "),s("code",[t._v("/tests/mixins")]),t._v(" directory with the\nname "),s("code",[t._v("BVToastMixin.spec.js")]),t._v(" Running Tests")])]),t._v(" "),s("h2",{attrs:{id:"running-tests"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#running-tests"}},[t._v("#")]),t._v(" Running Tests")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("test:unit")]),t._v(" script will run all the test suites. Until the integration of\nthe test script with the continuous integration tool is complete, it needs to be\nrun manually before pushing up code for review. If you are working on fixing a\ntest that is failing, follow the guidelines for debugging a failed tests or\nfixing failed snapshot tests.")]),t._v(" "),s("h3",{attrs:{id:"debugging-a-failed-test"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#debugging-a-failed-test"}},[t._v("#")]),t._v(" Debugging a failed test")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("test:unit:debugger")]),t._v(" script will help to debug failing tests using the\nChrome Developer Tools. To debug a test:")]),t._v(" "),s("ol",[s("li",[t._v("Add a "),s("code",[t._v("debugger")]),t._v(" statement in the specifications file")]),t._v(" "),s("li",[t._v("Run the unit test in debugger mode")]),t._v(" "),s("li",[t._v("Open the Chrome browser and go to "),s("code",[t._v("chrome://inspect")])])]),t._v(" "),s("h3",{attrs:{id:"fixing-failed-snapshot-tests"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fixing-failed-snapshot-tests"}},[t._v("#")]),t._v(" Fixing failed snapshot tests")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("test:update")]),t._v(" script will update snapshot tests. If the UI has changed and\nthe snapshot tests are failing, after manually verifying the UI changes, run the\nupdate script to update the snapshots. Running "),s("code",[t._v("test:update")]),t._v(" can be dangerous,\nas it will update all snapshot tests.")]),t._v(" "),s("p",[t._v("It is critical to verify all snapshot tests before running the update script.\nThe easiest way is to run the unit test in watch mode, "),s("code",[t._v("npm run test:unit -- --watch")]),t._v(" and verify each snapshot.")]),t._v(" "),s("h2",{attrs:{id:"guidelines"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#guidelines"}},[t._v("#")]),t._v(" Guidelines")]),t._v(" "),s("ul",[s("li",[t._v("Avoid coupling test code to source code when testing functionality\n"),s("ul",[s("li",[t._v("If test cases fail during refactoring, the test case may be tightly\ncoupled with the application structure.")])])]),t._v(" "),s("li",[t._v("A test should not break if the functionality it tests has not changed")]),t._v(" "),s("li",[t._v("To maintain test readability, only pass in the data needed for the test to\nwork in your mock object")]),t._v(" "),s("li",[t._v("Avoid the creation of side-effects whenever possible")]),t._v(" "),s("li",[t._v("There is no return on investment for testing presentational HTML")]),t._v(" "),s("li",[t._v("Use "),s("code",[t._v("shallowMount")]),t._v(" rather than mount unless child component rendering is\nrequired")]),t._v(" "),s("li",[t._v("Avoid leaky tests by using "),s("code",[t._v("localVue")]),t._v(" for all plugin installs, for example,\nwhen testing a plugin like Vuex")])]),t._v(" "),s("h2",{attrs:{id:"components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[t._v("#")]),t._v(" Components")]),t._v(" "),s("h3",{attrs:{id:"what-to-test"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-to-test"}},[t._v("#")]),t._v(" What to test")]),t._v(" "),s("ol",[s("li",[t._v("Test the function's inputs and outputs\n"),s("ul",[s("li",[t._v("Test only dynamically generated output")]),t._v(" "),s("li",[t._v("Test only output that is part of the component contract")])])]),t._v(" "),s("li",[t._v("Test any side-effects")]),t._v(" "),s("li",[t._v("Test correct rendering using a snapshot test")])]),t._v(" "),s("h3",{attrs:{id:"what-not-to-test"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-not-to-test"}},[t._v("#")]),t._v(" What not to test")]),t._v(" "),s("ol",[s("li",[t._v("Don't test third-party functionality")]),t._v(" "),s("li",[t._v("Don't test the internals of your components or that specific functions are\ncalled. This can lead to unnecessary refactoring.")]),t._v(" "),s("li",[t._v("Don't go beyond the input and outputs of the component")]),t._v(" "),s("li",[t._v("Don't test the functionality of other libraries")]),t._v(" "),s("li",[t._v("Static components do not need unit tests, use snapshot testing")])]),t._v(" "),s("h3",{attrs:{id:"strategy"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#strategy"}},[t._v("#")]),t._v(" Strategy")]),t._v(" "),s("ol",[s("li",[t._v("Define a component contract that is based upon the component API")]),t._v(" "),s("li",[t._v("Create smaller functions with a specific purpose to make testing easier")]),t._v(" "),s("li",[t._v("Test the component API by writing tests first and then writing code to fix\nthe tests")]),t._v(" "),s("li",[t._v("Add a snapshot test once the presentational layer is validated through manual\nvisual testing")])]),t._v(" "),s("h3",{attrs:{id:"snapshot-testing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#snapshot-testing"}},[t._v("#")]),t._v(" Snapshot Testing")]),t._v(" "),s("p",[t._v("A snapshot test is a comparison of the code from two different points in time.\nWhen the view is rendering as expected, a snapshot is taken and when the test\nsuite is run, this snapshot is compared to the current code to make sure nothing\nhas changed.")]),t._v(" "),s("p",[t._v("This type of testing is good for testing that static content output has not\nchanged due to any code updates or refactoring. Too many snapshots can slow down\ndevelopment during refactors. Typically, these are written once the UI\npresentational layer is complete and validated.")]),t._v(" "),s("h2",{attrs:{id:"vuex-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vuex-store"}},[t._v("#")]),t._v(" Vuex Store")]),t._v(" "),s("p",[t._v("There are two testing strategies for testing a Vuex store, which include testing\nstore parts separately or testing a running store instance. Each strategy has\nits pros and cons. Given the size of the store and the number of developers that\ncould potentially contribute to the project, the suggested strategy is to "),s("code",[t._v("test store parts separately")]),t._v(".")]),t._v(" "),s("h3",{attrs:{id:"testing-store-parts-separately"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#testing-store-parts-separately"}},[t._v("#")]),t._v(" Testing Store Parts Separately")]),t._v(" "),s("p",[t._v("Testing the parts separately is easy since each of the parts is a JavaScript\nfunction. Store parts to test include "),s("code",[t._v("actions")]),t._v(", "),s("code",[t._v("getters")]),t._v(", and "),s("code",[t._v("mutations")]),t._v(".")]),t._v(" "),s("h4",{attrs:{id:"actions"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#actions"}},[t._v("#")]),t._v(" Actions")]),t._v(" "),s("p",[t._v("Since HTTP calls should never be used in a test, actions require extreme\nmocking. Mocking tests rely on assumptions and can lead to faulty tests.")]),t._v(" "),s("h4",{attrs:{id:"getters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getters"}},[t._v("#")]),t._v(" Getters")]),t._v(" "),s("p",[t._v("Getters are JavaScript functions that return an output. These are basic\nfunctions that may not require testing unless there is getter logic. Any logic\nin a getter should be tested.")]),t._v(" "),s("h4",{attrs:{id:"mutations"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mutations"}},[t._v("#")]),t._v(" Mutations")]),t._v(" "),s("p",[t._v("Mutations are JavaScript functions that mutate the store state. These are basic\nfunctions that may not require testing unless there is mutation logic. Any logic\nin a mutation should be tested.")]),t._v(" "),s("h4",{attrs:{id:"pros"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pros"}},[t._v("#")]),t._v(" Pros")]),t._v(" "),s("ul",[s("li",[t._v("Easier to debug")]),t._v(" "),s("li",[t._v("Smaller tests")])]),t._v(" "),s("h4",{attrs:{id:"cons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cons"}},[t._v("#")]),t._v(" Cons")]),t._v(" "),s("ul",[s("li",[t._v("Requires extreme mocking when testing actions")]),t._v(" "),s("li",[t._v("Tightly coupled with implementation details")]),t._v(" "),s("li",[t._v("More maintenance required when refactoring")])]),t._v(" "),s("h3",{attrs:{id:"testing-store-instance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#testing-store-instance"}},[t._v("#")]),t._v(" Testing Store Instance")]),t._v(" "),s("ul",[s("li",[t._v("Uses mutations and actions as inputs")]),t._v(" "),s("li",[t._v("State is the output")]),t._v(" "),s("li",[t._v("Requires the use of "),s("code",[t._v("localVue")]),t._v(" when creating the store to avoid leaky tests")])]),t._v(" "),s("h4",{attrs:{id:"pros-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pros-2"}},[t._v("#")]),t._v(" Pros")]),t._v(" "),s("ul",[s("li",[t._v("Avoids mocking and brittle tests")]),t._v(" "),s("li",[t._v("Refactoring does not break test unless contract changes")])]),t._v(" "),s("h4",{attrs:{id:"cons-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cons-2"}},[t._v("#")]),t._v(" Cons")]),t._v(" "),s("ul",[s("li",[t._v("Debugging is more difficult")])]),t._v(" "),s("h2",{attrs:{id:"vue-router"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vue-router"}},[t._v("#")]),t._v(" Vue Router")]),t._v(" "),s("ul",[s("li",[t._v("Our current structure does not warrant testing the vue router")]),t._v(" "),s("li",[t._v("If there is logic used for creating "),s("code",[t._v("RouteLink")]),t._v(" items, we should unit test\nthat functionality, which requires stubbing")]),t._v(" "),s("li",[t._v("When testing a vue router, it is important to use localVue")])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://vuex.vuejs.org/guide/testing.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vuex Testing"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"resources"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resources"}},[t._v("#")]),t._v(" Resources")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://vue-test-utils.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue Test Utils"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://vuejsdevelopers.com/2019/08/26/vue-what-to-unit-test-components/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Knowing What To Test — Vue Component Unit\nTesting"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://www.dev-tips-and-tricks.com/how-to-unit-test-a-vuex-store",target:"_blank",rel:"noopener noreferrer"}},[t._v("How to unit test a vuex\nStore"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);e.default=a.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/38.2cecf29e.js b/assets/js/38.2cecf29e.js
new file mode 100644
index 00000000..eb152104
--- /dev/null
+++ b/assets/js/38.2cecf29e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{425:function(t,e,n){"use strict";n.r(e);var s=n(41),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/4.e088be67.js b/assets/js/4.e088be67.js
new file mode 100644
index 00000000..af5e7847
--- /dev/null
+++ b/assets/js/4.e088be67.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{358:function(t,a){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAnCAYAAAB5XdqFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAS0SURBVFhH1ZhJTxRbFIAPIAiKIFMkYhAIG4ZIGARDJHGByLAQEkwMG/8crCAhhHlw4woCMUAYFsgCkFkZVSbhvfedVEF3VXVT3dUxzy8hTd+qrvvVPeeee6ui/vkP+QuINj7/90RsRL98+SIrKytyfHwsMTExkpKSIgUFBZKWlmac4Y2wRH/+/Cl7e3vy8eNH2d3dVbE7d+7oZ1RUlJ5zdXUlv3//lsvLS/2srq6W4uJivYFwCFl0YWFBJicnVTQ+Pl7lboMuLi4u5Pz8XJ49eyb5+fmSk5NjHHWHa9EfP35IT0+PHBwcSHR0tCtBK6Ywv62oqJDnz58bR27Hleja2pq0t7fLw4cPVdIMb7iQFowu1/rw4YM8ePDAOBKYW0WXlpZkaGhI4uLiPAtaIXdjY2OlpaVF0tPTjVZngpYnRnJ0dFQvFmlJIAVIhd7eXk2pYAQU3dnZkY6ODg0Pf74QBBcZcyvcPLJUkU+fPhmtzgQUZeKYOekLguQY7ZQeryBLWi0vL8vMzIzRasdRdHx8XJPdGm4kT05O5MWLF/L69Ws9HglZSEhIkImJCeObHZsogl+/flUJqyjJX15eLqWlpVoH3717p6Gj3Sv0Rd+Dg4NGiz82UZZCRJ3qJOHe3NzUUQWWx/r6ei38XmUR5fpnZ2eOUbKJMvtYDq2jCVyISdbX1ye/fv3StuzsbKmtrdXK4FWWwVlfX9d8teInyuz7/PmzduoE8hzb3t6Wrq4u+fbtm7Yj29raqnnmRZbrm3sDK36iTBanSeQLx5il7JIGBgbk6OhI29lsNDQ0yL179zzJErXDw0Pj2w1+okgEk/SFkUWyv79f9wGQmZkpdXV1eiMU8nAg/Cw01t/bcjQUEGIX1dnZKVtbW9r2+PFjrQas3+HIMqLfv3+3RcWTKDCyTKzh4WHtAJKTk6WpqUkSExPDkiX9rCufZ1FAlvCTBmZ+UbrevHmjORuKLIJ37961paBtMoULskww0mBjY0PbyFnSIDU1VUfJDSzPGRkZej1fbCOKbLjCXByhkZGR65wl/KRBUlKSq5GlPLHqUct98RNlyLOysvSuwoUOyFmWwv39fW1DsrGxUSeYU/75Qt/UYyt+ooxISUmJ6zAFAlmWWRaF1dVVbWNjzKLw6NEjndFOsqbk/fv3jZYbbKHnRP68jCogS6jHxsauZZlYzc3N+ukkStgpb0+fPjVabrCJchJ3HYntG7Knp6f6KGOWLr6z8bDOalM8NzdXP604PjOxMeju7tZUcLtSBYObRrqwsFDm5+c1WhR2XziH+tvW1ma0+GMbUWBCFRUVec5VE5ZFRKanpx0lgdLGljEQjqJQU1Nz3UEkQI4IWSUJKJKvXr3SehuIgKKE6v3793rhSMlaQZJ8ZVAqKyuNVmcCigJ3+PbtW/3fy9YtECy7CN4mCa7elLCdY2kkRDx2OOWYW+iOCCHJk0FZWZlxJDiu3z3B7OysTE1NaSds8UIRNgWprZSgly9fBs1JKyGJAs9Uc3Nzsri4eC1MPgcqY8xyqgeSeXl5WtBDeTlmErKoCds5JHgHwKtILmOV5TiPKFVVVfLkyRNdGrmxcAhb9E8T/qz4w/wloiL/AiewfGYa++arAAAAAElFTkSuQmCC"},359:function(t,a){t.exports="data:image/png;base64,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"},360:function(t,a){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAkCAYAAAD/yagrAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAVESURBVFhH1Zh/bFNVFMe//b2u29rNdWWMgcvc3CJoMCYuoH/4h4kEMfCPEoJR4w8MMxpFMYSIxEwxUZxGiehiQpAQjInGqImIEDVkRgXU6RICYTKQjc2127quP9979Zy7t6zre699bVHiJ7nrdtrd++2555x77rOkCfwPuCJCv/0lht//TMFmtcCi2hhZSaO60oYNd3rm2YuhaKGj4zK2vT+O0JSC88MSQmEFFqv6pgrP7HJY0Npoh8tpwUN3VeLuFW713cIoWOgICezYNIzpRBpejwVW8qLdBlgt5E0dtyk0vSTTqwLEEgqGgzK+fj2AjhtcKC/L+mY5MC00kUrjtYNh7PsqAocdNIrbTF4tGJZxa7sLe5+tQaCaJjOBaaG3dV7GUFCC22URsVgKvGKUvOursOKLV+tQf01+sXmFSnIa7fdfEr+XUZxZ9PZXRaHkicRnpuPY5JGLJO0S79SBF/xYudSlWvXJKXQqqmBj1xj6zyfhdlp1Y3AWFsls3eBFSkrjm5NxnDqTzCuWhdZUWvFJF3uWgt2AnEL3H45gxwcTqCzP7UkmElPQua4KW+6rEn9Pk2eb1/+FumrjxWfhJPN6rDjRs1C1aDFMuwEqOZvfCJoSOUtm6HKYmMXtsmJsUsFTb4dUixZDj656bkSIzbd1s/DW80Q7H/RRSQK++zWOIyfiIvnMwP+flIDjexagzqfdBV2hA0MprH5+lLKbvFRAhvNJxDHHNZWnLcsT15nw52NUm++9w4NXHqtWrXPobv2uA5MiIwsRyXDZctOWuxy89eZFMhxevN7giCSSMRvDGLXZzK/CyTA2KYsRpKOURzROR1GBOOkL/nw6SSETUy1zaIT2/pHAqbNJcfqYgUWuu70cP+6tx7E3F4jxw7v1eHxtJaapEhQChwzPx8dzNhqhF/+WMBKSTZ8+MmkJUAlqrLOjbbFDjCUBu6iJUuFOFdufMCO00ASyU4icuSjh6MkYDv80t2UyNSLF4KCE7xtIimM2E8MYNQsnTm9/Ak++FcJL+yZUa/HwF+87l6IDY/52lCx05jBIixDgVq5U2JNeala4dcykZKHMTGnhV9VQAtwEtTU6RHnLRCOUaxh/+GrBCdi2WFtyNEKXX+dEK31Q0im6/wUyOUmvhmuEti1xYlmTE8mr4FU+grnbWlSrPes1QpmKcjKnZ87rfHCY8PnOg5uKWSRuMlQ7DzPw52+53okVy8pUyxy6Qnc9Wi1OpnxZzCIb/DYRLjc1O7G0iWqVit9L9hYnbmx24OZWZ16x7BS+bLdf61Qt8zFs817+cAI9n0dQRQ2tERMRBe9tqcGqjnLVYkztmgtYWGt8LnNs8o6cPdigWuZjqGLrei/iybRuJ5MJ956lwr4aomv0oRf9qkVLzqvI6cEU1m4fFTWST4xsOKaWtzjQVO/IWdKcdisOHYvo3uN5+XA0jYdXV2DHAz7VqiWnUOaz41E8805IdOp6PQCLNVN3jR428LW5qd6Oj3b66ZJnfL/KK5TZ82kY23sm0EBlo5A+NRf8BCVOXRI3Qf37G3R3LBNTQpnvf4ujsztIDXEaHrdhaJuC455XbaR28MjugGrNjWmhTN+5BLo/nsKXvTH4fdaCvcsrhaMzV+OuR7y4Z6VHfSc/BQlluIwcPRXHE90h8QzJV8mdDldAmox+iDCmwbNyReBXHnzvH59SsG1jFTatqUKgxjge9ShYaDZPU6INXpZEm8dPVnjw07sKt0XUYL7f81bv3lyDFuqKiqVkoZlcGpNxYSQlrr2L/HaRzcU+9cvmigr99wD+AWcAYQB6puA5AAAAAElFTkSuQmCC"},361:function(t,a){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAIAAAAnX375AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAQPSURBVFhHvZdfTBxFHMdnZvd2j+M4/hRtU4xKJXDEpvBiamKbNjE10Zj6atPHmj6Aib40fZIno/jsn5g04cGQ+u9BTTQanvzTNvWlqYoE1BgBoQWEE7jb278z/mZnbuG4ub3FFj7Z3M7vl5357u83v52Zw4wxtL8Qed9HdhFl+c9L/voP0CW8KtBy6tCFdNfL0kxAA0kWbLpL46WZIUQRrpcRhsQYuSdvaek+rGVCb13iJJ2F9+zZkcBaxSnp4dFti1AQDcAcpHc8nu5+wzhwVrpUqCWpt1L+Y9hd/BRp9YNTwQL+Tkbn2eajX0hXDQrJwJrZuJnn0RCEa2JqCIzHfJTqPJUd+FbZe2cIgTW1fiPP3f9LD4BeWEfeP98Vb5+UrmqqJIPSdPH2CegAyaynx4OoXPWAviSFvNVrmz+dkq5tVEk6f79J7UJtgURwGQhCa8LExMSIUQXCWL+3ps5Ju8KWpLvycXn2A14vMfmkSG893XbCajtp547PMk+6lfAMa8grfB0Ub0lXyJakNfUiMWP1BNQWd+atiEYMMEGBve4svCvtECnpLV+lvmjeZyC99vwYdRelHUmW59+KKZl7gY+Jkbs8Lm0hSe155P8bUzX3CARanr4sDSHprnwUlOb2TnIHXJJRD8p9L7IqgIEZ1FHpV2FyScwR5p6BYWX4TDRl+ew1EFFQ/Fm090UyTCH1lkNjfyTDdVEzHwkNUT6wdsaultVU3jLauBMA42u5p0Sb98dIg/JJpMofs5m/QZ1Fav8lMtYQvhcwZB6+KEy+RfsbPxYnn2VeIUndMgqra9gifIdKAgTDXNRxRsbEo9Rzx4n5KOwSSYB1EVZ/fiXPK4P9p1e2o4nRs4PRQa0hPFCf/yZBhJgdmJB2JJnpG4vf/CLgQEUy3ebDw8R8gB+uGgIhtvdjrUOakSSQ6RuBd48HIgO9lsGbmZ53mvMfYqM1PlYeoo+Mw0NYb5Gu7ZLGQ68SAzdIF4NZ7CLGg9DU259Od70SUwF8migyDj6z4yy/JUn09uzAdf4ZxKhCSVdSASN6a99sG0AFRs39n8h2hZ3nWGfpaumX8/CVKz8YeJbouRQcxolJ3bvu0lfquoV8wo+DsseuGIdeks4KiqOzPfe69dtr4mhZi0gXHzI8TSkAPShpiprzb5uqv0fqPwje2kRp8jnmByC8K2AwSLyeyzd1j6Y6X5DeatSSACxJzvyovfA5MXhAQMzaJMcI9cyu85ne97GWDV0K6koKvNUvrelzgV2USQZVIR+mlgO3sMW/16b23BPTop5jaCApCJwFa/J5pGWYX6Dl31nggwBMJE5lSfoIJmmSfiyTH8fKya8hkWQECyyvMMHcO8xfw6mDpKlHbztdP99qdid5H0DoP4bpoyBCzuShAAAAAElFTkSuQmCC"},362:function(t,a){t.exports="data:image/png;base64,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"},363:function(t,a,s){t.exports=s.p+"assets/img/appHeaderWithStatusIcon.8a62f412.png"},364:function(t,a,s){t.exports=s.p+"assets/img/eventLogsWithSatusIcon.52c6d53a.png"},412:function(t,a,s){"use strict";s.r(a);var n=s(41),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"statusicon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#statusicon"}},[t._v("#")]),t._v(" StatusIcon")]),t._v(" "),n("p",[t._v("The StatusIcon component is used to add an icon that represents one of the\nfollowing statuses:")]),t._v(" "),n("ul",[n("li",[t._v("success")]),t._v(" "),n("li",[t._v("info")]),t._v(" "),n("li",[t._v("warning")]),t._v(" "),n("li",[t._v("danger")])]),t._v(" "),n("p",[t._v("To use this component:")]),t._v(" "),n("ol",[n("li",[t._v("Import it into the single file component (SFC)")]),t._v(" "),n("li",[t._v("Add the "),n("code",[t._v("<status-icon />")]),t._v(" tag")]),t._v(" "),n("li",[t._v("Add the optional status prop and set the value to one of the statuses")]),t._v(" "),n("li",[t._v("Add the translated text to associate with the icon")])]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[t._v("import StatusIcon from '@/components/Global/StatusIcon'\n")])])]),n("h2",{attrs:{id:"status-icon-with-default-status"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#status-icon-with-default-status"}},[t._v("#")]),t._v(" Status icon with default status")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("status-icon")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),n("p",[n("img",{attrs:{src:s(358),alt:"StatusIcon default icon example"}})]),t._v(" "),n("h2",{attrs:{id:"status-icon-with-success-status"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#status-icon-with-success-status"}},[t._v("#")]),t._v(" Status icon with success status")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("status-icon")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":status")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("success"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),n("p",[n("img",{attrs:{src:s(359),alt:"StatusIcon success icon example"}})]),t._v(" "),n("h2",{attrs:{id:"status-icon-with-info-status"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#status-icon-with-info-status"}},[t._v("#")]),t._v(" Status icon with info status")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("status-icon")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":status")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("info"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),n("p",[n("img",{attrs:{src:s(360),alt:"StatusIcon info icon example"}})]),t._v(" "),n("h2",{attrs:{id:"status-icon-with-warning-status"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#status-icon-with-warning-status"}},[t._v("#")]),t._v(" Status icon with warning status")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("status-icon")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":status")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("warning"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),n("p",[n("img",{attrs:{src:s(361),alt:"StatusIcon warning icon example"}})]),t._v(" "),n("h2",{attrs:{id:"status-icon-with-danger-status"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#status-icon-with-danger-status"}},[t._v("#")]),t._v(" Status icon with danger status")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("status-icon")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":status")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("danger"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),n("p",[n("img",{attrs:{src:s(362),alt:"StatusIcon danger icon example"}})]),t._v(" "),n("h3",{attrs:{id:"example-of-appheader-with-status-icon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#example-of-appheader-with-status-icon"}},[t._v("#")]),t._v(" Example of AppHeader with status icon")]),t._v(" "),n("p",[n("img",{attrs:{src:s(363),alt:"AppHeader with status icon example"}})]),t._v(" "),n("h3",{attrs:{id:"example-of-event-logs-with-status-icon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#example-of-event-logs-with-status-icon"}},[t._v("#")]),t._v(" Example of Event logs with status icon")]),t._v(" "),n("p",[n("img",{attrs:{src:s(364),alt:"EventLogs with status icon example"}})])])}),[],!1,null,null,null);a.default=e.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/5.666cf43b.js b/assets/js/5.666cf43b.js
new file mode 100644
index 00000000..eb3b2467
--- /dev/null
+++ b/assets/js/5.666cf43b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{319:function(e,l,a){},380:function(e,l,a){"use strict";a(319)},392:function(e,l,a){"use strict";a.r(l);var r={data:function(){return{baseColors:[{name:"blue",variable:"$blue-500",hex:"#2d60e5"},{name:"green",variable:"$green-500",hex:"#0a7d06"},{name:"red",variable:"$red-500",hex:"#da1416"},{name:"yellow",variable:"$yellow-500",hex:"#efc100"}]}}},t=(a(380),a(41)),o=Object(t.a)(r,(function(){var e=this,l=e.$createElement,a=e._self._c||l;return a("div",[a("div",{staticClass:"color-tile-container"},e._l(e.baseColors,(function(l){return a("div",[a("div",{staticClass:"color-tile",class:{"color-tile--border":l.border},style:{backgroundColor:l.hex}}),e._v(" "),a("dl",{staticClass:"color-tile-desc"},[a("dt",[e._v("Variable:")]),e._v(" "),a("dd",[e._v("$"+e._s(l.name))])]),e._v(" "),a("dl",{staticClass:"color-tile-desc"},[a("dt",[e._v("Color Variable:")]),e._v(" "),a("dd",[e._v(e._s(l.variable))])])])})),0)])}),[],!1,null,null,null);l.default=o.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/6.c4bd7641.js b/assets/js/6.c4bd7641.js
new file mode 100644
index 00000000..c74a2565
--- /dev/null
+++ b/assets/js/6.c4bd7641.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{320:function(t,l,e){},381:function(t,l,e){"use strict";e(320)},393:function(t,l,e){"use strict";e.r(l);var o={data:function(){return{colors:[{variable:"blue-500",hex:"#2d60e5"}]}}},r=(e(381),e(41)),s=Object(r.a)(o,(function(){var t=this,l=t.$createElement,e=t._self._c||l;return e("div",[e("div",{staticClass:"color-tile-container"},t._l(t.colors,(function(l){return e("div",[e("div",{staticClass:"color-tile",class:{"color-tile--border":l.border},style:{backgroundColor:l.hex}}),t._v(" "),e("dl",{staticClass:"color-tile-desc"},[e("dt",[t._v("Color variable:")]),t._v(" "),e("dd",[t._v("$"+t._s(l.variable))])]),t._v(" "),e("dl",{staticClass:"color-tile-desc"},[e("dt",[t._v("Hex:")]),t._v(" "),e("dd",[t._v(t._s(l.hex))])])])})),0)])}),[],!1,null,null,null);l.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/7.2afc0a47.js b/assets/js/7.2afc0a47.js
new file mode 100644
index 00000000..ca2d2f2a
--- /dev/null
+++ b/assets/js/7.2afc0a47.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{321:function(e,a,r){},382:function(e,a,r){"use strict";r(321)},394:function(e,a,r){"use strict";r.r(a);var l={data:function(){return{colors:[{variable:"gray-100",hex:"#f4f4f4",border:!0},{variable:"gray-200",hex:"#e6e6e6"},{variable:"gray-300",hex:"#d8d8d8"},{variable:"gray-400",hex:"#cccccc"},{variable:"gray-500",hex:"#b3b3b3"},{variable:"gray-600",hex:"#999999"},{variable:"gray-700",hex:"#666666"},{variable:"gray-800",hex:"#3f3f3f"},{variable:"gray-900",hex:"#161616"}]}}},t=(r(382),r(41)),i=Object(t.a)(l,(function(){var e=this,a=e.$createElement,r=e._self._c||a;return r("div",[r("div",{staticClass:"color-tile-container"},e._l(e.colors,(function(a){return r("div",[r("div",{staticClass:"color-tile",class:{"color-tile--border":a.border},style:{backgroundColor:a.hex}}),e._v(" "),r("dl",{staticClass:"color-tile-desc"},[r("dt",[e._v("Color variable:")]),e._v(" "),r("dd",[e._v("$"+e._s(a.variable))])]),e._v(" "),r("dl",{staticClass:"color-tile-desc"},[r("dt",[e._v("Hex:")]),e._v(" "),r("dd",[e._v(e._s(a.hex))])])])})),0)])}),[],!1,null,null,null);a.default=i.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/8.50aab72d.js b/assets/js/8.50aab72d.js
new file mode 100644
index 00000000..7177c0e6
--- /dev/null
+++ b/assets/js/8.50aab72d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{322:function(t,e,l){},383:function(t,e,l){"use strict";l(322)},395:function(t,e,l){"use strict";l.r(e);var o={data:function(){return{colors:[{variable:"green-500",hex:"#0a7d06"}]}}},r=(l(383),l(41)),s=Object(r.a)(o,(function(){var t=this,e=t.$createElement,l=t._self._c||e;return l("div",[l("div",{staticClass:"color-tile-container"},t._l(t.colors,(function(e){return l("div",[l("div",{staticClass:"color-tile",class:{"color-tile--border":e.border},style:{backgroundColor:e.hex}}),t._v(" "),l("dl",{staticClass:"color-tile-desc"},[l("dt",[t._v("Color variable:")]),t._v(" "),l("dd",[t._v("$"+t._s(e.variable))])]),t._v(" "),l("dl",{staticClass:"color-tile-desc"},[l("dt",[t._v("Hex:")]),t._v(" "),l("dd",[t._v(t._s(e.hex))])])])})),0)])}),[],!1,null,null,null);e.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/9.9f3d8ba6.js b/assets/js/9.9f3d8ba6.js
new file mode 100644
index 00000000..390a37f4
--- /dev/null
+++ b/assets/js/9.9f3d8ba6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{323:function(t,l,e){},384:function(t,l,e){"use strict";e(323)},396:function(t,l,e){"use strict";e.r(l);var o={data:function(){return{colors:[{variable:"red-500",hex:"#da1416"}]}}},r=(e(384),e(41)),s=Object(r.a)(o,(function(){var t=this,l=t.$createElement,e=t._self._c||l;return e("div",[e("div",{staticClass:"color-tile-container"},t._l(t.colors,(function(l){return e("div",[e("div",{staticClass:"color-tile",class:{"color-tile--border":l.border},style:{backgroundColor:l.hex}}),t._v(" "),e("dl",{staticClass:"color-tile-desc"},[e("dt",[t._v("Color variable:")]),t._v(" "),e("dd",[t._v("$"+t._s(l.variable))])]),t._v(" "),e("dl",{staticClass:"color-tile-desc"},[e("dt",[t._v("Hex:")]),t._v(" "),e("dd",[t._v(t._s(l.hex))])])])})),0)])}),[],!1,null,null,null);l.default=s.exports}}]);
+\ No newline at end of file
diff --git a/assets/js/app.6e5ae7e9.js b/assets/js/app.6e5ae7e9.js
new file mode 100644
index 00000000..6fcdbdc0
--- /dev/null
+++ b/assets/js/app.6e5ae7e9.js
@@ -0,0 +1,8 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,u=e[0],s=e[1],c=e[2],f=0,p=[];f<u.length;f++)a=u[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(t[r]=s[r]);for(l&&l(e);p.length;)p.shift()();return i.push.apply(i,c||[]),n()}function n(){for(var t,e=0;e<i.length;e++){for(var n=i[e],r=!0,u=1;u<n.length;u++){var s=n[u];0!==o[s]&&(r=!1)}r&&(i.splice(e--,1),t=a(a.s=n[0]))}return t}var r={},o={1:0},i=[];function a(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(t){var e=[],n=o[t];if(0!==n)if(n)e.push(n[2]);else{var r=new Promise((function(e,r){n=o[t]=[e,r]}));e.push(n[2]=r);var i,u=document.createElement("script");u.charset="utf-8",u.timeout=120,a.nc&&u.setAttribute("nonce",a.nc),u.src=function(t){return a.p+"assets/js/"+({}[t]||t)+"."+{2:"3066748c",3:"4aa24478",4:"e088be67",5:"666cf43b",6:"c4bd7641",7:"2afc0a47",8:"50aab72d",9:"9f3d8ba6",10:"eff1bc3e",11:"f760a167",12:"05e32ea2",13:"3011b8ba",14:"366e135a",15:"9a576a5a",16:"8d8a2baa",17:"067a94f4",18:"88267105",19:"781066f3",20:"afaf92e0",21:"f51dd518",22:"22ba3b96",23:"42b49486",24:"7c316dcb",25:"79d3357c",26:"c82c48a9",27:"f4d5e099",28:"e8d46e0f",29:"a85a251f",30:"994c9683",31:"06af27be",32:"57a17f1c",33:"b9e5db10",34:"0e496acd",35:"49b0ff49",36:"dbed5155",37:"c48db488",38:"2cecf29e"}[t]+".js"}(t);var s=new Error;i=function(e){u.onerror=u.onload=null,clearTimeout(c);var n=o[t];if(0!==n){if(n){var r=e&&("load"===e.type?"missing":e.type),i=e&&e.target&&e.target.src;s.message="Loading chunk "+t+" failed.\n("+r+": "+i+")",s.name="ChunkLoadError",s.type=r,s.request=i,n[1](s)}o[t]=void 0}};var c=setTimeout((function(){i({type:"timeout",target:u})}),12e4);u.onerror=u.onload=i,document.head.appendChild(u)}return Promise.all(e)},a.m=t,a.c=r,a.d=function(t,e,n){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(t,e){if(1&e&&(t=a(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)a.d(n,r,function(e){return t[e]}.bind(null,r));return n},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="/webui-vue/",a.oe=function(t){throw console.error(t),t};var u=window.webpackJsonp=window.webpackJsonp||[],s=u.push.bind(u);u.push=e,u=u.slice();for(var c=0;c<u.length;c++)e(u[c]);var l=s;i.push([171,0]),n()}([function(t,e,n){var r=n(3),o=n(24).f,i=n(10),a=n(18),u=n(70),s=n(107),c=n(94);t.exports=function(t,e){var n,l,f,p,d,h=t.target,v=t.global,m=t.stat;if(n=v?r:m?r[h]||u(h,{}):(r[h]||{}).prototype)for(l in e){if(p=e[l],f=t.noTargetGet?(d=o(n,l))&&d.value:n[l],!c(v?l:h+(m?".":"#")+l,t.forced)&&void 0!==f){if(typeof p==typeof f)continue;s(p,f)}(t.sham||f&&f.sham)&&i(p,"sham",!0),a(n,l,p,t)}}},function(t,e,n){var r=n(3),o=n(68),i=n(6),a=n(45),u=n(72),s=n(101),c=o("wks"),l=r.Symbol,f=s?l:l&&l.withoutSetter||a;t.exports=function(t){return i(c,t)&&(u||"string"==typeof c[t])||(u&&i(l,t)?c[t]=l[t]:c[t]=f("Symbol."+t)),c[t]}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof global&&global)||function(){return this}()||Function("return this")()},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t))throw TypeError(String(t)+" is not an object");return t}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(8),o=n(99),i=n(5),a=n(44),u=Object.defineProperty;e.f=r?u:function(t,e,n){if(i(t),e=a(e,!0),i(n),o)try{return u(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(2);t.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(t,e,n){var r=n(79),o=n(18),i=n(187);r||o(Object.prototype,"toString",i,{unsafe:!0})},function(t,e,n){var r=n(8),o=n(7),i=n(31);t.exports=r?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(23);t.exports=function(t){return Object(r(t))}},function(t,e,n){"use strict";var r=n(122).charAt,o=n(28),i=n(106),a=o.set,u=o.getterFor("String Iterator");i(String,"String",(function(t){a(this,{type:"String Iterator",string:String(t),index:0})}),(function(){var t,e=u(this),n=e.string,o=e.index;return o>=n.length?{value:void 0,done:!0}:(t=r(n,o),e.index+=t.length,{value:t,done:!1})}))},function(t,e,n){var r=n(48),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e){var n=Array.isArray;t.exports=n},function(t,e,n){var r=n(30),o=n(23);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(3),o=n(123),i=n(98),a=n(10),u=n(1),s=u("iterator"),c=u("toStringTag"),l=i.values;for(var f in o){var p=r[f],d=p&&p.prototype;if(d){if(d[s]!==l)try{a(d,s,l)}catch(t){d[s]=l}if(d[c]||a(d,c,f),o[f])for(var h in i)if(d[h]!==i[h])try{a(d,h,i[h])}catch(t){d[h]=i[h]}}}},function(t,e,n){var r=n(131),o="object"==typeof self&&self&&self.Object===Object&&self,i=r||o||Function("return this")();t.exports=i},function(t,e,n){var r=n(3),o=n(10),i=n(6),a=n(70),u=n(75),s=n(28),c=s.get,l=s.enforce,f=String(String).split("String");(t.exports=function(t,e,n,u){var s,c=!!u&&!!u.unsafe,p=!!u&&!!u.enumerable,d=!!u&&!!u.noTargetGet;"function"==typeof n&&("string"!=typeof e||i(n,"name")||o(n,"name",e),(s=l(n)).source||(s.source=f.join("string"==typeof e?e:""))),t!==r?(c?!d&&t[e]&&(p=!0):delete t[e],p?t[e]=n:o(t,e,n)):p?t[e]=n:a(e,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&c(this).source||u(this)}))},function(t,e,n){var r=n(100),o=n(3),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?i(r[t])||i(o[t]):r[t]&&r[t][e]||o[t]&&o[t][e]}},function(t,e){t.exports=!1},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(String(t)+" is not a function");return t}},function(t,e,n){var r=n(217),o=n(220);t.exports=function(t,e){var n=o(t,e);return r(n)?n:void 0}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var r=n(8),o=n(76),i=n(31),a=n(15),u=n(44),s=n(6),c=n(99),l=Object.getOwnPropertyDescriptor;e.f=r?l:function(t,e){if(t=a(t),e=u(e,!0),c)try{return l(t,e)}catch(t){}if(s(t,e))return i(!o.f.call(t,e),t[e])}},function(t,e){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){"use strict";var r=n(0),o=n(43).filter;r({target:"Array",proto:!0,forced:!n(55)("filter")},{filter:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r,o,i,a=n(173),u=n(3),s=n(4),c=n(10),l=n(6),f=n(69),p=n(49),d=n(34),h=u.WeakMap;if(a){var v=f.state||(f.state=new h),m=v.get,y=v.has,g=v.set;r=function(t,e){return e.facade=t,g.call(v,t,e),e},o=function(t){return m.call(v,t)||{}},i=function(t){return y.call(v,t)}}else{var b=p("state");d[b]=!0,r=function(t,e){return e.facade=t,c(t,b,e),e},o=function(t){return l(t,b)?t[b]:{}},i=function(t){return l(t,b)}}t.exports={set:r,get:o,has:i,enforce:function(t){return i(t)?o(t):r(t,{})},getterFor:function(t){return function(e){var n;if(!s(e)||(n=o(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}}}},function(t,e,n){var r=n(38),o=n(202),i=n(203),a=r?r.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":a&&a in Object(t)?o(t):i(t)}},function(t,e,n){var r=n(2),o=n(26),i="".split;t.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?i.call(t,""):Object(t)}:Object},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r=n(26),o=n(3);t.exports="process"==r(o.process)},function(t,e,n){var r,o,i=n(3),a=n(73),u=i.process,s=u&&u.versions,c=s&&s.v8;c?o=(r=c.split("."))[0]+r[1]:a&&(!(r=a.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/))&&(o=r[1]),t.exports=o&&+o},function(t,e){t.exports={}},function(t,e){t.exports={}},function(t,e,n){"use strict";var r=n(0),o=n(3),i=n(19),a=n(20),u=n(8),s=n(72),c=n(101),l=n(2),f=n(6),p=n(53),d=n(4),h=n(5),v=n(11),m=n(15),y=n(44),g=n(31),b=n(46),_=n(47),x=n(66),w=n(195),S=n(77),O=n(24),j=n(7),k=n(76),E=n(10),C=n(18),A=n(68),$=n(49),P=n(34),T=n(45),L=n(1),R=n(127),I=n(128),M=n(50),D=n(28),N=n(43).forEach,F=$("hidden"),U=L("toPrimitive"),z=D.set,B=D.getterFor("Symbol"),q=Object.prototype,V=o.Symbol,H=i("JSON","stringify"),W=O.f,G=j.f,K=w.f,J=k.f,X=A("symbols"),Y=A("op-symbols"),Q=A("string-to-symbol-registry"),Z=A("symbol-to-string-registry"),tt=A("wks"),et=o.QObject,nt=!et||!et.prototype||!et.prototype.findChild,rt=u&&l((function(){return 7!=b(G({},"a",{get:function(){return G(this,"a",{value:7}).a}})).a}))?function(t,e,n){var r=W(q,e);r&&delete q[e],G(t,e,n),r&&t!==q&&G(q,e,r)}:G,ot=function(t,e){var n=X[t]=b(V.prototype);return z(n,{type:"Symbol",tag:t,description:e}),u||(n.description=e),n},it=c?function(t){return"symbol"==typeof t}:function(t){return Object(t)instanceof V},at=function(t,e,n){t===q&&at(Y,e,n),h(t);var r=y(e,!0);return h(n),f(X,r)?(n.enumerable?(f(t,F)&&t[F][r]&&(t[F][r]=!1),n=b(n,{enumerable:g(0,!1)})):(f(t,F)||G(t,F,g(1,{})),t[F][r]=!0),rt(t,r,n)):G(t,r,n)},ut=function(t,e){h(t);var n=m(e),r=_(n).concat(ft(n));return N(r,(function(e){u&&!st.call(n,e)||at(t,e,n[e])})),t},st=function(t){var e=y(t,!0),n=J.call(this,e);return!(this===q&&f(X,e)&&!f(Y,e))&&(!(n||!f(this,e)||!f(X,e)||f(this,F)&&this[F][e])||n)},ct=function(t,e){var n=m(t),r=y(e,!0);if(n!==q||!f(X,r)||f(Y,r)){var o=W(n,r);return!o||!f(X,r)||f(n,F)&&n[F][r]||(o.enumerable=!0),o}},lt=function(t){var e=K(m(t)),n=[];return N(e,(function(t){f(X,t)||f(P,t)||n.push(t)})),n},ft=function(t){var e=t===q,n=K(e?Y:m(t)),r=[];return N(n,(function(t){!f(X,t)||e&&!f(q,t)||r.push(X[t])})),r};(s||(C((V=function(){if(this instanceof V)throw TypeError("Symbol is not a constructor");var t=arguments.length&&void 0!==arguments[0]?String(arguments[0]):void 0,e=T(t),n=function(t){this===q&&n.call(Y,t),f(this,F)&&f(this[F],e)&&(this[F][e]=!1),rt(this,e,g(1,t))};return u&&nt&&rt(q,e,{configurable:!0,set:n}),ot(e,t)}).prototype,"toString",(function(){return B(this).tag})),C(V,"withoutSetter",(function(t){return ot(T(t),t)})),k.f=st,j.f=at,O.f=ct,x.f=w.f=lt,S.f=ft,R.f=function(t){return ot(L(t),t)},u&&(G(V.prototype,"description",{configurable:!0,get:function(){return B(this).description}}),a||C(q,"propertyIsEnumerable",st,{unsafe:!0}))),r({global:!0,wrap:!0,forced:!s,sham:!s},{Symbol:V}),N(_(tt),(function(t){I(t)})),r({target:"Symbol",stat:!0,forced:!s},{for:function(t){var e=String(t);if(f(Q,e))return Q[e];var n=V(e);return Q[e]=n,Z[n]=e,n},keyFor:function(t){if(!it(t))throw TypeError(t+" is not a symbol");if(f(Z,t))return Z[t]},useSetter:function(){nt=!0},useSimple:function(){nt=!1}}),r({target:"Object",stat:!0,forced:!s,sham:!u},{create:function(t,e){return void 0===e?b(t):ut(b(t),e)},defineProperty:at,defineProperties:ut,getOwnPropertyDescriptor:ct}),r({target:"Object",stat:!0,forced:!s},{getOwnPropertyNames:lt,getOwnPropertySymbols:ft}),r({target:"Object",stat:!0,forced:l((function(){S.f(1)}))},{getOwnPropertySymbols:function(t){return S.f(v(t))}}),H)&&r({target:"JSON",stat:!0,forced:!s||l((function(){var t=V();return"[null]"!=H([t])||"{}"!=H({a:t})||"{}"!=H(Object(t))}))},{stringify:function(t,e,n){for(var r,o=[t],i=1;arguments.length>i;)o.push(arguments[i++]);if(r=e,(d(e)||void 0!==t)&&!it(t))return p(e)||(e=function(t,e){if("function"==typeof r&&(e=r.call(this,t,e)),!it(e))return e}),o[1]=e,H.apply(null,o)}});V.prototype[U]||E(V.prototype,U,V.prototype.valueOf),M(V,"Symbol"),P[F]=!0},function(t,e,n){"use strict";var r=n(0),o=n(8),i=n(3),a=n(6),u=n(4),s=n(7).f,c=n(107),l=i.Symbol;if(o&&"function"==typeof l&&(!("description"in l.prototype)||void 0!==l().description)){var f={},p=function(){var t=arguments.length<1||void 0===arguments[0]?void 0:String(arguments[0]),e=this instanceof p?new l(t):void 0===t?l():l(t);return""===t&&(f[e]=!0),e};c(p,l);var d=p.prototype=l.prototype;d.constructor=p;var h=d.toString,v="Symbol(test)"==String(l("test")),m=/^Symbol\((.*)\)[^)]+$/;s(d,"description",{configurable:!0,get:function(){var t=u(this)?this.valueOf():this,e=h.call(t);if(a(f,t))return"";var n=v?e.slice(7,-1):e.replace(m,"$1");return""===n?void 0:n}}),r({global:!0,forced:!0},{Symbol:p})}},function(t,e,n){var r=n(17).Symbol;t.exports=r},function(t,e,n){"use strict";n.d(e,"a",(function(){return i}));var r=n(40);n(36),n(37),n(9),n(56),n(12),n(16),n(129);var o=n(62);function i(t){return function(t){if(Array.isArray(t))return Object(r.a)(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||Object(o.a)(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},function(t,e,n){"use strict";function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}n.d(e,"a",(function(){return r}))},function(t,e,n){"use strict";function r(t,e,n,r,o,i,a,u){var s,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),r&&(c.functional=!0),i&&(c._scopeId="data-v-"+i),a?(s=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=s):o&&(s=u?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),s)if(c.functional){c._injectStyles=s;var l=c.render;c.render=function(t,e){return s.call(e),l(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,s):[s]}return{exports:t,options:c}}n.d(e,"a",(function(){return r}))},function(t,e,n){"use strict";var r=n(0),o=n(67);r({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},function(t,e,n){var r=n(51),o=n(30),i=n(11),a=n(13),u=n(124),s=[].push,c=function(t){var e=1==t,n=2==t,c=3==t,l=4==t,f=6==t,p=7==t,d=5==t||f;return function(h,v,m,y){for(var g,b,_=i(h),x=o(_),w=r(v,m,3),S=a(x.length),O=0,j=y||u,k=e?j(h,S):n||p?j(h,0):void 0;S>O;O++)if((d||O in x)&&(b=w(g=x[O],O,_),t))if(e)k[O]=b;else if(b)switch(t){case 3:return!0;case 5:return g;case 6:return O;case 2:s.call(k,g)}else switch(t){case 4:return!1;case 7:s.call(k,g)}return f?-1:c||l?l:k}};t.exports={forEach:c(0),map:c(1),filter:c(2),some:c(3),every:c(4),find:c(5),findIndex:c(6),filterOut:c(7)}},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol("+String(void 0===t?"":t)+")_"+(++n+r).toString(36)}},function(t,e,n){var r,o=n(5),i=n(172),a=n(74),u=n(34),s=n(105),c=n(71),l=n(49),f=l("IE_PROTO"),p=function(){},d=function(t){return"<script>"+t+"<\/script>"},h=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(t){}var t,e;h=r?function(t){t.write(d("")),t.close();var e=t.parentWindow.Object;return t=null,e}(r):((e=c("iframe")).style.display="none",s.appendChild(e),e.src=String("javascript:"),(t=e.contentWindow.document).open(),t.write(d("document.F=Object")),t.close(),t.F);for(var n=a.length;n--;)delete h.prototype[a[n]];return h()};u[f]=!0,t.exports=Object.create||function(t,e){var n;return null!==t?(p.prototype=o(t),n=new p,p.prototype=null,n[f]=t):n=h(),void 0===e?n:i(n,e)}},function(t,e,n){var r=n(102),o=n(74);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(68),o=n(45),i=r("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},function(t,e,n){var r=n(7).f,o=n(6),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){var r=n(21);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 0:return function(){return t.call(e)};case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){"use strict";var r=n(0),o=n(4),i=n(53),a=n(104),u=n(13),s=n(15),c=n(54),l=n(1),f=n(55)("slice"),p=l("species"),d=[].slice,h=Math.max;r({target:"Array",proto:!0,forced:!f},{slice:function(t,e){var n,r,l,f=s(this),v=u(f.length),m=a(t,v),y=a(void 0===e?v:e,v);if(i(f)&&("function"!=typeof(n=f.constructor)||n!==Array&&!i(n.prototype)?o(n)&&null===(n=n[p])&&(n=void 0):n=void 0,n===Array||void 0===n))return d.call(f,m,y);for(r=new(void 0===n?Array:n)(h(y-m,0)),l=0;m<y;m++,l++)m in f&&c(r,l,f[m]);return r.length=l,r}})},function(t,e,n){var r=n(26);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){"use strict";var r=n(44),o=n(7),i=n(31);t.exports=function(t,e,n){var a=r(e);a in t?o.f(t,a,i(0,n)):t[a]=n}},function(t,e,n){var r=n(2),o=n(1),i=n(33),a=o("species");t.exports=function(t){return i>=51||!r((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},function(t,e,n){n(128)("iterator")},function(t,e,n){var r=n(207),o=n(208),i=n(209),a=n(210),u=n(211);function s(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=o,s.prototype.get=i,s.prototype.has=a,s.prototype.set=u,t.exports=s},function(t,e,n){var r=n(133);t.exports=function(t,e){for(var n=t.length;n--;)if(r(t[n][0],e))return n;return-1}},function(t,e,n){var r=n(22)(Object,"create");t.exports=r},function(t,e,n){var r=n(229);t.exports=function(t,e){var n=t.__data__;return r(e)?n["string"==typeof e?"string":"hash"]:n.map}},function(t,e,n){var r=n(89);t.exports=function(t){if("string"==typeof t||r(t))return t;var e=t+"";return"0"==e&&1/t==-1/0?"-0":e}},function(t,e,n){"use strict";n.d(e,"a",(function(){return o}));n(52),n(9),n(81),n(129),n(12);var r=n(40);function o(t,e){if(t){if("string"==typeof t)return Object(r.a)(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Object(r.a)(t,e):void 0}}},function(t,e,n){var r,o;
+/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
+ * @license MIT */void 0===(o="function"==typeof(r=function(){var t,e,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(t,e,n){return t<e?e:t>n?n:t}function i(t){return 100*(-1+t)}n.configure=function(t){var e,n;for(e in t)void 0!==(n=t[e])&&t.hasOwnProperty(e)&&(r[e]=n);return this},n.status=null,n.set=function(t){var e=n.isStarted();t=o(t,r.minimum,1),n.status=1===t?null:t;var s=n.render(!e),c=s.querySelector(r.barSelector),l=r.speed,f=r.easing;return s.offsetWidth,a((function(e){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),u(c,function(t,e,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+i(t)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(t)+"%,0)"}:{"margin-left":i(t)+"%"}).transition="all "+e+"ms "+n,o}(t,l,f)),1===t?(u(s,{transition:"none",opacity:1}),s.offsetWidth,setTimeout((function(){u(s,{transition:"all "+l+"ms linear",opacity:0}),setTimeout((function(){n.remove(),e()}),l)}),l)):setTimeout(e,l)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var t=function(){setTimeout((function(){n.status&&(n.trickle(),t())}),r.trickleSpeed)};return r.trickle&&t(),this},n.done=function(t){return t||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(t){var e=n.status;return e?("number"!=typeof t&&(t=(1-e)*o(Math.random()*e,.1,.95)),e=o(e+t,0,.994),n.set(e)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},t=0,e=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===e&&n.start(),t++,e++,r.always((function(){0==--e?(t=0,n.done()):n.set((t-e)/t)})),this):this},n.render=function(t){if(n.isRendered())return document.getElementById("nprogress");c(document.documentElement,"nprogress-busy");var e=document.createElement("div");e.id="nprogress",e.innerHTML=r.template;var o,a=e.querySelector(r.barSelector),s=t?"-100":i(n.status||0),l=document.querySelector(r.parent);return u(a,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),r.showSpinner||(o=e.querySelector(r.spinnerSelector))&&p(o),l!=document.body&&c(l,"nprogress-custom-parent"),l.appendChild(e),e},n.remove=function(){l(document.documentElement,"nprogress-busy"),l(document.querySelector(r.parent),"nprogress-custom-parent");var t=document.getElementById("nprogress");t&&p(t)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var t=document.body.style,e="WebkitTransform"in t?"Webkit":"MozTransform"in t?"Moz":"msTransform"in t?"ms":"OTransform"in t?"O":"";return e+"Perspective"in t?"translate3d":e+"Transform"in t?"translate":"margin"};var a=function(){var t=[];function e(){var n=t.shift();n&&n(e)}return function(n){t.push(n),1==t.length&&e()}}(),u=function(){var t=["Webkit","O","Moz","ms"],e={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(t,e){return e.toUpperCase()})),e[n]||(e[n]=function(e){var n=document.body.style;if(e in n)return e;for(var r,o=t.length,i=e.charAt(0).toUpperCase()+e.slice(1);o--;)if((r=t[o]+i)in n)return r;return e}(n))}function r(t,e,r){e=n(e),t.style[e]=r}return function(t,e){var n,o,i=arguments;if(2==i.length)for(n in e)void 0!==(o=e[n])&&e.hasOwnProperty(n)&&r(t,n,o);else r(t,i[1],i[2])}}();function s(t,e){return("string"==typeof t?t:f(t)).indexOf(" "+e+" ")>=0}function c(t,e){var n=f(t),r=n+e;s(n,e)||(t.className=r.substring(1))}function l(t,e){var n,r=f(t);s(t,e)&&(n=r.replace(" "+e+" "," "),t.className=n.substring(1,n.length-1))}function f(t){return(" "+(t.className||"")+" ").replace(/\s+/gi," ")}function p(t){t&&t.parentNode&&t.parentNode.removeChild(t)}return n})?r.call(e,n,e,t):r)||(t.exports=o)},function(t,e,n){"use strict";var r=n(0),o=n(43).map;r({target:"Array",proto:!0,forced:!n(55)("map")},{map:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){"use strict";var r=n(158),o=n(5),i=n(13),a=n(48),u=n(23),s=n(160),c=n(198),l=n(161),f=Math.max,p=Math.min;r("replace",2,(function(t,e,n,r){var d=r.REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE,h=r.REPLACE_KEEPS_$0,v=d?"$":"$0";return[function(n,r){var o=u(this),i=null==n?void 0:n[t];return void 0!==i?i.call(n,o,r):e.call(String(o),n,r)},function(t,r){if(!d&&h||"string"==typeof r&&-1===r.indexOf(v)){var u=n(e,t,this,r);if(u.done)return u.value}var m=o(t),y=String(this),g="function"==typeof r;g||(r=String(r));var b=m.global;if(b){var _=m.unicode;m.lastIndex=0}for(var x=[];;){var w=l(m,y);if(null===w)break;if(x.push(w),!b)break;""===String(w[0])&&(m.lastIndex=s(y,i(m.lastIndex),_))}for(var S,O="",j=0,k=0;k<x.length;k++){w=x[k];for(var E=String(w[0]),C=f(p(a(w.index),y.length),0),A=[],$=1;$<w.length;$++)A.push(void 0===(S=w[$])?S:String(S));var P=w.groups;if(g){var T=[E].concat(A,C,y);void 0!==P&&T.push(P);var L=String(r.apply(void 0,T))}else L=c(E,y,C,A,P,r);C>=j&&(O+=y.slice(j,C)+L,j=C+E.length)}return O+y.slice(j)}]}))},function(t,e,n){var r=n(102),o=n(74).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){"use strict";var r,o,i=n(159),a=n(165),u=RegExp.prototype.exec,s=String.prototype.replace,c=u,l=(r=/a/,o=/b*/g,u.call(r,"a"),u.call(o,"a"),0!==r.lastIndex||0!==o.lastIndex),f=a.UNSUPPORTED_Y||a.BROKEN_CARET,p=void 0!==/()??/.exec("")[1];(l||p||f)&&(c=function(t){var e,n,r,o,a=this,c=f&&a.sticky,d=i.call(a),h=a.source,v=0,m=t;return c&&(-1===(d=d.replace("y","")).indexOf("g")&&(d+="g"),m=String(t).slice(a.lastIndex),a.lastIndex>0&&(!a.multiline||a.multiline&&"\n"!==t[a.lastIndex-1])&&(h="(?: "+h+")",m=" "+m,v++),n=new RegExp("^(?:"+h+")",d)),p&&(n=new RegExp("^"+h+"$(?!\\s)",d)),l&&(e=a.lastIndex),r=u.call(c?n:a,m),c?r?(r.input=r.input.slice(v),r[0]=r[0].slice(v),r.index=a.lastIndex,a.lastIndex+=r[0].length):a.lastIndex=0:l&&r&&(a.lastIndex=a.global?r.index+r[0].length:e),p&&r&&r.length>1&&s.call(r[0],n,(function(){for(o=1;o<arguments.length-2;o++)void 0===arguments[o]&&(r[o]=void 0)})),r}),t.exports=c},function(t,e,n){var r=n(20),o=n(69);(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.9.1",mode:r?"pure":"global",copyright:"© 2021 Denis Pushkarev (zloirock.ru)"})},function(t,e,n){var r=n(3),o=n(70),i=r["__core-js_shared__"]||o("__core-js_shared__",{});t.exports=i},function(t,e,n){var r=n(3),o=n(10);t.exports=function(t,e){try{o(r,t,e)}catch(n){r[t]=e}return e}},function(t,e,n){var r=n(3),o=n(4),i=r.document,a=o(i)&&o(i.createElement);t.exports=function(t){return a?i.createElement(t):{}}},function(t,e,n){var r=n(32),o=n(33),i=n(2);t.exports=!!Object.getOwnPropertySymbols&&!i((function(){return!Symbol.sham&&(r?38===o:o>37&&o<41)}))},function(t,e,n){var r=n(19);t.exports=r("navigator","userAgent")||""},function(t,e){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(t,e,n){var r=n(69),o=Function.toString;"function"!=typeof r.inspectSource&&(r.inspectSource=function(t){return o.call(t)}),t.exports=r.inspectSource},function(t,e,n){"use strict";var r={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,i=o&&!r.call({1:2},1);e.f=i?function(t){var e=o(this,t);return!!e&&e.enumerable}:r},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(6),o=n(11),i=n(49),a=n(110),u=i("IE_PROTO"),s=Object.prototype;t.exports=a?Object.getPrototypeOf:function(t){return t=o(t),r(t,u)?t[u]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?s:null}},function(t,e,n){var r={};r[n(1)("toStringTag")]="z",t.exports="[object z]"===String(r)},function(t,e,n){"use strict";var r=n(2);t.exports=function(t,e){var n=[][t];return!!n&&r((function(){n.call(null,e||function(){throw 1},1)}))}},function(t,e,n){var r=n(8),o=n(7).f,i=Function.prototype,a=i.toString,u=/^\s*function ([^ (]*)/;r&&!("name"in i)&&o(i,"name",{configurable:!0,get:function(){try{return a.call(this).match(u)[1]}catch(t){return""}}})},function(t,e,n){var r=n(201),o=n(25),i=Object.prototype,a=i.hasOwnProperty,u=i.propertyIsEnumerable,s=r(function(){return arguments}())?r:function(t){return o(t)&&a.call(t,"callee")&&!u.call(t,"callee")};t.exports=s},function(t,e,n){var r=n(22)(n(17),"Map");t.exports=r},function(t,e){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},function(t,e,n){var r=n(221),o=n(228),i=n(230),a=n(231),u=n(232);function s(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=o,s.prototype.get=i,s.prototype.has=a,s.prototype.set=u,t.exports=s},function(t,e){t.exports=function(t){var e=-1,n=Array(t.size);return t.forEach((function(t){n[++e]=t})),n}},function(t,e){t.exports=function(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=9007199254740991}},function(t,e,n){var r=n(14),o=n(89),i=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,a=/^\w*$/;t.exports=function(t,e){if(r(t))return!1;var n=typeof t;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=t&&!o(t))||(a.test(t)||!i.test(t)||null!=e&&t in Object(e))}},function(t,e,n){var r=n(29),o=n(25);t.exports=function(t){return"symbol"==typeof t||o(t)&&"[object Symbol]"==r(t)}},function(t,e){t.exports=function(t){return t}},function(t,e,n){var r=n(0),o=n(11),i=n(47);r({target:"Object",stat:!0,forced:n(2)((function(){i(1)}))},{keys:function(t){return i(o(t))}})},function(t,e,n){var r=n(3),o=n(123),i=n(192),a=n(10);for(var u in o){var s=r[u],c=s&&s.prototype;if(c&&c.forEach!==i)try{a(c,"forEach",i)}catch(t){c.forEach=i}}},function(t,e,n){var r=n(1),o=n(46),i=n(7),a=r("unscopables"),u=Array.prototype;null==u[a]&&i.f(u,a,{configurable:!0,value:o(null)}),t.exports=function(t){u[a][t]=!0}},function(t,e,n){var r=n(2),o=/#|\.prototype\./,i=function(t,e){var n=u[a(t)];return n==c||n!=s&&("function"==typeof e?r(e):!!e)},a=i.normalize=function(t){return String(t).replace(o,".").toLowerCase()},u=i.data={},s=i.NATIVE="N",c=i.POLYFILL="P";t.exports=i},function(t,e,n){var r=n(5),o=n(21),i=n(1)("species");t.exports=function(t,e){var n,a=r(t).constructor;return void 0===a||null==(n=r(a)[i])?e:o(n)}},function(t,e,n){var r=n(157);t.exports=function(t){if(r(t))throw TypeError("The method doesn't accept regular expressions");return t}},function(t,e,n){var r=n(1)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(n){try{return e[r]=!1,"/./"[t](e)}catch(t){}}return!1}},function(t,e,n){"use strict";var r=n(15),o=n(93),i=n(35),a=n(28),u=n(106),s=a.set,c=a.getterFor("Array Iterator");t.exports=u(Array,"Array",(function(t,e){s(this,{type:"Array Iterator",target:r(t),index:0,kind:e})}),(function(){var t=c(this),e=t.target,n=t.kind,r=t.index++;return!e||r>=e.length?(t.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:r,done:!1}:"values"==n?{value:e[r],done:!1}:{value:[r,e[r]],done:!1}}),"values"),i.Arguments=i.Array,o("keys"),o("values"),o("entries")},function(t,e,n){var r=n(8),o=n(2),i=n(71);t.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},function(t,e,n){var r=n(3);t.exports=r},function(t,e,n){var r=n(72);t.exports=r&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(t,e,n){var r=n(6),o=n(15),i=n(103).indexOf,a=n(34);t.exports=function(t,e){var n,u=o(t),s=0,c=[];for(n in u)!r(a,n)&&r(u,n)&&c.push(n);for(;e.length>s;)r(u,n=e[s++])&&(~i(c,n)||c.push(n));return c}},function(t,e,n){var r=n(15),o=n(13),i=n(104),a=function(t){return function(e,n,a){var u,s=r(e),c=o(s.length),l=i(a,c);if(t&&n!=n){for(;c>l;)if((u=s[l++])!=u)return!0}else for(;c>l;l++)if((t||l in s)&&s[l]===n)return t||l||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},function(t,e,n){var r=n(48),o=Math.max,i=Math.min;t.exports=function(t,e){var n=r(t);return n<0?o(n+e,0):i(n,e)}},function(t,e,n){var r=n(19);t.exports=r("document","documentElement")},function(t,e,n){"use strict";var r=n(0),o=n(174),i=n(78),a=n(163),u=n(50),s=n(10),c=n(18),l=n(1),f=n(20),p=n(35),d=n(109),h=d.IteratorPrototype,v=d.BUGGY_SAFARI_ITERATORS,m=l("iterator"),y=function(){return this};t.exports=function(t,e,n,l,d,g,b){o(n,e,l);var _,x,w,S=function(t){if(t===d&&C)return C;if(!v&&t in k)return k[t];switch(t){case"keys":case"values":case"entries":return function(){return new n(this,t)}}return function(){return new n(this)}},O=e+" Iterator",j=!1,k=t.prototype,E=k[m]||k["@@iterator"]||d&&k[d],C=!v&&E||S(d),A="Array"==e&&k.entries||E;if(A&&(_=i(A.call(new t)),h!==Object.prototype&&_.next&&(f||i(_)===h||(a?a(_,h):"function"!=typeof _[m]&&s(_,m,y)),u(_,O,!0,!0),f&&(p[O]=y))),"values"==d&&E&&"values"!==E.name&&(j=!0,C=function(){return E.call(this)}),f&&!b||k[m]===C||s(k,m,C),p[e]=C,d)if(x={values:S("values"),keys:g?C:S("keys"),entries:S("entries")},b)for(w in x)(v||j||!(w in k))&&c(k,w,x[w]);else r({target:e,proto:!0,forced:v||j},x);return x}},function(t,e,n){var r=n(6),o=n(108),i=n(24),a=n(7);t.exports=function(t,e){for(var n=o(e),u=a.f,s=i.f,c=0;c<n.length;c++){var l=n[c];r(t,l)||u(t,l,s(e,l))}}},function(t,e,n){var r=n(19),o=n(66),i=n(77),a=n(5);t.exports=r("Reflect","ownKeys")||function(t){var e=o.f(a(t)),n=i.f;return n?e.concat(n(t)):e}},function(t,e,n){"use strict";var r,o,i,a=n(2),u=n(78),s=n(10),c=n(6),l=n(1),f=n(20),p=l("iterator"),d=!1;[].keys&&("next"in(i=[].keys())?(o=u(u(i)))!==Object.prototype&&(r=o):d=!0);var h=null==r||a((function(){var t={};return r[p].call(t)!==t}));h&&(r={}),f&&!h||c(r,p)||s(r,p,(function(){return this})),t.exports={IteratorPrototype:r,BUGGY_SAFARI_ITERATORS:d}},function(t,e,n){var r=n(2);t.exports=!r((function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}))},function(t,e,n){var r=n(3);t.exports=r.Promise},function(t,e,n){var r=n(1),o=n(35),i=r("iterator"),a=Array.prototype;t.exports=function(t){return void 0!==t&&(o.Array===t||a[i]===t)}},function(t,e,n){var r=n(114),o=n(35),i=n(1)("iterator");t.exports=function(t){if(null!=t)return t[i]||t["@@iterator"]||o[r(t)]}},function(t,e,n){var r=n(79),o=n(26),i=n(1)("toStringTag"),a="Arguments"==o(function(){return arguments}());t.exports=r?o:function(t){var e,n,r;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),i))?n:a?o(e):"Object"==(r=o(e))&&"function"==typeof e.callee?"Arguments":r}},function(t,e,n){var r=n(5);t.exports=function(t){var e=t.return;if(void 0!==e)return r(e.call(t)).value}},function(t,e,n){var r=n(1)("iterator"),o=!1;try{var i=0,a={next:function(){return{done:!!i++}},return:function(){o=!0}};a[r]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var n=!1;try{var i={};i[r]=function(){return{next:function(){return{done:n=!0}}}},t(i)}catch(t){}return n}},function(t,e,n){var r,o,i,a=n(3),u=n(2),s=n(51),c=n(105),l=n(71),f=n(118),p=n(32),d=a.location,h=a.setImmediate,v=a.clearImmediate,m=a.process,y=a.MessageChannel,g=a.Dispatch,b=0,_={},x=function(t){if(_.hasOwnProperty(t)){var e=_[t];delete _[t],e()}},w=function(t){return function(){x(t)}},S=function(t){x(t.data)},O=function(t){a.postMessage(t+"",d.protocol+"//"+d.host)};h&&v||(h=function(t){for(var e=[],n=1;arguments.length>n;)e.push(arguments[n++]);return _[++b]=function(){("function"==typeof t?t:Function(t)).apply(void 0,e)},r(b),b},v=function(t){delete _[t]},p?r=function(t){m.nextTick(w(t))}:g&&g.now?r=function(t){g.now(w(t))}:y&&!f?(i=(o=new y).port2,o.port1.onmessage=S,r=s(i.postMessage,i,1)):a.addEventListener&&"function"==typeof postMessage&&!a.importScripts&&d&&"file:"!==d.protocol&&!u(O)?(r=O,a.addEventListener("message",S,!1)):r="onreadystatechange"in l("script")?function(t){c.appendChild(l("script")).onreadystatechange=function(){c.removeChild(this),x(t)}}:function(t){setTimeout(w(t),0)}),t.exports={set:h,clear:v}},function(t,e,n){var r=n(73);t.exports=/(iphone|ipod|ipad).*applewebkit/i.test(r)},function(t,e,n){var r=n(5),o=n(4),i=n(120);t.exports=function(t,e){if(r(t),o(e)&&e.constructor===t)return e;var n=i.f(t);return(0,n.resolve)(e),n.promise}},function(t,e,n){"use strict";var r=n(21),o=function(t){var e,n;this.promise=new t((function(t,r){if(void 0!==e||void 0!==n)throw TypeError("Bad Promise constructor");e=t,n=r})),this.resolve=r(e),this.reject=r(n)};t.exports.f=function(t){return new o(t)}},function(t,e,n){var r=function(t){"use strict";var e=Object.prototype,n=e.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",i=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function u(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{u({},"")}catch(t){u=function(t,e,n){return t[e]=n}}function s(t,e,n,r){var o=e&&e.prototype instanceof f?e:f,i=Object.create(o.prototype),a=new S(r||[]);return i._invoke=function(t,e,n){var r="suspendedStart";return function(o,i){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===o)throw i;return j()}for(n.method=o,n.arg=i;;){var a=n.delegate;if(a){var u=_(a,n);if(u){if(u===l)continue;return u}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var s=c(t,e,n);if("normal"===s.type){if(r=n.done?"completed":"suspendedYield",s.arg===l)continue;return{value:s.arg,done:n.done}}"throw"===s.type&&(r="completed",n.method="throw",n.arg=s.arg)}}}(t,n,a),i}function c(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var l={};function f(){}function p(){}function d(){}var h={};h[o]=function(){return this};var v=Object.getPrototypeOf,m=v&&v(v(O([])));m&&m!==e&&n.call(m,o)&&(h=m);var y=d.prototype=f.prototype=Object.create(h);function g(t){["next","throw","return"].forEach((function(e){u(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){var r;this._invoke=function(o,i){function a(){return new e((function(r,a){!function r(o,i,a,u){var s=c(t[o],t,i);if("throw"!==s.type){var l=s.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,a,u)}),(function(t){r("throw",t,a,u)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return r("throw",t,a,u)}))}u(s.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function _(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,_(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var r=c(n,t.iterator,e.arg);if("throw"===r.type)return e.method="throw",e.arg=r.arg,e.delegate=null,l;var o=r.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function x(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function w(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(x,this),this.reset(!0)}function O(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:j}}function j(){return{value:void 0,done:!0}}return p.prototype=y.constructor=d,d.constructor=p,p.displayName=u(d,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===p||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,d):(t.__proto__=d,u(t,a,"GeneratorFunction")),t.prototype=Object.create(y),t},t.awrap=function(t){return{__await:t}},g(b.prototype),b.prototype[i]=function(){return this},t.AsyncIterator=b,t.async=function(e,n,r,o,i){void 0===i&&(i=Promise);var a=new b(s(e,n,r,o),i);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(y),u(y,a,"Generator"),y[o]=function(){return this},y.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=O,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(w),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(n,r){return a.type="throw",a.arg=t,e.next=n,r&&(e.method="next",e.arg=void 0),!!r}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var u=n.call(i,"catchLoc"),s=n.call(i,"finallyLoc");if(u&&s){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(u){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),w(n),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var o=r.arg;w(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:O(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),l}},t}(t.exports);try{regeneratorRuntime=r}catch(t){Function("r","regeneratorRuntime = r")(r)}},function(t,e,n){var r=n(48),o=n(23),i=function(t){return function(e,n){var i,a,u=String(o(e)),s=r(n),c=u.length;return s<0||s>=c?t?"":void 0:(i=u.charCodeAt(s))<55296||i>56319||s+1===c||(a=u.charCodeAt(s+1))<56320||a>57343?t?u.charAt(s):i:t?u.slice(s,s+2):a-56320+(i-55296<<10)+65536}};t.exports={codeAt:i(!1),charAt:i(!0)}},function(t,e){t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},function(t,e,n){var r=n(4),o=n(53),i=n(1)("species");t.exports=function(t,e){var n;return o(t)&&("function"!=typeof(n=t.constructor)||n!==Array&&!o(n.prototype)?r(n)&&null===(n=n[i])&&(n=void 0):n=void 0),new(void 0===n?Array:n)(0===e?0:e)}},function(t,e,n){var r=n(0),o=n(2),i=n(11),a=n(78),u=n(110);r({target:"Object",stat:!0,forced:o((function(){a(1)})),sham:!u},{getPrototypeOf:function(t){return a(i(t))}})},function(t,e,n){var r=n(2);t.exports=!r((function(){return Object.isExtensible(Object.preventExtensions({}))}))},function(t,e,n){var r=n(1);e.f=r},function(t,e,n){var r=n(100),o=n(6),i=n(127),a=n(7).f;t.exports=function(t){var e=r.Symbol||(r.Symbol={});o(e,t)||a(e,t,{value:i.f(t)})}},function(t,e,n){var r=n(0),o=n(196);r({target:"Array",stat:!0,forced:!n(116)((function(t){Array.from(t)}))},{from:o})},function(t,e){t.exports=function(t,e){for(var n=-1,r=e.length,o=t.length;++n<r;)t[o+n]=e[n];return t}},function(t,e){var n="object"==typeof global&&global&&global.Object===Object&&global;t.exports=n},function(t,e,n){var r=n(57),o=n(212),i=n(213),a=n(214),u=n(215),s=n(216);function c(t){var e=this.__data__=new r(t);this.size=e.size}c.prototype.clear=o,c.prototype.delete=i,c.prototype.get=a,c.prototype.has=u,c.prototype.set=s,t.exports=c},function(t,e){t.exports=function(t,e){return t===e||t!=t&&e!=e}},function(t,e,n){var r=n(29),o=n(84);t.exports=function(t){if(!o(t))return!1;var e=r(t);return"[object Function]"==e||"[object GeneratorFunction]"==e||"[object AsyncFunction]"==e||"[object Proxy]"==e}},function(t,e){var n=Function.prototype.toString;t.exports=function(t){if(null!=t){try{return n.call(t)}catch(t){}try{return t+""}catch(t){}}return""}},function(t,e,n){var r=n(233),o=n(25);t.exports=function t(e,n,i,a,u){return e===n||(null==e||null==n||!o(e)&&!o(n)?e!=e&&n!=n:r(e,n,i,a,t,u))}},function(t,e,n){var r=n(138),o=n(236),i=n(139);t.exports=function(t,e,n,a,u,s){var c=1&n,l=t.length,f=e.length;if(l!=f&&!(c&&f>l))return!1;var p=s.get(t),d=s.get(e);if(p&&d)return p==e&&d==t;var h=-1,v=!0,m=2&n?new r:void 0;for(s.set(t,e),s.set(e,t);++h<l;){var y=t[h],g=e[h];if(a)var b=c?a(g,y,h,e,t,s):a(y,g,h,t,e,s);if(void 0!==b){if(b)continue;v=!1;break}if(m){if(!o(e,(function(t,e){if(!i(m,e)&&(y===t||u(y,t,n,a,s)))return m.push(e)}))){v=!1;break}}else if(y!==g&&!u(y,g,n,a,s)){v=!1;break}}return s.delete(t),s.delete(e),v}},function(t,e,n){var r=n(85),o=n(234),i=n(235);function a(t){var e=-1,n=null==t?0:t.length;for(this.__data__=new r;++e<n;)this.add(t[e])}a.prototype.add=a.prototype.push=o,a.prototype.has=i,t.exports=a},function(t,e){t.exports=function(t,e){return t.has(e)}},function(t,e,n){var r=n(246),o=n(252),i=n(145);t.exports=function(t){return i(t)?r(t):o(t)}},function(t,e,n){(function(t){var r=n(17),o=n(248),i=e&&!e.nodeType&&e,a=i&&"object"==typeof t&&t&&!t.nodeType&&t,u=a&&a.exports===i?r.Buffer:void 0,s=(u?u.isBuffer:void 0)||o;t.exports=s}).call(this,n(142)(t))},function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),t.webpackPolyfill=1),t}},function(t,e){var n=/^(?:0|[1-9]\d*)$/;t.exports=function(t,e){var r=typeof t;return!!(e=null==e?9007199254740991:e)&&("number"==r||"symbol"!=r&&n.test(t))&&t>-1&&t%1==0&&t<e}},function(t,e,n){var r=n(249),o=n(250),i=n(251),a=i&&i.isTypedArray,u=a?o(a):r;t.exports=u},function(t,e,n){var r=n(134),o=n(87);t.exports=function(t){return null!=t&&o(t.length)&&!r(t)}},function(t,e,n){var r=n(22)(n(17),"Set");t.exports=r},function(t,e,n){var r=n(84);t.exports=function(t){return t==t&&!r(t)}},function(t,e){t.exports=function(t,e){return function(n){return null!=n&&(n[t]===e&&(void 0!==e||t in Object(n)))}}},function(t,e,n){var r=n(150),o=n(61);t.exports=function(t,e){for(var n=0,i=(e=r(e,t)).length;null!=t&&n<i;)t=t[o(e[n++])];return n&&n==i?t:void 0}},function(t,e,n){var r=n(14),o=n(88),i=n(262),a=n(265);t.exports=function(t,e){return r(t)?t:o(t,e)?[t]:i(a(t))}},function(t,e,n){var r=n(0),o=n(19),i=n(21),a=n(5),u=n(4),s=n(46),c=n(294),l=n(2),f=o("Reflect","construct"),p=l((function(){function t(){}return!(f((function(){}),[],t)instanceof t)})),d=!l((function(){f((function(){}))})),h=p||d;r({target:"Reflect",stat:!0,forced:h,sham:h},{construct:function(t,e){i(t),a(e);var n=arguments.length<3?t:i(arguments[2]);if(d&&!p)return f(t,e,n);if(t==n){switch(e.length){case 0:return new t;case 1:return new t(e[0]);case 2:return new t(e[0],e[1]);case 3:return new t(e[0],e[1],e[2]);case 4:return new t(e[0],e[1],e[2],e[3])}var r=[null];return r.push.apply(r,e),new(c.apply(t,r))}var o=n.prototype,l=s(u(o)?o:Object.prototype),h=Function.apply.call(t,l,e);return u(h)?h:l}})},function(t,e,n){},function(t,e,n){},function(t,e,n){var r=n(199),o=n(204),i=n(274),a=n(282),u=n(291),s=n(170),c=i((function(t){var e=s(t);return u(e)&&(e=void 0),a(r(t,1,u,!0),o(e,2))}));t.exports=c},function(t,e){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,i=/^0o[0-7]+$/i,a=parseInt,u="object"==typeof global&&global&&global.Object===Object&&global,s="object"==typeof self&&self&&self.Object===Object&&self,c=u||s||Function("return this")(),l=Object.prototype.toString,f=Math.max,p=Math.min,d=function(){return c.Date.now()};function h(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function v(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==l.call(t)}(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var u=o.test(t);return u||i.test(t)?a(t.slice(2),u?2:8):r.test(t)?NaN:+t}t.exports=function(t,e,n){var r,o,i,a,u,s,c=0,l=!1,m=!1,y=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function g(e){var n=r,i=o;return r=o=void 0,c=e,a=t.apply(i,n)}function b(t){return c=t,u=setTimeout(x,e),l?g(t):a}function _(t){var n=t-s;return void 0===s||n>=e||n<0||m&&t-c>=i}function x(){var t=d();if(_(t))return w(t);u=setTimeout(x,function(t){var n=e-(t-s);return m?p(n,i-(t-c)):n}(t))}function w(t){return u=void 0,y&&r?g(t):(r=o=void 0,a)}function S(){var t=d(),n=_(t);if(r=arguments,o=this,s=t,n){if(void 0===u)return b(s);if(m)return u=setTimeout(x,e),g(s)}return void 0===u&&(u=setTimeout(x,e)),a}return e=v(e)||0,h(n)&&(l=!!n.leading,i=(m="maxWait"in n)?f(v(n.maxWait)||0,e):i,y="trailing"in n?!!n.trailing:y),S.cancel=function(){void 0!==u&&clearTimeout(u),c=0,r=s=o=u=void 0},S.flush=function(){return void 0===u?a:w(d())},S}},function(t,e,n){function r(e){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?(t.exports=r=function(t){return typeof t},t.exports.default=t.exports,t.exports.__esModule=!0):(t.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t.exports.default=t.exports,t.exports.__esModule=!0),r(e)}n(36),n(37),n(9),n(56),n(12),n(16),t.exports=r,t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e,n){var r=n(4),o=n(26),i=n(1)("match");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[i])?!!e:"RegExp"==o(t))}},function(t,e,n){"use strict";n(42);var r=n(18),o=n(2),i=n(1),a=n(67),u=n(10),s=i("species"),c=!o((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")})),l="$0"==="a".replace(/./,"$0"),f=i("replace"),p=!!/./[f]&&""===/./[f]("a","$0"),d=!o((function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2!==n.length||"a"!==n[0]||"b"!==n[1]}));t.exports=function(t,e,n,f){var h=i(t),v=!o((function(){var e={};return e[h]=function(){return 7},7!=""[t](e)})),m=v&&!o((function(){var e=!1,n=/a/;return"split"===t&&((n={}).constructor={},n.constructor[s]=function(){return n},n.flags="",n[h]=/./[h]),n.exec=function(){return e=!0,null},n[h](""),!e}));if(!v||!m||"replace"===t&&(!c||!l||p)||"split"===t&&!d){var y=/./[h],g=n(h,""[t],(function(t,e,n,r,o){return e.exec===a?v&&!o?{done:!0,value:y.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}}),{REPLACE_KEEPS_$0:l,REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE:p}),b=g[0],_=g[1];r(String.prototype,t,b),r(RegExp.prototype,h,2==e?function(t,e){return _.call(t,this,e)}:function(t){return _.call(t,this)})}f&&u(RegExp.prototype[h],"sham",!0)}},function(t,e,n){"use strict";var r=n(5);t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.dotAll&&(e+="s"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},function(t,e,n){"use strict";var r=n(122).charAt;t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},function(t,e,n){var r=n(26),o=n(67);t.exports=function(t,e){var n=t.exec;if("function"==typeof n){var i=n.call(t,e);if("object"!=typeof i)throw TypeError("RegExp exec method returned something other than an Object or null");return i}if("RegExp"!==r(t))throw TypeError("RegExp#exec called on incompatible receiver");return o.call(t,e)}},function(t,e,n){"use strict";var r=n(0),o=n(30),i=n(15),a=n(80),u=[].join,s=o!=Object,c=a("join",",");r({target:"Array",proto:!0,forced:s||!c},{join:function(t){return u.call(i(this),void 0===t?",":t)}})},function(t,e,n){var r=n(5),o=n(175);t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var t,e=!1,n={};try{(t=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(n,[]),e=n instanceof Array}catch(t){}return function(n,i){return r(n),o(i),e?t.call(n,i):n.__proto__=i,n}}():void 0)},function(t,e,n){"use strict";var r=n(19),o=n(7),i=n(1),a=n(8),u=i("species");t.exports=function(t){var e=r(t),n=o.f;a&&e&&!e[u]&&n(e,u,{configurable:!0,get:function(){return this}})}},function(t,e,n){"use strict";var r=n(2);function o(t,e){return RegExp(t,e)}e.UNSUPPORTED_Y=r((function(){var t=o("a","y");return t.lastIndex=2,null!=t.exec("abcd")})),e.BROKEN_CARET=r((function(){var t=o("^r","gy");return t.lastIndex=2,null!=t.exec("str")}))},function(t,e,n){"use strict";var r=n(0),o=n(103).includes,i=n(93);r({target:"Array",proto:!0},{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),i("includes")},function(t,e,n){"use strict";var r=n(0),o=n(96),i=n(23);r({target:"String",proto:!0,forced:!n(97)("includes")},{includes:function(t){return!!~String(i(this)).indexOf(o(t),arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){"use strict";var r=n(0),o=n(2),i=n(53),a=n(4),u=n(11),s=n(13),c=n(54),l=n(124),f=n(55),p=n(1),d=n(33),h=p("isConcatSpreadable"),v=d>=51||!o((function(){var t=[];return t[h]=!1,t.concat()[0]!==t})),m=f("concat"),y=function(t){if(!a(t))return!1;var e=t[h];return void 0!==e?!!e:i(t)};r({target:"Array",proto:!0,forced:!v||!m},{concat:function(t){var e,n,r,o,i,a=u(this),f=l(a,0),p=0;for(e=-1,r=arguments.length;e<r;e++)if(y(i=-1===e?a:arguments[e])){if(p+(o=s(i.length))>9007199254740991)throw TypeError("Maximum allowed index exceeded");for(n=0;n<o;n++,p++)n in i&&c(f,p,i[n])}else{if(p>=9007199254740991)throw TypeError("Maximum allowed index exceeded");c(f,p++,i)}return f.length=p,f}})},function(t,e,n){var r=n(149);t.exports=function(t,e,n){var o=null==t?void 0:r(t,e);return void 0===o?n:o}},function(t,e){t.exports=function(t){var e=null==t?0:t.length;return e?t[e-1]:void 0}},function(t,e,n){t.exports=n(297)},function(t,e,n){var r=n(8),o=n(7),i=n(5),a=n(47);t.exports=r?Object.defineProperties:function(t,e){i(t);for(var n,r=a(e),u=r.length,s=0;u>s;)o.f(t,n=r[s++],e[n]);return t}},function(t,e,n){var r=n(3),o=n(75),i=r.WeakMap;t.exports="function"==typeof i&&/native code/.test(o(i))},function(t,e,n){"use strict";var r=n(109).IteratorPrototype,o=n(46),i=n(31),a=n(50),u=n(35),s=function(){return this};t.exports=function(t,e,n){var c=e+" Iterator";return t.prototype=o(r,{next:i(1,n)}),a(t,c,!1,!0),u[c]=s,t}},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t)&&null!==t)throw TypeError("Can't set "+String(t)+" as a prototype");return t}},function(t,e,n){"use strict";var r,o,i,a,u=n(0),s=n(20),c=n(3),l=n(19),f=n(111),p=n(18),d=n(177),h=n(50),v=n(164),m=n(4),y=n(21),g=n(178),b=n(75),_=n(179),x=n(116),w=n(95),S=n(117).set,O=n(180),j=n(119),k=n(182),E=n(120),C=n(183),A=n(28),$=n(94),P=n(1),T=n(32),L=n(33),R=P("species"),I="Promise",M=A.get,D=A.set,N=A.getterFor(I),F=f,U=c.TypeError,z=c.document,B=c.process,q=l("fetch"),V=E.f,H=V,W=!!(z&&z.createEvent&&c.dispatchEvent),G="function"==typeof PromiseRejectionEvent,K=$(I,(function(){if(!(b(F)!==String(F))){if(66===L)return!0;if(!T&&!G)return!0}if(s&&!F.prototype.finally)return!0;if(L>=51&&/native code/.test(F))return!1;var t=F.resolve(1),e=function(t){t((function(){}),(function(){}))};return(t.constructor={})[R]=e,!(t.then((function(){}))instanceof e)})),J=K||!x((function(t){F.all(t).catch((function(){}))})),X=function(t){var e;return!(!m(t)||"function"!=typeof(e=t.then))&&e},Y=function(t,e){if(!t.notified){t.notified=!0;var n=t.reactions;O((function(){for(var r=t.value,o=1==t.state,i=0;n.length>i;){var a,u,s,c=n[i++],l=o?c.ok:c.fail,f=c.resolve,p=c.reject,d=c.domain;try{l?(o||(2===t.rejection&&et(t),t.rejection=1),!0===l?a=r:(d&&d.enter(),a=l(r),d&&(d.exit(),s=!0)),a===c.promise?p(U("Promise-chain cycle")):(u=X(a))?u.call(a,f,p):f(a)):p(r)}catch(t){d&&!s&&d.exit(),p(t)}}t.reactions=[],t.notified=!1,e&&!t.rejection&&Z(t)}))}},Q=function(t,e,n){var r,o;W?((r=z.createEvent("Event")).promise=e,r.reason=n,r.initEvent(t,!1,!0),c.dispatchEvent(r)):r={promise:e,reason:n},!G&&(o=c["on"+t])?o(r):"unhandledrejection"===t&&k("Unhandled promise rejection",n)},Z=function(t){S.call(c,(function(){var e,n=t.facade,r=t.value;if(tt(t)&&(e=C((function(){T?B.emit("unhandledRejection",r,n):Q("unhandledrejection",n,r)})),t.rejection=T||tt(t)?2:1,e.error))throw e.value}))},tt=function(t){return 1!==t.rejection&&!t.parent},et=function(t){S.call(c,(function(){var e=t.facade;T?B.emit("rejectionHandled",e):Q("rejectionhandled",e,t.value)}))},nt=function(t,e,n){return function(r){t(e,r,n)}},rt=function(t,e,n){t.done||(t.done=!0,n&&(t=n),t.value=e,t.state=2,Y(t,!0))},ot=function(t,e,n){if(!t.done){t.done=!0,n&&(t=n);try{if(t.facade===e)throw U("Promise can't be resolved itself");var r=X(e);r?O((function(){var n={done:!1};try{r.call(e,nt(ot,n,t),nt(rt,n,t))}catch(e){rt(n,e,t)}})):(t.value=e,t.state=1,Y(t,!1))}catch(e){rt({done:!1},e,t)}}};K&&(F=function(t){g(this,F,I),y(t),r.call(this);var e=M(this);try{t(nt(ot,e),nt(rt,e))}catch(t){rt(e,t)}},(r=function(t){D(this,{type:I,done:!1,notified:!1,parent:!1,reactions:[],rejection:!1,state:0,value:void 0})}).prototype=d(F.prototype,{then:function(t,e){var n=N(this),r=V(w(this,F));return r.ok="function"!=typeof t||t,r.fail="function"==typeof e&&e,r.domain=T?B.domain:void 0,n.parent=!0,n.reactions.push(r),0!=n.state&&Y(n,!1),r.promise},catch:function(t){return this.then(void 0,t)}}),o=function(){var t=new r,e=M(t);this.promise=t,this.resolve=nt(ot,e),this.reject=nt(rt,e)},E.f=V=function(t){return t===F||t===i?new o(t):H(t)},s||"function"!=typeof f||(a=f.prototype.then,p(f.prototype,"then",(function(t,e){var n=this;return new F((function(t,e){a.call(n,t,e)})).then(t,e)}),{unsafe:!0}),"function"==typeof q&&u({global:!0,enumerable:!0,forced:!0},{fetch:function(t){return j(F,q.apply(c,arguments))}}))),u({global:!0,wrap:!0,forced:K},{Promise:F}),h(F,I,!1,!0),v(I),i=l(I),u({target:I,stat:!0,forced:K},{reject:function(t){var e=V(this);return e.reject.call(void 0,t),e.promise}}),u({target:I,stat:!0,forced:s||K},{resolve:function(t){return j(s&&this===i?F:this,t)}}),u({target:I,stat:!0,forced:J},{all:function(t){var e=this,n=V(e),r=n.resolve,o=n.reject,i=C((function(){var n=y(e.resolve),i=[],a=0,u=1;_(t,(function(t){var s=a++,c=!1;i.push(void 0),u++,n.call(e,t).then((function(t){c||(c=!0,i[s]=t,--u||r(i))}),o)})),--u||r(i)}));return i.error&&o(i.value),n.promise},race:function(t){var e=this,n=V(e),r=n.reject,o=C((function(){var o=y(e.resolve);_(t,(function(t){o.call(e,t).then(n.resolve,r)}))}));return o.error&&r(o.value),n.promise}})},function(t,e,n){var r=n(18);t.exports=function(t,e,n){for(var o in e)r(t,o,e[o],n);return t}},function(t,e){t.exports=function(t,e,n){if(!(t instanceof e))throw TypeError("Incorrect "+(n?n+" ":"")+"invocation");return t}},function(t,e,n){var r=n(5),o=n(112),i=n(13),a=n(51),u=n(113),s=n(115),c=function(t,e){this.stopped=t,this.result=e};t.exports=function(t,e,n){var l,f,p,d,h,v,m,y=n&&n.that,g=!(!n||!n.AS_ENTRIES),b=!(!n||!n.IS_ITERATOR),_=!(!n||!n.INTERRUPTED),x=a(e,y,1+g+_),w=function(t){return l&&s(l),new c(!0,t)},S=function(t){return g?(r(t),_?x(t[0],t[1],w):x(t[0],t[1])):_?x(t,w):x(t)};if(b)l=t;else{if("function"!=typeof(f=u(t)))throw TypeError("Target is not iterable");if(o(f)){for(p=0,d=i(t.length);d>p;p++)if((h=S(t[p]))&&h instanceof c)return h;return new c(!1)}l=f.call(t)}for(v=l.next;!(m=v.call(l)).done;){try{h=S(m.value)}catch(t){throw s(l),t}if("object"==typeof h&&h&&h instanceof c)return h}return new c(!1)}},function(t,e,n){var r,o,i,a,u,s,c,l,f=n(3),p=n(24).f,d=n(117).set,h=n(118),v=n(181),m=n(32),y=f.MutationObserver||f.WebKitMutationObserver,g=f.document,b=f.process,_=f.Promise,x=p(f,"queueMicrotask"),w=x&&x.value;w||(r=function(){var t,e;for(m&&(t=b.domain)&&t.exit();o;){e=o.fn,o=o.next;try{e()}catch(t){throw o?a():i=void 0,t}}i=void 0,t&&t.enter()},h||m||v||!y||!g?_&&_.resolve?(c=_.resolve(void 0),l=c.then,a=function(){l.call(c,r)}):a=m?function(){b.nextTick(r)}:function(){d.call(f,r)}:(u=!0,s=g.createTextNode(""),new y(r).observe(s,{characterData:!0}),a=function(){s.data=u=!u})),t.exports=w||function(t){var e={fn:t,next:void 0};i&&(i.next=e),o||(o=e,a()),i=e}},function(t,e,n){var r=n(73);t.exports=/web0s(?!.*chrome)/i.test(r)},function(t,e,n){var r=n(3);t.exports=function(t,e){var n=r.console;n&&n.error&&(1===arguments.length?n.error(t):n.error(t,e))}},function(t,e){t.exports=function(t){try{return{error:!1,value:t()}}catch(t){return{error:!0,value:t}}}},function(t,e,n){var r=n(0),o=n(185);r({target:"Object",stat:!0,forced:Object.assign!==o},{assign:o})},function(t,e,n){"use strict";var r=n(8),o=n(2),i=n(47),a=n(77),u=n(76),s=n(11),c=n(30),l=Object.assign,f=Object.defineProperty;t.exports=!l||o((function(){if(r&&1!==l({b:1},l(f({},"a",{enumerable:!0,get:function(){f(this,"b",{value:3,enumerable:!1})}}),{b:2})).b)return!0;var t={},e={},n=Symbol();return t[n]=7,"abcdefghijklmnopqrst".split("").forEach((function(t){e[t]=t})),7!=l({},t)[n]||"abcdefghijklmnopqrst"!=i(l({},e)).join("")}))?function(t,e){for(var n=s(t),o=arguments.length,l=1,f=a.f,p=u.f;o>l;)for(var d,h=c(arguments[l++]),v=f?i(h).concat(f(h)):i(h),m=v.length,y=0;m>y;)d=v[y++],r&&!p.call(h,d)||(n[d]=h[d]);return n}:l},function(t,e,n){"use strict";var r=n(0),o=n(20),i=n(111),a=n(2),u=n(19),s=n(95),c=n(119),l=n(18);r({target:"Promise",proto:!0,real:!0,forced:!!i&&a((function(){i.prototype.finally.call({then:function(){}},(function(){}))}))},{finally:function(t){var e=s(this,u("Promise")),n="function"==typeof t;return this.then(n?function(n){return c(e,t()).then((function(){return n}))}:t,n?function(n){return c(e,t()).then((function(){throw n}))}:t)}}),o||"function"!=typeof i||i.prototype.finally||l(i.prototype,"finally",u("Promise").prototype.finally)},function(t,e,n){"use strict";var r=n(79),o=n(114);t.exports=r?{}.toString:function(){return"[object "+o(this)+"]"}},function(t,e,n){var r=n(0),o=n(8),i=n(108),a=n(15),u=n(24),s=n(54);r({target:"Object",stat:!0,sham:!o},{getOwnPropertyDescriptors:function(t){for(var e,n,r=a(t),o=u.f,c=i(r),l={},f=0;c.length>f;)void 0!==(n=o(r,e=c[f++]))&&s(l,e,n);return l}})},function(t,e,n){"use strict";var r=n(0),o=n(190).left,i=n(80),a=n(33),u=n(32);r({target:"Array",proto:!0,forced:!i("reduce")||!u&&a>79&&a<83},{reduce:function(t){return o(this,t,arguments.length,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(21),o=n(11),i=n(30),a=n(13),u=function(t){return function(e,n,u,s){r(n);var c=o(e),l=i(c),f=a(c.length),p=t?f-1:0,d=t?-1:1;if(u<2)for(;;){if(p in l){s=l[p],p+=d;break}if(p+=d,t?p<0:f<=p)throw TypeError("Reduce of empty array with no initial value")}for(;t?p>=0:f>p;p+=d)p in l&&(s=n(s,l[p],p,c));return s}};t.exports={left:u(!1),right:u(!0)}},function(t,e,n){"use strict";var r,o=n(0),i=n(24).f,a=n(13),u=n(96),s=n(23),c=n(97),l=n(20),f="".startsWith,p=Math.min,d=c("startsWith");o({target:"String",proto:!0,forced:!!(l||d||(r=i(String.prototype,"startsWith"),!r||r.writable))&&!d},{startsWith:function(t){var e=String(s(this));u(t);var n=a(p(arguments.length>1?arguments[1]:void 0,e.length)),r=String(t);return f?f.call(e,r,n):e.slice(n,n+r.length)===r}})},function(t,e,n){"use strict";var r=n(43).forEach,o=n(80)("forEach");t.exports=o?[].forEach:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}},function(t,e,n){var r=n(0),o=n(126),i=n(2),a=n(4),u=n(194).onFreeze,s=Object.freeze;r({target:"Object",stat:!0,forced:i((function(){s(1)})),sham:!o},{freeze:function(t){return s&&a(t)?s(u(t)):t}})},function(t,e,n){var r=n(34),o=n(4),i=n(6),a=n(7).f,u=n(45),s=n(126),c=u("meta"),l=0,f=Object.isExtensible||function(){return!0},p=function(t){a(t,c,{value:{objectID:"O"+ ++l,weakData:{}}})},d=t.exports={REQUIRED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,c)){if(!f(t))return"F";if(!e)return"E";p(t)}return t[c].objectID},getWeakData:function(t,e){if(!i(t,c)){if(!f(t))return!0;if(!e)return!1;p(t)}return t[c].weakData},onFreeze:function(t){return s&&d.REQUIRED&&f(t)&&!i(t,c)&&p(t),t}};r[c]=!0},function(t,e,n){var r=n(15),o=n(66).f,i={}.toString,a="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return a&&"[object Window]"==i.call(t)?function(t){try{return o(t)}catch(t){return a.slice()}}(t):o(r(t))}},function(t,e,n){"use strict";var r=n(51),o=n(11),i=n(197),a=n(112),u=n(13),s=n(54),c=n(113);t.exports=function(t){var e,n,l,f,p,d,h=o(t),v="function"==typeof this?this:Array,m=arguments.length,y=m>1?arguments[1]:void 0,g=void 0!==y,b=c(h),_=0;if(g&&(y=r(y,m>2?arguments[2]:void 0,2)),null==b||v==Array&&a(b))for(n=new v(e=u(h.length));e>_;_++)d=g?y(h[_],_):h[_],s(n,_,d);else for(p=(f=b.call(h)).next,n=new v;!(l=p.call(f)).done;_++)d=g?i(f,y,[l.value,_],!0):l.value,s(n,_,d);return n.length=_,n}},function(t,e,n){var r=n(5),o=n(115);t.exports=function(t,e,n,i){try{return i?e(r(n)[0],n[1]):e(n)}catch(e){throw o(t),e}}},function(t,e,n){var r=n(11),o=Math.floor,i="".replace,a=/\$([$&'`]|\d{1,2}|<[^>]*>)/g,u=/\$([$&'`]|\d{1,2})/g;t.exports=function(t,e,n,s,c,l){var f=n+t.length,p=s.length,d=u;return void 0!==c&&(c=r(c),d=a),i.call(l,d,(function(r,i){var a;switch(i.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,n);case"'":return e.slice(f);case"<":a=c[i.slice(1,-1)];break;default:var u=+i;if(0===u)return r;if(u>p){var l=o(u/10);return 0===l?r:l<=p?void 0===s[l-1]?i.charAt(1):s[l-1]+i.charAt(1):r}a=s[u-1]}return void 0===a?"":a}))}},function(t,e,n){var r=n(130),o=n(200);t.exports=function t(e,n,i,a,u){var s=-1,c=e.length;for(i||(i=o),u||(u=[]);++s<c;){var l=e[s];n>0&&i(l)?n>1?t(l,n-1,i,a,u):r(u,l):a||(u[u.length]=l)}return u}},function(t,e,n){var r=n(38),o=n(82),i=n(14),a=r?r.isConcatSpreadable:void 0;t.exports=function(t){return i(t)||o(t)||!!(a&&t&&t[a])}},function(t,e,n){var r=n(29),o=n(25);t.exports=function(t){return o(t)&&"[object Arguments]"==r(t)}},function(t,e,n){var r=n(38),o=Object.prototype,i=o.hasOwnProperty,a=o.toString,u=r?r.toStringTag:void 0;t.exports=function(t){var e=i.call(t,u),n=t[u];try{t[u]=void 0;var r=!0}catch(t){}var o=a.call(t);return r&&(e?t[u]=n:delete t[u]),o}},function(t,e){var n=Object.prototype.toString;t.exports=function(t){return n.call(t)}},function(t,e,n){var r=n(205),o=n(261),i=n(90),a=n(14),u=n(271);t.exports=function(t){return"function"==typeof t?t:null==t?i:"object"==typeof t?a(t)?o(t[0],t[1]):r(t):u(t)}},function(t,e,n){var r=n(206),o=n(260),i=n(148);t.exports=function(t){var e=o(t);return 1==e.length&&e[0][2]?i(e[0][0],e[0][1]):function(n){return n===t||r(n,t,e)}}},function(t,e,n){var r=n(132),o=n(136);t.exports=function(t,e,n,i){var a=n.length,u=a,s=!i;if(null==t)return!u;for(t=Object(t);a--;){var c=n[a];if(s&&c[2]?c[1]!==t[c[0]]:!(c[0]in t))return!1}for(;++a<u;){var l=(c=n[a])[0],f=t[l],p=c[1];if(s&&c[2]){if(void 0===f&&!(l in t))return!1}else{var d=new r;if(i)var h=i(f,p,l,t,e,d);if(!(void 0===h?o(p,f,3,i,d):h))return!1}}return!0}},function(t,e){t.exports=function(){this.__data__=[],this.size=0}},function(t,e,n){var r=n(58),o=Array.prototype.splice;t.exports=function(t){var e=this.__data__,n=r(e,t);return!(n<0)&&(n==e.length-1?e.pop():o.call(e,n,1),--this.size,!0)}},function(t,e,n){var r=n(58);t.exports=function(t){var e=this.__data__,n=r(e,t);return n<0?void 0:e[n][1]}},function(t,e,n){var r=n(58);t.exports=function(t){return r(this.__data__,t)>-1}},function(t,e,n){var r=n(58);t.exports=function(t,e){var n=this.__data__,o=r(n,t);return o<0?(++this.size,n.push([t,e])):n[o][1]=e,this}},function(t,e,n){var r=n(57);t.exports=function(){this.__data__=new r,this.size=0}},function(t,e){t.exports=function(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}},function(t,e){t.exports=function(t){return this.__data__.get(t)}},function(t,e){t.exports=function(t){return this.__data__.has(t)}},function(t,e,n){var r=n(57),o=n(83),i=n(85);t.exports=function(t,e){var n=this.__data__;if(n instanceof r){var a=n.__data__;if(!o||a.length<199)return a.push([t,e]),this.size=++n.size,this;n=this.__data__=new i(a)}return n.set(t,e),this.size=n.size,this}},function(t,e,n){var r=n(134),o=n(218),i=n(84),a=n(135),u=/^\[object .+?Constructor\]$/,s=Function.prototype,c=Object.prototype,l=s.toString,f=c.hasOwnProperty,p=RegExp("^"+l.call(f).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");t.exports=function(t){return!(!i(t)||o(t))&&(r(t)?p:u).test(a(t))}},function(t,e,n){var r,o=n(219),i=(r=/[^.]+$/.exec(o&&o.keys&&o.keys.IE_PROTO||""))?"Symbol(src)_1."+r:"";t.exports=function(t){return!!i&&i in t}},function(t,e,n){var r=n(17)["__core-js_shared__"];t.exports=r},function(t,e){t.exports=function(t,e){return null==t?void 0:t[e]}},function(t,e,n){var r=n(222),o=n(57),i=n(83);t.exports=function(){this.size=0,this.__data__={hash:new r,map:new(i||o),string:new r}}},function(t,e,n){var r=n(223),o=n(224),i=n(225),a=n(226),u=n(227);function s(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=o,s.prototype.get=i,s.prototype.has=a,s.prototype.set=u,t.exports=s},function(t,e,n){var r=n(59);t.exports=function(){this.__data__=r?r(null):{},this.size=0}},function(t,e){t.exports=function(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e}},function(t,e,n){var r=n(59),o=Object.prototype.hasOwnProperty;t.exports=function(t){var e=this.__data__;if(r){var n=e[t];return"__lodash_hash_undefined__"===n?void 0:n}return o.call(e,t)?e[t]:void 0}},function(t,e,n){var r=n(59),o=Object.prototype.hasOwnProperty;t.exports=function(t){var e=this.__data__;return r?void 0!==e[t]:o.call(e,t)}},function(t,e,n){var r=n(59);t.exports=function(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=r&&void 0===e?"__lodash_hash_undefined__":e,this}},function(t,e,n){var r=n(60);t.exports=function(t){var e=r(this,t).delete(t);return this.size-=e?1:0,e}},function(t,e){t.exports=function(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==t:null===t}},function(t,e,n){var r=n(60);t.exports=function(t){return r(this,t).get(t)}},function(t,e,n){var r=n(60);t.exports=function(t){return r(this,t).has(t)}},function(t,e,n){var r=n(60);t.exports=function(t,e){var n=r(this,t),o=n.size;return n.set(t,e),this.size+=n.size==o?0:1,this}},function(t,e,n){var r=n(132),o=n(137),i=n(237),a=n(240),u=n(256),s=n(14),c=n(141),l=n(144),f="[object Object]",p=Object.prototype.hasOwnProperty;t.exports=function(t,e,n,d,h,v){var m=s(t),y=s(e),g=m?"[object Array]":u(t),b=y?"[object Array]":u(e),_=(g="[object Arguments]"==g?f:g)==f,x=(b="[object Arguments]"==b?f:b)==f,w=g==b;if(w&&c(t)){if(!c(e))return!1;m=!0,_=!1}if(w&&!_)return v||(v=new r),m||l(t)?o(t,e,n,d,h,v):i(t,e,g,n,d,h,v);if(!(1&n)){var S=_&&p.call(t,"__wrapped__"),O=x&&p.call(e,"__wrapped__");if(S||O){var j=S?t.value():t,k=O?e.value():e;return v||(v=new r),h(j,k,n,d,v)}}return!!w&&(v||(v=new r),a(t,e,n,d,h,v))}},function(t,e){t.exports=function(t){return this.__data__.set(t,"__lodash_hash_undefined__"),this}},function(t,e){t.exports=function(t){return this.__data__.has(t)}},function(t,e){t.exports=function(t,e){for(var n=-1,r=null==t?0:t.length;++n<r;)if(e(t[n],n,t))return!0;return!1}},function(t,e,n){var r=n(38),o=n(238),i=n(133),a=n(137),u=n(239),s=n(86),c=r?r.prototype:void 0,l=c?c.valueOf:void 0;t.exports=function(t,e,n,r,c,f,p){switch(n){case"[object DataView]":if(t.byteLength!=e.byteLength||t.byteOffset!=e.byteOffset)return!1;t=t.buffer,e=e.buffer;case"[object ArrayBuffer]":return!(t.byteLength!=e.byteLength||!f(new o(t),new o(e)));case"[object Boolean]":case"[object Date]":case"[object Number]":return i(+t,+e);case"[object Error]":return t.name==e.name&&t.message==e.message;case"[object RegExp]":case"[object String]":return t==e+"";case"[object Map]":var d=u;case"[object Set]":var h=1&r;if(d||(d=s),t.size!=e.size&&!h)return!1;var v=p.get(t);if(v)return v==e;r|=2,p.set(t,e);var m=a(d(t),d(e),r,c,f,p);return p.delete(t),m;case"[object Symbol]":if(l)return l.call(t)==l.call(e)}return!1}},function(t,e,n){var r=n(17).Uint8Array;t.exports=r},function(t,e){t.exports=function(t){var e=-1,n=Array(t.size);return t.forEach((function(t,r){n[++e]=[r,t]})),n}},function(t,e,n){var r=n(241),o=Object.prototype.hasOwnProperty;t.exports=function(t,e,n,i,a,u){var s=1&n,c=r(t),l=c.length;if(l!=r(e).length&&!s)return!1;for(var f=l;f--;){var p=c[f];if(!(s?p in e:o.call(e,p)))return!1}var d=u.get(t),h=u.get(e);if(d&&h)return d==e&&h==t;var v=!0;u.set(t,e),u.set(e,t);for(var m=s;++f<l;){var y=t[p=c[f]],g=e[p];if(i)var b=s?i(g,y,p,e,t,u):i(y,g,p,t,e,u);if(!(void 0===b?y===g||a(y,g,n,i,u):b)){v=!1;break}m||(m="constructor"==p)}if(v&&!m){var _=t.constructor,x=e.constructor;_==x||!("constructor"in t)||!("constructor"in e)||"function"==typeof _&&_ instanceof _&&"function"==typeof x&&x instanceof x||(v=!1)}return u.delete(t),u.delete(e),v}},function(t,e,n){var r=n(242),o=n(243),i=n(140);t.exports=function(t){return r(t,i,o)}},function(t,e,n){var r=n(130),o=n(14);t.exports=function(t,e,n){var i=e(t);return o(t)?i:r(i,n(t))}},function(t,e,n){var r=n(244),o=n(245),i=Object.prototype.propertyIsEnumerable,a=Object.getOwnPropertySymbols,u=a?function(t){return null==t?[]:(t=Object(t),r(a(t),(function(e){return i.call(t,e)})))}:o;t.exports=u},function(t,e){t.exports=function(t,e){for(var n=-1,r=null==t?0:t.length,o=0,i=[];++n<r;){var a=t[n];e(a,n,t)&&(i[o++]=a)}return i}},function(t,e){t.exports=function(){return[]}},function(t,e,n){var r=n(247),o=n(82),i=n(14),a=n(141),u=n(143),s=n(144),c=Object.prototype.hasOwnProperty;t.exports=function(t,e){var n=i(t),l=!n&&o(t),f=!n&&!l&&a(t),p=!n&&!l&&!f&&s(t),d=n||l||f||p,h=d?r(t.length,String):[],v=h.length;for(var m in t)!e&&!c.call(t,m)||d&&("length"==m||f&&("offset"==m||"parent"==m)||p&&("buffer"==m||"byteLength"==m||"byteOffset"==m)||u(m,v))||h.push(m);return h}},function(t,e){t.exports=function(t,e){for(var n=-1,r=Array(t);++n<t;)r[n]=e(n);return r}},function(t,e){t.exports=function(){return!1}},function(t,e,n){var r=n(29),o=n(87),i=n(25),a={};a["[object Float32Array]"]=a["[object Float64Array]"]=a["[object Int8Array]"]=a["[object Int16Array]"]=a["[object Int32Array]"]=a["[object Uint8Array]"]=a["[object Uint8ClampedArray]"]=a["[object Uint16Array]"]=a["[object Uint32Array]"]=!0,a["[object Arguments]"]=a["[object Array]"]=a["[object ArrayBuffer]"]=a["[object Boolean]"]=a["[object DataView]"]=a["[object Date]"]=a["[object Error]"]=a["[object Function]"]=a["[object Map]"]=a["[object Number]"]=a["[object Object]"]=a["[object RegExp]"]=a["[object Set]"]=a["[object String]"]=a["[object WeakMap]"]=!1,t.exports=function(t){return i(t)&&o(t.length)&&!!a[r(t)]}},function(t,e){t.exports=function(t){return function(e){return t(e)}}},function(t,e,n){(function(t){var r=n(131),o=e&&!e.nodeType&&e,i=o&&"object"==typeof t&&t&&!t.nodeType&&t,a=i&&i.exports===o&&r.process,u=function(){try{var t=i&&i.require&&i.require("util").types;return t||a&&a.binding&&a.binding("util")}catch(t){}}();t.exports=u}).call(this,n(142)(t))},function(t,e,n){var r=n(253),o=n(254),i=Object.prototype.hasOwnProperty;t.exports=function(t){if(!r(t))return o(t);var e=[];for(var n in Object(t))i.call(t,n)&&"constructor"!=n&&e.push(n);return e}},function(t,e){var n=Object.prototype;t.exports=function(t){var e=t&&t.constructor;return t===("function"==typeof e&&e.prototype||n)}},function(t,e,n){var r=n(255)(Object.keys,Object);t.exports=r},function(t,e){t.exports=function(t,e){return function(n){return t(e(n))}}},function(t,e,n){var r=n(257),o=n(83),i=n(258),a=n(146),u=n(259),s=n(29),c=n(135),l=c(r),f=c(o),p=c(i),d=c(a),h=c(u),v=s;(r&&"[object DataView]"!=v(new r(new ArrayBuffer(1)))||o&&"[object Map]"!=v(new o)||i&&"[object Promise]"!=v(i.resolve())||a&&"[object Set]"!=v(new a)||u&&"[object WeakMap]"!=v(new u))&&(v=function(t){var e=s(t),n="[object Object]"==e?t.constructor:void 0,r=n?c(n):"";if(r)switch(r){case l:return"[object DataView]";case f:return"[object Map]";case p:return"[object Promise]";case d:return"[object Set]";case h:return"[object WeakMap]"}return e}),t.exports=v},function(t,e,n){var r=n(22)(n(17),"DataView");t.exports=r},function(t,e,n){var r=n(22)(n(17),"Promise");t.exports=r},function(t,e,n){var r=n(22)(n(17),"WeakMap");t.exports=r},function(t,e,n){var r=n(147),o=n(140);t.exports=function(t){for(var e=o(t),n=e.length;n--;){var i=e[n],a=t[i];e[n]=[i,a,r(a)]}return e}},function(t,e,n){var r=n(136),o=n(169),i=n(268),a=n(88),u=n(147),s=n(148),c=n(61);t.exports=function(t,e){return a(t)&&u(e)?s(c(t),e):function(n){var a=o(n,t);return void 0===a&&a===e?i(n,t):r(e,a,3)}}},function(t,e,n){var r=n(263),o=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,i=/\\(\\)?/g,a=r((function(t){var e=[];return 46===t.charCodeAt(0)&&e.push(""),t.replace(o,(function(t,n,r,o){e.push(r?o.replace(i,"$1"):n||t)})),e}));t.exports=a},function(t,e,n){var r=n(264);t.exports=function(t){var e=r(t,(function(t){return 500===n.size&&n.clear(),t})),n=e.cache;return e}},function(t,e,n){var r=n(85);function o(t,e){if("function"!=typeof t||null!=e&&"function"!=typeof e)throw new TypeError("Expected a function");var n=function(){var r=arguments,o=e?e.apply(this,r):r[0],i=n.cache;if(i.has(o))return i.get(o);var a=t.apply(this,r);return n.cache=i.set(o,a)||i,a};return n.cache=new(o.Cache||r),n}o.Cache=r,t.exports=o},function(t,e,n){var r=n(266);t.exports=function(t){return null==t?"":r(t)}},function(t,e,n){var r=n(38),o=n(267),i=n(14),a=n(89),u=r?r.prototype:void 0,s=u?u.toString:void 0;t.exports=function t(e){if("string"==typeof e)return e;if(i(e))return o(e,t)+"";if(a(e))return s?s.call(e):"";var n=e+"";return"0"==n&&1/e==-1/0?"-0":n}},function(t,e){t.exports=function(t,e){for(var n=-1,r=null==t?0:t.length,o=Array(r);++n<r;)o[n]=e(t[n],n,t);return o}},function(t,e,n){var r=n(269),o=n(270);t.exports=function(t,e){return null!=t&&o(t,e,r)}},function(t,e){t.exports=function(t,e){return null!=t&&e in Object(t)}},function(t,e,n){var r=n(150),o=n(82),i=n(14),a=n(143),u=n(87),s=n(61);t.exports=function(t,e,n){for(var c=-1,l=(e=r(e,t)).length,f=!1;++c<l;){var p=s(e[c]);if(!(f=null!=t&&n(t,p)))break;t=t[p]}return f||++c!=l?f:!!(l=null==t?0:t.length)&&u(l)&&a(p,l)&&(i(t)||o(t))}},function(t,e,n){var r=n(272),o=n(273),i=n(88),a=n(61);t.exports=function(t){return i(t)?r(a(t)):o(t)}},function(t,e){t.exports=function(t){return function(e){return null==e?void 0:e[t]}}},function(t,e,n){var r=n(149);t.exports=function(t){return function(e){return r(e,t)}}},function(t,e,n){var r=n(90),o=n(275),i=n(277);t.exports=function(t,e){return i(o(t,e,r),t+"")}},function(t,e,n){var r=n(276),o=Math.max;t.exports=function(t,e,n){return e=o(void 0===e?t.length-1:e,0),function(){for(var i=arguments,a=-1,u=o(i.length-e,0),s=Array(u);++a<u;)s[a]=i[e+a];a=-1;for(var c=Array(e+1);++a<e;)c[a]=i[a];return c[e]=n(s),r(t,this,c)}}},function(t,e){t.exports=function(t,e,n){switch(n.length){case 0:return t.call(e);case 1:return t.call(e,n[0]);case 2:return t.call(e,n[0],n[1]);case 3:return t.call(e,n[0],n[1],n[2])}return t.apply(e,n)}},function(t,e,n){var r=n(278),o=n(281)(r);t.exports=o},function(t,e,n){var r=n(279),o=n(280),i=n(90),a=o?function(t,e){return o(t,"toString",{configurable:!0,enumerable:!1,value:r(e),writable:!0})}:i;t.exports=a},function(t,e){t.exports=function(t){return function(){return t}}},function(t,e,n){var r=n(22),o=function(){try{var t=r(Object,"defineProperty");return t({},"",{}),t}catch(t){}}();t.exports=o},function(t,e){var n=Date.now;t.exports=function(t){var e=0,r=0;return function(){var o=n(),i=16-(o-r);if(r=o,i>0){if(++e>=800)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}},function(t,e,n){var r=n(138),o=n(283),i=n(288),a=n(139),u=n(289),s=n(86);t.exports=function(t,e,n){var c=-1,l=o,f=t.length,p=!0,d=[],h=d;if(n)p=!1,l=i;else if(f>=200){var v=e?null:u(t);if(v)return s(v);p=!1,l=a,h=new r}else h=e?[]:d;t:for(;++c<f;){var m=t[c],y=e?e(m):m;if(m=n||0!==m?m:0,p&&y==y){for(var g=h.length;g--;)if(h[g]===y)continue t;e&&h.push(y),d.push(m)}else l(h,y,n)||(h!==d&&h.push(y),d.push(m))}return d}},function(t,e,n){var r=n(284);t.exports=function(t,e){return!!(null==t?0:t.length)&&r(t,e,0)>-1}},function(t,e,n){var r=n(285),o=n(286),i=n(287);t.exports=function(t,e,n){return e==e?i(t,e,n):r(t,o,n)}},function(t,e){t.exports=function(t,e,n,r){for(var o=t.length,i=n+(r?1:-1);r?i--:++i<o;)if(e(t[i],i,t))return i;return-1}},function(t,e){t.exports=function(t){return t!=t}},function(t,e){t.exports=function(t,e,n){for(var r=n-1,o=t.length;++r<o;)if(t[r]===e)return r;return-1}},function(t,e){t.exports=function(t,e,n){for(var r=-1,o=null==t?0:t.length;++r<o;)if(n(e,t[r]))return!0;return!1}},function(t,e,n){var r=n(146),o=n(290),i=n(86),a=r&&1/i(new r([,-0]))[1]==1/0?function(t){return new r(t)}:o;t.exports=a},function(t,e){t.exports=function(){}},function(t,e,n){var r=n(145),o=n(25);t.exports=function(t){return o(t)&&r(t)}},function(t,e,n){},function(t,e,n){},function(t,e,n){"use strict";var r=n(21),o=n(4),i=[].slice,a={},u=function(t,e,n){if(!(e in a)){for(var r=[],o=0;o<e;o++)r[o]="a["+o+"]";a[e]=Function("C,a","return new C("+r.join(",")+")")}return a[e](t,n)};t.exports=Function.bind||function(t){var e=r(this),n=i.call(arguments,1),a=function(){var r=n.concat(i.call(arguments));return this instanceof a?u(e,r.length,r):e.apply(t,r)};return o(e.prototype)&&(a.prototype=e.prototype),a}},function(t,e,n){"use strict";n(152)},function(t,e,n){"use strict";n(153)},function(t,e,n){"use strict";n.r(e);n(98),n(176),n(184),n(186),n(9);function r(t,e,n,r,o,i,a){try{var u=t[i](a),s=u.value}catch(t){return void n(t)}u.done?e(s):Promise.resolve(s).then(r,o)}function o(t){return function(){var e=this,n=arguments;return new Promise((function(o,i){var a=t.apply(e,n);function u(t){r(a,o,i,u,s,"next",t)}function s(t){r(a,o,i,u,s,"throw",t)}u(void 0)}))}}n(121),n(52),n(12),n(16),n(64),n(27);var i=Object.freeze({});function a(t){return null==t}function u(t){return null!=t}function s(t){return!0===t}function c(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function l(t){return null!==t&&"object"==typeof t}var f=Object.prototype.toString;function p(t){return"[object Object]"===f.call(t)}function d(t){return"[object RegExp]"===f.call(t)}function h(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function v(t){return u(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function m(t){return null==t?"":Array.isArray(t)||p(t)&&t.toString===f?JSON.stringify(t,null,2):String(t)}function y(t){var e=parseFloat(t);return isNaN(e)?t:e}function g(t,e){for(var n=Object.create(null),r=t.split(","),o=0;o<r.length;o++)n[r[o]]=!0;return e?function(t){return n[t.toLowerCase()]}:function(t){return n[t]}}g("slot,component",!0);var b=g("key,ref,slot,slot-scope,is");function _(t,e){if(t.length){var n=t.indexOf(e);if(n>-1)return t.splice(n,1)}}var x=Object.prototype.hasOwnProperty;function w(t,e){return x.call(t,e)}function S(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var O=/-(\w)/g,j=S((function(t){return t.replace(O,(function(t,e){return e?e.toUpperCase():""}))})),k=S((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})),E=/\B([A-Z])/g,C=S((function(t){return t.replace(E,"-$1").toLowerCase()}));var A=Function.prototype.bind?function(t,e){return t.bind(e)}:function(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n};function $(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function P(t,e){for(var n in e)t[n]=e[n];return t}function T(t){for(var e={},n=0;n<t.length;n++)t[n]&&P(e,t[n]);return e}function L(t,e,n){}var R=function(t,e,n){return!1},I=function(t){return t};function M(t,e){if(t===e)return!0;var n=l(t),r=l(e);if(!n||!r)return!n&&!r&&String(t)===String(e);try{var o=Array.isArray(t),i=Array.isArray(e);if(o&&i)return t.length===e.length&&t.every((function(t,n){return M(t,e[n])}));if(t instanceof Date&&e instanceof Date)return t.getTime()===e.getTime();if(o||i)return!1;var a=Object.keys(t),u=Object.keys(e);return a.length===u.length&&a.every((function(n){return M(t[n],e[n])}))}catch(t){return!1}}function D(t,e){for(var n=0;n<t.length;n++)if(M(t[n],e))return n;return-1}function N(t){var e=!1;return function(){e||(e=!0,t.apply(this,arguments))}}var F=["component","directive","filter"],U=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch"],z={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:R,isReservedAttr:R,isUnknownElement:R,getTagNamespace:L,parsePlatformTagName:I,mustUseProp:R,async:!0,_lifecycleHooks:U},B=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function q(t,e,n,r){Object.defineProperty(t,e,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var V=new RegExp("[^"+B.source+".$_\\d]");var H,W="__proto__"in{},G="undefined"!=typeof window,K="undefined"!=typeof WXEnvironment&&!!WXEnvironment.platform,J=K&&WXEnvironment.platform.toLowerCase(),X=G&&window.navigator.userAgent.toLowerCase(),Y=X&&/msie|trident/.test(X),Q=X&&X.indexOf("msie 9.0")>0,Z=X&&X.indexOf("edge/")>0,tt=(X&&X.indexOf("android"),X&&/iphone|ipad|ipod|ios/.test(X)||"ios"===J),et=(X&&/chrome\/\d+/.test(X),X&&/phantomjs/.test(X),X&&X.match(/firefox\/(\d+)/)),nt={}.watch,rt=!1;if(G)try{var ot={};Object.defineProperty(ot,"passive",{get:function(){rt=!0}}),window.addEventListener("test-passive",null,ot)}catch(t){}var it=function(){return void 0===H&&(H=!G&&!K&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),H},at=G&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function ut(t){return"function"==typeof t&&/native code/.test(t.toString())}var st,ct="undefined"!=typeof Symbol&&ut(Symbol)&&"undefined"!=typeof Reflect&&ut(Reflect.ownKeys);st="undefined"!=typeof Set&&ut(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var lt=L,ft=0,pt=function(){this.id=ft++,this.subs=[]};pt.prototype.addSub=function(t){this.subs.push(t)},pt.prototype.removeSub=function(t){_(this.subs,t)},pt.prototype.depend=function(){pt.target&&pt.target.addDep(this)},pt.prototype.notify=function(){var t=this.subs.slice();for(var e=0,n=t.length;e<n;e++)t[e].update()},pt.target=null;var dt=[];function ht(t){dt.push(t),pt.target=t}function vt(){dt.pop(),pt.target=dt[dt.length-1]}var mt=function(t,e,n,r,o,i,a,u){this.tag=t,this.data=e,this.children=n,this.text=r,this.elm=o,this.ns=void 0,this.context=i,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=e&&e.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=u,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1},yt={child:{configurable:!0}};yt.child.get=function(){return this.componentInstance},Object.defineProperties(mt.prototype,yt);var gt=function(t){void 0===t&&(t="");var e=new mt;return e.text=t,e.isComment=!0,e};function bt(t){return new mt(void 0,void 0,void 0,String(t))}function _t(t){var e=new mt(t.tag,t.data,t.children&&t.children.slice(),t.text,t.elm,t.context,t.componentOptions,t.asyncFactory);return e.ns=t.ns,e.isStatic=t.isStatic,e.key=t.key,e.isComment=t.isComment,e.fnContext=t.fnContext,e.fnOptions=t.fnOptions,e.fnScopeId=t.fnScopeId,e.asyncMeta=t.asyncMeta,e.isCloned=!0,e}var xt=Array.prototype,wt=Object.create(xt);["push","pop","shift","unshift","splice","sort","reverse"].forEach((function(t){var e=xt[t];q(wt,t,(function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];var o,i=e.apply(this,n),a=this.__ob__;switch(t){case"push":case"unshift":o=n;break;case"splice":o=n.slice(2)}return o&&a.observeArray(o),a.dep.notify(),i}))}));var St=Object.getOwnPropertyNames(wt),Ot=!0;function jt(t){Ot=t}var kt=function(t){this.value=t,this.dep=new pt,this.vmCount=0,q(t,"__ob__",this),Array.isArray(t)?(W?function(t,e){t.__proto__=e}(t,wt):function(t,e,n){for(var r=0,o=n.length;r<o;r++){var i=n[r];q(t,i,e[i])}}(t,wt,St),this.observeArray(t)):this.walk(t)};function Et(t,e){var n;if(l(t)&&!(t instanceof mt))return w(t,"__ob__")&&t.__ob__ instanceof kt?n=t.__ob__:Ot&&!it()&&(Array.isArray(t)||p(t))&&Object.isExtensible(t)&&!t._isVue&&(n=new kt(t)),e&&n&&n.vmCount++,n}function Ct(t,e,n,r,o){var i=new pt,a=Object.getOwnPropertyDescriptor(t,e);if(!a||!1!==a.configurable){var u=a&&a.get,s=a&&a.set;u&&!s||2!==arguments.length||(n=t[e]);var c=!o&&Et(n);Object.defineProperty(t,e,{enumerable:!0,configurable:!0,get:function(){var e=u?u.call(t):n;return pt.target&&(i.depend(),c&&(c.dep.depend(),Array.isArray(e)&&Pt(e))),e},set:function(e){var r=u?u.call(t):n;e===r||e!=e&&r!=r||u&&!s||(s?s.call(t,e):n=e,c=!o&&Et(e),i.notify())}})}}function At(t,e,n){if(Array.isArray(t)&&h(e))return t.length=Math.max(t.length,e),t.splice(e,1,n),n;if(e in t&&!(e in Object.prototype))return t[e]=n,n;var r=t.__ob__;return t._isVue||r&&r.vmCount?n:r?(Ct(r.value,e,n),r.dep.notify(),n):(t[e]=n,n)}function $t(t,e){if(Array.isArray(t)&&h(e))t.splice(e,1);else{var n=t.__ob__;t._isVue||n&&n.vmCount||w(t,e)&&(delete t[e],n&&n.dep.notify())}}function Pt(t){for(var e=void 0,n=0,r=t.length;n<r;n++)(e=t[n])&&e.__ob__&&e.__ob__.dep.depend(),Array.isArray(e)&&Pt(e)}kt.prototype.walk=function(t){for(var e=Object.keys(t),n=0;n<e.length;n++)Ct(t,e[n])},kt.prototype.observeArray=function(t){for(var e=0,n=t.length;e<n;e++)Et(t[e])};var Tt=z.optionMergeStrategies;function Lt(t,e){if(!e)return t;for(var n,r,o,i=ct?Reflect.ownKeys(e):Object.keys(e),a=0;a<i.length;a++)"__ob__"!==(n=i[a])&&(r=t[n],o=e[n],w(t,n)?r!==o&&p(r)&&p(o)&&Lt(r,o):At(t,n,o));return t}function Rt(t,e,n){return n?function(){var r="function"==typeof e?e.call(n,n):e,o="function"==typeof t?t.call(n,n):t;return r?Lt(r,o):o}:e?t?function(){return Lt("function"==typeof e?e.call(this,this):e,"function"==typeof t?t.call(this,this):t)}:e:t}function It(t,e){var n=e?t?t.concat(e):Array.isArray(e)?e:[e]:t;return n?function(t){for(var e=[],n=0;n<t.length;n++)-1===e.indexOf(t[n])&&e.push(t[n]);return e}(n):n}function Mt(t,e,n,r){var o=Object.create(t||null);return e?P(o,e):o}Tt.data=function(t,e,n){return n?Rt(t,e,n):e&&"function"!=typeof e?t:Rt(t,e)},U.forEach((function(t){Tt[t]=It})),F.forEach((function(t){Tt[t+"s"]=Mt})),Tt.watch=function(t,e,n,r){if(t===nt&&(t=void 0),e===nt&&(e=void 0),!e)return Object.create(t||null);if(!t)return e;var o={};for(var i in P(o,t),e){var a=o[i],u=e[i];a&&!Array.isArray(a)&&(a=[a]),o[i]=a?a.concat(u):Array.isArray(u)?u:[u]}return o},Tt.props=Tt.methods=Tt.inject=Tt.computed=function(t,e,n,r){if(!t)return e;var o=Object.create(null);return P(o,t),e&&P(o,e),o},Tt.provide=Rt;var Dt=function(t,e){return void 0===e?t:e};function Nt(t,e,n){if("function"==typeof e&&(e=e.options),function(t,e){var n=t.props;if(n){var r,o,i={};if(Array.isArray(n))for(r=n.length;r--;)"string"==typeof(o=n[r])&&(i[j(o)]={type:null});else if(p(n))for(var a in n)o=n[a],i[j(a)]=p(o)?o:{type:o};else 0;t.props=i}}(e),function(t,e){var n=t.inject;if(n){var r=t.inject={};if(Array.isArray(n))for(var o=0;o<n.length;o++)r[n[o]]={from:n[o]};else if(p(n))for(var i in n){var a=n[i];r[i]=p(a)?P({from:i},a):{from:a}}else 0}}(e),function(t){var e=t.directives;if(e)for(var n in e){var r=e[n];"function"==typeof r&&(e[n]={bind:r,update:r})}}(e),!e._base&&(e.extends&&(t=Nt(t,e.extends,n)),e.mixins))for(var r=0,o=e.mixins.length;r<o;r++)t=Nt(t,e.mixins[r],n);var i,a={};for(i in t)u(i);for(i in e)w(t,i)||u(i);function u(r){var o=Tt[r]||Dt;a[r]=o(t[r],e[r],n,r)}return a}function Ft(t,e,n,r){if("string"==typeof n){var o=t[e];if(w(o,n))return o[n];var i=j(n);if(w(o,i))return o[i];var a=k(i);return w(o,a)?o[a]:o[n]||o[i]||o[a]}}function Ut(t,e,n,r){var o=e[t],i=!w(n,t),a=n[t],u=qt(Boolean,o.type);if(u>-1)if(i&&!w(o,"default"))a=!1;else if(""===a||a===C(t)){var s=qt(String,o.type);(s<0||u<s)&&(a=!0)}if(void 0===a){a=function(t,e,n){if(!w(e,"default"))return;var r=e.default;0;if(t&&t.$options.propsData&&void 0===t.$options.propsData[n]&&void 0!==t._props[n])return t._props[n];return"function"==typeof r&&"Function"!==zt(e.type)?r.call(t):r}(r,o,t);var c=Ot;jt(!0),Et(a),jt(c)}return a}function zt(t){var e=t&&t.toString().match(/^\s*function (\w+)/);return e?e[1]:""}function Bt(t,e){return zt(t)===zt(e)}function qt(t,e){if(!Array.isArray(e))return Bt(e,t)?0:-1;for(var n=0,r=e.length;n<r;n++)if(Bt(e[n],t))return n;return-1}function Vt(t,e,n){ht();try{if(e)for(var r=e;r=r.$parent;){var o=r.$options.errorCaptured;if(o)for(var i=0;i<o.length;i++)try{if(!1===o[i].call(r,t,e,n))return}catch(t){Wt(t,r,"errorCaptured hook")}}Wt(t,e,n)}finally{vt()}}function Ht(t,e,n,r,o){var i;try{(i=n?t.apply(e,n):t.call(e))&&!i._isVue&&v(i)&&!i._handled&&(i.catch((function(t){return Vt(t,r,o+" (Promise/async)")})),i._handled=!0)}catch(t){Vt(t,r,o)}return i}function Wt(t,e,n){if(z.errorHandler)try{return z.errorHandler.call(null,t,e,n)}catch(e){e!==t&&Gt(e,null,"config.errorHandler")}Gt(t,e,n)}function Gt(t,e,n){if(!G&&!K||"undefined"==typeof console)throw t;console.error(t)}var Kt,Jt=!1,Xt=[],Yt=!1;function Qt(){Yt=!1;var t=Xt.slice(0);Xt.length=0;for(var e=0;e<t.length;e++)t[e]()}if("undefined"!=typeof Promise&&ut(Promise)){var Zt=Promise.resolve();Kt=function(){Zt.then(Qt),tt&&setTimeout(L)},Jt=!0}else if(Y||"undefined"==typeof MutationObserver||!ut(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())Kt="undefined"!=typeof setImmediate&&ut(setImmediate)?function(){setImmediate(Qt)}:function(){setTimeout(Qt,0)};else{var te=1,ee=new MutationObserver(Qt),ne=document.createTextNode(String(te));ee.observe(ne,{characterData:!0}),Kt=function(){te=(te+1)%2,ne.data=String(te)},Jt=!0}function re(t,e){var n;if(Xt.push((function(){if(t)try{t.call(e)}catch(t){Vt(t,e,"nextTick")}else n&&n(e)})),Yt||(Yt=!0,Kt()),!t&&"undefined"!=typeof Promise)return new Promise((function(t){n=t}))}var oe=new st;function ie(t){!function t(e,n){var r,o,i=Array.isArray(e);if(!i&&!l(e)||Object.isFrozen(e)||e instanceof mt)return;if(e.__ob__){var a=e.__ob__.dep.id;if(n.has(a))return;n.add(a)}if(i)for(r=e.length;r--;)t(e[r],n);else for(o=Object.keys(e),r=o.length;r--;)t(e[o[r]],n)}(t,oe),oe.clear()}var ae=S((function(t){var e="&"===t.charAt(0),n="~"===(t=e?t.slice(1):t).charAt(0),r="!"===(t=n?t.slice(1):t).charAt(0);return{name:t=r?t.slice(1):t,once:n,capture:r,passive:e}}));function ue(t,e){function n(){var t=arguments,r=n.fns;if(!Array.isArray(r))return Ht(r,null,arguments,e,"v-on handler");for(var o=r.slice(),i=0;i<o.length;i++)Ht(o[i],null,t,e,"v-on handler")}return n.fns=t,n}function se(t,e,n,r,o,i){var u,c,l,f;for(u in t)c=t[u],l=e[u],f=ae(u),a(c)||(a(l)?(a(c.fns)&&(c=t[u]=ue(c,i)),s(f.once)&&(c=t[u]=o(f.name,c,f.capture)),n(f.name,c,f.capture,f.passive,f.params)):c!==l&&(l.fns=c,t[u]=l));for(u in e)a(t[u])&&r((f=ae(u)).name,e[u],f.capture)}function ce(t,e,n){var r;t instanceof mt&&(t=t.data.hook||(t.data.hook={}));var o=t[e];function i(){n.apply(this,arguments),_(r.fns,i)}a(o)?r=ue([i]):u(o.fns)&&s(o.merged)?(r=o).fns.push(i):r=ue([o,i]),r.merged=!0,t[e]=r}function le(t,e,n,r,o){if(u(e)){if(w(e,n))return t[n]=e[n],o||delete e[n],!0;if(w(e,r))return t[n]=e[r],o||delete e[r],!0}return!1}function fe(t){return c(t)?[bt(t)]:Array.isArray(t)?function t(e,n){var r,o,i,l,f=[];for(r=0;r<e.length;r++)a(o=e[r])||"boolean"==typeof o||(i=f.length-1,l=f[i],Array.isArray(o)?o.length>0&&(pe((o=t(o,(n||"")+"_"+r))[0])&&pe(l)&&(f[i]=bt(l.text+o[0].text),o.shift()),f.push.apply(f,o)):c(o)?pe(l)?f[i]=bt(l.text+o):""!==o&&f.push(bt(o)):pe(o)&&pe(l)?f[i]=bt(l.text+o.text):(s(e._isVList)&&u(o.tag)&&a(o.key)&&u(n)&&(o.key="__vlist"+n+"_"+r+"__"),f.push(o)));return f}(t):void 0}function pe(t){return u(t)&&u(t.text)&&!1===t.isComment}function de(t,e){if(t){for(var n=Object.create(null),r=ct?Reflect.ownKeys(t):Object.keys(t),o=0;o<r.length;o++){var i=r[o];if("__ob__"!==i){for(var a=t[i].from,u=e;u;){if(u._provided&&w(u._provided,a)){n[i]=u._provided[a];break}u=u.$parent}if(!u)if("default"in t[i]){var s=t[i].default;n[i]="function"==typeof s?s.call(e):s}else 0}}return n}}function he(t,e){if(!t||!t.length)return{};for(var n={},r=0,o=t.length;r<o;r++){var i=t[r],a=i.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,i.context!==e&&i.fnContext!==e||!a||null==a.slot)(n.default||(n.default=[])).push(i);else{var u=a.slot,s=n[u]||(n[u]=[]);"template"===i.tag?s.push.apply(s,i.children||[]):s.push(i)}}for(var c in n)n[c].every(ve)&&delete n[c];return n}function ve(t){return t.isComment&&!t.asyncFactory||" "===t.text}function me(t,e,n){var r,o=Object.keys(e).length>0,a=t?!!t.$stable:!o,u=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(a&&n&&n!==i&&u===n.$key&&!o&&!n.$hasNormal)return n;for(var s in r={},t)t[s]&&"$"!==s[0]&&(r[s]=ye(e,s,t[s]))}else r={};for(var c in e)c in r||(r[c]=ge(e,c));return t&&Object.isExtensible(t)&&(t._normalized=r),q(r,"$stable",a),q(r,"$key",u),q(r,"$hasNormal",o),r}function ye(t,e,n){var r=function(){var t=arguments.length?n.apply(null,arguments):n({});return(t=t&&"object"==typeof t&&!Array.isArray(t)?[t]:fe(t))&&(0===t.length||1===t.length&&t[0].isComment)?void 0:t};return n.proxy&&Object.defineProperty(t,e,{get:r,enumerable:!0,configurable:!0}),r}function ge(t,e){return function(){return t[e]}}function be(t,e){var n,r,o,i,a;if(Array.isArray(t)||"string"==typeof t)for(n=new Array(t.length),r=0,o=t.length;r<o;r++)n[r]=e(t[r],r);else if("number"==typeof t)for(n=new Array(t),r=0;r<t;r++)n[r]=e(r+1,r);else if(l(t))if(ct&&t[Symbol.iterator]){n=[];for(var s=t[Symbol.iterator](),c=s.next();!c.done;)n.push(e(c.value,n.length)),c=s.next()}else for(i=Object.keys(t),n=new Array(i.length),r=0,o=i.length;r<o;r++)a=i[r],n[r]=e(t[a],a,r);return u(n)||(n=[]),n._isVList=!0,n}function _e(t,e,n,r){var o,i=this.$scopedSlots[t];i?(n=n||{},r&&(n=P(P({},r),n)),o=i(n)||e):o=this.$slots[t]||e;var a=n&&n.slot;return a?this.$createElement("template",{slot:a},o):o}function xe(t){return Ft(this.$options,"filters",t)||I}function we(t,e){return Array.isArray(t)?-1===t.indexOf(e):t!==e}function Se(t,e,n,r,o){var i=z.keyCodes[e]||n;return o&&r&&!z.keyCodes[e]?we(o,r):i?we(i,t):r?C(r)!==e:void 0}function Oe(t,e,n,r,o){if(n)if(l(n)){var i;Array.isArray(n)&&(n=T(n));var a=function(a){if("class"===a||"style"===a||b(a))i=t;else{var u=t.attrs&&t.attrs.type;i=r||z.mustUseProp(e,u,a)?t.domProps||(t.domProps={}):t.attrs||(t.attrs={})}var s=j(a),c=C(a);s in i||c in i||(i[a]=n[a],o&&((t.on||(t.on={}))["update:"+a]=function(t){n[a]=t}))};for(var u in n)a(u)}else;return t}function je(t,e){var n=this._staticTrees||(this._staticTrees=[]),r=n[t];return r&&!e||Ee(r=n[t]=this.$options.staticRenderFns[t].call(this._renderProxy,null,this),"__static__"+t,!1),r}function ke(t,e,n){return Ee(t,"__once__"+e+(n?"_"+n:""),!0),t}function Ee(t,e,n){if(Array.isArray(t))for(var r=0;r<t.length;r++)t[r]&&"string"!=typeof t[r]&&Ce(t[r],e+"_"+r,n);else Ce(t,e,n)}function Ce(t,e,n){t.isStatic=!0,t.key=e,t.isOnce=n}function Ae(t,e){if(e)if(p(e)){var n=t.on=t.on?P({},t.on):{};for(var r in e){var o=n[r],i=e[r];n[r]=o?[].concat(o,i):i}}else;return t}function $e(t,e,n,r){e=e||{$stable:!n};for(var o=0;o<t.length;o++){var i=t[o];Array.isArray(i)?$e(i,e,n):i&&(i.proxy&&(i.fn.proxy=!0),e[i.key]=i.fn)}return r&&(e.$key=r),e}function Pe(t,e){for(var n=0;n<e.length;n+=2){var r=e[n];"string"==typeof r&&r&&(t[e[n]]=e[n+1])}return t}function Te(t,e){return"string"==typeof t?e+t:t}function Le(t){t._o=ke,t._n=y,t._s=m,t._l=be,t._t=_e,t._q=M,t._i=D,t._m=je,t._f=xe,t._k=Se,t._b=Oe,t._v=bt,t._e=gt,t._u=$e,t._g=Ae,t._d=Pe,t._p=Te}function Re(t,e,n,r,o){var a,u=this,c=o.options;w(r,"_uid")?(a=Object.create(r))._original=r:(a=r,r=r._original);var l=s(c._compiled),f=!l;this.data=t,this.props=e,this.children=n,this.parent=r,this.listeners=t.on||i,this.injections=de(c.inject,r),this.slots=function(){return u.$slots||me(t.scopedSlots,u.$slots=he(n,r)),u.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return me(t.scopedSlots,this.slots())}}),l&&(this.$options=c,this.$slots=this.slots(),this.$scopedSlots=me(t.scopedSlots,this.$slots)),c._scopeId?this._c=function(t,e,n,o){var i=ze(a,t,e,n,o,f);return i&&!Array.isArray(i)&&(i.fnScopeId=c._scopeId,i.fnContext=r),i}:this._c=function(t,e,n,r){return ze(a,t,e,n,r,f)}}function Ie(t,e,n,r,o){var i=_t(t);return i.fnContext=n,i.fnOptions=r,e.slot&&((i.data||(i.data={})).slot=e.slot),i}function Me(t,e){for(var n in e)t[j(n)]=e[n]}Le(Re.prototype);var De={init:function(t,e){if(t.componentInstance&&!t.componentInstance._isDestroyed&&t.data.keepAlive){var n=t;De.prepatch(n,n)}else{(t.componentInstance=function(t,e){var n={_isComponent:!0,_parentVnode:t,parent:e},r=t.data.inlineTemplate;u(r)&&(n.render=r.render,n.staticRenderFns=r.staticRenderFns);return new t.componentOptions.Ctor(n)}(t,Ye)).$mount(e?t.elm:void 0,e)}},prepatch:function(t,e){var n=e.componentOptions;!function(t,e,n,r,o){0;var a=r.data.scopedSlots,u=t.$scopedSlots,s=!!(a&&!a.$stable||u!==i&&!u.$stable||a&&t.$scopedSlots.$key!==a.$key),c=!!(o||t.$options._renderChildren||s);t.$options._parentVnode=r,t.$vnode=r,t._vnode&&(t._vnode.parent=r);if(t.$options._renderChildren=o,t.$attrs=r.data.attrs||i,t.$listeners=n||i,e&&t.$options.props){jt(!1);for(var l=t._props,f=t.$options._propKeys||[],p=0;p<f.length;p++){var d=f[p],h=t.$options.props;l[d]=Ut(d,h,e,t)}jt(!0),t.$options.propsData=e}n=n||i;var v=t.$options._parentListeners;t.$options._parentListeners=n,Xe(t,n,v),c&&(t.$slots=he(o,r.context),t.$forceUpdate());0}(e.componentInstance=t.componentInstance,n.propsData,n.listeners,e,n.children)},insert:function(t){var e,n=t.context,r=t.componentInstance;r._isMounted||(r._isMounted=!0,en(r,"mounted")),t.data.keepAlive&&(n._isMounted?((e=r)._inactive=!1,rn.push(e)):tn(r,!0))},destroy:function(t){var e=t.componentInstance;e._isDestroyed||(t.data.keepAlive?function t(e,n){if(n&&(e._directInactive=!0,Ze(e)))return;if(!e._inactive){e._inactive=!0;for(var r=0;r<e.$children.length;r++)t(e.$children[r]);en(e,"deactivated")}}(e,!0):e.$destroy())}},Ne=Object.keys(De);function Fe(t,e,n,r,o){if(!a(t)){var c=n.$options._base;if(l(t)&&(t=c.extend(t)),"function"==typeof t){var f;if(a(t.cid)&&void 0===(t=function(t,e){if(s(t.error)&&u(t.errorComp))return t.errorComp;if(u(t.resolved))return t.resolved;var n=qe;n&&u(t.owners)&&-1===t.owners.indexOf(n)&&t.owners.push(n);if(s(t.loading)&&u(t.loadingComp))return t.loadingComp;if(n&&!u(t.owners)){var r=t.owners=[n],o=!0,i=null,c=null;n.$on("hook:destroyed",(function(){return _(r,n)}));var f=function(t){for(var e=0,n=r.length;e<n;e++)r[e].$forceUpdate();t&&(r.length=0,null!==i&&(clearTimeout(i),i=null),null!==c&&(clearTimeout(c),c=null))},p=N((function(n){t.resolved=Ve(n,e),o?r.length=0:f(!0)})),d=N((function(e){u(t.errorComp)&&(t.error=!0,f(!0))})),h=t(p,d);return l(h)&&(v(h)?a(t.resolved)&&h.then(p,d):v(h.component)&&(h.component.then(p,d),u(h.error)&&(t.errorComp=Ve(h.error,e)),u(h.loading)&&(t.loadingComp=Ve(h.loading,e),0===h.delay?t.loading=!0:i=setTimeout((function(){i=null,a(t.resolved)&&a(t.error)&&(t.loading=!0,f(!1))}),h.delay||200)),u(h.timeout)&&(c=setTimeout((function(){c=null,a(t.resolved)&&d(null)}),h.timeout)))),o=!1,t.loading?t.loadingComp:t.resolved}}(f=t,c)))return function(t,e,n,r,o){var i=gt();return i.asyncFactory=t,i.asyncMeta={data:e,context:n,children:r,tag:o},i}(f,e,n,r,o);e=e||{},On(t),u(e.model)&&function(t,e){var n=t.model&&t.model.prop||"value",r=t.model&&t.model.event||"input";(e.attrs||(e.attrs={}))[n]=e.model.value;var o=e.on||(e.on={}),i=o[r],a=e.model.callback;u(i)?(Array.isArray(i)?-1===i.indexOf(a):i!==a)&&(o[r]=[a].concat(i)):o[r]=a}(t.options,e);var p=function(t,e,n){var r=e.options.props;if(!a(r)){var o={},i=t.attrs,s=t.props;if(u(i)||u(s))for(var c in r){var l=C(c);le(o,s,c,l,!0)||le(o,i,c,l,!1)}return o}}(e,t);if(s(t.options.functional))return function(t,e,n,r,o){var a=t.options,s={},c=a.props;if(u(c))for(var l in c)s[l]=Ut(l,c,e||i);else u(n.attrs)&&Me(s,n.attrs),u(n.props)&&Me(s,n.props);var f=new Re(n,s,o,r,t),p=a.render.call(null,f._c,f);if(p instanceof mt)return Ie(p,n,f.parent,a,f);if(Array.isArray(p)){for(var d=fe(p)||[],h=new Array(d.length),v=0;v<d.length;v++)h[v]=Ie(d[v],n,f.parent,a,f);return h}}(t,p,e,n,r);var d=e.on;if(e.on=e.nativeOn,s(t.options.abstract)){var h=e.slot;e={},h&&(e.slot=h)}!function(t){for(var e=t.hook||(t.hook={}),n=0;n<Ne.length;n++){var r=Ne[n],o=e[r],i=De[r];o===i||o&&o._merged||(e[r]=o?Ue(i,o):i)}}(e);var m=t.options.name||o;return new mt("vue-component-"+t.cid+(m?"-"+m:""),e,void 0,void 0,void 0,n,{Ctor:t,propsData:p,listeners:d,tag:o,children:r},f)}}}function Ue(t,e){var n=function(n,r){t(n,r),e(n,r)};return n._merged=!0,n}function ze(t,e,n,r,o,i){return(Array.isArray(n)||c(n))&&(o=r,r=n,n=void 0),s(i)&&(o=2),function(t,e,n,r,o){if(u(n)&&u(n.__ob__))return gt();u(n)&&u(n.is)&&(e=n.is);if(!e)return gt();0;Array.isArray(r)&&"function"==typeof r[0]&&((n=n||{}).scopedSlots={default:r[0]},r.length=0);2===o?r=fe(r):1===o&&(r=function(t){for(var e=0;e<t.length;e++)if(Array.isArray(t[e]))return Array.prototype.concat.apply([],t);return t}(r));var i,c;if("string"==typeof e){var f;c=t.$vnode&&t.$vnode.ns||z.getTagNamespace(e),i=z.isReservedTag(e)?new mt(z.parsePlatformTagName(e),n,r,void 0,void 0,t):n&&n.pre||!u(f=Ft(t.$options,"components",e))?new mt(e,n,r,void 0,void 0,t):Fe(f,n,t,r,e)}else i=Fe(e,n,t,r);return Array.isArray(i)?i:u(i)?(u(c)&&function t(e,n,r){e.ns=n,"foreignObject"===e.tag&&(n=void 0,r=!0);if(u(e.children))for(var o=0,i=e.children.length;o<i;o++){var c=e.children[o];u(c.tag)&&(a(c.ns)||s(r)&&"svg"!==c.tag)&&t(c,n,r)}}(i,c),u(n)&&function(t){l(t.style)&&ie(t.style);l(t.class)&&ie(t.class)}(n),i):gt()}(t,e,n,r,o)}var Be,qe=null;function Ve(t,e){return(t.__esModule||ct&&"Module"===t[Symbol.toStringTag])&&(t=t.default),l(t)?e.extend(t):t}function He(t){return t.isComment&&t.asyncFactory}function We(t){if(Array.isArray(t))for(var e=0;e<t.length;e++){var n=t[e];if(u(n)&&(u(n.componentOptions)||He(n)))return n}}function Ge(t,e){Be.$on(t,e)}function Ke(t,e){Be.$off(t,e)}function Je(t,e){var n=Be;return function r(){var o=e.apply(null,arguments);null!==o&&n.$off(t,r)}}function Xe(t,e,n){Be=t,se(e,n||{},Ge,Ke,Je,t),Be=void 0}var Ye=null;function Qe(t){var e=Ye;return Ye=t,function(){Ye=e}}function Ze(t){for(;t&&(t=t.$parent);)if(t._inactive)return!0;return!1}function tn(t,e){if(e){if(t._directInactive=!1,Ze(t))return}else if(t._directInactive)return;if(t._inactive||null===t._inactive){t._inactive=!1;for(var n=0;n<t.$children.length;n++)tn(t.$children[n]);en(t,"activated")}}function en(t,e){ht();var n=t.$options[e],r=e+" hook";if(n)for(var o=0,i=n.length;o<i;o++)Ht(n[o],t,null,t,r);t._hasHookEvent&&t.$emit("hook:"+e),vt()}var nn=[],rn=[],on={},an=!1,un=!1,sn=0;var cn=0,ln=Date.now;if(G&&!Y){var fn=window.performance;fn&&"function"==typeof fn.now&&ln()>document.createEvent("Event").timeStamp&&(ln=function(){return fn.now()})}function pn(){var t,e;for(cn=ln(),un=!0,nn.sort((function(t,e){return t.id-e.id})),sn=0;sn<nn.length;sn++)(t=nn[sn]).before&&t.before(),e=t.id,on[e]=null,t.run();var n=rn.slice(),r=nn.slice();sn=nn.length=rn.length=0,on={},an=un=!1,function(t){for(var e=0;e<t.length;e++)t[e]._inactive=!0,tn(t[e],!0)}(n),function(t){var e=t.length;for(;e--;){var n=t[e],r=n.vm;r._watcher===n&&r._isMounted&&!r._isDestroyed&&en(r,"updated")}}(r),at&&z.devtools&&at.emit("flush")}var dn=0,hn=function(t,e,n,r,o){this.vm=t,o&&(t._watcher=this),t._watchers.push(this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++dn,this.active=!0,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new st,this.newDepIds=new st,this.expression="","function"==typeof e?this.getter=e:(this.getter=function(t){if(!V.test(t)){var e=t.split(".");return function(t){for(var n=0;n<e.length;n++){if(!t)return;t=t[e[n]]}return t}}}(e),this.getter||(this.getter=L)),this.value=this.lazy?void 0:this.get()};hn.prototype.get=function(){var t;ht(this);var e=this.vm;try{t=this.getter.call(e,e)}catch(t){if(!this.user)throw t;Vt(t,e,'getter for watcher "'+this.expression+'"')}finally{this.deep&&ie(t),vt(),this.cleanupDeps()}return t},hn.prototype.addDep=function(t){var e=t.id;this.newDepIds.has(e)||(this.newDepIds.add(e),this.newDeps.push(t),this.depIds.has(e)||t.addSub(this))},hn.prototype.cleanupDeps=function(){for(var t=this.deps.length;t--;){var e=this.deps[t];this.newDepIds.has(e.id)||e.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},hn.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():function(t){var e=t.id;if(null==on[e]){if(on[e]=!0,un){for(var n=nn.length-1;n>sn&&nn[n].id>t.id;)n--;nn.splice(n+1,0,t)}else nn.push(t);an||(an=!0,re(pn))}}(this)},hn.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||l(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){Vt(t,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},hn.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},hn.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},hn.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||_(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var vn={enumerable:!0,configurable:!0,get:L,set:L};function mn(t,e,n){vn.get=function(){return this[e][n]},vn.set=function(t){this[e][n]=t},Object.defineProperty(t,n,vn)}function yn(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},o=t.$options._propKeys=[];t.$parent&&jt(!1);var i=function(i){o.push(i);var a=Ut(i,e,n,t);Ct(r,i,a),i in t||mn(t,"_props",i)};for(var a in e)i(a);jt(!0)}(t,e.props),e.methods&&function(t,e){t.$options.props;for(var n in e)t[n]="function"!=typeof e[n]?L:A(e[n],t)}(t,e.methods),e.data?function(t){var e=t.$options.data;p(e=t._data="function"==typeof e?function(t,e){ht();try{return t.call(e,e)}catch(t){return Vt(t,e,"data()"),{}}finally{vt()}}(e,t):e||{})||(e={});var n=Object.keys(e),r=t.$options.props,o=(t.$options.methods,n.length);for(;o--;){var i=n[o];0,r&&w(r,i)||(a=void 0,36!==(a=(i+"").charCodeAt(0))&&95!==a&&mn(t,"_data",i))}var a;Et(e,!0)}(t):Et(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=it();for(var o in e){var i=e[o],a="function"==typeof i?i:i.get;0,r||(n[o]=new hn(t,a||L,L,gn)),o in t||bn(t,o,i)}}(t,e.computed),e.watch&&e.watch!==nt&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var o=0;o<r.length;o++)wn(t,n,r[o]);else wn(t,n,r)}}(t,e.watch)}var gn={lazy:!0};function bn(t,e,n){var r=!it();"function"==typeof n?(vn.get=r?_n(e):xn(n),vn.set=L):(vn.get=n.get?r&&!1!==n.cache?_n(e):xn(n.get):L,vn.set=n.set||L),Object.defineProperty(t,e,vn)}function _n(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),pt.target&&e.depend(),e.value}}function xn(t){return function(){return t.call(this,this)}}function wn(t,e,n,r){return p(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=t[n]),t.$watch(e,n,r)}var Sn=0;function On(t){var e=t.options;if(t.super){var n=On(t.super);if(n!==t.superOptions){t.superOptions=n;var r=function(t){var e,n=t.options,r=t.sealedOptions;for(var o in n)n[o]!==r[o]&&(e||(e={}),e[o]=n[o]);return e}(t);r&&P(t.extendOptions,r),(e=t.options=Nt(n,t.extendOptions)).name&&(e.components[e.name]=t)}}return e}function jn(t){this._init(t)}function kn(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,o=t._Ctor||(t._Ctor={});if(o[r])return o[r];var i=t.name||n.options.name;var a=function(t){this._init(t)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=e++,a.options=Nt(n.options,t),a.super=n,a.options.props&&function(t){var e=t.options.props;for(var n in e)mn(t.prototype,"_props",n)}(a),a.options.computed&&function(t){var e=t.options.computed;for(var n in e)bn(t.prototype,n,e[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,F.forEach((function(t){a[t]=n[t]})),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=P({},a.options),o[r]=a,a}}function En(t){return t&&(t.Ctor.options.name||t.tag)}function Cn(t,e){return Array.isArray(t)?t.indexOf(e)>-1:"string"==typeof t?t.split(",").indexOf(e)>-1:!!d(t)&&t.test(e)}function An(t,e){var n=t.cache,r=t.keys,o=t._vnode;for(var i in n){var a=n[i];if(a){var u=En(a.componentOptions);u&&!e(u)&&$n(n,i,r,o)}}}function $n(t,e,n,r){var o=t[e];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),t[e]=null,_(n,e)}jn.prototype._init=function(t){var e=this;e._uid=Sn++,e._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r;var o=r.componentOptions;n.propsData=o.propsData,n._parentListeners=o.listeners,n._renderChildren=o.children,n._componentTag=o.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}(e,t):e.$options=Nt(On(e.constructor),t||{},e),e._renderProxy=e,e._self=e,function(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}(e),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&Xe(t,e)}(e),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,n=t.$vnode=e._parentVnode,r=n&&n.context;t.$slots=he(e._renderChildren,r),t.$scopedSlots=i,t._c=function(e,n,r,o){return ze(t,e,n,r,o,!1)},t.$createElement=function(e,n,r,o){return ze(t,e,n,r,o,!0)};var o=n&&n.data;Ct(t,"$attrs",o&&o.attrs||i,null,!0),Ct(t,"$listeners",e._parentListeners||i,null,!0)}(e),en(e,"beforeCreate"),function(t){var e=de(t.$options.inject,t);e&&(jt(!1),Object.keys(e).forEach((function(n){Ct(t,n,e[n])})),jt(!0))}(e),yn(e),function(t){var e=t.$options.provide;e&&(t._provided="function"==typeof e?e.call(t):e)}(e),en(e,"created"),e.$options.el&&e.$mount(e.$options.el)},function(t){var e={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(t.prototype,"$data",e),Object.defineProperty(t.prototype,"$props",n),t.prototype.$set=At,t.prototype.$delete=$t,t.prototype.$watch=function(t,e,n){if(p(e))return wn(this,t,e,n);(n=n||{}).user=!0;var r=new hn(this,t,e,n);if(n.immediate)try{e.call(this,r.value)}catch(t){Vt(t,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}}(jn),function(t){var e=/^hook:/;t.prototype.$on=function(t,n){var r=this;if(Array.isArray(t))for(var o=0,i=t.length;o<i;o++)r.$on(t[o],n);else(r._events[t]||(r._events[t]=[])).push(n),e.test(t)&&(r._hasHookEvent=!0);return r},t.prototype.$once=function(t,e){var n=this;function r(){n.$off(t,r),e.apply(n,arguments)}return r.fn=e,n.$on(t,r),n},t.prototype.$off=function(t,e){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(t)){for(var r=0,o=t.length;r<o;r++)n.$off(t[r],e);return n}var i,a=n._events[t];if(!a)return n;if(!e)return n._events[t]=null,n;for(var u=a.length;u--;)if((i=a[u])===e||i.fn===e){a.splice(u,1);break}return n},t.prototype.$emit=function(t){var e=this,n=e._events[t];if(n){n=n.length>1?$(n):n;for(var r=$(arguments,1),o='event handler for "'+t+'"',i=0,a=n.length;i<a;i++)Ht(n[i],e,r,e,o)}return e}}(jn),function(t){t.prototype._update=function(t,e){var n=this,r=n.$el,o=n._vnode,i=Qe(n);n._vnode=t,n.$el=o?n.__patch__(o,t):n.__patch__(n.$el,t,e,!1),i(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)},t.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},t.prototype.$destroy=function(){var t=this;if(!t._isBeingDestroyed){en(t,"beforeDestroy"),t._isBeingDestroyed=!0;var e=t.$parent;!e||e._isBeingDestroyed||t.$options.abstract||_(e.$children,t),t._watcher&&t._watcher.teardown();for(var n=t._watchers.length;n--;)t._watchers[n].teardown();t._data.__ob__&&t._data.__ob__.vmCount--,t._isDestroyed=!0,t.__patch__(t._vnode,null),en(t,"destroyed"),t.$off(),t.$el&&(t.$el.__vue__=null),t.$vnode&&(t.$vnode.parent=null)}}}(jn),function(t){Le(t.prototype),t.prototype.$nextTick=function(t){return re(t,this)},t.prototype._render=function(){var t,e=this,n=e.$options,r=n.render,o=n._parentVnode;o&&(e.$scopedSlots=me(o.data.scopedSlots,e.$slots,e.$scopedSlots)),e.$vnode=o;try{qe=e,t=r.call(e._renderProxy,e.$createElement)}catch(n){Vt(n,e,"render"),t=e._vnode}finally{qe=null}return Array.isArray(t)&&1===t.length&&(t=t[0]),t instanceof mt||(t=gt()),t.parent=o,t}}(jn);var Pn=[String,RegExp,Array],Tn={KeepAlive:{name:"keep-alive",abstract:!0,props:{include:Pn,exclude:Pn,max:[String,Number]},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var t in this.cache)$n(this.cache,t,this.keys)},mounted:function(){var t=this;this.$watch("include",(function(e){An(t,(function(t){return Cn(e,t)}))})),this.$watch("exclude",(function(e){An(t,(function(t){return!Cn(e,t)}))}))},render:function(){var t=this.$slots.default,e=We(t),n=e&&e.componentOptions;if(n){var r=En(n),o=this.include,i=this.exclude;if(o&&(!r||!Cn(o,r))||i&&r&&Cn(i,r))return e;var a=this.cache,u=this.keys,s=null==e.key?n.Ctor.cid+(n.tag?"::"+n.tag:""):e.key;a[s]?(e.componentInstance=a[s].componentInstance,_(u,s),u.push(s)):(a[s]=e,u.push(s),this.max&&u.length>parseInt(this.max)&&$n(a,u[0],u,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}}};!function(t){var e={get:function(){return z}};Object.defineProperty(t,"config",e),t.util={warn:lt,extend:P,mergeOptions:Nt,defineReactive:Ct},t.set=At,t.delete=$t,t.nextTick=re,t.observable=function(t){return Et(t),t},t.options=Object.create(null),F.forEach((function(e){t.options[e+"s"]=Object.create(null)})),t.options._base=t,P(t.options.components,Tn),function(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=$(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this}}(t),function(t){t.mixin=function(t){return this.options=Nt(this.options,t),this}}(t),kn(t),function(t){F.forEach((function(e){t[e]=function(t,n){return n?("component"===e&&p(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}}))}(t)}(jn),Object.defineProperty(jn.prototype,"$isServer",{get:it}),Object.defineProperty(jn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(jn,"FunctionalRenderContext",{value:Re}),jn.version="2.6.12";var Ln=g("style,class"),Rn=g("input,textarea,option,select,progress"),In=g("contenteditable,draggable,spellcheck"),Mn=g("events,caret,typing,plaintext-only"),Dn=g("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Nn="http://www.w3.org/1999/xlink",Fn=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},Un=function(t){return Fn(t)?t.slice(6,t.length):""},zn=function(t){return null==t||!1===t};function Bn(t){for(var e=t.data,n=t,r=t;u(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(e=qn(r.data,e));for(;u(n=n.parent);)n&&n.data&&(e=qn(e,n.data));return function(t,e){if(u(t)||u(e))return Vn(t,Hn(e));return""}(e.staticClass,e.class)}function qn(t,e){return{staticClass:Vn(t.staticClass,e.staticClass),class:u(t.class)?[t.class,e.class]:e.class}}function Vn(t,e){return t?e?t+" "+e:t:e||""}function Hn(t){return Array.isArray(t)?function(t){for(var e,n="",r=0,o=t.length;r<o;r++)u(e=Hn(t[r]))&&""!==e&&(n&&(n+=" "),n+=e);return n}(t):l(t)?function(t){var e="";for(var n in t)t[n]&&(e&&(e+=" "),e+=n);return e}(t):"string"==typeof t?t:""}var Wn={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},Gn=g("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),Kn=g("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),Jn=function(t){return Gn(t)||Kn(t)};var Xn=Object.create(null);var Yn=g("text,number,password,search,email,tel,url");var Qn=Object.freeze({createElement:function(t,e){var n=document.createElement(t);return"select"!==t||e.data&&e.data.attrs&&void 0!==e.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n},createElementNS:function(t,e){return document.createElementNS(Wn[t],e)},createTextNode:function(t){return document.createTextNode(t)},createComment:function(t){return document.createComment(t)},insertBefore:function(t,e,n){t.insertBefore(e,n)},removeChild:function(t,e){t.removeChild(e)},appendChild:function(t,e){t.appendChild(e)},parentNode:function(t){return t.parentNode},nextSibling:function(t){return t.nextSibling},tagName:function(t){return t.tagName},setTextContent:function(t,e){t.textContent=e},setStyleScope:function(t,e){t.setAttribute(e,"")}}),Zn={create:function(t,e){tr(e)},update:function(t,e){t.data.ref!==e.data.ref&&(tr(t,!0),tr(e))},destroy:function(t){tr(t,!0)}};function tr(t,e){var n=t.data.ref;if(u(n)){var r=t.context,o=t.componentInstance||t.elm,i=r.$refs;e?Array.isArray(i[n])?_(i[n],o):i[n]===o&&(i[n]=void 0):t.data.refInFor?Array.isArray(i[n])?i[n].indexOf(o)<0&&i[n].push(o):i[n]=[o]:i[n]=o}}var er=new mt("",{},[]),nr=["create","activate","update","remove","destroy"];function rr(t,e){return t.key===e.key&&(t.tag===e.tag&&t.isComment===e.isComment&&u(t.data)===u(e.data)&&function(t,e){if("input"!==t.tag)return!0;var n,r=u(n=t.data)&&u(n=n.attrs)&&n.type,o=u(n=e.data)&&u(n=n.attrs)&&n.type;return r===o||Yn(r)&&Yn(o)}(t,e)||s(t.isAsyncPlaceholder)&&t.asyncFactory===e.asyncFactory&&a(e.asyncFactory.error))}function or(t,e,n){var r,o,i={};for(r=e;r<=n;++r)u(o=t[r].key)&&(i[o]=r);return i}var ir={create:ar,update:ar,destroy:function(t){ar(t,er)}};function ar(t,e){(t.data.directives||e.data.directives)&&function(t,e){var n,r,o,i=t===er,a=e===er,u=sr(t.data.directives,t.context),s=sr(e.data.directives,e.context),c=[],l=[];for(n in s)r=u[n],o=s[n],r?(o.oldValue=r.value,o.oldArg=r.arg,lr(o,"update",e,t),o.def&&o.def.componentUpdated&&l.push(o)):(lr(o,"bind",e,t),o.def&&o.def.inserted&&c.push(o));if(c.length){var f=function(){for(var n=0;n<c.length;n++)lr(c[n],"inserted",e,t)};i?ce(e,"insert",f):f()}l.length&&ce(e,"postpatch",(function(){for(var n=0;n<l.length;n++)lr(l[n],"componentUpdated",e,t)}));if(!i)for(n in u)s[n]||lr(u[n],"unbind",t,t,a)}(t,e)}var ur=Object.create(null);function sr(t,e){var n,r,o=Object.create(null);if(!t)return o;for(n=0;n<t.length;n++)(r=t[n]).modifiers||(r.modifiers=ur),o[cr(r)]=r,r.def=Ft(e.$options,"directives",r.name);return o}function cr(t){return t.rawName||t.name+"."+Object.keys(t.modifiers||{}).join(".")}function lr(t,e,n,r,o){var i=t.def&&t.def[e];if(i)try{i(n.elm,t,n,r,o)}catch(r){Vt(r,n.context,"directive "+t.name+" "+e+" hook")}}var fr=[Zn,ir];function pr(t,e){var n=e.componentOptions;if(!(u(n)&&!1===n.Ctor.options.inheritAttrs||a(t.data.attrs)&&a(e.data.attrs))){var r,o,i=e.elm,s=t.data.attrs||{},c=e.data.attrs||{};for(r in u(c.__ob__)&&(c=e.data.attrs=P({},c)),c)o=c[r],s[r]!==o&&dr(i,r,o);for(r in(Y||Z)&&c.value!==s.value&&dr(i,"value",c.value),s)a(c[r])&&(Fn(r)?i.removeAttributeNS(Nn,Un(r)):In(r)||i.removeAttribute(r))}}function dr(t,e,n){t.tagName.indexOf("-")>-1?hr(t,e,n):Dn(e)?zn(n)?t.removeAttribute(e):(n="allowfullscreen"===e&&"EMBED"===t.tagName?"true":e,t.setAttribute(e,n)):In(e)?t.setAttribute(e,function(t,e){return zn(e)||"false"===e?"false":"contenteditable"===t&&Mn(e)?e:"true"}(e,n)):Fn(e)?zn(n)?t.removeAttributeNS(Nn,Un(e)):t.setAttributeNS(Nn,e,n):hr(t,e,n)}function hr(t,e,n){if(zn(n))t.removeAttribute(e);else{if(Y&&!Q&&"TEXTAREA"===t.tagName&&"placeholder"===e&&""!==n&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener("input",r)};t.addEventListener("input",r),t.__ieph=!0}t.setAttribute(e,n)}}var vr={create:pr,update:pr};function mr(t,e){var n=e.elm,r=e.data,o=t.data;if(!(a(r.staticClass)&&a(r.class)&&(a(o)||a(o.staticClass)&&a(o.class)))){var i=Bn(e),s=n._transitionClasses;u(s)&&(i=Vn(i,Hn(s))),i!==n._prevClass&&(n.setAttribute("class",i),n._prevClass=i)}}var yr,gr={create:mr,update:mr};function br(t,e,n){var r=yr;return function o(){var i=e.apply(null,arguments);null!==i&&wr(t,o,n,r)}}var _r=Jt&&!(et&&Number(et[1])<=53);function xr(t,e,n,r){if(_r){var o=cn,i=e;e=i._wrapper=function(t){if(t.target===t.currentTarget||t.timeStamp>=o||t.timeStamp<=0||t.target.ownerDocument!==document)return i.apply(this,arguments)}}yr.addEventListener(t,e,rt?{capture:n,passive:r}:n)}function wr(t,e,n,r){(r||yr).removeEventListener(t,e._wrapper||e,n)}function Sr(t,e){if(!a(t.data.on)||!a(e.data.on)){var n=e.data.on||{},r=t.data.on||{};yr=e.elm,function(t){if(u(t.__r)){var e=Y?"change":"input";t[e]=[].concat(t.__r,t[e]||[]),delete t.__r}u(t.__c)&&(t.change=[].concat(t.__c,t.change||[]),delete t.__c)}(n),se(n,r,xr,wr,br,e.context),yr=void 0}}var Or,jr={create:Sr,update:Sr};function kr(t,e){if(!a(t.data.domProps)||!a(e.data.domProps)){var n,r,o=e.elm,i=t.data.domProps||{},s=e.data.domProps||{};for(n in u(s.__ob__)&&(s=e.data.domProps=P({},s)),i)n in s||(o[n]="");for(n in s){if(r=s[n],"textContent"===n||"innerHTML"===n){if(e.children&&(e.children.length=0),r===i[n])continue;1===o.childNodes.length&&o.removeChild(o.childNodes[0])}if("value"===n&&"PROGRESS"!==o.tagName){o._value=r;var c=a(r)?"":String(r);Er(o,c)&&(o.value=c)}else if("innerHTML"===n&&Kn(o.tagName)&&a(o.innerHTML)){(Or=Or||document.createElement("div")).innerHTML="<svg>"+r+"</svg>";for(var l=Or.firstChild;o.firstChild;)o.removeChild(o.firstChild);for(;l.firstChild;)o.appendChild(l.firstChild)}else if(r!==i[n])try{o[n]=r}catch(t){}}}}function Er(t,e){return!t.composing&&("OPTION"===t.tagName||function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(t,e)||function(t,e){var n=t.value,r=t._vModifiers;if(u(r)){if(r.number)return y(n)!==y(e);if(r.trim)return n.trim()!==e.trim()}return n!==e}(t,e))}var Cr={create:kr,update:kr},Ar=S((function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\))/g).forEach((function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}})),e}));function $r(t){var e=Pr(t.style);return t.staticStyle?P(t.staticStyle,e):e}function Pr(t){return Array.isArray(t)?T(t):"string"==typeof t?Ar(t):t}var Tr,Lr=/^--/,Rr=/\s*!important$/,Ir=function(t,e,n){if(Lr.test(e))t.style.setProperty(e,n);else if(Rr.test(n))t.style.setProperty(C(e),n.replace(Rr,""),"important");else{var r=Dr(e);if(Array.isArray(n))for(var o=0,i=n.length;o<i;o++)t.style[r]=n[o];else t.style[r]=n}},Mr=["Webkit","Moz","ms"],Dr=S((function(t){if(Tr=Tr||document.createElement("div").style,"filter"!==(t=j(t))&&t in Tr)return t;for(var e=t.charAt(0).toUpperCase()+t.slice(1),n=0;n<Mr.length;n++){var r=Mr[n]+e;if(r in Tr)return r}}));function Nr(t,e){var n=e.data,r=t.data;if(!(a(n.staticStyle)&&a(n.style)&&a(r.staticStyle)&&a(r.style))){var o,i,s=e.elm,c=r.staticStyle,l=r.normalizedStyle||r.style||{},f=c||l,p=Pr(e.data.style)||{};e.data.normalizedStyle=u(p.__ob__)?P({},p):p;var d=function(t,e){var n,r={};if(e)for(var o=t;o.componentInstance;)(o=o.componentInstance._vnode)&&o.data&&(n=$r(o.data))&&P(r,n);(n=$r(t.data))&&P(r,n);for(var i=t;i=i.parent;)i.data&&(n=$r(i.data))&&P(r,n);return r}(e,!0);for(i in f)a(d[i])&&Ir(s,i,"");for(i in d)(o=d[i])!==f[i]&&Ir(s,i,null==o?"":o)}}var Fr={create:Nr,update:Nr},Ur=/\s+/;function zr(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(Ur).forEach((function(e){return t.classList.add(e)})):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function Br(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(Ur).forEach((function(e){return t.classList.remove(e)})):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?t.setAttribute("class",n):t.removeAttribute("class")}}function qr(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&P(e,Vr(t.name||"v")),P(e,t),e}return"string"==typeof t?Vr(t):void 0}}var Vr=S((function(t){return{enterClass:t+"-enter",enterToClass:t+"-enter-to",enterActiveClass:t+"-enter-active",leaveClass:t+"-leave",leaveToClass:t+"-leave-to",leaveActiveClass:t+"-leave-active"}})),Hr=G&&!Q,Wr="transition",Gr="transitionend",Kr="animation",Jr="animationend";Hr&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Wr="WebkitTransition",Gr="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(Kr="WebkitAnimation",Jr="webkitAnimationEnd"));var Xr=G?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function Yr(t){Xr((function(){Xr(t)}))}function Qr(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),zr(t,e))}function Zr(t,e){t._transitionClasses&&_(t._transitionClasses,e),Br(t,e)}function to(t,e,n){var r=no(t,e),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var u="transition"===o?Gr:Jr,s=0,c=function(){t.removeEventListener(u,l),n()},l=function(e){e.target===t&&++s>=a&&c()};setTimeout((function(){s<a&&c()}),i+1),t.addEventListener(u,l)}var eo=/\b(transform|all)(,|$)/;function no(t,e){var n,r=window.getComputedStyle(t),o=(r[Wr+"Delay"]||"").split(", "),i=(r[Wr+"Duration"]||"").split(", "),a=ro(o,i),u=(r[Kr+"Delay"]||"").split(", "),s=(r[Kr+"Duration"]||"").split(", "),c=ro(u,s),l=0,f=0;return"transition"===e?a>0&&(n="transition",l=a,f=i.length):"animation"===e?c>0&&(n="animation",l=c,f=s.length):f=(n=(l=Math.max(a,c))>0?a>c?"transition":"animation":null)?"transition"===n?i.length:s.length:0,{type:n,timeout:l,propCount:f,hasTransform:"transition"===n&&eo.test(r[Wr+"Property"])}}function ro(t,e){for(;t.length<e.length;)t=t.concat(t);return Math.max.apply(null,e.map((function(e,n){return oo(e)+oo(t[n])})))}function oo(t){return 1e3*Number(t.slice(0,-1).replace(",","."))}function io(t,e){var n=t.elm;u(n._leaveCb)&&(n._leaveCb.cancelled=!0,n._leaveCb());var r=qr(t.data.transition);if(!a(r)&&!u(n._enterCb)&&1===n.nodeType){for(var o=r.css,i=r.type,s=r.enterClass,c=r.enterToClass,f=r.enterActiveClass,p=r.appearClass,d=r.appearToClass,h=r.appearActiveClass,v=r.beforeEnter,m=r.enter,g=r.afterEnter,b=r.enterCancelled,_=r.beforeAppear,x=r.appear,w=r.afterAppear,S=r.appearCancelled,O=r.duration,j=Ye,k=Ye.$vnode;k&&k.parent;)j=k.context,k=k.parent;var E=!j._isMounted||!t.isRootInsert;if(!E||x||""===x){var C=E&&p?p:s,A=E&&h?h:f,$=E&&d?d:c,P=E&&_||v,T=E&&"function"==typeof x?x:m,L=E&&w||g,R=E&&S||b,I=y(l(O)?O.enter:O);0;var M=!1!==o&&!Q,D=so(T),F=n._enterCb=N((function(){M&&(Zr(n,$),Zr(n,A)),F.cancelled?(M&&Zr(n,C),R&&R(n)):L&&L(n),n._enterCb=null}));t.data.show||ce(t,"insert",(function(){var e=n.parentNode,r=e&&e._pending&&e._pending[t.key];r&&r.tag===t.tag&&r.elm._leaveCb&&r.elm._leaveCb(),T&&T(n,F)})),P&&P(n),M&&(Qr(n,C),Qr(n,A),Yr((function(){Zr(n,C),F.cancelled||(Qr(n,$),D||(uo(I)?setTimeout(F,I):to(n,i,F)))}))),t.data.show&&(e&&e(),T&&T(n,F)),M||D||F()}}}function ao(t,e){var n=t.elm;u(n._enterCb)&&(n._enterCb.cancelled=!0,n._enterCb());var r=qr(t.data.transition);if(a(r)||1!==n.nodeType)return e();if(!u(n._leaveCb)){var o=r.css,i=r.type,s=r.leaveClass,c=r.leaveToClass,f=r.leaveActiveClass,p=r.beforeLeave,d=r.leave,h=r.afterLeave,v=r.leaveCancelled,m=r.delayLeave,g=r.duration,b=!1!==o&&!Q,_=so(d),x=y(l(g)?g.leave:g);0;var w=n._leaveCb=N((function(){n.parentNode&&n.parentNode._pending&&(n.parentNode._pending[t.key]=null),b&&(Zr(n,c),Zr(n,f)),w.cancelled?(b&&Zr(n,s),v&&v(n)):(e(),h&&h(n)),n._leaveCb=null}));m?m(S):S()}function S(){w.cancelled||(!t.data.show&&n.parentNode&&((n.parentNode._pending||(n.parentNode._pending={}))[t.key]=t),p&&p(n),b&&(Qr(n,s),Qr(n,f),Yr((function(){Zr(n,s),w.cancelled||(Qr(n,c),_||(uo(x)?setTimeout(w,x):to(n,i,w)))}))),d&&d(n,w),b||_||w())}}function uo(t){return"number"==typeof t&&!isNaN(t)}function so(t){if(a(t))return!1;var e=t.fns;return u(e)?so(Array.isArray(e)?e[0]:e):(t._length||t.length)>1}function co(t,e){!0!==e.data.show&&io(e)}var lo=function(t){var e,n,r={},o=t.modules,i=t.nodeOps;for(e=0;e<nr.length;++e)for(r[nr[e]]=[],n=0;n<o.length;++n)u(o[n][nr[e]])&&r[nr[e]].push(o[n][nr[e]]);function l(t){var e=i.parentNode(t);u(e)&&i.removeChild(e,t)}function f(t,e,n,o,a,c,l){if(u(t.elm)&&u(c)&&(t=c[l]=_t(t)),t.isRootInsert=!a,!function(t,e,n,o){var i=t.data;if(u(i)){var a=u(t.componentInstance)&&i.keepAlive;if(u(i=i.hook)&&u(i=i.init)&&i(t,!1),u(t.componentInstance))return p(t,e),d(n,t.elm,o),s(a)&&function(t,e,n,o){var i,a=t;for(;a.componentInstance;)if(a=a.componentInstance._vnode,u(i=a.data)&&u(i=i.transition)){for(i=0;i<r.activate.length;++i)r.activate[i](er,a);e.push(a);break}d(n,t.elm,o)}(t,e,n,o),!0}}(t,e,n,o)){var f=t.data,v=t.children,g=t.tag;u(g)?(t.elm=t.ns?i.createElementNS(t.ns,g):i.createElement(g,t),y(t),h(t,v,e),u(f)&&m(t,e),d(n,t.elm,o)):s(t.isComment)?(t.elm=i.createComment(t.text),d(n,t.elm,o)):(t.elm=i.createTextNode(t.text),d(n,t.elm,o))}}function p(t,e){u(t.data.pendingInsert)&&(e.push.apply(e,t.data.pendingInsert),t.data.pendingInsert=null),t.elm=t.componentInstance.$el,v(t)?(m(t,e),y(t)):(tr(t),e.push(t))}function d(t,e,n){u(t)&&(u(n)?i.parentNode(n)===t&&i.insertBefore(t,e,n):i.appendChild(t,e))}function h(t,e,n){if(Array.isArray(e)){0;for(var r=0;r<e.length;++r)f(e[r],n,t.elm,null,!0,e,r)}else c(t.text)&&i.appendChild(t.elm,i.createTextNode(String(t.text)))}function v(t){for(;t.componentInstance;)t=t.componentInstance._vnode;return u(t.tag)}function m(t,n){for(var o=0;o<r.create.length;++o)r.create[o](er,t);u(e=t.data.hook)&&(u(e.create)&&e.create(er,t),u(e.insert)&&n.push(t))}function y(t){var e;if(u(e=t.fnScopeId))i.setStyleScope(t.elm,e);else for(var n=t;n;)u(e=n.context)&&u(e=e.$options._scopeId)&&i.setStyleScope(t.elm,e),n=n.parent;u(e=Ye)&&e!==t.context&&e!==t.fnContext&&u(e=e.$options._scopeId)&&i.setStyleScope(t.elm,e)}function b(t,e,n,r,o,i){for(;r<=o;++r)f(n[r],i,t,e,!1,n,r)}function _(t){var e,n,o=t.data;if(u(o))for(u(e=o.hook)&&u(e=e.destroy)&&e(t),e=0;e<r.destroy.length;++e)r.destroy[e](t);if(u(e=t.children))for(n=0;n<t.children.length;++n)_(t.children[n])}function x(t,e,n){for(;e<=n;++e){var r=t[e];u(r)&&(u(r.tag)?(w(r),_(r)):l(r.elm))}}function w(t,e){if(u(e)||u(t.data)){var n,o=r.remove.length+1;for(u(e)?e.listeners+=o:e=function(t,e){function n(){0==--n.listeners&&l(t)}return n.listeners=e,n}(t.elm,o),u(n=t.componentInstance)&&u(n=n._vnode)&&u(n.data)&&w(n,e),n=0;n<r.remove.length;++n)r.remove[n](t,e);u(n=t.data.hook)&&u(n=n.remove)?n(t,e):e()}else l(t.elm)}function S(t,e,n,r){for(var o=n;o<r;o++){var i=e[o];if(u(i)&&rr(t,i))return o}}function O(t,e,n,o,c,l){if(t!==e){u(e.elm)&&u(o)&&(e=o[c]=_t(e));var p=e.elm=t.elm;if(s(t.isAsyncPlaceholder))u(e.asyncFactory.resolved)?E(t.elm,e,n):e.isAsyncPlaceholder=!0;else if(s(e.isStatic)&&s(t.isStatic)&&e.key===t.key&&(s(e.isCloned)||s(e.isOnce)))e.componentInstance=t.componentInstance;else{var d,h=e.data;u(h)&&u(d=h.hook)&&u(d=d.prepatch)&&d(t,e);var m=t.children,y=e.children;if(u(h)&&v(e)){for(d=0;d<r.update.length;++d)r.update[d](t,e);u(d=h.hook)&&u(d=d.update)&&d(t,e)}a(e.text)?u(m)&&u(y)?m!==y&&function(t,e,n,r,o){var s,c,l,p=0,d=0,h=e.length-1,v=e[0],m=e[h],y=n.length-1,g=n[0],_=n[y],w=!o;for(0;p<=h&&d<=y;)a(v)?v=e[++p]:a(m)?m=e[--h]:rr(v,g)?(O(v,g,r,n,d),v=e[++p],g=n[++d]):rr(m,_)?(O(m,_,r,n,y),m=e[--h],_=n[--y]):rr(v,_)?(O(v,_,r,n,y),w&&i.insertBefore(t,v.elm,i.nextSibling(m.elm)),v=e[++p],_=n[--y]):rr(m,g)?(O(m,g,r,n,d),w&&i.insertBefore(t,m.elm,v.elm),m=e[--h],g=n[++d]):(a(s)&&(s=or(e,p,h)),a(c=u(g.key)?s[g.key]:S(g,e,p,h))?f(g,r,t,v.elm,!1,n,d):rr(l=e[c],g)?(O(l,g,r,n,d),e[c]=void 0,w&&i.insertBefore(t,l.elm,v.elm)):f(g,r,t,v.elm,!1,n,d),g=n[++d]);p>h?b(t,a(n[y+1])?null:n[y+1].elm,n,d,y,r):d>y&&x(e,p,h)}(p,m,y,n,l):u(y)?(u(t.text)&&i.setTextContent(p,""),b(p,null,y,0,y.length-1,n)):u(m)?x(m,0,m.length-1):u(t.text)&&i.setTextContent(p,""):t.text!==e.text&&i.setTextContent(p,e.text),u(h)&&u(d=h.hook)&&u(d=d.postpatch)&&d(t,e)}}}function j(t,e,n){if(s(n)&&u(t.parent))t.parent.data.pendingInsert=e;else for(var r=0;r<e.length;++r)e[r].data.hook.insert(e[r])}var k=g("attrs,class,staticClass,staticStyle,key");function E(t,e,n,r){var o,i=e.tag,a=e.data,c=e.children;if(r=r||a&&a.pre,e.elm=t,s(e.isComment)&&u(e.asyncFactory))return e.isAsyncPlaceholder=!0,!0;if(u(a)&&(u(o=a.hook)&&u(o=o.init)&&o(e,!0),u(o=e.componentInstance)))return p(e,n),!0;if(u(i)){if(u(c))if(t.hasChildNodes())if(u(o=a)&&u(o=o.domProps)&&u(o=o.innerHTML)){if(o!==t.innerHTML)return!1}else{for(var l=!0,f=t.firstChild,d=0;d<c.length;d++){if(!f||!E(f,c[d],n,r)){l=!1;break}f=f.nextSibling}if(!l||f)return!1}else h(e,c,n);if(u(a)){var v=!1;for(var y in a)if(!k(y)){v=!0,m(e,n);break}!v&&a.class&&ie(a.class)}}else t.data!==e.text&&(t.data=e.text);return!0}return function(t,e,n,o){if(!a(e)){var c,l=!1,p=[];if(a(t))l=!0,f(e,p);else{var d=u(t.nodeType);if(!d&&rr(t,e))O(t,e,p,null,null,o);else{if(d){if(1===t.nodeType&&t.hasAttribute("data-server-rendered")&&(t.removeAttribute("data-server-rendered"),n=!0),s(n)&&E(t,e,p))return j(e,p,!0),t;c=t,t=new mt(i.tagName(c).toLowerCase(),{},[],void 0,c)}var h=t.elm,m=i.parentNode(h);if(f(e,p,h._leaveCb?null:m,i.nextSibling(h)),u(e.parent))for(var y=e.parent,g=v(e);y;){for(var b=0;b<r.destroy.length;++b)r.destroy[b](y);if(y.elm=e.elm,g){for(var w=0;w<r.create.length;++w)r.create[w](er,y);var S=y.data.hook.insert;if(S.merged)for(var k=1;k<S.fns.length;k++)S.fns[k]()}else tr(y);y=y.parent}u(m)?x([t],0,0):u(t.tag)&&_(t)}}return j(e,p,l),e.elm}u(t)&&_(t)}}({nodeOps:Qn,modules:[vr,gr,jr,Cr,Fr,G?{create:co,activate:co,remove:function(t,e){!0!==t.data.show?ao(t,e):e()}}:{}].concat(fr)});Q&&document.addEventListener("selectionchange",(function(){var t=document.activeElement;t&&t.vmodel&&bo(t,"input")}));var fo={inserted:function(t,e,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?ce(n,"postpatch",(function(){fo.componentUpdated(t,e,n)})):po(t,e,n.context),t._vOptions=[].map.call(t.options,mo)):("textarea"===n.tag||Yn(t.type))&&(t._vModifiers=e.modifiers,e.modifiers.lazy||(t.addEventListener("compositionstart",yo),t.addEventListener("compositionend",go),t.addEventListener("change",go),Q&&(t.vmodel=!0)))},componentUpdated:function(t,e,n){if("select"===n.tag){po(t,e,n.context);var r=t._vOptions,o=t._vOptions=[].map.call(t.options,mo);if(o.some((function(t,e){return!M(t,r[e])})))(t.multiple?e.value.some((function(t){return vo(t,o)})):e.value!==e.oldValue&&vo(e.value,o))&&bo(t,"change")}}};function po(t,e,n){ho(t,e,n),(Y||Z)&&setTimeout((function(){ho(t,e,n)}),0)}function ho(t,e,n){var r=e.value,o=t.multiple;if(!o||Array.isArray(r)){for(var i,a,u=0,s=t.options.length;u<s;u++)if(a=t.options[u],o)i=D(r,mo(a))>-1,a.selected!==i&&(a.selected=i);else if(M(mo(a),r))return void(t.selectedIndex!==u&&(t.selectedIndex=u));o||(t.selectedIndex=-1)}}function vo(t,e){return e.every((function(e){return!M(e,t)}))}function mo(t){return"_value"in t?t._value:t.value}function yo(t){t.target.composing=!0}function go(t){t.target.composing&&(t.target.composing=!1,bo(t.target,"input"))}function bo(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function _o(t){return!t.componentInstance||t.data&&t.data.transition?t:_o(t.componentInstance._vnode)}var xo={model:fo,show:{bind:function(t,e,n){var r=e.value,o=(n=_o(n)).data&&n.data.transition,i=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&o?(n.data.show=!0,io(n,(function(){t.style.display=i}))):t.style.display=r?i:"none"},update:function(t,e,n){var r=e.value;!r!=!e.oldValue&&((n=_o(n)).data&&n.data.transition?(n.data.show=!0,r?io(n,(function(){t.style.display=t.__vOriginalDisplay})):ao(n,(function(){t.style.display="none"}))):t.style.display=r?t.__vOriginalDisplay:"none")},unbind:function(t,e,n,r,o){o||(t.style.display=t.__vOriginalDisplay)}}},wo={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function So(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?So(We(e.children)):t}function Oo(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var o=n._parentListeners;for(var i in o)e[j(i)]=o[i];return e}function jo(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}var ko=function(t){return t.tag||He(t)},Eo=function(t){return"show"===t.name},Co={name:"transition",props:wo,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(ko)).length){0;var r=this.mode;0;var o=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return o;var i=So(o);if(!i)return o;if(this._leaving)return jo(t,o);var a="__transition-"+this._uid+"-";i.key=null==i.key?i.isComment?a+"comment":a+i.tag:c(i.key)?0===String(i.key).indexOf(a)?i.key:a+i.key:i.key;var u=(i.data||(i.data={})).transition=Oo(this),s=this._vnode,l=So(s);if(i.data.directives&&i.data.directives.some(Eo)&&(i.data.show=!0),l&&l.data&&!function(t,e){return e.key===t.key&&e.tag===t.tag}(i,l)&&!He(l)&&(!l.componentInstance||!l.componentInstance._vnode.isComment)){var f=l.data.transition=P({},u);if("out-in"===r)return this._leaving=!0,ce(f,"afterLeave",(function(){e._leaving=!1,e.$forceUpdate()})),jo(t,o);if("in-out"===r){if(He(i))return s;var p,d=function(){p()};ce(u,"afterEnter",d),ce(u,"enterCancelled",d),ce(f,"delayLeave",(function(t){p=t}))}}return o}}},Ao=P({tag:String,moveClass:String},wo);function $o(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function Po(t){t.data.newPos=t.elm.getBoundingClientRect()}function To(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,o=e.top-n.top;if(r||o){t.data.moved=!0;var i=t.elm.style;i.transform=i.WebkitTransform="translate("+r+"px,"+o+"px)",i.transitionDuration="0s"}}delete Ao.mode;var Lo={Transition:Co,TransitionGroup:{props:Ao,beforeMount:function(){var t=this,e=this._update;this._update=function(n,r){var o=Qe(t);t.__patch__(t._vnode,t.kept,!1,!0),t._vnode=t.kept,o(),e.call(t,n,r)}},render:function(t){for(var e=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,o=this.$slots.default||[],i=this.children=[],a=Oo(this),u=0;u<o.length;u++){var s=o[u];if(s.tag)if(null!=s.key&&0!==String(s.key).indexOf("__vlist"))i.push(s),n[s.key]=s,(s.data||(s.data={})).transition=a;else;}if(r){for(var c=[],l=[],f=0;f<r.length;f++){var p=r[f];p.data.transition=a,p.data.pos=p.elm.getBoundingClientRect(),n[p.key]?c.push(p):l.push(p)}this.kept=t(e,null,c),this.removed=l}return t(e,null,i)},updated:function(){var t=this.prevChildren,e=this.moveClass||(this.name||"v")+"-move";t.length&&this.hasMove(t[0].elm,e)&&(t.forEach($o),t.forEach(Po),t.forEach(To),this._reflow=document.body.offsetHeight,t.forEach((function(t){if(t.data.moved){var n=t.elm,r=n.style;Qr(n,e),r.transform=r.WebkitTransform=r.transitionDuration="",n.addEventListener(Gr,n._moveCb=function t(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(Gr,t),n._moveCb=null,Zr(n,e))})}})))},methods:{hasMove:function(t,e){if(!Hr)return!1;if(this._hasMove)return this._hasMove;var n=t.cloneNode();t._transitionClasses&&t._transitionClasses.forEach((function(t){Br(n,t)})),zr(n,e),n.style.display="none",this.$el.appendChild(n);var r=no(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};jn.config.mustUseProp=function(t,e,n){return"value"===n&&Rn(t)&&"button"!==e||"selected"===n&&"option"===t||"checked"===n&&"input"===t||"muted"===n&&"video"===t},jn.config.isReservedTag=Jn,jn.config.isReservedAttr=Ln,jn.config.getTagNamespace=function(t){return Kn(t)?"svg":"math"===t?"math":void 0},jn.config.isUnknownElement=function(t){if(!G)return!0;if(Jn(t))return!1;if(t=t.toLowerCase(),null!=Xn[t])return Xn[t];var e=document.createElement(t);return t.indexOf("-")>-1?Xn[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:Xn[t]=/HTMLUnknownElement/.test(e.toString())},P(jn.options.directives,xo),P(jn.options.components,Lo),jn.prototype.__patch__=G?lo:L,jn.prototype.$mount=function(t,e){return function(t,e,n){var r;return t.$el=e,t.$options.render||(t.$options.render=gt),en(t,"beforeMount"),r=function(){t._update(t._render(),n)},new hn(t,r,L,{before:function(){t._isMounted&&!t._isDestroyed&&en(t,"beforeUpdate")}},!0),n=!1,null==t.$vnode&&(t._isMounted=!0,en(t,"mounted")),t}(this,t=t&&G?function(t){if("string"==typeof t){var e=document.querySelector(t);return e||document.createElement("div")}return t}(t):void 0,e)},G&&setTimeout((function(){z.devtools&&at&&at.emit("init",jn)}),0);var Ro=jn;
+/*!
+  * vue-router v3.5.1
+  * (c) 2021 Evan You
+  * @license MIT
+  */function Io(t,e){for(var n in e)t[n]=e[n];return t}var Mo=/[!'()*]/g,Do=function(t){return"%"+t.charCodeAt(0).toString(16)},No=/%2C/g,Fo=function(t){return encodeURIComponent(t).replace(Mo,Do).replace(No,",")};function Uo(t){try{return decodeURIComponent(t)}catch(t){0}return t}var zo=function(t){return null==t||"object"==typeof t?t:String(t)};function Bo(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(t){var n=t.replace(/\+/g," ").split("="),r=Uo(n.shift()),o=n.length>0?Uo(n.join("=")):null;void 0===e[r]?e[r]=o:Array.isArray(e[r])?e[r].push(o):e[r]=[e[r],o]})),e):e}function qo(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return Fo(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(Fo(e)):r.push(Fo(e)+"="+Fo(t)))})),r.join("&")}return Fo(e)+"="+Fo(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var Vo=/\/?$/;function Ho(t,e,n,r){var o=r&&r.options.stringifyQuery,i=e.query||{};try{i=Wo(i)}catch(t){}var a={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:i,params:e.params||{},fullPath:Jo(e,o),matched:t?Ko(t):[]};return n&&(a.redirectedFrom=Jo(n,o)),Object.freeze(a)}function Wo(t){if(Array.isArray(t))return t.map(Wo);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=Wo(t[n]);return e}return t}var Go=Ho(null,{path:"/"});function Ko(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function Jo(t,e){var n=t.path,r=t.query;void 0===r&&(r={});var o=t.hash;return void 0===o&&(o=""),(n||"/")+(e||qo)(r)+o}function Xo(t,e,n){return e===Go?t===e:!!e&&(t.path&&e.path?t.path.replace(Vo,"")===e.path.replace(Vo,"")&&(n||t.hash===e.hash&&Yo(t.query,e.query)):!(!t.name||!e.name)&&(t.name===e.name&&(n||t.hash===e.hash&&Yo(t.query,e.query)&&Yo(t.params,e.params))))}function Yo(t,e){if(void 0===t&&(t={}),void 0===e&&(e={}),!t||!e)return t===e;var n=Object.keys(t).sort(),r=Object.keys(e).sort();return n.length===r.length&&n.every((function(n,o){var i=t[n];if(r[o]!==n)return!1;var a=e[n];return null==i||null==a?i===a:"object"==typeof i&&"object"==typeof a?Yo(i,a):String(i)===String(a)}))}function Qo(t){for(var e=0;e<t.matched.length;e++){var n=t.matched[e];for(var r in n.instances){var o=n.instances[r],i=n.enteredCbs[r];if(o&&i){delete n.enteredCbs[r];for(var a=0;a<i.length;a++)o._isBeingDestroyed||i[a](o)}}}}var Zo={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(t,e){var n=e.props,r=e.children,o=e.parent,i=e.data;i.routerView=!0;for(var a=o.$createElement,u=n.name,s=o.$route,c=o._routerViewCache||(o._routerViewCache={}),l=0,f=!1;o&&o._routerRoot!==o;){var p=o.$vnode?o.$vnode.data:{};p.routerView&&l++,p.keepAlive&&o._directInactive&&o._inactive&&(f=!0),o=o.$parent}if(i.routerViewDepth=l,f){var d=c[u],h=d&&d.component;return h?(d.configProps&&ti(h,i,d.route,d.configProps),a(h,i,r)):a()}var v=s.matched[l],m=v&&v.components[u];if(!v||!m)return c[u]=null,a();c[u]={component:m},i.registerRouteInstance=function(t,e){var n=v.instances[u];(e&&n!==t||!e&&n===t)&&(v.instances[u]=e)},(i.hook||(i.hook={})).prepatch=function(t,e){v.instances[u]=e.componentInstance},i.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==v.instances[u]&&(v.instances[u]=t.componentInstance),Qo(s)};var y=v.props&&v.props[u];return y&&(Io(c[u],{route:s,configProps:y}),ti(m,i,s,y)),a(m,i,r)}};function ti(t,e,n,r){var o=e.props=function(t,e){switch(typeof e){case"undefined":return;case"object":return e;case"function":return e(t);case"boolean":return e?t.params:void 0;default:0}}(n,r);if(o){o=e.props=Io({},o);var i=e.attrs=e.attrs||{};for(var a in o)t.props&&a in t.props||(i[a]=o[a],delete o[a])}}function ei(t,e,n){var r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;var o=e.split("/");n&&o[o.length-1]||o.pop();for(var i=t.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var u=i[a];".."===u?o.pop():"."!==u&&o.push(u)}return""!==o[0]&&o.unshift(""),o.join("/")}function ni(t){return t.replace(/\/\//g,"/")}var ri=Array.isArray||function(t){return"[object Array]"==Object.prototype.toString.call(t)},oi=gi,ii=li,ai=function(t,e){return pi(li(t,e),e)},ui=pi,si=yi,ci=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function li(t,e){for(var n,r=[],o=0,i=0,a="",u=e&&e.delimiter||"/";null!=(n=ci.exec(t));){var s=n[0],c=n[1],l=n.index;if(a+=t.slice(i,l),i=l+s.length,c)a+=c[1];else{var f=t[i],p=n[2],d=n[3],h=n[4],v=n[5],m=n[6],y=n[7];a&&(r.push(a),a="");var g=null!=p&&null!=f&&f!==p,b="+"===m||"*"===m,_="?"===m||"*"===m,x=n[2]||u,w=h||v;r.push({name:d||o++,prefix:p||"",delimiter:x,optional:_,repeat:b,partial:g,asterisk:!!y,pattern:w?hi(w):y?".*":"[^"+di(x)+"]+?"})}}return i<t.length&&(a+=t.substr(i)),a&&r.push(a),r}function fi(t){return encodeURI(t).replace(/[\/?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function pi(t,e){for(var n=new Array(t.length),r=0;r<t.length;r++)"object"==typeof t[r]&&(n[r]=new RegExp("^(?:"+t[r].pattern+")$",mi(e)));return function(e,r){for(var o="",i=e||{},a=(r||{}).pretty?fi:encodeURIComponent,u=0;u<t.length;u++){var s=t[u];if("string"!=typeof s){var c,l=i[s.name];if(null==l){if(s.optional){s.partial&&(o+=s.prefix);continue}throw new TypeError('Expected "'+s.name+'" to be defined')}if(ri(l)){if(!s.repeat)throw new TypeError('Expected "'+s.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(0===l.length){if(s.optional)continue;throw new TypeError('Expected "'+s.name+'" to not be empty')}for(var f=0;f<l.length;f++){if(c=a(l[f]),!n[u].test(c))throw new TypeError('Expected all "'+s.name+'" to match "'+s.pattern+'", but received `'+JSON.stringify(c)+"`");o+=(0===f?s.prefix:s.delimiter)+c}}else{if(c=s.asterisk?encodeURI(l).replace(/[?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()})):a(l),!n[u].test(c))throw new TypeError('Expected "'+s.name+'" to match "'+s.pattern+'", but received "'+c+'"');o+=s.prefix+c}}else o+=s}return o}}function di(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function hi(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function vi(t,e){return t.keys=e,t}function mi(t){return t&&t.sensitive?"":"i"}function yi(t,e,n){ri(e)||(n=e||n,e=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<t.length;a++){var u=t[a];if("string"==typeof u)i+=di(u);else{var s=di(u.prefix),c="(?:"+u.pattern+")";e.push(u),u.repeat&&(c+="(?:"+s+c+")*"),i+=c=u.optional?u.partial?s+"("+c+")?":"(?:"+s+"("+c+"))?":s+"("+c+")"}}var l=di(n.delimiter||"/"),f=i.slice(-l.length)===l;return r||(i=(f?i.slice(0,-l.length):i)+"(?:"+l+"(?=$))?"),i+=o?"$":r&&f?"":"(?="+l+"|$)",vi(new RegExp("^"+i,mi(n)),e)}function gi(t,e,n){return ri(e)||(n=e||n,e=[]),n=n||{},t instanceof RegExp?function(t,e){var n=t.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)e.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return vi(t,e)}(t,e):ri(t)?function(t,e,n){for(var r=[],o=0;o<t.length;o++)r.push(gi(t[o],e,n).source);return vi(new RegExp("(?:"+r.join("|")+")",mi(n)),e)}(t,e,n):function(t,e,n){return yi(li(t,n),e,n)}(t,e,n)}oi.parse=ii,oi.compile=ai,oi.tokensToFunction=ui,oi.tokensToRegExp=si;var bi=Object.create(null);function _i(t,e,n){e=e||{};try{var r=bi[t]||(bi[t]=oi.compile(t));return"string"==typeof e.pathMatch&&(e[0]=e.pathMatch),r(e,{pretty:!0})}catch(t){return""}finally{delete e[0]}}function xi(t,e,n,r){var o="string"==typeof t?{path:t}:t;if(o._normalized)return o;if(o.name){var i=(o=Io({},t)).params;return i&&"object"==typeof i&&(o.params=Io({},i)),o}if(!o.path&&o.params&&e){(o=Io({},o))._normalized=!0;var a=Io(Io({},e.params),o.params);if(e.name)o.name=e.name,o.params=a;else if(e.matched.length){var u=e.matched[e.matched.length-1].path;o.path=_i(u,a,e.path)}else 0;return o}var s=function(t){var e="",n="",r=t.indexOf("#");r>=0&&(e=t.slice(r),t=t.slice(0,r));var o=t.indexOf("?");return o>=0&&(n=t.slice(o+1),t=t.slice(0,o)),{path:t,query:n,hash:e}}(o.path||""),c=e&&e.path||"/",l=s.path?ei(s.path,c,n||o.append):c,f=function(t,e,n){void 0===e&&(e={});var r,o=n||Bo;try{r=o(t||"")}catch(t){r={}}for(var i in e){var a=e[i];r[i]=Array.isArray(a)?a.map(zo):zo(a)}return r}(s.query,o.query,r&&r.options.parseQuery),p=o.hash||s.hash;return p&&"#"!==p.charAt(0)&&(p="#"+p),{_normalized:!0,path:l,query:f,hash:p}}var wi,Si=function(){},Oi={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(t){var e=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,u=o.href,s={},c=n.options.linkActiveClass,l=n.options.linkExactActiveClass,f=null==c?"router-link-active":c,p=null==l?"router-link-exact-active":l,d=null==this.activeClass?f:this.activeClass,h=null==this.exactActiveClass?p:this.exactActiveClass,v=a.redirectedFrom?Ho(null,xi(a.redirectedFrom),null,n):a;s[h]=Xo(r,v,this.exactPath),s[d]=this.exact||this.exactPath?s[h]:function(t,e){return 0===t.path.replace(Vo,"/").indexOf(e.path.replace(Vo,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(r,v);var m=s[h]?this.ariaCurrentValue:null,y=function(t){ji(t)&&(e.replace?n.replace(i,Si):n.push(i,Si))},g={click:ji};Array.isArray(this.event)?this.event.forEach((function(t){g[t]=y})):g[this.event]=y;var b={class:s},_=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:u,route:a,navigate:y,isActive:s[d],isExactActive:s[h]});if(_){if(1===_.length)return _[0];if(_.length>1||!_.length)return 0===_.length?t():t("span",{},_)}if("a"===this.tag)b.on=g,b.attrs={href:u,"aria-current":m};else{var x=function t(e){var n;if(e)for(var r=0;r<e.length;r++){if("a"===(n=e[r]).tag)return n;if(n.children&&(n=t(n.children)))return n}}(this.$slots.default);if(x){x.isStatic=!1;var w=x.data=Io({},x.data);for(var S in w.on=w.on||{},w.on){var O=w.on[S];S in g&&(w.on[S]=Array.isArray(O)?O:[O])}for(var j in g)j in w.on?w.on[j].push(g[j]):w.on[j]=y;var k=x.data.attrs=Io({},x.data.attrs);k.href=u,k["aria-current"]=m}else b.on=g}return t(this.tag,b,this.$slots.default)}};function ji(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.defaultPrevented||void 0!==t.button&&0!==t.button)){if(t.currentTarget&&t.currentTarget.getAttribute){var e=t.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(e))return}return t.preventDefault&&t.preventDefault(),!0}}var ki="undefined"!=typeof window;function Ei(t,e,n,r,o){var i=e||[],a=n||Object.create(null),u=r||Object.create(null);t.forEach((function(t){!function t(e,n,r,o,i,a){var u=o.path,s=o.name;0;var c=o.pathToRegexpOptions||{},l=function(t,e,n){n||(t=t.replace(/\/$/,""));if("/"===t[0])return t;if(null==e)return t;return ni(e.path+"/"+t)}(u,i,c.strict);"boolean"==typeof o.caseSensitive&&(c.sensitive=o.caseSensitive);var f={path:l,regex:Ci(l,c),components:o.components||{default:o.component},alias:o.alias?"string"==typeof o.alias?[o.alias]:o.alias:[],instances:{},enteredCbs:{},name:s,parent:i,matchAs:a,redirect:o.redirect,beforeEnter:o.beforeEnter,meta:o.meta||{},props:null==o.props?{}:o.components?o.props:{default:o.props}};o.children&&o.children.forEach((function(o){var i=a?ni(a+"/"+o.path):void 0;t(e,n,r,o,f,i)}));n[f.path]||(e.push(f.path),n[f.path]=f);if(void 0!==o.alias)for(var p=Array.isArray(o.alias)?o.alias:[o.alias],d=0;d<p.length;++d){0;var h={path:p[d],children:o.children};t(e,n,r,h,i,f.path||"/")}s&&(r[s]||(r[s]=f))}(i,a,u,t,o)}));for(var s=0,c=i.length;s<c;s++)"*"===i[s]&&(i.push(i.splice(s,1)[0]),c--,s--);return{pathList:i,pathMap:a,nameMap:u}}function Ci(t,e){return oi(t,[],e)}function Ai(t,e){var n=Ei(t),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(t,n,a){var u=xi(t,n,!1,e),c=u.name;if(c){var l=i[c];if(!l)return s(null,u);var f=l.regex.keys.filter((function(t){return!t.optional})).map((function(t){return t.name}));if("object"!=typeof u.params&&(u.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in u.params)&&f.indexOf(p)>-1&&(u.params[p]=n.params[p]);return u.path=_i(l.path,u.params),s(l,u,a)}if(u.path){u.params={};for(var d=0;d<r.length;d++){var h=r[d],v=o[h];if($i(v.regex,u.path,u.params))return s(v,u,a)}}return s(null,u)}function u(t,n){var r=t.redirect,o="function"==typeof r?r(Ho(t,n,null,e)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return s(null,n);var u=o,c=u.name,l=u.path,f=n.query,p=n.hash,d=n.params;if(f=u.hasOwnProperty("query")?u.query:f,p=u.hasOwnProperty("hash")?u.hash:p,d=u.hasOwnProperty("params")?u.params:d,c){i[c];return a({_normalized:!0,name:c,query:f,hash:p,params:d},void 0,n)}if(l){var h=function(t,e){return ei(t,e.parent?e.parent.path:"/",!0)}(l,t);return a({_normalized:!0,path:_i(h,d),query:f,hash:p},void 0,n)}return s(null,n)}function s(t,n,r){return t&&t.redirect?u(t,r||n):t&&t.matchAs?function(t,e,n){var r=a({_normalized:!0,path:_i(n,e.params)});if(r){var o=r.matched,i=o[o.length-1];return e.params=r.params,s(i,e)}return s(null,e)}(0,n,t.matchAs):Ho(t,n,r,e)}return{match:a,addRoute:function(t,e){var n="object"!=typeof t?i[t]:void 0;Ei([e||t],r,o,i,n),n&&Ei(n.alias.map((function(t){return{path:t,children:[e]}})),r,o,i,n)},getRoutes:function(){return r.map((function(t){return o[t]}))},addRoutes:function(t){Ei(t,r,o,i)}}}function $i(t,e,n){var r=e.match(t);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=t.keys[o-1];a&&(n[a.name||"pathMatch"]="string"==typeof r[o]?Uo(r[o]):r[o])}return!0}var Pi=ki&&window.performance&&window.performance.now?window.performance:Date;function Ti(){return Pi.now().toFixed(3)}var Li=Ti();function Ri(){return Li}function Ii(t){return Li=t}var Mi=Object.create(null);function Di(){"scrollRestoration"in window.history&&(window.history.scrollRestoration="manual");var t=window.location.protocol+"//"+window.location.host,e=window.location.href.replace(t,""),n=Io({},window.history.state);return n.key=Ri(),window.history.replaceState(n,"",e),window.addEventListener("popstate",Ui),function(){window.removeEventListener("popstate",Ui)}}function Ni(t,e,n,r){if(t.app){var o=t.options.scrollBehavior;o&&t.app.$nextTick((function(){var i=function(){var t=Ri();if(t)return Mi[t]}(),a=o.call(t,e,n,r?i:null);a&&("function"==typeof a.then?a.then((function(t){Hi(t,i)})).catch((function(t){0})):Hi(a,i))}))}}function Fi(){var t=Ri();t&&(Mi[t]={x:window.pageXOffset,y:window.pageYOffset})}function Ui(t){Fi(),t.state&&t.state.key&&Ii(t.state.key)}function zi(t){return qi(t.x)||qi(t.y)}function Bi(t){return{x:qi(t.x)?t.x:window.pageXOffset,y:qi(t.y)?t.y:window.pageYOffset}}function qi(t){return"number"==typeof t}var Vi=/^#\d/;function Hi(t,e){var n,r="object"==typeof t;if(r&&"string"==typeof t.selector){var o=Vi.test(t.selector)?document.getElementById(t.selector.slice(1)):document.querySelector(t.selector);if(o){var i=t.offset&&"object"==typeof t.offset?t.offset:{};e=function(t,e){var n=document.documentElement.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:r.left-n.left-e.x,y:r.top-n.top-e.y}}(o,i={x:qi((n=i).x)?n.x:0,y:qi(n.y)?n.y:0})}else zi(t)&&(e=Bi(t))}else r&&zi(t)&&(e=Bi(t));e&&("scrollBehavior"in document.documentElement.style?window.scrollTo({left:e.x,top:e.y,behavior:t.behavior}):window.scrollTo(e.x,e.y))}var Wi,Gi=ki&&((-1===(Wi=window.navigator.userAgent).indexOf("Android 2.")&&-1===Wi.indexOf("Android 4.0")||-1===Wi.indexOf("Mobile Safari")||-1!==Wi.indexOf("Chrome")||-1!==Wi.indexOf("Windows Phone"))&&window.history&&"function"==typeof window.history.pushState);function Ki(t,e){Fi();var n=window.history;try{if(e){var r=Io({},n.state);r.key=Ri(),n.replaceState(r,"",t)}else n.pushState({key:Ii(Ti())},"",t)}catch(n){window.location[e?"replace":"assign"](t)}}function Ji(t){Ki(t,!0)}function Xi(t,e,n){var r=function(o){o>=t.length?n():t[o]?e(t[o],(function(){r(o+1)})):r(o+1)};r(0)}var Yi={redirected:2,aborted:4,cancelled:8,duplicated:16};function Qi(t,e){return ta(t,e,Yi.redirected,'Redirected when going from "'+t.fullPath+'" to "'+function(t){if("string"==typeof t)return t;if("path"in t)return t.path;var e={};return ea.forEach((function(n){n in t&&(e[n]=t[n])})),JSON.stringify(e,null,2)}(e)+'" via a navigation guard.')}function Zi(t,e){return ta(t,e,Yi.cancelled,'Navigation cancelled from "'+t.fullPath+'" to "'+e.fullPath+'" with a new navigation.')}function ta(t,e,n,r){var o=new Error(r);return o._isRouter=!0,o.from=t,o.to=e,o.type=n,o}var ea=["params","query","hash"];function na(t){return Object.prototype.toString.call(t).indexOf("Error")>-1}function ra(t,e){return na(t)&&t._isRouter&&(null==e||t.type===e)}function oa(t){return function(e,n,r){var o=!1,i=0,a=null;ia(t,(function(t,e,n,u){if("function"==typeof t&&void 0===t.cid){o=!0,i++;var s,c=sa((function(e){var o;((o=e).__esModule||ua&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:wi.extend(e),n.components[u]=e,--i<=0&&r()})),l=sa((function(t){var e="Failed to resolve async component "+u+": "+t;a||(a=na(t)?t:new Error(e),r(a))}));try{s=t(c,l)}catch(t){l(t)}if(s)if("function"==typeof s.then)s.then(c,l);else{var f=s.component;f&&"function"==typeof f.then&&f.then(c,l)}}})),o||r()}}function ia(t,e){return aa(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function aa(t){return Array.prototype.concat.apply([],t)}var ua="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function sa(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var ca=function(t,e){this.router=t,this.base=function(t){if(!t)if(ki){var e=document.querySelector("base");t=(t=e&&e.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else t="/";"/"!==t.charAt(0)&&(t="/"+t);return t.replace(/\/$/,"")}(e),this.current=Go,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function la(t,e,n,r){var o=ia(t,(function(t,r,o,i){var a=function(t,e){"function"!=typeof t&&(t=wi.extend(t));return t.options[e]}(t,e);if(a)return Array.isArray(a)?a.map((function(t){return n(t,r,o,i)})):n(a,r,o,i)}));return aa(r?o.reverse():o)}function fa(t,e){if(e)return function(){return t.apply(e,arguments)}}ca.prototype.listen=function(t){this.cb=t},ca.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},ca.prototype.onError=function(t){this.errorCbs.push(t)},ca.prototype.transitionTo=function(t,e,n){var r,o=this;try{r=this.router.match(t,this.current)}catch(t){throw this.errorCbs.forEach((function(e){e(t)})),t}var i=this.current;this.confirmTransition(r,(function(){o.updateRoute(r),e&&e(r),o.ensureURL(),o.router.afterHooks.forEach((function(t){t&&t(r,i)})),o.ready||(o.ready=!0,o.readyCbs.forEach((function(t){t(r)})))}),(function(t){n&&n(t),t&&!o.ready&&(ra(t,Yi.redirected)&&i===Go||(o.ready=!0,o.readyErrorCbs.forEach((function(e){e(t)}))))}))},ca.prototype.confirmTransition=function(t,e,n){var r=this,o=this.current;this.pending=t;var i,a,u=function(t){!ra(t)&&na(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)},s=t.matched.length-1,c=o.matched.length-1;if(Xo(t,o)&&s===c&&t.matched[s]===o.matched[c])return this.ensureURL(),u(((a=ta(i=o,t,Yi.duplicated,'Avoided redundant navigation to current location: "'+i.fullPath+'".')).name="NavigationDuplicated",a));var l=function(t,e){var n,r=Math.max(t.length,e.length);for(n=0;n<r&&t[n]===e[n];n++);return{updated:e.slice(0,n),activated:e.slice(n),deactivated:t.slice(n)}}(this.current.matched,t.matched),f=l.updated,p=l.deactivated,d=l.activated,h=[].concat(function(t){return la(t,"beforeRouteLeave",fa,!0)}(p),this.router.beforeHooks,function(t){return la(t,"beforeRouteUpdate",fa)}(f),d.map((function(t){return t.beforeEnter})),oa(d)),v=function(e,n){if(r.pending!==t)return u(Zi(o,t));try{e(t,o,(function(e){!1===e?(r.ensureURL(!0),u(function(t,e){return ta(t,e,Yi.aborted,'Navigation aborted from "'+t.fullPath+'" to "'+e.fullPath+'" via a navigation guard.')}(o,t))):na(e)?(r.ensureURL(!0),u(e)):"string"==typeof e||"object"==typeof e&&("string"==typeof e.path||"string"==typeof e.name)?(u(Qi(o,t)),"object"==typeof e&&e.replace?r.replace(e):r.push(e)):n(e)}))}catch(t){u(t)}};Xi(h,v,(function(){Xi(function(t){return la(t,"beforeRouteEnter",(function(t,e,n,r){return function(t,e,n){return function(r,o,i){return t(r,o,(function(t){"function"==typeof t&&(e.enteredCbs[n]||(e.enteredCbs[n]=[]),e.enteredCbs[n].push(t)),i(t)}))}}(t,n,r)}))}(d).concat(r.router.resolveHooks),v,(function(){if(r.pending!==t)return u(Zi(o,t));r.pending=null,e(t),r.router.app&&r.router.app.$nextTick((function(){Qo(t)}))}))}))},ca.prototype.updateRoute=function(t){this.current=t,this.cb&&this.cb(t)},ca.prototype.setupListeners=function(){},ca.prototype.teardown=function(){this.listeners.forEach((function(t){t()})),this.listeners=[],this.current=Go,this.pending=null};var pa=function(t){function e(e,n){t.call(this,e,n),this._startLocation=da(this.base)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this;if(!(this.listeners.length>0)){var e=this.router,n=e.options.scrollBehavior,r=Gi&&n;r&&this.listeners.push(Di());var o=function(){var n=t.current,o=da(t.base);t.current===Go&&o===t._startLocation||t.transitionTo(o,(function(t){r&&Ni(e,t,n,!0)}))};window.addEventListener("popstate",o),this.listeners.push((function(){window.removeEventListener("popstate",o)}))}},e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Ki(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Ji(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(da(this.base)!==this.current.fullPath){var e=ni(this.base+this.current.fullPath);t?Ki(e):Ji(e)}},e.prototype.getCurrentLocation=function(){return da(this.base)},e}(ca);function da(t){var e=window.location.pathname;return t&&0===e.toLowerCase().indexOf(t.toLowerCase())&&(e=e.slice(t.length)),(e||"/")+window.location.search+window.location.hash}var ha=function(t){function e(e,n,r){t.call(this,e,n),r&&function(t){var e=da(t);if(!/^\/#/.test(e))return window.location.replace(ni(t+"/#"+e)),!0}(this.base)||va()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this;if(!(this.listeners.length>0)){var e=this.router.options.scrollBehavior,n=Gi&&e;n&&this.listeners.push(Di());var r=function(){var e=t.current;va()&&t.transitionTo(ma(),(function(r){n&&Ni(t.router,r,e,!0),Gi||ba(r.fullPath)}))},o=Gi?"popstate":"hashchange";window.addEventListener(o,r),this.listeners.push((function(){window.removeEventListener(o,r)}))}},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){ga(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){ba(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;ma()!==e&&(t?ga(e):ba(e))},e.prototype.getCurrentLocation=function(){return ma()},e}(ca);function va(){var t=ma();return"/"===t.charAt(0)||(ba("/"+t),!1)}function ma(){var t=window.location.href,e=t.indexOf("#");return e<0?"":t=t.slice(e+1)}function ya(t){var e=window.location.href,n=e.indexOf("#");return(n>=0?e.slice(0,n):e)+"#"+t}function ga(t){Gi?Ki(ya(t)):window.location.hash=t}function ba(t){Gi?Ji(ya(t)):window.location.replace(ya(t))}var _a=function(t){function e(e,n){t.call(this,e,n),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){var t=e.current;e.index=n,e.updateRoute(r),e.router.afterHooks.forEach((function(e){e&&e(r,t)}))}),(function(t){ra(t,Yi.duplicated)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}(ca),xa=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Ai(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!Gi&&!1!==t.fallback,this.fallback&&(e="hash"),ki||(e="abstract"),this.mode=e,e){case"history":this.history=new pa(this,t.base);break;case"hash":this.history=new ha(this,t.base,this.fallback);break;case"abstract":this.history=new _a(this,t.base);break;default:0}},wa={currentRoute:{configurable:!0}};function Sa(t,e){return t.push(e),function(){var n=t.indexOf(e);n>-1&&t.splice(n,1)}}xa.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},wa.currentRoute.get=function(){return this.history&&this.history.current},xa.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null),e.app||e.history.teardown()})),!this.app){this.app=t;var n=this.history;if(n instanceof pa||n instanceof ha){var r=function(t){n.setupListeners(),function(t){var r=n.current,o=e.options.scrollBehavior;Gi&&o&&"fullPath"in t&&Ni(e,t,r,!1)}(t)};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},xa.prototype.beforeEach=function(t){return Sa(this.beforeHooks,t)},xa.prototype.beforeResolve=function(t){return Sa(this.resolveHooks,t)},xa.prototype.afterEach=function(t){return Sa(this.afterHooks,t)},xa.prototype.onReady=function(t,e){this.history.onReady(t,e)},xa.prototype.onError=function(t){this.history.onError(t)},xa.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},xa.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},xa.prototype.go=function(t){this.history.go(t)},xa.prototype.back=function(){this.go(-1)},xa.prototype.forward=function(){this.go(1)},xa.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},xa.prototype.resolve=function(t,e,n){var r=xi(t,e=e||this.history.current,n,this),o=this.match(r,e),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(t,e,n){var r="hash"===n?"#"+e:e;return t?ni(t+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},xa.prototype.getRoutes=function(){return this.matcher.getRoutes()},xa.prototype.addRoute=function(t,e){this.matcher.addRoute(t,e),this.history.current!==Go&&this.history.transitionTo(this.history.getCurrentLocation())},xa.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==Go&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(xa.prototype,wa),xa.install=function t(e){if(!t.installed||wi!==e){t.installed=!0,wi=e;var n=function(t){return void 0!==t},r=function(t,e){var r=t.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",Zo),e.component("RouterLink",Oi);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},xa.version="3.5.1",xa.isNavigationFailure=ra,xa.NavigationFailureType=Yi,xa.START_LOCATION=Go,ki&&window.Vue&&window.Vue.use(xa);var Oa=xa;n(188),n(125),n(189),n(91),n(191),n(92),n(193);function ja(t){t.locales&&Object.keys(t.locales).forEach((function(e){t.locales[e].path=e})),Object.freeze(t)}n(36),n(37),n(56);var ka=n(39),Ea=(n(65),n(42),n(166),n(167),{NotFound:function(){return n.e(20).then(n.bind(null,391))},Layout:function(){return Promise.all([n.e(0),n.e(2)]).then(n.bind(null,390))}}),Ca={"v-1c005fa1":function(){return n.e(21).then(n.bind(null,401))},"v-a372861c":function(){return n.e(22).then(n.bind(null,402))},"v-216c3283":function(){return n.e(24).then(n.bind(null,403))},"v-66ba191a":function(){return n.e(17).then(n.bind(null,404))},"v-c96d456c":function(){return n.e(15).then(n.bind(null,405))},"v-1dd87a01":function(){return n.e(23).then(n.bind(null,406))},"v-11f5c12a":function(){return n.e(18).then(n.bind(null,407))},"v-3f4acd3a":function(){return n.e(19).then(n.bind(null,408))},"v-041c069a":function(){return n.e(26).then(n.bind(null,409))},"v-5989fc3a":function(){return n.e(27).then(n.bind(null,410))},"v-31d70cca":function(){return n.e(28).then(n.bind(null,411))},"v-c56a512c":function(){return n.e(4).then(n.bind(null,412))},"v-b4e616ac":function(){return n.e(25).then(n.bind(null,413))},"v-40377bf0":function(){return n.e(3).then(n.bind(null,414))},"v-8d5f730c":function(){return n.e(16).then(n.bind(null,415))},"v-2a77ca01":function(){return n.e(29).then(n.bind(null,416))},"v-38d04901":function(){return n.e(30).then(n.bind(null,417))},"v-6091adc1":function(){return n.e(31).then(n.bind(null,418))},"v-05591661":function(){return n.e(32).then(n.bind(null,419))},"v-359b8c86":function(){return n.e(33).then(n.bind(null,420))},"v-fc9cc93e":function(){return n.e(34).then(n.bind(null,421))},"v-56bfbd06":function(){return n.e(35).then(n.bind(null,422))},"v-93d8ea40":function(){return n.e(36).then(n.bind(null,423))},"v-1a0895aa":function(){return n.e(37).then(n.bind(null,424))},"v-ef80b70c":function(){return n.e(38).then(n.bind(null,425))}};function Aa(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var $a=/-(\w)/g,Pa=Aa((function(t){return t.replace($a,(function(t,e){return e?e.toUpperCase():""}))})),Ta=/\B([A-Z])/g,La=Aa((function(t){return t.replace(Ta,"-$1").toLowerCase()})),Ra=Aa((function(t){return t.charAt(0).toUpperCase()+t.slice(1)}));function Ia(t,e){if(e)return t(e)?t(e):e.includes("-")?t(Ra(Pa(e))):t(Ra(e))||t(La(e))}var Ma=Object.assign({},Ea,Ca),Da=function(t){return Ma[t]},Na=function(t){return Ca[t]},Fa=function(t){return Ea[t]},Ua=function(t){return Ro.component(t)};function za(t){return Ia(Na,t)}function Ba(t){return Ia(Fa,t)}function qa(t){return Ia(Da,t)}function Va(t){return Ia(Ua,t)}function Ha(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return Promise.all(e.filter((function(t){return t})).map(function(){var t=o(regeneratorRuntime.mark((function t(e){var n;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Va(e)||!qa(e)){t.next=5;break}return t.next=3,qa(e)();case 3:n=t.sent,Ro.component(e,n.default);case 5:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()))}function Wa(t,e){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[t]=e)}var Ga=n(62);function Ka(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var n=[],r=!0,o=!1,i=void 0;try{for(var a,u=t[Symbol.iterator]();!(r=(a=u.next()).done)&&(n.push(a.value),!e||n.length!==e);r=!0);}catch(t){o=!0,i=t}finally{try{r||null==u.return||u.return()}finally{if(o)throw i}}return n}}(t,e)||Object(Ga.a)(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}n(162),n(168);var Ja=n(154),Xa=n.n(Ja),Ya={created:function(){if(this.siteMeta=this.$site.headTags.filter((function(t){return"meta"===Ka(t,1)[0]})).map((function(t){var e=Ka(t,2);e[0];return e[1]})),this.$ssrContext){var t=this.getMergedMetaTags();this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.pageMeta=(e=t)?e.map((function(t){var e="<meta";return Object.keys(t).forEach((function(n){e+=" ".concat(n,'="').concat(t[n],'"')})),e+">"})).join("\n    "):"",this.$ssrContext.canonicalLink=Za(this.$canonicalUrl)}var e},mounted:function(){this.currentMetaTags=Object(ka.a)(document.querySelectorAll("meta")),this.updateMeta(),this.updateCanonicalLink()},methods:{updateMeta:function(){document.title=this.$title,document.documentElement.lang=this.$lang;var t=this.getMergedMetaTags();this.currentMetaTags=tu(t,this.currentMetaTags)},getMergedMetaTags:function(){var t=this.$page.frontmatter.meta||[];return Xa()([{name:"description",content:this.$description}],t,this.siteMeta,eu)},updateCanonicalLink:function(){Qa(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",Za(this.$canonicalUrl))}},watch:{$page:function(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy:function(){tu(null,this.currentMetaTags),Qa()}};function Qa(){var t=document.querySelector("link[rel='canonical']");t&&t.remove()}function Za(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return t?'<link href="'.concat(t,'" rel="canonical" />'):""}function tu(t,e){if(e&&Object(ka.a)(e).filter((function(t){return t.parentNode===document.head})).forEach((function(t){return document.head.removeChild(t)})),t)return t.map((function(t){var e=document.createElement("meta");return Object.keys(t).forEach((function(n){e.setAttribute(n,t[n])})),document.head.appendChild(e),e}))}function eu(t){for(var e=0,n=["name","property","itemprop"];e<n.length;e++){var r=n[e];if(t.hasOwnProperty(r))return t[r]+r}return JSON.stringify(t)}var nu=n(155),ru={mounted:function(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:n.n(nu)()((function(){this.setActiveHash()}),300),setActiveHash:function(){for(var t=this,e=[].slice.call(document.querySelectorAll(".sidebar-link")),n=[].slice.call(document.querySelectorAll(".header-anchor")).filter((function(t){return e.some((function(e){return e.hash===t.hash}))})),r=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),o=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),i=window.innerHeight+r,a=0;a<n.length;a++){var u=n[a],s=n[a+1],c=0===a&&0===r||r>=u.parentElement.offsetTop+10&&(!s||r<s.parentElement.offsetTop-10),l=decodeURIComponent(this.$route.hash);if(c&&l!==decodeURIComponent(u.hash)){var f=u;if(i===o)for(var p=a+1;p<n.length;p++)if(l===decodeURIComponent(n[p].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(f.hash),(function(){t.$nextTick((function(){t.$vuepress.$set("disableScrollBehavior",!1)}))}))}}}},beforeDestroy:function(){window.removeEventListener("scroll",this.onScroll)}},ou=(n(81),n(63)),iu=n.n(ou),au=[Ya,ru,{mounted:function(){var t=this;iu.a.configure({showSpinner:!1}),this.$router.beforeEach((function(t,e,n){t.path===e.path||Ro.component(t.name)||iu.a.start(),n()})),this.$router.afterEach((function(){iu.a.done(),t.isSidebarOpen=!1}))}}],uu={name:"GlobalLayout",computed:{layout:function(){var t=this.getLayout();return Wa("layout",t),Ro.component(t)}},methods:{getLayout:function(){if(this.$page.path){var t=this.$page.frontmatter.layout;return t&&(this.$vuepress.getLayoutAsyncComponent(t)||this.$vuepress.getVueComponent(t))?t:"Layout"}return"NotFound"}}},su=n(41),cu=Object(su.a)(uu,(function(){var t=this.$createElement;return(this._self._c||t)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(t,e,n){var r;switch(e){case"components":t[e]||(t[e]={}),Object.assign(t[e],n);break;case"mixins":t[e]||(t[e]=[]),(r=t[e]).push.apply(r,Object(ka.a)(n));break;default:throw new Error("Unknown option name.")}}(cu,"mixins",au);var lu=[{name:"v-1c005fa1",path:"/customization/build.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-1c005fa1").then(n)}},{name:"v-a372861c",path:"/customization/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-a372861c").then(n)}},{path:"/customization/index.html",redirect:"/customization/"},{name:"v-216c3283",path:"/guide/coding-standards/accessibility.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-216c3283").then(n)}},{name:"v-66ba191a",path:"/guide/components/alerts/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-66ba191a").then(n)}},{path:"/guide/components/alerts/index.html",redirect:"/guide/components/alerts/"},{name:"v-c96d456c",path:"/guide/components/buttons/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-c96d456c").then(n)}},{path:"/guide/components/buttons/index.html",redirect:"/guide/components/buttons/"},{name:"v-1dd87a01",path:"/customization/theme.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-1dd87a01").then(n)}},{name:"v-11f5c12a",path:"/guide/components/file-upload/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-11f5c12a").then(n)}},{path:"/guide/components/file-upload/index.html",redirect:"/guide/components/file-upload/"},{name:"v-3f4acd3a",path:"/guide/components/info-tooltip/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-3f4acd3a").then(n)}},{path:"/guide/components/info-tooltip/index.html",redirect:"/guide/components/info-tooltip/"},{name:"v-041c069a",path:"/guide/components/page-section/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-041c069a").then(n)}},{path:"/guide/components/page-section/index.html",redirect:"/guide/components/page-section/"},{name:"v-5989fc3a",path:"/guide/components/page-title/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-5989fc3a").then(n)}},{path:"/guide/components/page-title/index.html",redirect:"/guide/components/page-title/"},{name:"v-31d70cca",path:"/guide/components/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-31d70cca").then(n)}},{path:"/guide/components/index.html",redirect:"/guide/components/"},{name:"v-c56a512c",path:"/guide/components/status-icon/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-c56a512c").then(n)}},{path:"/guide/components/status-icon/index.html",redirect:"/guide/components/status-icon/"},{name:"v-b4e616ac",path:"/guide/coding-standards/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-b4e616ac").then(n)}},{path:"/guide/coding-standards/index.html",redirect:"/guide/coding-standards/"},{name:"v-40377bf0",path:"/guide/components/table/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-40377bf0").then(n)}},{path:"/guide/components/table/index.html",redirect:"/guide/components/table/"},{name:"v-8d5f730c",path:"/guide/components/toasts/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-8d5f730c").then(n)}},{path:"/guide/components/toasts/index.html",redirect:"/guide/components/toasts/"},{name:"v-2a77ca01",path:"/guide/guidelines/colors.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-2a77ca01").then(n)}},{name:"v-38d04901",path:"/guide/guidelines/internationalization.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-38d04901").then(n)}},{name:"v-6091adc1",path:"/guide/guidelines/motion.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-6091adc1").then(n)}},{name:"v-05591661",path:"/guide/guidelines/typography.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-05591661").then(n)}},{name:"v-359b8c86",path:"/guide/quickstart/forms.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-359b8c86").then(n)}},{name:"v-fc9cc93e",path:"/guide/quickstart/page-anatomy.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-fc9cc93e").then(n)}},{name:"v-56bfbd06",path:"/guide/quickstart/store-anatomy.html",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-56bfbd06").then(n)}},{name:"v-93d8ea40",path:"/guide/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-93d8ea40").then(n)}},{path:"/guide/index.html",redirect:"/guide/"},{name:"v-1a0895aa",path:"/guide/unit-testing/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-1a0895aa").then(n)}},{path:"/guide/unit-testing/index.html",redirect:"/guide/unit-testing/"},{name:"v-ef80b70c",path:"/",component:cu,beforeEnter:function(t,e,n){Ha("Layout","v-ef80b70c").then(n)}},{path:"/index.html",redirect:"/"},{path:"*",component:cu}],fu={title:"OpenBMC Web UI Style Guide",description:"Guidance on code style and development for the OpenBMC browser-based UI",base:"/webui-vue/",headTags:[],pages:[{title:"Build Customization",frontmatter:{},regularPath:"/customization/build.html",relativePath:"customization/build.md",key:"v-1c005fa1",path:"/customization/build.html",headers:[{level:2,title:"Setup",slug:"setup"},{level:2,title:"Store",slug:"store"},{level:2,title:"Router",slug:"router"},{level:2,title:"App navigation",slug:"app-navigation"},{level:2,title:"Theming",slug:"theming"},{level:2,title:"Local development",slug:"local-development"},{level:2,title:"Production build",slug:"production-build"}]},{title:"Presentation Layer Architecture",frontmatter:{},regularPath:"/customization/",relativePath:"customization/readme.md",key:"v-a372861c",path:"/customization/",headers:[{level:2,title:"SCSS Directory Structure",slug:"scss-directory-structure"},{level:3,title:"bmc Directory",slug:"bmc-directory"},{level:3,title:"custom Directory",slug:"custom-directory"},{level:3,title:"helpers Directory",slug:"helpers-directory"},{level:3,title:"bootstrap Directory",slug:"bootstrap-directory"},{level:3,title:"_obmc-custom.scss",slug:"obmc-custom-scss"},{level:2,title:"Component / View Styles",slug:"component-view-styles"},{level:3,title:"Scoped style block using SASS",slug:"scoped-style-block-using-sass"},{level:3,title:"Scoped style block using CSS",slug:"scoped-style-block-using-css"},{level:3,title:"Example - PageSection.vue",slug:"example-pagesection-vue"}]},{title:"Accessibility Conventions and Standards",frontmatter:{},regularPath:"/guide/coding-standards/accessibility.html",relativePath:"guide/coding-standards/accessibility.md",key:"v-216c3283",path:"/guide/coding-standards/accessibility.html",headers:[{level:2,title:"Accessibility Principles",slug:"accessibility-principles"},{level:2,title:"Semantic HTML",slug:"semantic-html"},{level:2,title:"Testing",slug:"testing"},{level:2,title:"Tools",slug:"tools"},{level:2,title:"Screen Readers",slug:"screen-readers"},{level:2,title:"Resources",slug:"resources"}]},{title:"Alerts",frontmatter:{},regularPath:"/guide/components/alerts/",relativePath:"guide/components/alerts/index.md",key:"v-66ba191a",path:"/guide/components/alerts/"},{title:"Buttons",frontmatter:{},regularPath:"/guide/components/buttons/",relativePath:"guide/components/buttons/index.md",key:"v-c96d456c",path:"/guide/components/buttons/",headers:[{level:3,title:"Icon only buttons",slug:"icon-only-buttons"},{level:3,title:"Enabled buttons",slug:"enabled-buttons"},{level:3,title:"Disabled buttons",slug:"disabled-buttons"}]},{title:"Theme customization",frontmatter:{},regularPath:"/customization/theme.html",relativePath:"customization/theme.md",key:"v-1dd87a01",path:"/customization/theme.html",headers:[{level:2,title:"Environment specific builds",slug:"environment-specific-builds"},{level:3,title:"Configuring environment specific builds",slug:"configuring-environment-specific-builds"},{level:2,title:"Bootstrap Sass Options",slug:"bootstrap-sass-options"},{level:3,title:"$enable-rounded",slug:"enable-rounded"},{level:3,title:"$enable-validation-icons",slug:"enable-validation-icons"},{level:3,title:"More information",slug:"more-information"},{level:2,title:"Bootstrap Sass Variables",slug:"bootstrap-sass-variables"},{level:3,title:"$transition-base",slug:"transition-base"},{level:3,title:"$transition-fade",slug:"transition-fade"},{level:3,title:"$transition-collapse",slug:"transition-collapse"},{level:3,title:"More Information",slug:"more-information-2"},{level:2,title:"OpenBMC Custom Sass Options",slug:"openbmc-custom-sass-options"},{level:3,title:"$responsive-layout-bp",slug:"responsive-layout-bp"},{level:3,title:"$header-height",slug:"header-height"},{level:3,title:"$navigation-width",slug:"navigation-width"},{level:3,title:"$container-bgd",slug:"container-bgd"},{level:3,title:"$primary-nav-hover",slug:"primary-nav-hover"},{level:2,title:"Updating Colors",slug:"updating-colors"},{level:3,title:"Color",slug:"color"},{level:3,title:"Bootstrap Color Functions",slug:"bootstrap-color-functions"},{level:2,title:"Adding a logo",slug:"adding-a-logo"}]},{title:"FormFile",frontmatter:{},regularPath:"/guide/components/file-upload/",relativePath:"guide/components/file-upload/readme.md",key:"v-11f5c12a",path:"/guide/components/file-upload/",headers:[{level:3,title:"Optional properties",slug:"optional-properties"},{level:2,title:"Example of form file",slug:"example-of-form-file"}]},{title:"InfoTooltip",frontmatter:{},regularPath:"/guide/components/info-tooltip/",relativePath:"guide/components/info-tooltip/index.md",key:"v-3f4acd3a",path:"/guide/components/info-tooltip/",headers:[{level:2,title:"Example",slug:"example"}]},{title:"Page section",frontmatter:{},regularPath:"/guide/components/page-section/",relativePath:"guide/components/page-section/index.md",key:"v-041c069a",path:"/guide/components/page-section/"},{title:"Page title",frontmatter:{},regularPath:"/guide/components/page-title/",relativePath:"guide/components/page-title/index.md",key:"v-5989fc3a",path:"/guide/components/page-title/"},{title:"Overview",frontmatter:{},regularPath:"/guide/components/",relativePath:"guide/components/readme.md",key:"v-31d70cca",path:"/guide/components/"},{title:"StatusIcon",frontmatter:{},regularPath:"/guide/components/status-icon/",relativePath:"guide/components/status-icon/readme.md",key:"v-c56a512c",path:"/guide/components/status-icon/",headers:[{level:2,title:"Status icon with default status",slug:"status-icon-with-default-status"},{level:2,title:"Status icon with success status",slug:"status-icon-with-success-status"},{level:2,title:"Status icon with info status",slug:"status-icon-with-info-status"},{level:2,title:"Status icon with warning status",slug:"status-icon-with-warning-status"},{level:2,title:"Status icon with danger status",slug:"status-icon-with-danger-status"},{level:3,title:"Example of AppHeader with status icon",slug:"example-of-appheader-with-status-icon"},{level:3,title:"Example of Event logs with status icon",slug:"example-of-event-logs-with-status-icon"}]},{title:"JavaScript and SASS",frontmatter:{},regularPath:"/guide/coding-standards/",relativePath:"guide/coding-standards/readme.md",key:"v-b4e616ac",path:"/guide/coding-standards/",headers:[{level:2,title:"Overrides",slug:"overrides"},{level:2,title:"Running the lint test",slug:"running-the-lint-test"}]},{title:"Table",frontmatter:{},regularPath:"/guide/components/table/",relativePath:"guide/components/table/index.md",key:"v-40377bf0",path:"/guide/components/table/",headers:[{level:2,title:"Basic table",slug:"basic-table"},{level:3,title:"Required properties",slug:"required-properties"},{level:2,title:"Sort",slug:"sort"},{level:2,title:"Expandable rows",slug:"expandable-rows"},{level:3,title:"Summary",slug:"summary"},{level:2,title:"Search",slug:"search"},{level:2,title:"Row actions",slug:"row-actions"},{level:2,title:"Filters",slug:"filters"},{level:3,title:"Date filter",slug:"date-filter"},{level:2,title:"Batch actions",slug:"batch-actions"},{level:2,title:"Pagination",slug:"pagination"}]},{title:"Toasts",frontmatter:{},regularPath:"/guide/components/toasts/",relativePath:"guide/components/toasts/index.md",key:"v-8d5f730c",path:"/guide/components/toasts/",headers:[{level:2,title:"Additional options",slug:"additional-options"}]},{title:"Colors",frontmatter:{},regularPath:"/guide/guidelines/colors.html",relativePath:"guide/guidelines/colors.md",key:"v-2a77ca01",path:"/guide/guidelines/colors.html",headers:[{level:2,title:"Grays",slug:"grays"},{level:2,title:"Blues",slug:"blues"},{level:2,title:"Greens",slug:"greens"},{level:2,title:"Reds",slug:"reds"},{level:2,title:"Yellows",slug:"yellows"},{level:2,title:"All Colors",slug:"all-colors"},{level:2,title:"Theme Colors",slug:"theme-colors"}]},{title:"Internationalization",frontmatter:{},regularPath:"/guide/guidelines/internationalization.html",relativePath:"guide/guidelines/internationalization.md",key:"v-38d04901",path:"/guide/guidelines/internationalization.html",headers:[{level:2,title:"Key naming convention",slug:"key-naming-convention"},{level:2,title:"Using the Vue I18n plugin",slug:"using-the-vue-i18n-plugin"}]},{title:"Motion",frontmatter:{},regularPath:"/guide/guidelines/motion.html",relativePath:"guide/guidelines/motion.md",key:"v-6091adc1",path:"/guide/guidelines/motion.html",headers:[{level:2,title:"Easing",slug:"easing"},{level:3,title:"Productive motion",slug:"productive-motion"},{level:3,title:"Expressive motion",slug:"expressive-motion"},{level:3,title:"Easing tokens",slug:"easing-tokens"},{level:2,title:"Duration",slug:"duration"},{level:3,title:"Duration tokens",slug:"duration-tokens"}]},{title:"Typography",frontmatter:{},regularPath:"/guide/guidelines/typography.html",relativePath:"guide/guidelines/typography.md",key:"v-05591661",path:"/guide/guidelines/typography.html"},{title:"Forms",frontmatter:{},regularPath:"/guide/quickstart/forms.html",relativePath:"guide/quickstart/forms.md",key:"v-359b8c86",path:"/guide/quickstart/forms.html",headers:[{level:2,title:"Form component",slug:"form-component"},{level:2,title:"Form group component",slug:"form-group-component"},{level:2,title:"Validation",slug:"validation"},{level:2,title:"Complete form",slug:"complete-form"}]},{title:"Page Anatomy",frontmatter:{},regularPath:"/guide/quickstart/page-anatomy.html",relativePath:"guide/quickstart/page-anatomy.md",key:"v-fc9cc93e",path:"/guide/quickstart/page-anatomy.html",headers:[{level:2,title:"Template block",slug:"template-block"},{level:2,title:"Scripts block",slug:"scripts-block"},{level:2,title:"Style block",slug:"style-block"},{level:2,title:"Complete single-file component (SFC)",slug:"complete-single-file-component-sfc"}]},{title:"Store Anatomy",frontmatter:{},regularPath:"/guide/quickstart/store-anatomy.html",relativePath:"guide/quickstart/store-anatomy.md",key:"v-56bfbd06",path:"/guide/quickstart/store-anatomy.html",headers:[{level:2,title:"Store",slug:"store"},{level:3,title:"Modules",slug:"modules"},{level:2,title:"Complete store",slug:"complete-store"}]},{title:"Getting Started",frontmatter:{sidebarDepth:0},regularPath:"/guide/",relativePath:"guide/readme.md",key:"v-93d8ea40",path:"/guide/",headers:[{level:2,title:"Coding Standards",slug:"coding-standards"},{level:2,title:"Guidelines",slug:"guidelines"},{level:2,title:"Components",slug:"components"}]},{title:"Unit Testing",frontmatter:{},regularPath:"/guide/unit-testing/",relativePath:"guide/unit-testing/readme.md",key:"v-1a0895aa",path:"/guide/unit-testing/",headers:[{level:2,title:"Test Libraries",slug:"test-libraries"},{level:2,title:"Test specification location and naming conventions",slug:"test-specification-location-and-naming-conventions"},{level:3,title:"Examples",slug:"examples"},{level:2,title:"Running Tests",slug:"running-tests"},{level:3,title:"Debugging a failed test",slug:"debugging-a-failed-test"},{level:3,title:"Fixing failed snapshot tests",slug:"fixing-failed-snapshot-tests"},{level:2,title:"Guidelines",slug:"guidelines"},{level:2,title:"Components",slug:"components"},{level:3,title:"What to test",slug:"what-to-test"},{level:3,title:"What not to test",slug:"what-not-to-test"},{level:3,title:"Strategy",slug:"strategy"},{level:3,title:"Snapshot Testing",slug:"snapshot-testing"},{level:2,title:"Vuex Store",slug:"vuex-store"},{level:3,title:"Testing Store Parts Separately",slug:"testing-store-parts-separately"},{level:3,title:"Testing Store Instance",slug:"testing-store-instance"},{level:2,title:"Vue Router",slug:"vue-router"},{level:2,title:"Resources",slug:"resources"}]},{title:"Home",frontmatter:{home:!0,heroImage:"openbmc-logo.svg",heroText:"Style Guide and Coding Conventions",actionText:"Getting Started",actionLink:"/guide/"},regularPath:"/",relativePath:"readme.md",key:"v-ef80b70c",path:"/"}],themeConfig:{nav:[{text:"Guide",link:"/guide/"},{text:"Customization",link:"/customization/"},{text:"Github",link:"https://github.com/openbmc/webui-vue"}],sidebarDepth:1,sidebar:{"/guide/":["",{title:"Coding Standards",children:[["/guide/coding-standards/","JavaScript and SASS"],["/guide/coding-standards/accessibility","Accessibility"]]},{title:"Guidelines",children:["/guide/guidelines/colors","/guide/guidelines/internationalization","/guide/guidelines/motion","/guide/guidelines/typography"]},"/guide/unit-testing/",{title:"Components",children:["/guide/components/","/guide/components/alerts/","/guide/components/buttons/","/guide/components/file-upload/","/guide/components/info-tooltip/","/guide/components/page-section/","/guide/components/page-title/","/guide/components/status-icon/","/guide/components/table/","/guide/components/toasts/"]},{title:"Quick Start",children:["/guide/quickstart/forms","/guide/quickstart/page-anatomy","/guide/quickstart/store-anatomy"]}],"/customization/":["","theme","build"]}}};n(292);Ro.component("colors-all",(function(){return Promise.all([n.e(0),n.e(5)]).then(n.bind(null,392))})),Ro.component("colors-blues",(function(){return Promise.all([n.e(0),n.e(6)]).then(n.bind(null,393))})),Ro.component("colors-grays",(function(){return Promise.all([n.e(0),n.e(7)]).then(n.bind(null,394))})),Ro.component("colors-greens",(function(){return Promise.all([n.e(0),n.e(8)]).then(n.bind(null,395))})),Ro.component("colors-reds",(function(){return Promise.all([n.e(0),n.e(9)]).then(n.bind(null,396))})),Ro.component("colors-theme",(function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,397))})),Ro.component("colors-yellows",(function(){return Promise.all([n.e(0),n.e(11)]).then(n.bind(null,398))})),Ro.component("Badge",(function(){return Promise.all([n.e(0),n.e(12)]).then(n.bind(null,426))})),Ro.component("CodeBlock",(function(){return Promise.all([n.e(0),n.e(13)]).then(n.bind(null,399))})),Ro.component("CodeGroup",(function(){return Promise.all([n.e(0),n.e(14)]).then(n.bind(null,400))}));n(293);var pu=[{},function(t){t.Vue.mixin({computed:{$dataBlock:function(){return this.$options.__data__block__}}})},{},{}],du=[];function hu(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function vu(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function mu(t,e,n){return e&&vu(t.prototype,e),n&&vu(t,n),t}function yu(t,e){return(yu=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}n(151);function gu(t){return(gu=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var bu=n(156),_u=n.n(bu);function xu(t,e){return!e||"object"!==_u()(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function wu(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=gu(t);if(e){var o=gu(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return xu(this,n)}}var Su=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&yu(t,e)}(n,t);var e=wu(n);function n(){return hu(this,n),e.apply(this,arguments)}return n}(function(){function t(){hu(this,t),this.store=new Ro({data:{state:{}}})}return mu(t,[{key:"$get",value:function(t){return this.store.state[t]}},{key:"$set",value:function(t,e){Ro.set(this.store.state,t,e)}},{key:"$emit",value:function(){var t;(t=this.store).$emit.apply(t,arguments)}},{key:"$on",value:function(){var t;(t=this.store).$on.apply(t,arguments)}}]),t}());Object.assign(Su.prototype,{getPageAsyncComponent:za,getLayoutAsyncComponent:Ba,getAsyncComponent:qa,getVueComponent:Va});var Ou={install:function(t){var e=new Su;t.$vuepress=e,t.prototype.$vuepress=e}};function ju(t){t.beforeEach((function(e,n,r){if(ku(t,e.path))r();else if(/(\/|\.html)$/.test(e.path))if(/\/$/.test(e.path)){var o=e.path.replace(/\/$/,"")+".html";ku(t,o)?r(o):r()}else r();else{var i=e.path+"/",a=e.path+".html";ku(t,a)?r(a):ku(t,i)?r(i):r()}}))}function ku(t,e){var n=e.toLowerCase();return t.options.routes.some((function(t){return t.path.toLowerCase()===n}))}var Eu={props:{pageKey:String,slotKey:{type:String,default:"default"}},render:function(t){var e=this.pageKey||this.$parent.$page.key;return Wa("pageKey",e),Ro.component(e)||Ro.component(e,za(e)),Ro.component(e)?t(e):t("")}},Cu={functional:!0,props:{slotKey:String,required:!0},render:function(t,e){var n=e.props,r=e.slots;return t("div",{class:["content__".concat(n.slotKey)]},r()[n.slotKey])}},Au={computed:{openInNewWindowTitle:function(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},$u=(n(295),n(296),Object(su.a)(Au,(function(){var t=this.$createElement,e=this._self._c||t;return e("span",[e("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[e("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),this._v(" "),e("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})]),this._v(" "),e("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports);function Pu(){return(Pu=o(regeneratorRuntime.mark((function t(e){var n,r,o,i;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:fu.routerBase||fu.base,ju(r=new Oa({base:n,mode:"history",fallback:!1,routes:lu,scrollBehavior:function(t,e,n){return n||(t.hash?!Ro.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(t.hash)}:{x:0,y:0})}})),o={},t.prev=4,t.next=7,Promise.all(pu.filter((function(t){return"function"==typeof t})).map((function(t){return t({Vue:Ro,options:o,router:r,siteData:fu,isServer:e})})));case 7:t.next=12;break;case 9:t.prev=9,t.t0=t.catch(4),console.error(t.t0);case 12:return i=new Ro(Object.assign(o,{router:r,render:function(t){return t("div",{attrs:{id:"app"}},[t("RouterView",{ref:"layout"}),t("div",{class:"global-ui"},du.map((function(e){return t(e)})))])}})),t.abrupt("return",{app:i,router:r});case 14:case"end":return t.stop()}}),t,null,[[4,9]])})))).apply(this,arguments)}Ro.config.productionTip=!1,Ro.use(Oa),Ro.use(Ou),Ro.mixin(function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Ro;ja(e),n.$vuepress.$set("siteData",e);var r=t(n.$vuepress.$get("siteData")),o=new r,i=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(i).reduce((function(t,e){return e.startsWith("$")&&(t[e]=i[e].get),t}),a),{computed:a}}((function(t){return function(){function e(){hu(this,e)}return mu(e,[{key:"setPage",value:function(t){this.__page=t}},{key:"$site",get:function(){return t}},{key:"$themeConfig",get:function(){return this.$site.themeConfig}},{key:"$frontmatter",get:function(){return this.$page.frontmatter}},{key:"$localeConfig",get:function(){var t,e,n=this.$site.locales,r=void 0===n?{}:n;for(var o in r)"/"===o?e=r[o]:0===this.$page.path.indexOf(o)&&(t=r[o]);return t||e||{}}},{key:"$siteTitle",get:function(){return this.$localeConfig.title||this.$site.title||""}},{key:"$canonicalUrl",get:function(){var t=this.$page.frontmatter.canonicalUrl;return"string"==typeof t&&t}},{key:"$title",get:function(){var t=this.$page,e=this.$page.frontmatter.metaTitle;if("string"==typeof e)return e;var n=this.$siteTitle,r=t.frontmatter.home?null:t.frontmatter.title||t.title;return n?r?r+" | "+n:n:r||"VuePress"}},{key:"$description",get:function(){var t=function(t){if(t){var e=t.filter((function(t){return"description"===t.name}))[0];if(e)return e.content}}(this.$page.frontmatter.meta);return t||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}},{key:"$lang",get:function(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}},{key:"$localePath",get:function(){return this.$localeConfig.path||"/"}},{key:"$themeLocaleConfig",get:function(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}},{key:"$page",get:function(){return this.__page?this.__page:function(t,e){for(var n=0;n<t.length;n++){var r=t[n];if(r.path.toLowerCase()===e.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}}]),e}()}),fu)),Ro.component("Content",Eu),Ro.component("ContentSlotsDistributor",Cu),Ro.component("OutboundLink",$u),Ro.component("ClientOnly",{functional:!0,render:function(t,e){var n=e.parent,r=e.children;if(n._isMounted)return r;n.$once("hook:mounted",(function(){n.$forceUpdate()}))}}),Ro.component("Layout",Ba("Layout")),Ro.component("NotFound",Ba("NotFound")),Ro.prototype.$withBase=function(t){var e=this.$site.base;return"/"===t.charAt(0)?e+t.slice(1):t},window.__VUEPRESS__={version:"1.8.2",hash:"78372d6"},function(t){return Pu.apply(this,arguments)}(!1).then((function(t){var e=t.app;t.router.onReady((function(){e.$mount("#app")}))}))}]);
+\ No newline at end of file
diff --git a/customization/build.html b/customization/build.html
new file mode 100644
index 00000000..b3c714cf
--- /dev/null
+++ b/customization/build.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Build Customization | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/21.f51dd518.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/customization/" aria-current="page" class="sidebar-link">Presentation Layer Architecture</a></li><li><a href="/webui-vue/customization/theme.html" class="sidebar-link">Theme customization</a></li><li><a href="/webui-vue/customization/build.html" aria-current="page" class="active sidebar-link">Build Customization</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#setup" class="sidebar-link">Setup</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#store" class="sidebar-link">Store</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#router" class="sidebar-link">Router</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#app-navigation" class="sidebar-link">App navigation</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#theming" class="sidebar-link">Theming</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#local-development" class="sidebar-link">Local development</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#production-build" class="sidebar-link">Production build</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="build-customization"><a href="#build-customization" class="header-anchor">#</a> Build Customization</h1> <p>This document provides instructions for how to add environment specific
+modifications to the Web UI.</p> <ul><li><a href="#setup">Setup</a></li> <li><a href="#store">Store</a></li> <li><a href="#router">Router</a></li> <li><a href="#app-navigation">App Navigation</a></li> <li><a href="#theming">Theming</a></li> <li><a href="#local-development">Local development</a></li> <li><a href="#production-build">Production build</a></li></ul> <h2 id="setup"><a href="#setup" class="header-anchor">#</a> Setup</h2> <ol><li>Create a <code>.env.&lt;ENV_NAME&gt;</code> file in the project root</li> <li>Add <code>NODE_ENV=production</code> key value pair in the file</li> <li>Add <code>VUE_APP_ENV_NAME</code> key with the value set to the new environment name</li></ol> <p>Example <code>.env.ibm</code>:</p> <div class="language- extra-class"><pre class="language-text"><code>NODE_ENV=production
+VUE_APP_ENV_NAME=ibm
+</code></pre></div><h2 id="store"><a href="#store" class="header-anchor">#</a> Store</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><a href="https://vuex.vuejs.org/guide/modules.html" target="_blank" rel="noopener noreferrer">Vuex store modules<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> contain the
+application's API calls.</p></div> <ol><li>If making customizations to the default store, add <code>CUSTOM_STORE=true</code> key
+value pair to the new .env file.</li> <li>Create a <code>&lt;ENV_NAME&gt;.js</code> file in <code>src/env/store</code><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>The filename needs to match the <code>VUE_APP_ENV_NAME</code> value defined in the
+.env file. The store import in <code>src/main.js</code> will resolve to this new
+file.</p></div></li> <li>Import the base store</li> <li>Import environment specific store modules</li> <li>Use the <a href="https://vuex.vuejs.org/api/#registermodule" target="_blank" rel="noopener noreferrer">Vuex<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <code>registerModule</code>
+and <code>unregisterModule</code> instance methods to add/remove store modules</li> <li>Add default export</li></ol> <p>Example <code>src/env/store/ibm.js</code>:</p> <div class="language- extra-class"><pre class="language-text"><code>import store from '@/store; //@ aliases to src directory
+import HmcStore from './Hmc/HmcStore';
+
+store.registerModule('hmc', HmcStore);
+
+export default store;
+</code></pre></div><h2 id="router"><a href="#router" class="header-anchor">#</a> Router</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><a href="https://router.vuejs.org/guide/" target="_blank" rel="noopener noreferrer">Vue Router<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> determines which pages are
+accessible in the UI.</p></div> <ol><li>If making customizations to the default router, add <code>CUSTOM_ROUTER=true</code> key
+value pair to the new .env file.</li> <li>Create a <code>&lt;ENV_NAME&gt;.js</code> file in <code>src/env/router</code><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>The filename needs to match the <code>VUE_APP_ENV_NAME</code> value defined in the
+.env file. The routes import in <code>src/router/index.js</code> will resolve to this
+new file.</p></div></li> <li>Define new <a href="https://router.vuejs.org/api/#routes" target="_blank" rel="noopener noreferrer">routes<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.<div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Use static imports (over lazy-loading routes) to avoid creating separate
+JS chunks. Static imports also helps to keep the total build size down.</p></div></li> <li>Add default export</li></ol> <h2 id="app-navigation"><a href="#app-navigation" class="header-anchor">#</a> App navigation</h2> <p>The Vue Router definition is closely tied to the app navigation but should be
+configured separately. The Vue Router is responsible for defining the
+application routes which is not always the same as what is visible in the app
+navigation. This configuration will make customizations to the rendered markup
+in src/components/AppNavigation/AppNavigation.vue.</p> <ol><li>If making customizations to the app navigation, add <code>CUSTOM_APP_NAV=true</code> key
+value pair to the new .env file.</li> <li>Create a <code>&lt;ENV_NAME&gt;.js</code> file in <code>src/env/components/AppNavigation</code><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>The filename needs to match the <code>VUE_APP_ENV_NAME</code> value defined in the
+.env file. The AppNavigationMixin import in
+<code>src/components/AppNavigation/AppNavigation.vue</code> will resolve to this new
+file.</p></div></li> <li>Your custom mixin should follow a very similar structure to the default
+AppNavigationMixin.js file. It should include a data property named
+<code>navigationItems</code> that should be an array of of navigation objects. Each
+navigation object should have an <code>id</code> and <code>label</code> property defined.
+Optionally it can include <code>icon</code>, <code>route</code>, or <code>children</code> properties.</li> <li>Add default export</li></ol> <h2 id="theming"><a href="#theming" class="header-anchor">#</a> Theming</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><a href="https://getbootstrap.com/docs/4.5/getting-started/theming/" target="_blank" rel="noopener noreferrer">Bootstrap theming<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+allows for easy visual customizations.</p></div> <ol><li>If making customizations to the default styles, add <code>CUSTOM_STYLES=true</code> key
+value pair to the new .env file.</li> <li>Create a <code>_&lt;ENV_NAME&gt;.scss</code> partial in <code>src/env/assets/styles</code><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>The filename needs to match the <code>VUE_APP_ENV_NAME</code> value defined in the
+.env file. The webpack sass loader will attempt to import a file with this
+name.</p></div></li> <li>Add style customizations. Refer to <a href="https://getbootstrap.com/docs/4.5/getting-started/theming/" target="_blank" rel="noopener noreferrer">bootstrap documentation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+for details about <a href="https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults" target="_blank" rel="noopener noreferrer">color
+overrides<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+and <a href="https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options" target="_blank" rel="noopener noreferrer">other customizable
+options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</li></ol> <p>Example for adding custom colors</p> <p><code>src/env/assets/styles/_ibm.scss</code></p> <div class="language- extra-class"><pre class="language-text"><code>// Custom theme colors
+
+$primary: rebeccapurple;
+$success: lime;
+</code></pre></div><h2 id="local-development"><a href="#local-development" class="header-anchor">#</a> Local development</h2> <ol><li>Add the same <code>VUE_APP_ENV_NAME</code> key value pair to your
+<code>env.development.local</code> file.</li> <li>Use serve script<div class="language- extra-class"><pre class="language-text"><code>npm run serve
+</code></pre></div></li></ol> <h2 id="production-build"><a href="#production-build" class="header-anchor">#</a> Production build</h2> <p>Run npm build script with vue-cli <code>--mode</code> <a href="https://cli.vuejs.org/guide/mode-and-env.html#modes" target="_blank" rel="noopener noreferrer">option
+flag<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. This requires
+<a href="#setup">corresponding .env file to exist</a>.</p> <div class="language- extra-class"><pre class="language-text"><code>npm run build -- --mode ibm
+</code></pre></div><p><strong>OR</strong></p> <p>pass env variable directly to script</p> <div class="language- extra-class"><pre class="language-text"><code>VUE_APP_ENV_NAME=ibm npm run build
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/customization/theme.html" class="prev">
+        Theme customization
+      </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/21.f51dd518.js" defer></script>
+  </body>
+</html>
diff --git a/customization/index.html b/customization/index.html
new file mode 100644
index 00000000..cde373c3
--- /dev/null
+++ b/customization/index.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Presentation Layer Architecture | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/22.22ba3b96.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/customization/" aria-current="page" class="active sidebar-link">Presentation Layer Architecture</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/customization/#scss-directory-structure" class="sidebar-link">SCSS Directory Structure</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/#component-view-styles" class="sidebar-link">Component / View Styles</a></li></ul></li><li><a href="/webui-vue/customization/theme.html" class="sidebar-link">Theme customization</a></li><li><a href="/webui-vue/customization/build.html" class="sidebar-link">Build Customization</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="presentation-layer-architecture"><a href="#presentation-layer-architecture" class="header-anchor">#</a> Presentation Layer Architecture</h1> <p>This section discusses the structure and purpose of the SCSS files and how to
+customize the application using Bootstrap theming.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming" target="_blank" rel="noopener noreferrer">Read more about Bootstrap
+Theming<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="scss-directory-structure"><a href="#scss-directory-structure" class="header-anchor">#</a> SCSS Directory Structure</h2> <h3 id="bmc-directory"><a href="#bmc-directory" class="header-anchor">#</a> <code>bmc</code> Directory</h3> <p>The <code>bmc</code> directory contains Sass helpers and default styles for customizing the OpenBMC
+Web UI.</p> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+   ├─ assets
+      ├─ styles
+         ├─ bmc
+            ├─ custom
+            └─ helpers
+         ├─ bootstrap
+         └─ _obmc-custom.scss
+</code></pre></div><h3 id="custom-directory"><a href="#custom-directory" class="header-anchor">#</a> <code>custom</code> Directory</h3> <p>The <code>custom</code> Directory imports all the styles needed to customize the UI. These
+are small changes used to reach parity with the OpenBMC Design Workgroup's
+agreed-upon design. The file naming convention closely follows the Bootstrap or
+Boostrap-vue library file naming since most of the ruleset selectors in these
+files are based on these two libraries.</p> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+   ├─ assets
+      ├─ styles
+         ├─ bmc
+            ├─ custom
+               ├─ alert.scss
+               ├─ _badge.scss
+               ├─ _base.scss
+               ├─ _bootstrap-grid.scss
+               ├─ _buttons.scss
+               ├─ _calendar.scss
+               ├─ _card.scss
+               ├─ _dropdown.scss
+               ├─ _forms.scss
+               ├─ _index.scss
+               ├─ _kvm.scss
+               ├─ _modal.scss
+               ├─ _pagination.scss
+               ├─ _sol.scss
+               ├─ _tables.scss
+               └─ _toasts.scss
+         ├─ helpers
+         ├─ bootstrap
+         └─ _obmc-custom.scss
+</code></pre></div><h3 id="helpers-directory"><a href="#helpers-directory" class="header-anchor">#</a> <code>helpers</code> Directory</h3> <p>The <code>helpers</code> directory contains a set of Sass helper files containing Sass
+variables that establish the custom theme of the application.</p> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+   ├─ assets
+      ├─ styles
+         ├─ bmc
+         ├─ helpers
+                ├─ _colors.scss
+                ├─ _functions.scss
+                ├─ _index.scss
+                ├─ _motion.scss
+                └─ _variables.scss
+         ├─ bootstrap
+         └─ _obmc-custom.scss
+</code></pre></div><h4 id="colors-scss"><a href="#colors-scss" class="header-anchor">#</a> <code>_colors.scss</code></h4> <p>The <code>_colors.scss</code> file sets all the SASS variables and color maps for the OpenBMC
+Web UI. Any color settings needed to meet company brand guidelines will happen
+in this file.</p> <h5 id="sass-color-variables"><a href="#sass-color-variables" class="header-anchor">#</a> Sass Color Variables</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$black</span></span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$white</span></span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
+
+<span class="token property"><span class="token variable">$blue-500</span></span><span class="token punctuation">:</span> #2d60e5<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$green-500</span></span><span class="token punctuation">:</span> #0a7d06<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$red-500</span></span><span class="token punctuation">:</span> #da1416<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$yellow-500</span></span><span class="token punctuation">:</span> #efc100<span class="token punctuation">;</span>
+
+<span class="token property"><span class="token variable">$gray-100</span></span><span class="token punctuation">:</span> #f4f4f4<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-200</span></span><span class="token punctuation">:</span> #e6e6e6<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-300</span></span><span class="token punctuation">:</span> #d8d8d8<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-400</span></span><span class="token punctuation">:</span> #cccccc<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-500</span></span><span class="token punctuation">:</span> #b3b3b3<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-600</span></span><span class="token punctuation">:</span> #999999<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-700</span></span><span class="token punctuation">:</span> #666666<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-800</span></span><span class="token punctuation">:</span> #3f3f3f<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-900</span></span><span class="token punctuation">:</span> #161616<span class="token punctuation">;</span>
+</code></pre></div><h5 id="custom-color-variables"><a href="#custom-color-variables" class="header-anchor">#</a> Custom Color Variables</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// Sass Base Color Variables</span>
+<span class="token property"><span class="token variable">$blue</span></span><span class="token punctuation">:</span> <span class="token variable">$blue-500</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$green</span></span><span class="token punctuation">:</span> <span class="token variable">$green-500</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$red</span></span><span class="token punctuation">:</span> <span class="token variable">$red-500</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$yellow</span></span><span class="token punctuation">:</span> <span class="token variable">$yellow-500</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="custom-colors-map"><a href="#custom-colors-map" class="header-anchor">#</a> Custom Colors Map</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
+  <span class="token string">&quot;blue&quot;</span><span class="token punctuation">:</span> <span class="token variable">$blue</span><span class="token punctuation">,</span>
+  <span class="token string">&quot;green&quot;</span><span class="token punctuation">:</span> <span class="token variable">$green</span><span class="token punctuation">,</span>
+  <span class="token string">&quot;red&quot;</span><span class="token punctuation">:</span> <span class="token variable">$red</span><span class="token punctuation">,</span>
+  <span class="token string">&quot;yellow&quot;</span><span class="token punctuation">:</span> <span class="token variable">$yellow</span><span class="token punctuation">,</span>
+<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="custom-theme-color-variables"><a href="#custom-theme-color-variables" class="header-anchor">#</a> Custom Theme Color Variables</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// Sass Theme Color Variables</span>
+<span class="token comment">// Can be used as variants</span>
+<span class="token property"><span class="token variable">$danger</span></span><span class="token punctuation">:</span> <span class="token variable">$red</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$dark</span></span><span class="token punctuation">:</span> <span class="token variable">$gray-900</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$info</span></span><span class="token punctuation">:</span> <span class="token variable">$blue</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$light</span></span><span class="token punctuation">:</span> <span class="token variable">$gray-100</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$primary</span></span><span class="token punctuation">:</span> <span class="token variable">$blue</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$secondary</span></span><span class="token punctuation">:</span> <span class="token variable">$gray-800</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$success</span></span><span class="token punctuation">:</span> <span class="token variable">$green</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$warning</span></span><span class="token punctuation">:</span> <span class="token variable">$yellow</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="custom-theme-colors-map"><a href="#custom-theme-colors-map" class="header-anchor">#</a> Custom Theme Colors Map</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$theme-colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
+  <span class="token string">&quot;primary&quot;</span><span class="token punctuation">:</span> <span class="token variable">$primary</span><span class="token punctuation">,</span>
+  <span class="token string">&quot;secondary&quot;</span><span class="token punctuation">:</span> <span class="token variable">$secondary</span><span class="token punctuation">,</span>
+  <span class="token string">&quot;dark&quot;</span><span class="token punctuation">:</span> <span class="token variable">$dark</span><span class="token punctuation">,</span>
+  <span class="token string">&quot;light&quot;</span><span class="token punctuation">:</span> <span class="token variable">$light</span><span class="token punctuation">,</span>
+  <span class="token string">&quot;danger&quot;</span><span class="token punctuation">:</span> <span class="token variable">$danger</span><span class="token punctuation">,</span>
+  <span class="token string">&quot;info&quot;</span><span class="token punctuation">:</span> <span class="token variable">$info</span> <span class="token string">&quot;success&quot;</span><span class="token punctuation">:</span> <span class="token variable">$success</span> <span class="token string">&quot;warning&quot;</span><span class="token punctuation">:</span> <span class="token variable">$warning</span><span class="token punctuation">,</span>
+<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="color-resources"><a href="#color-resources" class="header-anchor">#</a> Color Resources</h5> <ul><li><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#color" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap
+colors<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap
+variables<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="/guide/guidelines/colors">View the color palette and hex values in the color
+guidelines</a></li></ul> <h4 id="functions-scss"><a href="#functions-scss" class="header-anchor">#</a> <code>_functions.scss</code></h4> <p>Two functions provide a customized way to set color highlights. The
+<code>theme-color-light</code> and <code>theme-color-dark</code> are custom functions used to create
+colors for the <code>alert</code>, <code>badge</code>, <code>card</code>, and <code>toast</code> components. They have also
+set color highlights for some pseudo-elements like <code>: hover</code>.</p> <h5 id="functions"><a href="#functions" class="header-anchor">#</a> Functions</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// This function is usually used to get a lighter</span>
+<span class="token comment">// theme variant color to use as a background color</span>
+<span class="token keyword">@function</span> <span class="token function">theme-color-light</span><span class="token punctuation">(</span><span class="token variable">$variant</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">@return</span> <span class="token function">theme-color-level</span><span class="token punctuation">(</span><span class="token variable">$variant</span><span class="token punctuation">,</span> -11.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">@function</span> <span class="token function">theme-color-dark</span><span class="token punctuation">(</span><span class="token variable">$variant</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">@return</span> <span class="token function">theme-color-level</span><span class="token punctuation">(</span><span class="token variable">$variant</span><span class="token punctuation">,</span> 2<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h5 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h5> <div class="language-scss extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-scss"><code><span class="token selector">.b-table-sort-icon-left </span><span class="token punctuation">{</span>
+    <span class="token property">background-position</span><span class="token punctuation">:</span> left <span class="token function">calc</span><span class="token punctuation">(</span>1.5rem <span class="token operator">/</span> 2<span class="token punctuation">)</span> center <span class="token important">!important</span><span class="token punctuation">;</span>
+    <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1.2rem <span class="token operator">+</span> 0.65em<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
+    <span class="token selector"><span class="token parent important">&amp;</span>:focus </span><span class="token punctuation">{</span>
+      <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
+      <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 0 0 2px <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">'primary'</span><span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+    <span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">{</span>
+      <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">theme-color-dark</span><span class="token punctuation">(</span><span class="token string">'light'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+<span class="token selector"><span class="token parent important">&amp;</span>.alert-info </span><span class="token punctuation">{</span>
+<span class="token property">border-left-color</span><span class="token punctuation">:</span> <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">&quot;info&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">theme-color-light</span><span class="token punctuation">(</span><span class="token string">&quot;info&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property">fill</span><span class="token punctuation">:</span> <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">&quot;info&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h4 id="motion-scss"><a href="#motion-scss" class="header-anchor">#</a> <code>_motion.scss</code></h4> <p>This bezier curves and durations in this file determine the motion styles
+throughout the application. These guidelines from the Cabon Design System avoid
+easing curves that are unnatural, distracting, or purely decorative.</p> <h5 id="motion-styles"><a href="#motion-styles" class="header-anchor">#</a> Motion Styles</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$duration--fast-01</span></span><span class="token punctuation">:</span> 70ms<span class="token punctuation">;</span> <span class="token comment">//Micro-interactions such as button and toggle</span>
+<span class="token property"><span class="token variable">$duration--fast-02</span></span><span class="token punctuation">:</span> 110ms<span class="token punctuation">;</span> <span class="token comment">//Micro-interactions such as fade</span>
+<span class="token property"><span class="token variable">$duration--moderate-01</span></span><span class="token punctuation">:</span> 150ms<span class="token punctuation">;</span> <span class="token comment">//Micro-interactions, small expansion, short distance movements</span>
+<span class="token property"><span class="token variable">$duration--moderate-02</span></span><span class="token punctuation">:</span> 240ms<span class="token punctuation">;</span> <span class="token comment">//Expansion, system communication, toast</span>
+<span class="token property"><span class="token variable">$duration--slow-01</span></span><span class="token punctuation">:</span> 400ms<span class="token punctuation">;</span> <span class="token comment">//Large expansion, important system notifications</span>
+<span class="token property"><span class="token variable">$duration--slow-02</span></span><span class="token punctuation">:</span> 700ms<span class="token punctuation">;</span> <span class="token comment">//Background dimming</span>
+
+<span class="token property"><span class="token variable">$standard-easing--productive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.2<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.38<span class="token punctuation">,</span> 0.9<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$standard-easing--expressive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.4<span class="token punctuation">,</span> 0.14<span class="token punctuation">,</span> 0.3<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$entrance-easing--productive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.38<span class="token punctuation">,</span> 0.9<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$entrance-easing--expressive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$exit-easing--productive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.2<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 1<span class="token punctuation">,</span> 0.9<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$exit-easing--expressive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.4<span class="token punctuation">,</span> 0.14<span class="token punctuation">,</span> 1<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="example"><a href="#example" class="header-anchor">#</a> Example</h5> <div class="language-scss extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-scss"><code><span class="token selector">.link-skip-nav </span><span class="token punctuation">{</span>
+  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
+  <span class="token property">top</span><span class="token punctuation">:</span> -60px<span class="token punctuation">;</span>
+  <span class="token property">left</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
+  <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token variable">$zindex-popover</span><span class="token punctuation">;</span>
+  <span class="token property">transition</span><span class="token punctuation">:</span> <span class="token variable">$duration--moderate-01</span> <span class="token variable">$exit-easing--expressive</span><span class="token punctuation">;</span>
+  <span class="token selector"><span class="token parent important">&amp;</span>:focus </span><span class="token punctuation">{</span>
+    <span class="token property">top</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
+    <span class="token property">transition-timing-function</span><span class="token punctuation">:</span> <span class="token variable">$entrance-easing--expressive</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h5 id="motion-resources"><a href="#motion-resources" class="header-anchor">#</a> Motion Resources</h5> <ul><li><a href="https://www.smashingmagazine.com/2019/02/animation-design-system/" target="_blank" rel="noopener noreferrer">Including Animation In Your Design
+System<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.carbondesignsystem.com/guidelines/motion/basics/" target="_blank" rel="noopener noreferrer">Carbon Design System motion
+guidelines<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h4 id="variables-scss"><a href="#variables-scss" class="header-anchor">#</a> <code>_variables.scss</code></h4> <p>This file contains all the global Sass options. There are Bootstrap option
+overrides, Bootstrap global variable overrides, and custom BMC global variables.
+Read more about these in the <a href="/customize/theme">Customization section</a>.</p> <h3 id="bootstrap-directory"><a href="#bootstrap-directory" class="header-anchor">#</a> <code>bootstrap</code> Directory</h3> <p>The <code>bootstrap</code> directory contains all the import references. The references are
+split into multiple files to support import order based on dependency. Helper
+styles need to be imported before all other styles.</p> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+   ├─ assets
+      ├─ styles
+         ├─ bmc
+         ├─ bootstrap
+            ├─ _helpers.scss
+            └─ _index.scss
+         └─ _obmc-custom.scss
+</code></pre></div><h4 id="helpers-scss"><a href="#helpers-scss" class="header-anchor">#</a> <code>_helpers.scss</code></h4> <p>This file contains all the helper import references for Bootstrap.</p> <h4 id="index-scss"><a href="#index-scss" class="header-anchor">#</a> <code>_index.scss</code></h4> <p>This file contains all the import references needed to support the base,
+components, and utility styles.</p> <h3 id="obmc-custom-scss"><a href="#obmc-custom-scss" class="header-anchor">#</a> <code>_obmc-custom.scss</code></h3> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+   ├─ assets
+      ├─ styles
+         ├─ bmc
+         ├─ bootstrap
+         └─ _obmc-custom.scss
+</code></pre></div><p>The <code>obmc-custom.scss</code> file defines all of the presentational layer
+dependencies.</p> <ul><li><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options" target="_blank" rel="noopener noreferrer">Read more about Bootstrap
+options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#importing" target="_blank" rel="noopener noreferrer">Read more about
+Importing<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="component-view-styles"><a href="#component-view-styles" class="header-anchor">#</a> Component / View Styles</h2> <p>Some stylistic changes only apply to a single-file component or view instance.
+In this case, rather than adding a Sass file, the scoped styles include the
+styles in the component's <code>&lt;style&gt;</code> block. It is required to import the
+<code>_helpers</code> Sass file when using a BMC or Bootstrap variable in the component's
+<code>&lt;style&gt;</code> block. Without this import, webpack cannot compile the OpenBMC Web UI
+CSS styles correctly.</p> <h3 id="scoped-style-block-using-sass"><a href="#scoped-style-block-using-sass" class="header-anchor">#</a> Scoped style block using SASS</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  ...
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="scoped-style-block-using-css"><a href="#scoped-style-block-using-css" class="header-anchor">#</a> Scoped style block using CSS</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  ...<span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="example-pagesection-vue"><a href="#example-pagesection-vue" class="header-anchor">#</a> Example - PageSection.vue</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  <span class="token selector">.page-section</span> <span class="token punctuation">{</span>
+    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> $spacer * 2<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token selector">h2</span> <span class="token punctuation">{</span>
+    <span class="token atrule"><span class="token rule">@include</span> <span class="token function">font-size</span><span class="token punctuation">(</span>$h3-font-size<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> $spacer<span class="token selector">;
+    &amp;::after</span> <span class="token punctuation">{</span>
+      <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
+      <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
+      <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid $gray-300<span class="token punctuation">;</span>
+      <span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>You might notice that there is an HTML element, <code>&lt;h2&gt;</code>, used in the example. This is an anti-pattern in global <code>.scss</code> files. However, in a single file component that generates the markup it is acceptable.</p></div> <p><a href="https://vuejs.org/v2/guide/single-file-components.html" target="_blank" rel="noopener noreferrer">Learn more about single file components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Customization of the application requires knowledge of Sass and CSS. It also
+will require becoming familiar with the Bootstrap and Bootstrap-Vue component
+libraries. This section outlines the global options and variables that can be
+removed or updated to meet organizational brand guidelines.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/webui-vue/customization/theme.html">
+        Theme customization
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/22.22ba3b96.js" defer></script>
+  </body>
+</html>
diff --git a/customization/theme.html b/customization/theme.html
new file mode 100644
index 00000000..ddd7e928
--- /dev/null
+++ b/customization/theme.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Theme customization | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/23.42b49486.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/customization/" aria-current="page" class="sidebar-link">Presentation Layer Architecture</a></li><li><a href="/webui-vue/customization/theme.html" aria-current="page" class="active sidebar-link">Theme customization</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#environment-specific-builds" class="sidebar-link">Environment specific builds</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#bootstrap-sass-options" class="sidebar-link">Bootstrap Sass Options</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#bootstrap-sass-variables" class="sidebar-link">Bootstrap Sass Variables</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#openbmc-custom-sass-options" class="sidebar-link">OpenBMC Custom Sass Options</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#updating-colors" class="sidebar-link">Updating Colors</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#adding-a-logo" class="sidebar-link">Adding a logo</a></li></ul></li><li><a href="/webui-vue/customization/build.html" class="sidebar-link">Build Customization</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="theme-customization"><a href="#theme-customization" class="header-anchor">#</a> Theme customization</h1> <p>Customization of the application requires knowledge of Sass and CSS. It also
+will require becoming familiar with the Bootstrap and Bootstrap-Vue component
+libraries. This section outlines the global options and variables that can be
+removed or updated to meet organizational brand guidelines.</p> <h2 id="environment-specific-builds"><a href="#environment-specific-builds" class="header-anchor">#</a> Environment specific builds</h2> <p>Any organization can create a build that meets their branding and other
+customization needs. This includes customization of the state store, routing,
+application navigation, and theming.</p> <p><a href="/customization/build">Read more in the Build Customization section</a></p> <h3 id="configuring-environment-specific-builds"><a href="#configuring-environment-specific-builds" class="header-anchor">#</a> Configuring environment specific builds</h3> <p>The complete instructions can be found in the <code>env</code> directory in a file called
+env.md or by viewing the <a href="/webui-vue/customization/env.html">Configuring environment specific builds
+page</a></p> <h2 id="bootstrap-sass-options"><a href="#bootstrap-sass-options" class="header-anchor">#</a> Bootstrap Sass Options</h2> <p>The Bootstrap Sass options are global styling toggles. The naming convention for
+these built-in variables is <code>enabled-*</code>.</p> <h3 id="enable-rounded"><a href="#enable-rounded" class="header-anchor">#</a> $enable-rounded</h3> <p>This option enables or disables the border-radius styles on various components.</p> <ul><li>Set to <code>false</code> to remove rounded corners on all container elements and buttons</li></ul> <h3 id="enable-validation-icons"><a href="#enable-validation-icons" class="header-anchor">#</a> $enable-validation-icons</h3> <p>This option enables or disables background-image icons within textual inputs and
+some custom forms for validation states.</p> <ul><li>Set to <code>false</code> due to inability to style icons using CSS</li></ul> <h3 id="more-information"><a href="#more-information" class="header-anchor">#</a> More information</h3> <ul><li><a href="https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options" target="_blank" rel="noopener noreferrer">View all the Bootstrap Sass
+Options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="bootstrap-sass-variables"><a href="#bootstrap-sass-variables" class="header-anchor">#</a> Bootstrap Sass Variables</h2> <p>These are global variables that Bootstrap defines in the
+<code>/node_modules/bootstrap/scss/variables.scss</code> helper file. Adding a variable
+listed in this file to the <code>/src/assets/styles/bmc/helpers/_variables.scss</code> file
+will override the Bootstrap defined value.</p> <h3 id="transition-base"><a href="#transition-base" class="header-anchor">#</a> $transition-base</h3> <p>This variable sets the base CSS transition style throughout the application.</p> <ul><li>Set to <code>all $duration--moderate-02 $standard-easing--productive</code></li></ul> <h3 id="transition-fade"><a href="#transition-fade" class="header-anchor">#</a> $transition-fade</h3> <p>This variable sets the transition when showing and hiding elements.</p> <ul><li>Set to <code>opacity $duration--moderate-01 $standard-easing--productive</code></li></ul> <h3 id="transition-collapse"><a href="#transition-collapse" class="header-anchor">#</a> $transition-collapse</h3> <p>This variable sets the CSS transitions throughout the application when expanding
+and collapsing elements.</p> <ul><li>Set to <code>height $duration--slow-01 $standard-easing--expressive</code></li></ul> <h3 id="more-information-2"><a href="#more-information-2" class="header-anchor">#</a> More Information</h3> <ul><li><a href="https://www.carbondesignsystem.com/guidelines/motion/basics/" target="_blank" rel="noopener noreferrer">Carbon Design System Motion
+Guidelines<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.smashingmagazine.com/2019/02/animation-design-system/" target="_blank" rel="noopener noreferrer">Including Animation In Your Design
+System<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="openbmc-custom-sass-options"><a href="#openbmc-custom-sass-options" class="header-anchor">#</a> OpenBMC Custom Sass Options</h2> <h3 id="responsive-layout-bp"><a href="#responsive-layout-bp" class="header-anchor">#</a> $responsive-layout-bp</h3> <p>This variable determines when the primary navigation is hidden and when the
+hamburger menu is displayed. The breakpoint is defined using a Bootstrap
+function that only accepts a key from the Bootstrap <code>$grid-breakpoints</code> map.</p> <ul><li>xs - Navigation is always displayed</li> <li>sm - Navigation displayed when the viewport is greater than 576px</li> <li>md - Navigation displayed when the viewport is greater than 768px</li> <li>lg - Navigation displayed when the viewport is greater than 992px</li> <li>xl - Navigation displayed when the viewport is less than 1200px</li></ul> <h4 id="responsive-resources"><a href="#responsive-resources" class="header-anchor">#</a> Responsive Resources</h4> <ul><li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Bootstrap responsive
+breakpoints<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Bootstrap Sass
+Mixins<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Customizing the Bootstrap
+Grid<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="header-height"><a href="#header-height" class="header-anchor">#</a> $header-height</h3> <p>This variable determines the height of the OpenBMC Web UI header element.</p> <ul><li>Default value: 56px</li></ul> <h3 id="navigation-width"><a href="#navigation-width" class="header-anchor">#</a> $navigation-width</h3> <p>This variable determines the width of the primary navigation menu when expanded.</p> <ul><li>Default value: 300px</li></ul> <h3 id="container-bgd"><a href="#container-bgd" class="header-anchor">#</a> $container-bgd</h3> <p>This option sets the background of page containers. Changing the value of this
+variable will change the background color for the following elements:</p> <ul><li>Login page</li> <li>Primary navigation section</li> <li>Quick links section on the overview page</li></ul> <h4 id="value"><a href="#value" class="header-anchor">#</a> Value</h4> <ul><li>Default value: $gray-200</li></ul> <h3 id="primary-nav-hover"><a href="#primary-nav-hover" class="header-anchor">#</a> $primary-nav-hover</h3> <p>The semantic naming of this variable identifies its purpose. This color should
+always be slightly darker than the <code>$container-bgd</code> value.</p> <ul><li>Default value: $gray-300</li></ul> <h2 id="updating-colors"><a href="#updating-colors" class="header-anchor">#</a> Updating Colors</h2> <p>Supporting a different color palette is a simple process. The default color
+palette is supported using the Sass variables outlined in the color guidelines
+and color maps outlined in the theme's overview.  The following sections provide
+directions to update the settings to meet your organization's needs.</p> <h3 id="color"><a href="#color" class="header-anchor">#</a> Color</h3> <p>The OpenBMC Web UI uses Sass variables and maps to build its layout and
+components. Bootstrap variables and maps use the <code>!default</code> flag to allow for
+overrides. There are three Sass maps created to establish the color palette.
+These include the <code>color</code> map, <code>theme-color</code> map, and <code>gray</code> map. These maps are
+used by Bootstrap to build the application's CSS stylesheets.</p> <h4 id="all-colors"><a href="#all-colors" class="header-anchor">#</a> All Colors</h4> <p>The OpenBMC Web UI custom colors are available as Sass variables and a Sass map
+in <code>/src/assets/styles/bmc/helpers/_variables.scss</code>. The OpenBMC theme only
+requires a subset of the colors to create the look and feel of the application.
+Adding, removing, or updating the color variables and map is how the application
+color palette can be customized. Using these variables outside of the helper
+files is discouraged to avoid tightly coupling the OpenBMC Web UI theme to
+specific colors.</p> <p>The <code>color</code> map is not as important as the <code>theme-color</code> map. A tight-coupling
+of the Sass variable name to the color name makes it hard to use the <code>color</code> map
+keys for customization. Using these keys in Sass stylesheets or single-file
+components is discouraged.</p> <h4 id="theme-colors"><a href="#theme-colors" class="header-anchor">#</a> Theme Colors</h4> <p>The theme color variables and the <code>theme-color</code> map consist of a subset of the
+color variables. This smaller color palette creates a scheme that is not
+dependent on specific colors like blue or green. Several of the Bootstrap
+<code>theme-color</code> map keys are required to generate the CSS styles. The OpenBMC Web
+UI <code>theme-color</code> map has the same keys as the Bootstrap <code>theme-color</code> map with
+custom values.</p> <p>The <code>theme-color</code> map is used heavily throughout the application. The
+Bootstrap-Vue components <code>variant</code> prop also utilizes the <code>theme-color</code> map.
+This map is the key to customizing the application's color palette. Take a look
+at the <a href="/guide/guidelines/colors">color guidelines</a> to better understand default
+theme-colors map.</p> <h4 id="gray-colors"><a href="#gray-colors" class="header-anchor">#</a> Gray Colors</h4> <p>The gray color palette contains nine shades of gray that range from light to
+dark. Bootstrap sets a default gray color value for each color variable from
+100-900 in increments of one hundred, for example, <code>$gray-100</code>, <code>$gray-200</code>,
+<code>$gray-300</code> through <code>gray-900</code>. Bootstrap does not create a color map for any of
+the colors except gray. The Bootstrap documentation indicates that adding color
+maps for all the default colors is scheduled to be delivered in a future patch.
+The OpenBMC Web UI color theme overrides all shades of the Bootstrap default
+gray variable values.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#color" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap
+colors<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="bootstrap-color-functions"><a href="#bootstrap-color-functions" class="header-anchor">#</a> Bootstrap Color Functions</h3> <ul><li><code>color('&lt;color map key&gt;)</code></li> <li><code>theme-color('&lt;theme color map key&gt;)</code></li> <li><code>gray('&lt;gray color palette key'&gt;)</code></li></ul> <h4 id="example"><a href="#example" class="header-anchor">#</a> Example</h4> <div class="language-SCSS extra-class"><pre class="language-scss"><code><span class="token selector">.some-selector </span><span class="token punctuation">{</span>
+  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span><span class="token string">&quot;blue&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">&quot;light&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">gray</span><span class="token punctuation">(</span><span class="token string">&quot;900&quot;</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#functions" target="_blank" rel="noopener noreferrer">Learn more about using Bootstrap
+functions<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="adding-a-logo"><a href="#adding-a-logo" class="header-anchor">#</a> Adding a logo</h2> <p>The updated page header can include a small logo. The guidelines for adding a
+logo and the suggested logo dimensions are currently in progress. It may be
+challenging to meet all organization brand guidelines due to the minimal height
+of the page header. The company logo might be able to be set in the primary
+navigation, but a design supporting that option will be the focus of future
+design work.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/customization/" class="prev router-link-active">
+        Presentation Layer Architecture
+      </a></span> <span class="next"><a href="/webui-vue/customization/build.html">
+        Build Customization
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/23.42b49486.js" defer></script>
+  </body>
+</html>
diff --git a/guide/coding-standards/accessibility.html b/guide/coding-standards/accessibility.html
new file mode 100644
index 00000000..ca27b994
--- /dev/null
+++ b/guide/coding-standards/accessibility.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Accessibility Conventions and Standards | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/24.7c316dcb.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Coding Standards</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/coding-standards/" aria-current="page" class="sidebar-link">JavaScript and SASS</a></li><li><a href="/webui-vue/guide/coding-standards/accessibility.html" aria-current="page" class="active sidebar-link">Accessibility</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#accessibility-principles" class="sidebar-link">Accessibility Principles</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#semantic-html" class="sidebar-link">Semantic HTML</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#testing" class="sidebar-link">Testing</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#tools" class="sidebar-link">Tools</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#screen-readers" class="sidebar-link">Screen Readers</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/accessibility.html#resources" class="sidebar-link">Resources</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="accessibility-conventions-and-standards"><a href="#accessibility-conventions-and-standards" class="header-anchor">#</a> Accessibility Conventions and Standards</h1> <p>It is important that the OpenBMC Web UI meet accessibility guidelines
+established by the <a href="https://www.w3.org/" target="_blank" rel="noopener noreferrer">World Wide Web Consortium (W3C)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. These
+guidelines are known as the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines
+(WCAG)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Making the Web UI
+accessible to as many users as possible is the right thing to do. In many
+countries, it is also legally required. Organizations providing interfaces that
+users with permanent or temporary disabilities can not use, may lose sales or be
+susceptible to discriminatory lawsuits.</p> <h2 id="accessibility-principles"><a href="#accessibility-principles" class="header-anchor">#</a> Accessibility Principles</h2> <p>These
+<a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/" target="_blank" rel="noopener noreferrer">principles<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+reference a set of international standards from the <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener noreferrer">W3C Web Accessibility
+Intitiative (WAI)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <ul><li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable" target="_blank" rel="noopener noreferrer">Perceiveable<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/#operable" target="_blank" rel="noopener noreferrer">Operable<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/#understandable" target="_blank" rel="noopener noreferrer">Understandable<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/#robust" target="_blank" rel="noopener noreferrer">Robust<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="semantic-html"><a href="#semantic-html" class="header-anchor">#</a> Semantic HTML</h2> <p>Coding the UI using semantic markup is the most important step in creating an
+inclusive interface. The use of
+<a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank" rel="noopener noreferrer">WAI-ARIA<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> can help make an
+interface accessible to assistive technologies. However, there are two critical
+rules to follow:</p> <ol><li>Always favor semantic markup over ARIA</li> <li>No ARIA is better than Bad ARIA</li></ol> <h2 id="testing"><a href="#testing" class="header-anchor">#</a> Testing</h2> <p>Assuring the Web UI meets accessibility guidelines requires a combination of
+automated and manual testing. Automated tests will test the application against
+common problems such as color contrast and ARIA use. Automated testing can be
+built into the CI process, integrated with code editors, and run using browser
+extensions.</p> <p>The OpenBMC Web UI developers should test their development pages using one of
+the tools listed in the tools section below. If using Chrome, the Lighthouse
+application comes bundled with the browser and also includes testing for
+performance and best practices. If there is an issue that is created when using
+a Bootstrap-Vue component, we can <a href="https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose" target="_blank" rel="noopener noreferrer">create an issue in the Bootstrap-vue
+repo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.
+Contributing to the Bootstrap-Vue open-source library, when possible, is
+strongly encouraged.</p> <h2 id="tools"><a href="#tools" class="header-anchor">#</a> Tools</h2> <ul><li><a href="https://www.deque.com/axe/" target="_blank" rel="noopener noreferrer">Deque Axe<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector" target="_blank" rel="noopener noreferrer">Firefox Accessibility
+Inspector<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.ibm.com/able/toolkit/tools" target="_blank" rel="noopener noreferrer">IBM Accessibility Tools<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developers.google.com/web/tools/lighthouse" target="_blank" rel="noopener noreferrer">Lighthouse<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="screen-readers"><a href="#screen-readers" class="header-anchor">#</a> Screen Readers</h2> <ul><li><a href="https://webaim.org/articles/jaws/" target="_blank" rel="noopener noreferrer">Jaws - (Windows only)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1" target="_blank" rel="noopener noreferrer">Narrator - (Windows
+only)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://webaim.org/articles/nvda/" target="_blank" rel="noopener noreferrer">NVDA (Windows only)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://webaim.org/articles/voiceover/" target="_blank" rel="noopener noreferrer">Voiceover (Mac only)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="resources"><a href="#resources" class="header-anchor">#</a> Resources</h2> <ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank" rel="noopener noreferrer">Mozilla Developer Network -
+Accessibility<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines
+(WCAG)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3.org/TR/wai-aria-practices/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics" target="_blank" rel="noopener noreferrer">WAI-ARIA
+Basics<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://webaim.org/articles/" target="_blank" rel="noopener noreferrer">WebAIM Articles<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://a11yproject.com/" target="_blank" rel="noopener noreferrer">A11Y Project<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.ibm.com/able/" target="_blank" rel="noopener noreferrer">IBM Accessibility<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://inclusive-components.design/" target="_blank" rel="noopener noreferrer">Inclusive Components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/coding-standards/" class="prev router-link-active">
+        JavaScript and SASS
+      </a></span> <span class="next"><a href="/webui-vue/guide/guidelines/colors.html">
+        Colors
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/24.7c316dcb.js" defer></script>
+  </body>
+</html>
diff --git a/guide/coding-standards/index.html b/guide/coding-standards/index.html
new file mode 100644
index 00000000..d088939f
--- /dev/null
+++ b/guide/coding-standards/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>JavaScript and SASS | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/25.79d3357c.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Coding Standards</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/coding-standards/" aria-current="page" class="active sidebar-link">JavaScript and SASS</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/#overrides" class="sidebar-link">Overrides</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/coding-standards/#running-the-lint-test" class="sidebar-link">Running the lint test</a></li></ul></li><li><a href="/webui-vue/guide/coding-standards/accessibility.html" class="sidebar-link">Accessibility</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="javascript-and-sass"><a href="#javascript-and-sass" class="header-anchor">#</a> JavaScript and SASS</h1> <p>This project uses the following libraries to determine the best practices and
+guidelines for both SCSS and JavaScript syntax.</p> <ul><li><a href="https://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://prettier.io/" target="_blank" rel="noopener noreferrer">Prettier<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://eslint.vuejs.org/" target="_blank" rel="noopener noreferrer">ESLint Plugin for Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>The guidelines we are following are:</p> <ul><li><a href="https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-3-x" target="_blank" rel="noopener noreferrer">Vue
+Recommended<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://eslint.org/docs/rules/" target="_blank" rel="noopener noreferrer">ESLint Recommended<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://prettier.io/docs/en/options.html" target="_blank" rel="noopener noreferrer">Prettier<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>The rules are applied in the following order:</p> <ol><li>Vue rules</li> <li>ESLint recommended</li> <li>Prettier</li></ol> <h2 id="overrides"><a href="#overrides" class="header-anchor">#</a> Overrides</h2> <p>Any overrides to a rule are located in the ESLint configuration file,
+<code>.eslintrc.js</code>, located in the root directory.</p> <h2 id="running-the-lint-test"><a href="#running-the-lint-test" class="header-anchor">#</a> Running the lint test</h2> <p>To test all files for linting, run <code>npm run lint</code>. This command will evaluate
+the syntax of all files and update any code that that does not require manual
+review.</p> <p>The linting script runs when code is committed,  during pre-commit, and when the
+CI tool runs after a push to Gerrit. There is a shell script named
+<code>format-code.sh</code> that installs node package dependencies and runs the test
+script in your CI.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/" class="prev router-link-active">
+        Getting Started
+      </a></span> <span class="next"><a href="/webui-vue/guide/coding-standards/accessibility.html">
+        Accessibility
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/25.79d3357c.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/alerts/index.html b/guide/components/alerts/index.html
new file mode 100644
index 00000000..dc8da391
--- /dev/null
+++ b/guide/components/alerts/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Alerts | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/17.067a94f4.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" aria-current="page" class="active sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="alerts"><a href="#alerts" class="header-anchor">#</a> Alerts</h1> <p>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.</p> <p><a href="https://bootstrap-vue.js.org/docs/components/alert" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap-vue alert
+options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><img src="/webui-vue/assets/img/alert.9abfc445.png" alt="Alert examples"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>alert</span> <span class="token attr-name">show</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This is a warning message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>alert</span> <span class="token attr-name">show</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This is an error message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>alert</span> <span class="token attr-name">show</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>This is an info message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/" class="prev router-link-active">
+        Overview
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/buttons/">
+        Buttons
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/17.067a94f4.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/buttons/index.html b/guide/components/buttons/index.html
new file mode 100644
index 00000000..a3f1a070
--- /dev/null
+++ b/guide/components/buttons/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Buttons | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/15.9a576a5a.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" aria-current="page" class="active sidebar-link">Buttons</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="buttons"><a href="#buttons" class="header-anchor">#</a> Buttons</h1> <p>Buttons are used to perform an action. The main buttons in the application are
+the <code>primary</code> and <code>secondary</code> buttons. Buttons, like all Boostrap-vue components
+can be themed by setting the <code>variant</code> prop on the component to one of the
+<a href="/guide/guidelines/colors">theme-color map keys</a>. To create a button that looks
+like a link, set the variant value to <code>link</code>.</p> <p><a href="https://bootstrap-vue.js.org/docs/components/button" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap-vue
+buttons<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="icon-only-buttons"><a href="#icon-only-buttons" class="header-anchor">#</a> Icon only buttons</h3> <p>Add <code>btn-icon-only</code> class to the button and add <code>title</code> attribute to get helper
+text on hover over the button.</p> <h3 id="enabled-buttons"><a href="#enabled-buttons" class="header-anchor">#</a> Enabled buttons</h3> <p><img src="data:image/png;base64,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" alt="Button examples"></p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Enabled Buttons
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-add</span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Primary with icon<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-add</span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Link Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Delete<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-icon-only<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-trashcan</span> <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="disabled-buttons"><a href="#disabled-buttons" class="header-anchor">#</a> Disabled buttons</h3> <p><img src="data:image/png;base64,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" alt="Disabled button examples"></p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Disabled Buttons
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-add</span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Primary with icon<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Link Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-add</span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Link Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">disabled</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Delete<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-icon-only<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-trashcan</span> <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/alerts/" class="prev">
+        Alerts
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/file-upload/">
+        FormFile
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/15.9a576a5a.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/file-upload/index.html b/guide/components/file-upload/index.html
new file mode 100644
index 00000000..043e88c1
--- /dev/null
+++ b/guide/components/file-upload/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>FormFile | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/18.88267105.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" aria-current="page" class="active sidebar-link">FormFile</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/file-upload/#example-of-form-file" class="sidebar-link">Example of form file</a></li></ul></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="formfile"><a href="#formfile" class="header-anchor">#</a> FormFile</h1> <p><code>FormFile</code> is a custom component wrapper around the Bootstrap-vue Form File
+component. The purpose of this component is to upload files to the BMC.</p> <p>To use this component:</p> <ol><li>Import it into the single file component (SFC)</li> <li>Add the <code>&lt;form-file /&gt;</code> tag</li> <li>Add the optional <code>id</code> , <code>disabled</code>, <code>accept</code> and <code>state</code> prop as required</li></ol> <p><a href="https://bootstrap-vue.org/docs/components/form-file" target="_blank" rel="noopener noreferrer">Learn more about the Bootstrap-vue Form File
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="optional-properties"><a href="#optional-properties" class="header-anchor">#</a> Optional properties</h3> <ul><li><code>id</code>- Used to set the <code>id</code> attribute on the rendered content, and used as the
+base to generate any additional element IDs as needed</li> <li><code>disabled</code> - When set to <code>true</code>, disables the component's functionality and
+places it in a disabled state</li> <li><code>accept</code> - Set value to specify which file types to allow</li> <li><code>state</code> - Controls the validation state appearance of the component. <code>true</code>
+for valid, <code>false</code> for invalid, or <code>null</code> for no validation state</li></ul> <h2 id="example-of-form-file"><a href="#example-of-form-file" class="header-anchor">#</a> Example of form file</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form-file</span>
+  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image-file<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>.tar<span class="token punctuation">&quot;</span></span>
+  <span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form-file</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,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" alt="Formfile example in firmware"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/buttons/" class="prev">
+        Buttons
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/info-tooltip/">
+        InfoTooltip
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/18.88267105.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/index.html b/guide/components/index.html
new file mode 100644
index 00000000..36151e8d
--- /dev/null
+++ b/guide/components/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Overview | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/28.e8d46e0f.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="active sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="overview"><a href="#overview" class="header-anchor">#</a> Overview</h1> <p>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
+experience and increase efficiency. Review the existing components before using
+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.</p> <p><a href="https://vuejs.org/v2/guide/components.html" target="_blank" rel="noopener noreferrer">Learn more about Vue components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/unit-testing/" class="prev">
+        Unit Testing
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/alerts/">
+        Alerts
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/28.e8d46e0f.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/info-tooltip/index.html b/guide/components/info-tooltip/index.html
new file mode 100644
index 00000000..18707a00
--- /dev/null
+++ b/guide/components/info-tooltip/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>InfoTooltip | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/19.781066f3.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" aria-current="page" class="active sidebar-link">InfoTooltip</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/info-tooltip/#example" class="sidebar-link">Example</a></li></ul></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="infotooltip"><a href="#infotooltip" class="header-anchor">#</a> InfoTooltip</h1> <p>The <code>InfoTooltip</code> 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.</p> <p><a href="https://bootstrap-vue.org/docs/components/tooltip" target="_blank" rel="noopener noreferrer">Read more about the Bootstrap-vue tooltip
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-vue extra-class"><pre class="language-vue"><code>&lt;info-tooltip
+  :title=&quot;Title&quot; //should be translated
+/&gt;
+</code></pre></div><p><img src="data:image/png;base64,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" alt="Tooltip example"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/file-upload/" class="prev">
+        FormFile
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/page-section/">
+        Page section
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/19.781066f3.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/page-section/index.html b/guide/components/page-section/index.html
new file mode 100644
index 00000000..6eed604b
--- /dev/null
+++ b/guide/components/page-section/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Page section | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/26.c82c48a9.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" aria-current="page" class="active sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="page-section"><a href="#page-section" class="header-anchor">#</a> Page section</h1> <p>The <code>&lt;page-section&gt;</code> component will render semantic HTML. By adding a
+<code>:section-title</code> prop to the <code>&lt;page-section&gt;</code> component, the localized text
+string will be rendered in an <code>h2</code> header element.</p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Example: `src/views/AccessControl/Ldap/Ldap.vue`
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageLdap.settings<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue" target="_blank" rel="noopener noreferrer">View the page section component source
+code<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/info-tooltip/" class="prev">
+        InfoTooltip
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/page-title/">
+        Page title
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/26.c82c48a9.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/page-title/index.html b/guide/components/page-title/index.html
new file mode 100644
index 00000000..299ea716
--- /dev/null
+++ b/guide/components/page-title/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Page title | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/27.f4d5e099.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" aria-current="page" class="active sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="page-title"><a href="#page-title" class="header-anchor">#</a> Page title</h1> <p>The <code>&lt;page-title&gt;</code> component will automatically render the page title that
+corresponds with the title property set in the route record's meta field in
+<code>src/router/routes.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/router/routes.js</span>
+  <span class="token punctuation">{</span>
+    path<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+    name<span class="token operator">:</span> <span class="token string">'login'</span><span class="token punctuation">,</span>
+    component<span class="token operator">:</span> Login<span class="token punctuation">,</span>
+    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
+      title<span class="token operator">:</span> i18n<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'appPageTitle.login'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre></div><p>Optional page descriptions can be included by using the description prop
+<code>:description</code> prop and passing in the i18n localized text string. Translations
+are found in the <code>src/locales</code> folder.</p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Example: `src/views/AccessControl/Ldap/Ldap.vue`
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-title</span> <span class="token attr-name">:description</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageLdap.pageDescription<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue" target="_blank" rel="noopener noreferrer">View the page title component source
+code<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/page-section/" class="prev">
+        Page section
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/status-icon/">
+        StatusIcon
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/27.f4d5e099.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/status-icon/index.html b/guide/components/status-icon/index.html
new file mode 100644
index 00000000..033ccbf4
--- /dev/null
+++ b/guide/components/status-icon/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>StatusIcon | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/4.e088be67.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" aria-current="page" class="active sidebar-link">StatusIcon</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-default-status" class="sidebar-link">Status icon with default status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-success-status" class="sidebar-link">Status icon with success status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-info-status" class="sidebar-link">Status icon with info status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-warning-status" class="sidebar-link">Status icon with warning status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-danger-status" class="sidebar-link">Status icon with danger status</a></li></ul></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="statusicon"><a href="#statusicon" class="header-anchor">#</a> StatusIcon</h1> <p>The StatusIcon component is used to add an icon that represents one of the
+following statuses:</p> <ul><li>success</li> <li>info</li> <li>warning</li> <li>danger</li></ul> <p>To use this component:</p> <ol><li>Import it into the single file component (SFC)</li> <li>Add the <code>&lt;status-icon /&gt;</code> tag</li> <li>Add the optional status prop and set the value to one of the statuses</li> <li>Add the translated text to associate with the icon</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code>import StatusIcon from '@/components/Global/StatusIcon'
+</code></pre></div><h2 id="status-icon-with-default-status"><a href="#status-icon-with-default-status" class="header-anchor">#</a> Status icon with default status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span> <span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAnCAYAAAB5XdqFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAS0SURBVFhH1ZhJTxRbFIAPIAiKIFMkYhAIG4ZIGARDJHGByLAQEkwMG/8crCAhhHlw4woCMUAYFsgCkFkZVSbhvfedVEF3VXVT3dUxzy8hTd+qrvvVPeeee6ui/vkP+QuINj7/90RsRL98+SIrKytyfHwsMTExkpKSIgUFBZKWlmac4Y2wRH/+/Cl7e3vy8eNH2d3dVbE7d+7oZ1RUlJ5zdXUlv3//lsvLS/2srq6W4uJivYFwCFl0YWFBJicnVTQ+Pl7lboMuLi4u5Pz8XJ49eyb5+fmSk5NjHHWHa9EfP35IT0+PHBwcSHR0tCtBK6Ywv62oqJDnz58bR27Hleja2pq0t7fLw4cPVdIMb7iQFowu1/rw4YM8ePDAOBKYW0WXlpZkaGhI4uLiPAtaIXdjY2OlpaVF0tPTjVZngpYnRnJ0dFQvFmlJIAVIhd7eXk2pYAQU3dnZkY6ODg0Pf74QBBcZcyvcPLJUkU+fPhmtzgQUZeKYOekLguQY7ZQeryBLWi0vL8vMzIzRasdRdHx8XJPdGm4kT05O5MWLF/L69Ws9HglZSEhIkImJCeObHZsogl+/flUJqyjJX15eLqWlpVoH3717p6Gj3Sv0Rd+Dg4NGiz82UZZCRJ3qJOHe3NzUUQWWx/r6ei38XmUR5fpnZ2eOUbKJMvtYDq2jCVyISdbX1ye/fv3StuzsbKmtrdXK4FWWwVlfX9d8teInyuz7/PmzduoE8hzb3t6Wrq4u+fbtm7Yj29raqnnmRZbrm3sDK36iTBanSeQLx5il7JIGBgbk6OhI29lsNDQ0yL179zzJErXDw0Pj2w1+okgEk/SFkUWyv79f9wGQmZkpdXV1eiMU8nAg/Cw01t/bcjQUEGIX1dnZKVtbW9r2+PFjrQas3+HIMqLfv3+3RcWTKDCyTKzh4WHtAJKTk6WpqUkSExPDkiX9rCufZ1FAlvCTBmZ+UbrevHmjORuKLIJ37961paBtMoULskww0mBjY0PbyFnSIDU1VUfJDSzPGRkZej1fbCOKbLjCXByhkZGR65wl/KRBUlKSq5GlPLHqUct98RNlyLOysvSuwoUOyFmWwv39fW1DsrGxUSeYU/75Qt/UYyt+ooxISUmJ6zAFAlmWWRaF1dVVbWNjzKLw6NEjndFOsqbk/fv3jZYbbKHnRP68jCogS6jHxsauZZlYzc3N+ukkStgpb0+fPjVabrCJchJ3HYntG7Knp6f6KGOWLr6z8bDOalM8NzdXP604PjOxMeju7tZUcLtSBYObRrqwsFDm5+c1WhR2XziH+tvW1ma0+GMbUWBCFRUVec5VE5ZFRKanpx0lgdLGljEQjqJQU1Nz3UEkQI4IWSUJKJKvXr3SehuIgKKE6v3793rhSMlaQZJ8ZVAqKyuNVmcCigJ3+PbtW/3fy9YtECy7CN4mCa7elLCdY2kkRDx2OOWYW+iOCCHJk0FZWZlxJDiu3z3B7OysTE1NaSds8UIRNgWprZSgly9fBs1JKyGJAs9Uc3Nzsri4eC1MPgcqY8xyqgeSeXl5WtBDeTlmErKoCds5JHgHwKtILmOV5TiPKFVVVfLkyRNdGrmxcAhb9E8T/qz4w/wloiL/AiewfGYa++arAAAAAElFTkSuQmCC" alt="StatusIcon default icon example"></p> <h2 id="status-icon-with-success-status"><a href="#status-icon-with-success-status" class="header-anchor">#</a> Status icon with success status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span>
+<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span>
+<span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,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" alt="StatusIcon success icon example"></p> <h2 id="status-icon-with-info-status"><a href="#status-icon-with-info-status" class="header-anchor">#</a> Status icon with info status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span>
+<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span>
+<span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAkCAYAAAD/yagrAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAVESURBVFhH1Zh/bFNVFMe//b2u29rNdWWMgcvc3CJoMCYuoH/4h4kEMfCPEoJR4w8MMxpFMYSIxEwxUZxGiehiQpAQjInGqImIEDVkRgXU6RICYTKQjc2127quP9979Zy7t6zre699bVHiJ7nrdtrd++2555x77rOkCfwPuCJCv/0lht//TMFmtcCi2hhZSaO60oYNd3rm2YuhaKGj4zK2vT+O0JSC88MSQmEFFqv6pgrP7HJY0Npoh8tpwUN3VeLuFW713cIoWOgICezYNIzpRBpejwVW8qLdBlgt5E0dtyk0vSTTqwLEEgqGgzK+fj2AjhtcKC/L+mY5MC00kUrjtYNh7PsqAocdNIrbTF4tGJZxa7sLe5+tQaCaJjOBaaG3dV7GUFCC22URsVgKvGKUvOursOKLV+tQf01+sXmFSnIa7fdfEr+XUZxZ9PZXRaHkicRnpuPY5JGLJO0S79SBF/xYudSlWvXJKXQqqmBj1xj6zyfhdlp1Y3AWFsls3eBFSkrjm5NxnDqTzCuWhdZUWvFJF3uWgt2AnEL3H45gxwcTqCzP7UkmElPQua4KW+6rEn9Pk2eb1/+FumrjxWfhJPN6rDjRs1C1aDFMuwEqOZvfCJoSOUtm6HKYmMXtsmJsUsFTb4dUixZDj656bkSIzbd1s/DW80Q7H/RRSQK++zWOIyfiIvnMwP+flIDjexagzqfdBV2hA0MprH5+lLKbvFRAhvNJxDHHNZWnLcsT15nw52NUm++9w4NXHqtWrXPobv2uA5MiIwsRyXDZctOWuxy89eZFMhxevN7giCSSMRvDGLXZzK/CyTA2KYsRpKOURzROR1GBOOkL/nw6SSETUy1zaIT2/pHAqbNJcfqYgUWuu70cP+6tx7E3F4jxw7v1eHxtJaapEhQChwzPx8dzNhqhF/+WMBKSTZ8+MmkJUAlqrLOjbbFDjCUBu6iJUuFOFdufMCO00ASyU4icuSjh6MkYDv80t2UyNSLF4KCE7xtIimM2E8MYNQsnTm9/Ak++FcJL+yZUa/HwF+87l6IDY/52lCx05jBIixDgVq5U2JNeala4dcykZKHMTGnhV9VQAtwEtTU6RHnLRCOUaxh/+GrBCdi2WFtyNEKXX+dEK31Q0im6/wUyOUmvhmuEti1xYlmTE8mr4FU+grnbWlSrPes1QpmKcjKnZ87rfHCY8PnOg5uKWSRuMlQ7DzPw52+53okVy8pUyxy6Qnc9Wi1OpnxZzCIb/DYRLjc1O7G0iWqVit9L9hYnbmx24OZWZ16x7BS+bLdf61Qt8zFs817+cAI9n0dQRQ2tERMRBe9tqcGqjnLVYkztmgtYWGt8LnNs8o6cPdigWuZjqGLrei/iybRuJ5MJ956lwr4aomv0oRf9qkVLzqvI6cEU1m4fFTWST4xsOKaWtzjQVO/IWdKcdisOHYvo3uN5+XA0jYdXV2DHAz7VqiWnUOaz41E8805IdOp6PQCLNVN3jR428LW5qd6Oj3b66ZJnfL/KK5TZ82kY23sm0EBlo5A+NRf8BCVOXRI3Qf37G3R3LBNTQpnvf4ujsztIDXEaHrdhaJuC455XbaR28MjugGrNjWmhTN+5BLo/nsKXvTH4fdaCvcsrhaMzV+OuR7y4Z6VHfSc/BQlluIwcPRXHE90h8QzJV8mdDldAmox+iDCmwbNyReBXHnzvH59SsG1jFTatqUKgxjge9ShYaDZPU6INXpZEm8dPVnjw07sKt0XUYL7f81bv3lyDFuqKiqVkoZlcGpNxYSQlrr2L/HaRzcU+9cvmigr99wD+AWcAYQB6puA5AAAAAElFTkSuQmCC" alt="StatusIcon info icon example"></p> <h2 id="status-icon-with-warning-status"><a href="#status-icon-with-warning-status" class="header-anchor">#</a> Status icon with warning status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span>
+<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span>
+<span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAIAAAAnX375AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAQPSURBVFhHvZdfTBxFHMdnZvd2j+M4/hRtU4xKJXDEpvBiamKbNjE10Zj6atPHmj6Aib40fZIno/jsn5g04cGQ+u9BTTQanvzTNvWlqYoE1BgBoQWEE7jb278z/mZnbuG4ub3FFj7Z3M7vl5357u83v52Zw4wxtL8Qed9HdhFl+c9L/voP0CW8KtBy6tCFdNfL0kxAA0kWbLpL46WZIUQRrpcRhsQYuSdvaek+rGVCb13iJJ2F9+zZkcBaxSnp4dFti1AQDcAcpHc8nu5+wzhwVrpUqCWpt1L+Y9hd/BRp9YNTwQL+Tkbn2eajX0hXDQrJwJrZuJnn0RCEa2JqCIzHfJTqPJUd+FbZe2cIgTW1fiPP3f9LD4BeWEfeP98Vb5+UrmqqJIPSdPH2CegAyaynx4OoXPWAviSFvNVrmz+dkq5tVEk6f79J7UJtgURwGQhCa8LExMSIUQXCWL+3ps5Ju8KWpLvycXn2A14vMfmkSG893XbCajtp547PMk+6lfAMa8grfB0Ub0lXyJakNfUiMWP1BNQWd+atiEYMMEGBve4svCvtECnpLV+lvmjeZyC99vwYdRelHUmW59+KKZl7gY+Jkbs8Lm0hSe155P8bUzX3CARanr4sDSHprnwUlOb2TnIHXJJRD8p9L7IqgIEZ1FHpV2FyScwR5p6BYWX4TDRl+ew1EFFQ/Fm090UyTCH1lkNjfyTDdVEzHwkNUT6wdsaultVU3jLauBMA42u5p0Sb98dIg/JJpMofs5m/QZ1Fav8lMtYQvhcwZB6+KEy+RfsbPxYnn2VeIUndMgqra9gifIdKAgTDXNRxRsbEo9Rzx4n5KOwSSYB1EVZ/fiXPK4P9p1e2o4nRs4PRQa0hPFCf/yZBhJgdmJB2JJnpG4vf/CLgQEUy3ebDw8R8gB+uGgIhtvdjrUOakSSQ6RuBd48HIgO9lsGbmZ53mvMfYqM1PlYeoo+Mw0NYb5Gu7ZLGQ68SAzdIF4NZ7CLGg9DU259Od70SUwF8migyDj6z4yy/JUn09uzAdf4ZxKhCSVdSASN6a99sG0AFRs39n8h2hZ3nWGfpaumX8/CVKz8YeJbouRQcxolJ3bvu0lfquoV8wo+DsseuGIdeks4KiqOzPfe69dtr4mhZi0gXHzI8TSkAPShpiprzb5uqv0fqPwje2kRp8jnmByC8K2AwSLyeyzd1j6Y6X5DeatSSACxJzvyovfA5MXhAQMzaJMcI9cyu85ne97GWDV0K6koKvNUvrelzgV2USQZVIR+mlgO3sMW/16b23BPTop5jaCApCJwFa/J5pGWYX6Dl31nggwBMJE5lSfoIJmmSfiyTH8fKya8hkWQECyyvMMHcO8xfw6mDpKlHbztdP99qdid5H0DoP4bpoyBCzuShAAAAAElFTkSuQmCC" alt="StatusIcon warning icon example"></p> <h2 id="status-icon-with-danger-status"><a href="#status-icon-with-danger-status" class="header-anchor">#</a> Status icon with danger status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>status-icon</span>
+<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span>
+<span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><img src="data:image/png;base64,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" alt="StatusIcon danger icon example"></p> <h3 id="example-of-appheader-with-status-icon"><a href="#example-of-appheader-with-status-icon" class="header-anchor">#</a> Example of AppHeader with status icon</h3> <p><img src="/webui-vue/assets/img/appHeaderWithStatusIcon.8a62f412.png" alt="AppHeader with status icon example"></p> <h3 id="example-of-event-logs-with-status-icon"><a href="#example-of-event-logs-with-status-icon" class="header-anchor">#</a> Example of Event logs with status icon</h3> <p><img src="/webui-vue/assets/img/eventLogsWithSatusIcon.52c6d53a.png" alt="EventLogs with status icon example"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/page-title/" class="prev">
+        Page title
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/table/">
+        Table
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/4.e088be67.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/table/index.html b/guide/components/table/index.html
new file mode 100644
index 00000000..64453b07
--- /dev/null
+++ b/guide/components/table/index.html
@@ -0,0 +1,563 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Table | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/3.4aa24478.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" aria-current="page" class="active sidebar-link">Table</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#basic-table" class="sidebar-link">Basic table</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#sort" class="sidebar-link">Sort</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#expandable-rows" class="sidebar-link">Expandable rows</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#search" class="sidebar-link">Search</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#row-actions" class="sidebar-link">Row actions</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#filters" class="sidebar-link">Filters</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#batch-actions" class="sidebar-link">Batch actions</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/table/#pagination" class="sidebar-link">Pagination</a></li></ul></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="table"><a href="#table" class="header-anchor">#</a> Table</h1> <p>All tables in the application are using the <a href="https://bootstrap-vue.org/docs/components/table" target="_blank" rel="noopener noreferrer">BoostrapVue table
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>To use the component, include the <code>&lt;b-table&gt;</code> tag in the template. The component
+is registered globally so does not need to be imported in each SFC.</p> <h2 id="basic-table"><a href="#basic-table" class="header-anchor">#</a> Basic table</h2> <p>There are a few required properties to maintain consistency across the
+application. The full list of options can be viewed on the <a href="https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props" target="_blank" rel="noopener noreferrer">Bootstrap-vue table
+component's documentation
+page<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h3 id="required-properties"><a href="#required-properties" class="header-anchor">#</a> Required properties</h3> <ul><li><code>items</code> - renders table items</li> <li><code>fields</code> - renders table header</li> <li><code>hover</code> - enables table row hover state</li> <li><code>responsive</code> or <code>stacked</code> - makes the table responsive (enables horizontal
+scrolling or stacked view) at the defined breakpoint</li> <li><code>show-empty</code> <em>(required if table data is generated dynamically)</em> - shows an
+empty message if there are no items in the table</li> <li><code>empty-text</code> <em>(required if table data is generated dynamically)</em> - the
+translated empty message</li></ul> <p><img src="/webui-vue/assets/img/table.2f5c6005.png" alt="Basic table example"> <img src="/webui-vue/assets/img/table-empty.239c6ec7.png" alt="Basic empty tableexample"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+    <span class="token attr-name">hover</span>
+    <span class="token attr-name">show-empty</span>
+    <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:empty-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>global.table.emptyMessage<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+  <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      items<span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          name<span class="token operator">:</span> <span class="token string">'Babe'</span><span class="token punctuation">,</span>
+          age<span class="token operator">:</span> <span class="token string">'3 years'</span><span class="token punctuation">,</span>
+          color<span class="token operator">:</span> <span class="token string">'white, orange, grey'</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span>
+          name<span class="token operator">:</span> <span class="token string">'Grey Boy'</span><span class="token punctuation">,</span>
+          age<span class="token operator">:</span> <span class="token string">'4 months'</span><span class="token punctuation">,</span>
+          color<span class="token operator">:</span> <span class="token string">'grey'</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'table.name'</span><span class="token punctuation">)</span> <span class="token comment">//translated label</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'table.age'</span><span class="token punctuation">)</span> <span class="token comment">//translated label</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'color'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'table.color'</span><span class="token punctuation">)</span> <span class="token comment">// translated label</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="sort"><a href="#sort" class="header-anchor">#</a> Sort</h2> <p>To enable table sort, include <code>sortable: true</code> in the fields array for sortable
+columns and add the following props to the <code>&lt;b-table&gt;</code> component:</p> <ul><li><code>sort-by</code></li> <li><code>no-sort-reset</code></li> <li><code>sort-icon-left</code></li></ul> <p><img src="/webui-vue/assets/img/table-sort.6a74b1a4.png" alt="Table sort example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+    <span class="token attr-name">hover</span>
+    <span class="token attr-name">no-sort-reset</span>
+    <span class="token attr-name">sort-icon-left</span>
+    <span class="token attr-name">sort-by</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rank<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+  <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> <span class="token comment">//should be translated</span>
+          sortable<span class="token operator">:</span> <span class="token boolean">true</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'rank'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token string">'Rank'</span><span class="token punctuation">,</span> <span class="token comment">//should be translated</span>
+          sortable<span class="token operator">:</span> <span class="token boolean">true</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token string">'Description'</span><span class="token punctuation">,</span> <span class="token comment">//should be translated</span>
+          sortable<span class="token operator">:</span> <span class="token boolean">false</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="expandable-rows"><a href="#expandable-rows" class="header-anchor">#</a> Expandable rows</h2> <p>To add an expandable row in the table, add a column for the expand button in the
+fields array. Include the tdClass <code>table-row-expand</code> to ensure icon rotation is
+handled. Use the built in <a href="https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots" target="_blank" rel="noopener noreferrer">cell
+slot<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to
+target the expand button column and add a button with the chevron icon.</p> <p>Include the
+<a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js" target="_blank" rel="noopener noreferrer">TableRowExpandMixin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.
+The mixin contains the dynamic <code>aria-label</code> and <code>title</code> attribute values that
+need to be included with the expand button. The <code>toggleRowDetails</code> method should
+be the button's click event callback. Be sure to pass the <code>row</code> object to the
+function.</p> <p>Use the <a href="https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots" target="_blank" rel="noopener noreferrer">row-details
+slot<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to
+format the expanded row content. The slot has access to the row <code>item</code> property.</p> <h3 id="summary"><a href="#summary" class="header-anchor">#</a> Summary</h3> <ol><li>Add a column for the expansion row button with the tdClass,
+<code>table-row-expand</code></li> <li>Include the <code>TableRowExpandMixin</code> to handle the dynamic aria label, title,
+and row expansion toggling</li> <li>Use the <code>#cell</code> slot to target the expandable row column and add the button
+with accessible markup and click handler</li> <li>Use the <code>#row-details</code> slot to format expanded row content</li></ol> <p><img src="/webui-vue/assets/img/table-expand-row.fa48151d.png" alt="Table row expand example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+    <span class="token attr-name">hover</span>
+    <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+  <span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell(expandRow)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span>
+        <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">:aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>expandRowLabel<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>expandRowLabel<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleRowDetails(row)<span class="token punctuation">&quot;</span></span>
+      <span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-chevron</span> <span class="token punctuation">/&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#row-details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>Expanded row details<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
+      {{ row.item }}
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-table</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> IconChevron <span class="token keyword">from</span> <span class="token string">'@carbon/icons-vue/es/chevron--down/20'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> TableRowExpandMixin<span class="token punctuation">,</span> <span class="token punctuation">{</span> expandRowLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/TableRowExpandMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  components<span class="token operator">:</span> <span class="token punctuation">{</span> IconChevron <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  mixins<span class="token operator">:</span> <span class="token punctuation">[</span> TableRowExpandMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'expandRow'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+          tdClass<span class="token operator">:</span> <span class="token string">'table-row-expand'</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token operator">...</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      expandRowLabel
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="search"><a href="#search" class="header-anchor">#</a> Search</h2> <p>The table is leveraging <a href="https://bootstrap-vue.org/docs/components/table#filtering" target="_blank" rel="noopener noreferrer">BootstrapVue table
+filtering<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for
+search. Add the
+<a href="https://bootstrap-vue.org/docs/components/table#filter-events" target="_blank" rel="noopener noreferrer">@filtered<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> event
+listener onto the <code>&lt;b-table&gt;</code> component. The event callback should track the
+total filtered items count.</p> <p>Import the <code>&lt;search&gt;</code> and <code>&lt;table-cell-count&gt;</code> components and include them in
+the template above the <code>&lt;b-table&gt;</code> component.</p> <p>Include the
+<a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/SearchFilterMixin.js" target="_blank" rel="noopener noreferrer">SearchFilterMixin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.
+Add the <code>@change-search</code> and <code>@clear-search</code> event listeners on the <code>&lt;search&gt;</code>
+component and use the corresponding <code>onChangeSearchInput</code> and
+<code>onClearSearchInput</code> methods as the event callbacks. The table should also
+include the dynamic <code>:filter</code> prop with <code>searchFilter</code> set as the value.</p> <p>The <code>&lt;table-cell-count&gt;</code> component requires two properties, total table item
+count and total filtered items count.</p> <p>Add the <code>:empty-filtered-text</code> prop to the table to show the translated message
+if there are no search matches.</p> <p><img src="/webui-vue/assets/img/table-search.50bb96ff.png" alt="Table search example"></p> <p><img src="/webui-vue/assets/img/table-search-active.8622acb6.png" alt="Table search active example"></p> <p><img src="/webui-vue/assets/img/table-search-empty.a9a05017.png" alt="Table search empty example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-row</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>search</span>
+        <span class="token attr-name">@changeSearch</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onChangeSearchInput<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">@clearSearch</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onClearSearchInput<span class="token punctuation">&quot;</span></span>
+      <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-cell-count</span>
+        <span class="token attr-name">:filtered-items-count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filteredItemsCount<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">:total-number-of-cells</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.length<span class="token punctuation">&quot;</span></span>
+      <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-row</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+    <span class="token attr-name">hover</span>
+    <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>searchFilter<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:empty-filtered-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>global.table.emptySearchMessage<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">@filtered</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onFiltered<span class="token punctuation">&quot;</span></span>
+  <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> Search <span class="token keyword">from</span> <span class="token string">'@/components/Global/Search'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> TableCellCount <span class="token keyword">from</span> <span class="token string">'@/components/Global/TableCellCount'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> SearchFilterMixin<span class="token punctuation">,</span> <span class="token punctuation">{</span> searchFilter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/SearchFilterMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  components<span class="token operator">:</span> <span class="token punctuation">{</span> Search<span class="token punctuation">,</span> TableCellCount <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  mixins<span class="token operator">:</span> <span class="token punctuation">[</span> SearchFilterMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      fields<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      searchFilter<span class="token punctuation">,</span>
+      filteredItems<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">filteredItemsCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>filteredItems<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">onFiltered</span><span class="token punctuation">(</span><span class="token parameter">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>filteredItems <span class="token operator">=</span> items<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="row-actions"><a href="#row-actions" class="header-anchor">#</a> Row actions</h2> <p>To add table row actions, add a column for the action buttons in the table. Then
+in the array of table items, add a corresponding array of actions for each item.
+The array should have each desired row action with a <code>value</code> and <code>title</code>
+property.</p> <p>Import the <code>&lt;table-row-action&gt;</code> component. Provide the <code>value</code> and <code>title</code> props
+to the component and use the named <code>#icons</code> slot to include an icon. The
+component will emit a <code>@click-table-action</code> with the event value.</p> <p><img src="/webui-vue/assets/img/table-row-actions.cfff2d58.png" alt="Table row actions example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+    <span class="token attr-name">hover</span>
+    <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsWithActions<span class="token punctuation">&quot;</span></span>
+    <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+  <span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell(actions)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-row-action</span>
+        <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(action, index) in row.item.actions<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action.value<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action.title<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">@click-table-action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTableRowAction($event, row.item)<span class="token punctuation">&quot;</span></span>
+      <span class="token punctuation">/&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-edit</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action.value === <span class="token punctuation">'</span>edit<span class="token punctuation">'</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>icon-delete</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>action.value === <span class="token punctuation">'</span>delete<span class="token punctuation">'</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table-row-action</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-table</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> IconDelete <span class="token keyword">from</span> <span class="token string">'@carbon/icons-vue/es/trash-can/20'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> IconEdit <span class="token keyword">from</span> <span class="token string">'@carbon/icons-vue/es/edit/20'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> TableRowAction <span class="token keyword">from</span> <span class="token string">'@/components/Global/TableRowAction'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  components<span class="token operator">:</span> <span class="token punctuation">{</span> IconDelete<span class="token punctuation">,</span> IconEdit<span class="token punctuation">,</span> TableRowAction <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token operator">...</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'actions'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+          tdClass<span class="token operator">:</span> <span class="token string">'text-right text-nowrap'</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">itemsWithActions</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token punctuation">{</span>
+          <span class="token operator">...</span>item<span class="token punctuation">,</span>
+          actions<span class="token operator">:</span> <span class="token punctuation">[</span>
+            <span class="token punctuation">{</span>
+              value<span class="token operator">:</span> <span class="token string">'edit'</span><span class="token punctuation">,</span>
+              title<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.edit'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            <span class="token punctuation">{</span>
+              value<span class="token operator">:</span> <span class="token string">'delete'</span><span class="token punctuation">,</span>
+              title<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.delete'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token punctuation">]</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">onTableRowAction</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// row action callback</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="filters"><a href="#filters" class="header-anchor">#</a> Filters</h2> <p>To add a table dropdown filter:</p> <ol><li>Import the <code>&lt;table-filter&gt;</code>component and TableFilterMixin.</li> <li>Add a filters prop to the <code>&lt;table-filters&gt;</code> component. This prop should be an
+array of filter groups–each required to have a key, label, and values prop.</li></ol> <p>The <code>label</code> prop value should be the translated filter group label. The <code>key</code>
+prop will usually match the filtered by table column key. The <code>values</code> prop
+should be an array of filter values that will render as a list of checkbox items
+in the dropdown.</p> <p>The component will emit a <code>@filter-change</code> event that will provide the filter
+group and all selected values in the group. Use the getFilteredTableData method
+from the TableFilterMixin to show the filtered table data.</p> <p><img src="/webui-vue/assets/img/table-filter.9b3a7161.png" alt="Table filter example"></p> <p><img src="/webui-vue/assets/img/table-filter-active.e3119ef9.png" alt="Table filter active example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-row</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-filter</span>
+          <span class="token attr-name">:filters</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableFilters<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">@filter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTableFilterChange<span class="token punctuation">&quot;</span></span>
+        <span class="token punctuation">/&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-row</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+      <span class="token attr-name">hover</span>
+      <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filteredItems<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+    <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> TableFilter <span class="token keyword">from</span> <span class="token string">'@/components/Global/TableFilter'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> TableFilterMixin <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/TableFilterMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  components<span class="token operator">:</span> <span class="token punctuation">{</span> TableFilter <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  mixins<span class="token operator">:</span> <span class="token punctuation">[</span> TableFilterMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      fields<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      tableFilters<span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'table.status'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+          key<span class="token operator">:</span> status<span class="token punctuation">,</span>
+          values<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Open'</span><span class="token punctuation">,</span> <span class="token string">'Closed'</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      activeFilters<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">filteredItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getFilteredTableData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>activeFilters<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">onTableFilterChange</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> activeFilters <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>activeFilters <span class="token operator">=</span> activeFilters<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="date-filter"><a href="#date-filter" class="header-anchor">#</a> Date filter</h3> <p>To add a date filter, import the <code>&lt;table-date-filter&gt;</code> component. It will emit a
+<code>@change</code> event with the user input date values. There is a date filter method,
+<code>getFilteredTableDataByDate</code>, in the <code>TableFilterMixin</code>.</p> <h2 id="batch-actions"><a href="#batch-actions" class="header-anchor">#</a> Batch actions</h2> <p>Batch actions allow a user to take a single action on many items in a table at
+once.</p> <p>To add table batch actions:</p> <ol><li>Import the <code>&lt;table-toolbar&gt;</code>component and BVTableSelectableMixin</li> <li>Add the <code>selectable</code>, <code>no-select-on-click</code> props and a unique <code>ref</code> to the
+table. The table will emit a <code>@row-selected</code> event. Use the <code>onRowSelected</code>
+mixin method as a callback and provide the <code>$event</code> as the first argument and
+the total table items count as the second argument.</li> <li>Add a table column for checkboxes. The table header checkbox should use the
+<code>tableHeaderCheckboxModel</code> and <code>tableHeaderCheckboxIndeterminate</code> values
+provided by the mixin. The table header checkbox should also use the
+<code>onChangeHeaderCheckbox</code> method as a callback for the <code>@change</code> event with
+the table <code>ref</code> passed as an argument. The table row checkboxes should use
+the <code>toggleSelectRow</code> method as a callback for the <code>@change</code> event with the
+table <code>ref</code> passed as the first argument and the row index passed as the
+second argument.</li> <li>Add an actions prop to the <code>&lt;table-toolbar&gt;</code> component. This prop should be
+an array of toolbar actions–required to have a value and label prop. Add the
+<code>selected-items-count</code> prop to the <code>&lt;table-toolbar&gt;</code> component. The component
+will emit a <code>@batch-action</code> event that will provide the user selected action.
+It will also emit a <code>@clear-selected</code> event. Provide the <code>clearSelectedRows</code>
+as a callback with the table <code>ref</code> passed as an argument.</li></ol> <p><img src="/webui-vue/assets/img/table-batch-action.97b76488.png" alt="Table batch action example"></p> <p><img src="/webui-vue/assets/img/table-batch-action-active.f9a8c36f.png" alt="Table batch action active example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-toolbar</span>
+      <span class="token attr-name">:selected-items-count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectedRows.length<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:actions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableToolbarActions<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">@clear-selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearSelectedRows($refs.table)<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">@batch-action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onBatchAction<span class="token punctuation">&quot;</span></span>
+    <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+      <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">hover</span>
+      <span class="token attr-name">selectable</span>
+      <span class="token attr-name">no-select-on-click</span>
+      <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filteredItems<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">@row-selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onRowSelected($event, items.length)<span class="token punctuation">&quot;</span></span>
+    <span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#head(checkbox)</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-checkbox</span>
+          <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableHeaderCheckboxModel<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">:indeterminate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableHeaderCheckboxIndeterminate<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onChangeHeaderCheckbox($refs.table)<span class="token punctuation">&quot;</span></span>
+        <span class="token punctuation">/&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell(checkbox)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-checkbox</span>
+          <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row.rowSelected<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleSelectRow($refs.table, row.index)<span class="token punctuation">&quot;</span></span>
+        <span class="token punctuation">/&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-table</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> TableToolbar <span class="token keyword">from</span> <span class="token string">'@/components/Global/TableToolbar'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> BVTableSelectableMixin<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  tableHeaderCheckboxModel<span class="token punctuation">,</span>
+  tableHeaderCheckboxIndeterminate<span class="token punctuation">,</span>
+  selectedRows
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/BVTableSelectableMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  components<span class="token operator">:</span> <span class="token punctuation">{</span> TableToolbar <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  mixins<span class="token operator">:</span> <span class="token punctuation">[</span> BVTableSelectableMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      fields<span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          key<span class="token operator">:</span> <span class="token string">'checkbox'</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token operator">...</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      tableToolbarActions<span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          value<span class="token operator">:</span> <span class="token string">'edit'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.edit'</span><span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span>
+          value<span class="token operator">:</span> <span class="token string">'delete'</span><span class="token punctuation">,</span>
+          label<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.delete'</span><span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      tableHeaderCheckboxModel<span class="token punctuation">,</span>
+      tableHeaderCheckboxIndeterminate<span class="token punctuation">,</span>
+      selectedRows
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">onBatchAction</span><span class="token punctuation">(</span><span class="token parameter">action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// Do something with selected batch action and selected rows</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="pagination"><a href="#pagination" class="header-anchor">#</a> Pagination</h2> <p>To add table pagination:</p> <ol><li>Import the BVPaginationMixin</li> <li>Add the <code>per-page</code> and <code>current-page</code> props to the <code>&lt;table&gt;</code> component.</li> <li>Add the below HTML snippet to the template. Make sure to update the
+<code>total-rows</code> prop.</li></ol> <div class="language-vue extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-row</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-group</span>
+      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-pagination-select<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>global.table.itemsPerPage<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">label-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-items-per-page<span class="token punctuation">&quot;</span></span>
+    <span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-select</span>
+        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-items-per-page<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsPerPageOptions<span class="token punctuation">&quot;</span></span>
+      <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-group</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-pagination</span>
+      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentPage<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">first-number</span>
+      <span class="token attr-name">last-number</span>
+      <span class="token attr-name">:per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:total-rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getTotalRowCount(items.length)<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-event-logs<span class="token punctuation">&quot;</span></span>
+    <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-row</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><img src="/webui-vue/assets/img/table-pagination.7f542578.png" alt="Table pagination example"></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-table</span>
+      <span class="token attr-name">hover</span>
+      <span class="token attr-name">responsive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:items</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filteredItems<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:fields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fields<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">:current-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentPage<span class="token punctuation">&quot;</span></span>
+    <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-row</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-group</span>
+          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-pagination-select<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>global.table.itemsPerPage<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">label-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-items-per-page<span class="token punctuation">&quot;</span></span>
+        <span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-select</span>
+            <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-items-per-page<span class="token punctuation">&quot;</span></span>
+            <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+            <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemsPerPageOptions<span class="token punctuation">&quot;</span></span>
+          <span class="token punctuation">/&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-group</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-col</span> <span class="token attr-name">sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-pagination</span>
+          <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentPage<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">first-number</span>
+          <span class="token attr-name">last-number</span>
+          <span class="token attr-name">:per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>perPage<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">:total-rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getTotalRowCount(items.length)<span class="token punctuation">&quot;</span></span>
+          <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-event-logs<span class="token punctuation">&quot;</span></span>
+        <span class="token punctuation">/&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-col</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-row</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> BVPaginationMixin<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  currentPage<span class="token punctuation">,</span>
+  perPage<span class="token punctuation">,</span>
+  itemsPerPageOptions
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/BVPaginationMixin'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  mixins<span class="token operator">:</span> <span class="token punctuation">[</span> BVPaginationMixin <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      fields<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      currentPage<span class="token punctuation">,</span>
+      perPage<span class="token punctuation">,</span>
+      itemsPerPageOptions
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/status-icon/" class="prev">
+        StatusIcon
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/toasts/">
+        Toasts
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/3.4aa24478.js" defer></script>
+  </body>
+</html>
diff --git a/guide/components/toasts/index.html b/guide/components/toasts/index.html
new file mode 100644
index 00000000..fdd07ddd
--- /dev/null
+++ b/guide/components/toasts/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Toasts | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/16.8d8a2baa.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" aria-current="page" class="active sidebar-link">Toasts</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/toasts/#additional-options" class="sidebar-link">Additional options</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="toasts"><a href="#toasts" class="header-anchor">#</a> Toasts</h1> <p>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 <code>success</code> variant is
+displayed.  If the user action was not successful, a toast message with the
+<code>danger</code> variant is displayed.</p> <p>There are different transitions for the toast messages. The <code>success</code> toast
+message will auto-hide after 10 seconds. The user must manually dismiss the
+<code>informational</code>, <code>warning</code>, and <code>error</code> toast messages.  The <code>BVToastMixin</code>
+provides a simple API that generates a toast message that meets the transition
+guidelines.</p> <img src="/webui-vue/assets/img/toast.9ff5053e.png" alt="Toast message examples" style="max-width:350px;"> <div class="language-js extra-class"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token comment">// Sample method from Reboot BMC page</span>
+<span class="token function">rebootBmc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>$store
+  <span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'controls/rebootBmc'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">message</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">successToast</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">)</span>
+  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">errorToast</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// Methods used in this example</span>
+methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">makeSuccessToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">successToast</span><span class="token punctuation">(</span><span class="token string">'This is a success toast and will be dismissed after 10 seconds.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">makeErrorToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">errorToast</span><span class="token punctuation">(</span><span class="token string">'This is an error toast and must be dismissed by the user.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">makeWarningToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">warningToast</span><span class="token punctuation">(</span><span class="token string">'This is a warning toast and must be dismissed by the user.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">makeInfoToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">infoToast</span><span class="token punctuation">(</span><span class="token string">'This is an info toast and must be dismissed by the user.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="additional-options"><a href="#additional-options" class="header-anchor">#</a> Additional options</h2> <p>The first argument for each method will be the toast body content. It accepts a
+string value or an array of strings for toasts needing to display multiple lines
+of content.</p> <p>The BVToastMixin also accepts additional options as a second argument. Pass an
+object with a <code>title</code> property to change the default toast title. Include a
+<code>refreshAction</code> property, set to true, to include a link that refreshes the
+application. Include a <code>timestamp</code> property, set to true, to include a timestamp
+in the toast.</p> <p><img src="/webui-vue/assets/img/toast-options.5d0a9c44.png" alt="Toast message options example" style="max-width:350px;"></p> <div class="language-js extra-class"><pre class="language-js"><code>
+methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">makeInfoToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">infoToast</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+      <span class="token string">'This is a toast with multi-lined body content.'</span><span class="token punctuation">,</span>
+      <span class="token string">'Just pass an array of strings!'</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      title<span class="token operator">:</span> <span class="token string">'This is an example'</span><span class="token punctuation">,</span>
+      refreshAction<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+      timestamp<span class="token operator">:</span> <span class="token boolean">true</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/table/" class="prev">
+        Table
+      </a></span> <span class="next"><a href="/webui-vue/guide/quickstart/forms.html">
+        Forms
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/16.8d8a2baa.js" defer></script>
+  </body>
+</html>
diff --git a/guide/guidelines/colors.html b/guide/guidelines/colors.html
new file mode 100644
index 00000000..19b24282
--- /dev/null
+++ b/guide/guidelines/colors.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Colors | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/29.a85a251f.js" as="script"><link rel="preload" href="/webui-vue/assets/js/7.2afc0a47.js" as="script"><link rel="preload" href="/webui-vue/assets/js/6.c4bd7641.js" as="script"><link rel="preload" href="/webui-vue/assets/js/8.50aab72d.js" as="script"><link rel="preload" href="/webui-vue/assets/js/9.9f3d8ba6.js" as="script"><link rel="preload" href="/webui-vue/assets/js/11.f760a167.js" as="script"><link rel="preload" href="/webui-vue/assets/js/5.666cf43b.js" as="script"><link rel="preload" href="/webui-vue/assets/js/10.eff1bc3e.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" aria-current="page" class="active sidebar-link">Colors</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#grays" class="sidebar-link">Grays</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#blues" class="sidebar-link">Blues</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#greens" class="sidebar-link">Greens</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#reds" class="sidebar-link">Reds</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#yellows" class="sidebar-link">Yellows</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#all-colors" class="sidebar-link">All Colors</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/colors.html#theme-colors" class="sidebar-link">Theme Colors</a></li></ul></li><li><a href="/webui-vue/guide/guidelines/internationalization.html" class="sidebar-link">Internationalization</a></li><li><a href="/webui-vue/guide/guidelines/motion.html" class="sidebar-link">Motion</a></li><li><a href="/webui-vue/guide/guidelines/typography.html" class="sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="colors"><a href="#colors" class="header-anchor">#</a> Colors</h1> <p>This color palette has been agreed upon by the OpenBMC community and differs
+from the Bootstrap color patterns. The OpenBMC palette includes custom hex
+values, along with additional blue, green, red, and yellow color variables used
+as accent colors for components. The <code>.scss</code> component files use these accent
+colors to override default styles set by the Bootstrap library.</p> <ul><li><a href="/webui-vue/customization/theme/">Learn more about theme customization</a></li> <li><a href="https://github.com/openbmc/webui-vue/issues/new/choose" target="_blank" rel="noopener noreferrer">Open an issue in the OpenBMC webui-vue
+repo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to request a
+change</li> <li><a href="https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap
+colors<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="grays"><a href="#grays" class="header-anchor">#</a> Grays</h2> <div><div class="color-tile-container"><div><div class="color-tile color-tile--border" style="background-color:#f4f4f4;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-100</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#f4f4f4</dd></dl></div><div><div class="color-tile" style="background-color:#e6e6e6;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-200</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#e6e6e6</dd></dl></div><div><div class="color-tile" style="background-color:#d8d8d8;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-300</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#d8d8d8</dd></dl></div><div><div class="color-tile" style="background-color:#cccccc;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-400</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#cccccc</dd></dl></div><div><div class="color-tile" style="background-color:#b3b3b3;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#b3b3b3</dd></dl></div><div><div class="color-tile" style="background-color:#999999;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-600</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#999999</dd></dl></div><div><div class="color-tile" style="background-color:#666666;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-700</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#666666</dd></dl></div><div><div class="color-tile" style="background-color:#3f3f3f;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-800</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#3f3f3f</dd></dl></div><div><div class="color-tile" style="background-color:#161616;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-900</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#161616</dd></dl></div></div></div> <h2 id="blues"><a href="#blues" class="header-anchor">#</a> Blues</h2> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#2d60e5;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$blue-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#2d60e5</dd></dl></div></div></div> <h2 id="greens"><a href="#greens" class="header-anchor">#</a> Greens</h2> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#0a7d06;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$green-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#0a7d06</dd></dl></div></div></div> <h2 id="reds"><a href="#reds" class="header-anchor">#</a> Reds</h2> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#da1416;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$red-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#da1416</dd></dl></div></div></div> <h2 id="yellows"><a href="#yellows" class="header-anchor">#</a> Yellows</h2> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#efc100;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$yellow-500</dd></dl> <dl class="color-tile-desc"><dt>Hex:</dt> <dd>#efc100</dd></dl></div></div></div> <h2 id="all-colors"><a href="#all-colors" class="header-anchor">#</a> All Colors</h2> <p><code>All Colors</code> is the term Bootstrap uses to describe the colors that make up the
+<code>colors</code> map. These colors and the Grays color variables define the
+<code>theme-colors</code> map colors.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors" target="_blank" rel="noopener noreferrer">Learn more about the Bootstrap color
+maps<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.
+<div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#2d60e5;"></div> <dl class="color-tile-desc"><dt>Variable:</dt> <dd>$blue</dd></dl> <dl class="color-tile-desc"><dt>Color Variable:</dt> <dd>$blue-500</dd></dl></div><div><div class="color-tile" style="background-color:#0a7d06;"></div> <dl class="color-tile-desc"><dt>Variable:</dt> <dd>$green</dd></dl> <dl class="color-tile-desc"><dt>Color Variable:</dt> <dd>$green-500</dd></dl></div><div><div class="color-tile" style="background-color:#da1416;"></div> <dl class="color-tile-desc"><dt>Variable:</dt> <dd>$red</dd></dl> <dl class="color-tile-desc"><dt>Color Variable:</dt> <dd>$red-500</dd></dl></div><div><div class="color-tile" style="background-color:#efc100;"></div> <dl class="color-tile-desc"><dt>Variable:</dt> <dd>$yellow</dd></dl> <dl class="color-tile-desc"><dt>Color Variable:</dt> <dd>$yellow-500</dd></dl></div></div></div></p> <h2 id="theme-colors"><a href="#theme-colors" class="header-anchor">#</a> Theme Colors</h2> <p>The theme colors are keys in the <code>theme-colors</code> map. Bootstrap-Vue has a variant
+prop that accepts any of the <code>theme-colors</code> keys to set the theme of a
+component.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors" target="_blank" rel="noopener noreferrer">Learn more about the Bootstrap theme-colors
+maps<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div><div class="color-tile-container"><div><div class="color-tile" style="background-color:#2d60e5;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$primary</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$blue</dd></dl></div><div><div class="color-tile" style="background-color:#3f3f3f;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$secondary</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-800</dd></dl></div><div><div class="color-tile color-tile--border" style="background-color:#f4f4f4;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$light</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-100</dd></dl></div><div><div class="color-tile" style="background-color:#161616;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$dark</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$gray-900</dd></dl></div><div><div class="color-tile" style="background-color:#2d60e5;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$info</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$blue</dd></dl></div><div><div class="color-tile" style="background-color:#0a7d06;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$success</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$green</dd></dl></div><div><div class="color-tile" style="background-color:#efc100;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$warning</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$yellow</dd></dl></div><div><div class="color-tile" style="background-color:#da1416;"></div> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$danger</dd></dl> <dl class="color-tile-desc"><dt>Color variable:</dt> <dd>$red</dd></dl></div></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/coding-standards/accessibility.html" class="prev">
+        Accessibility
+      </a></span> <span class="next"><a href="/webui-vue/guide/guidelines/internationalization.html">
+        Internationalization
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/29.a85a251f.js" defer></script><script src="/webui-vue/assets/js/7.2afc0a47.js" defer></script><script src="/webui-vue/assets/js/6.c4bd7641.js" defer></script><script src="/webui-vue/assets/js/8.50aab72d.js" defer></script><script src="/webui-vue/assets/js/9.9f3d8ba6.js" defer></script><script src="/webui-vue/assets/js/11.f760a167.js" defer></script><script src="/webui-vue/assets/js/5.666cf43b.js" defer></script><script src="/webui-vue/assets/js/10.eff1bc3e.js" defer></script>
+  </body>
+</html>
diff --git a/guide/guidelines/internationalization.html b/guide/guidelines/internationalization.html
new file mode 100644
index 00000000..7dd3200b
--- /dev/null
+++ b/guide/guidelines/internationalization.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Internationalization | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/30.994c9683.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" class="sidebar-link">Colors</a></li><li><a href="/webui-vue/guide/guidelines/internationalization.html" aria-current="page" class="active sidebar-link">Internationalization</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/internationalization.html#key-naming-convention" class="sidebar-link">Key naming convention</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/internationalization.html#using-the-vue-i18n-plugin" class="sidebar-link">Using the Vue I18n plugin</a></li></ul></li><li><a href="/webui-vue/guide/guidelines/motion.html" class="sidebar-link">Motion</a></li><li><a href="/webui-vue/guide/guidelines/typography.html" class="sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="internationalization"><a href="#internationalization" class="header-anchor">#</a> Internationalization</h1> <p>The OpenBMC Web UI implements internationalization and separates the language-
+specific parts of the interface from the rest of the code, so they can be
+easily replaced. The OpenBMC Web UI uses the following library for
+internationalization:</p> <ul><li><a href="https://kazupon.github.io/vue-i18n/introduction.html" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="key-naming-convention"><a href="#key-naming-convention" class="header-anchor">#</a> Key naming convention</h2> <p>The OpenBMC Web UI follows the following key naming conventions:</p> <ul><li>Page specific labels should be nested in an object with a key prefixed <code>page</code>
+followed by the page title. Formatting in this manner provides a systematic
+structure and improves readability of the language file.
+<ul><li>e.g. <code>pageLocalUserManagement.editUser</code></li></ul></li> <li>Any 'major' child components should be nested inside page specific objects
+(ex. table, modal)
+<ul><li>e.g. <code>pageEventLogs.table.eventType</code></li></ul></li> <li>Avoid any complex linked locale messages.</li> <li>Alphabetize object keys. This helps in locating the keys.</li> <li>We use the <code>$t()</code> function in markup and <code>this.$t</code> in scripts (which Vue I18n
+provides to our components) for outputting translation messages.</li></ul> <h2 id="using-the-vue-i18n-plugin"><a href="#using-the-vue-i18n-plugin" class="header-anchor">#</a> Using the Vue I18n plugin</h2> <ul><li>A new <code>src/i18n.js</code> file is added and it registers Vue I18n as a plugin to
+our Vue instance via the <code>Vue.use()</code> function.</li> <li>The CLI creates a <code>src/locales/en-US.json</code> file, which contains our default
+translation messages.</li> <li>The keys are placed in the <code>src/locales/en-US.json</code> file and then the <code>$t()</code>
+function is used to output the translation messages.</li> <li>After adding or removing calls to <code>$t</code> please run this to ensure consistent
+English translation (note: using variable expansion in key names is not
+handled automatically, you need to manually check them):</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v <span class="token string">'src/**/*.?(js|vue)'</span> -l <span class="token string">'src/locales/en-US.json'</span>
+</code></pre></div><ul><li>If you're working on updating a translation for another language (e.g.
+Russian), run this to see the omissions (as well as cruft) and add the
+necessary keys automatically:</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v <span class="token string">'src/**/*.?(js|vue)'</span> -l <span class="token string">'src/locales/ru-RU.json'</span> -a
+</code></pre></div><div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;pageDumps&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token property">&quot;dumpsAvailableOnBmc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Dumps available on BMC&quot;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-Vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageDumps.dumpsAvailableOnBmc<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><ul><li>Vue I18n’s <code>$tc()</code> function can help with displaying plurals.
+<a href="https://kazupon.github.io/vue-i18n/guide/pluralization.html" target="_blank" rel="noopener noreferrer">Learn more about
+pluralization.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;modal&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token property">&quot;deleteDump&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Delete dump | Delete dumps&quot;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-JS extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$bvModal
+  <span class="token punctuation">.</span><span class="token function">msgBoxConfirm</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$tc</span><span class="token punctuation">(</span><span class="token string">'pageDumps.modal.deleteDumpConfirmation'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+   title<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$tc</span><span class="token punctuation">(</span><span class="token string">'pageDumps.modal.deleteDump'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+   okTitle<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$tc</span><span class="token punctuation">(</span><span class="token string">'pageDumps.modal.deleteDump'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+   cancelTitle<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'global.action.cancel'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/guidelines/colors.html" class="prev">
+        Colors
+      </a></span> <span class="next"><a href="/webui-vue/guide/guidelines/motion.html">
+        Motion
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/30.994c9683.js" defer></script>
+  </body>
+</html>
diff --git a/guide/guidelines/motion.html b/guide/guidelines/motion.html
new file mode 100644
index 00000000..8342bb5e
--- /dev/null
+++ b/guide/guidelines/motion.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Motion | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/31.06af27be.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" class="sidebar-link">Colors</a></li><li><a href="/webui-vue/guide/guidelines/internationalization.html" class="sidebar-link">Internationalization</a></li><li><a href="/webui-vue/guide/guidelines/motion.html" aria-current="page" class="active sidebar-link">Motion</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/motion.html#easing" class="sidebar-link">Easing</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/motion.html#duration" class="sidebar-link">Duration</a></li></ul></li><li><a href="/webui-vue/guide/guidelines/typography.html" class="sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="motion"><a href="#motion" class="header-anchor">#</a> Motion</h1> <p>The motion guidelines are based on Carbon Design System guidelines. These
+guidelines avoid easing curves that are unnatural, distracting, or purely
+decorative. <a href="https://www.carbondesignsystem.com/guidelines/motion/basics/" target="_blank" rel="noopener noreferrer">The documentation below is attributed to Carbon's animation
+documentation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="easing"><a href="#easing" class="header-anchor">#</a> Easing</h2> <h3 id="productive-motion"><a href="#productive-motion" class="header-anchor">#</a> Productive motion</h3> <p>Productive motion creates a sense of efficiency and responsiveness, while
+remaining subtle and out of the way. Productive motion is appropriate for
+moments when the user needs to focus on completing tasks.</p> <h3 id="expressive-motion"><a href="#expressive-motion" class="header-anchor">#</a> Expressive motion</h3> <p>Expressive motion delivers enthusiastic, vibrant, and highly visible movement.
+Use expressive motion for significant moments such as opening a new page,
+clicking the primary action button, or when the movement itself conveys a
+meaning. System alerts and the appearance of notification boxes are great cases
+for expressive motion.</p> <h3 id="easing-tokens"><a href="#easing-tokens" class="header-anchor">#</a> Easing tokens</h3> <div class="language- extra-class"><pre class="language-text"><code>$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
+$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
+$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
+$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
+$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
+$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
+</code></pre></div><h2 id="duration"><a href="#duration" class="header-anchor">#</a> Duration</h2> <p>Duration is calculated based on the style and size of the motion. Among the two
+motion styles, productive motion is significantly faster than expressive motion.
+Motion’s duration should be dynamic based on the size of the animation; the
+larger the change in distance (traveled) or size (scaling) of the element, the
+longer the animation takes.</p> <h3 id="duration-tokens"><a href="#duration-tokens" class="header-anchor">#</a> Duration tokens</h3> <div class="language- extra-class"><pre class="language-text"><code>$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
+$duration--fast-02: 110ms; //Micro-interactions such as fade
+$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
+$duration--moderate-02: 240ms; //Expansion, system communication, toast
+$duration--slow-01: 400ms; //Large expansion, important system notifications
+$duration--slow-02: 700ms; //Background dimming
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/guidelines/internationalization.html" class="prev">
+        Internationalization
+      </a></span> <span class="next"><a href="/webui-vue/guide/guidelines/typography.html">
+        Typography
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/31.06af27be.js" defer></script>
+  </body>
+</html>
diff --git a/guide/guidelines/typography.html b/guide/guidelines/typography.html
new file mode 100644
index 00000000..d8a46127
--- /dev/null
+++ b/guide/guidelines/typography.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Typography | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/32.57a17f1c.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" class="sidebar-link">Colors</a></li><li><a href="/webui-vue/guide/guidelines/internationalization.html" class="sidebar-link">Internationalization</a></li><li><a href="/webui-vue/guide/guidelines/motion.html" class="sidebar-link">Motion</a></li><li><a href="/webui-vue/guide/guidelines/typography.html" aria-current="page" class="active sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="typography"><a href="#typography" class="header-anchor">#</a> Typography</h1></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/guidelines/motion.html" class="prev">
+        Motion
+      </a></span> <span class="next"><a href="/webui-vue/guide/unit-testing/">
+        Unit Testing
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/32.57a17f1c.js" defer></script>
+  </body>
+</html>
diff --git a/guide/index.html b/guide/index.html
new file mode 100644
index 00000000..2cfd2056
--- /dev/null
+++ b/guide/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Getting Started | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/36.dbed5155.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="active sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="getting-started"><a href="#getting-started" class="header-anchor">#</a> Getting Started</h1> <p>This guide outlines the architecture and technologies used to build the OpenBMC
+Web UI. This guide exists to serve the following goals:</p> <ol><li>Improve contributor efficiency while maintaining the quality and consistency
+of the user interface</li> <li>Act as a collection of community agreed-upon standards</li></ol> <h2 id="coding-standards"><a href="#coding-standards" class="header-anchor">#</a> Coding Standards</h2> <p>Having an understanding of semantic HTML, CSS, and JavaScript is the critical
+knowledge required to contribute to this project. The frameworks and libraries
+used to build this UI include:</p> <ul><li><a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuex.vuejs.org/" target="_blank" rel="noopener noreferrer">Vuex<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://router.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue Router<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/axios/axios" target="_blank" rel="noopener noreferrer">Axios<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.js.org/" target="_blank" rel="noopener noreferrer">Bootstrap-vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuelidate.js.org/" target="_blank" rel="noopener noreferrer">Vuelidate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="custom-block tip"><p class="custom-block-title">Acquiring an understanding of these technologies will also be necessary.</p></div> <p>You will find more information about the standards and best practices in the
+<a href="/webui-vue/guide/coding-standards/">Coding Standards section of this guide</a>.</p> <h2 id="guidelines"><a href="#guidelines" class="header-anchor">#</a> Guidelines</h2> <p>The <a href="/webui-vue/guide/guidelines/colors.html">guidelines section</a> contains the OpenBMC
+community agreed-upon decisions on color, motion, and typography within the
+application. How to theme the application to meet company brand guidelines is
+documented in <a href="/webui-vue/customization/">Customization</a>.</p> <h2 id="components"><a href="#components" class="header-anchor">#</a> Components</h2> <p>The <a href="/webui-vue/guide/components/">components section</a> is a guide to using both custom Vue
+components and components from the Bootstrap-Vue library.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/webui-vue/guide/coding-standards/">
+        JavaScript and SASS
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/36.dbed5155.js" defer></script>
+  </body>
+</html>
diff --git a/guide/quickstart/forms.html b/guide/quickstart/forms.html
new file mode 100644
index 00000000..43e2c256
--- /dev/null
+++ b/guide/quickstart/forms.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Forms | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/33.b9e5db10.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Quick Start</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/quickstart/forms.html" aria-current="page" class="active sidebar-link">Forms</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/forms.html#form-component" class="sidebar-link">Form component</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/forms.html#form-group-component" class="sidebar-link">Form group component</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/forms.html#validation" class="sidebar-link">Validation</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/forms.html#complete-form" class="sidebar-link">Complete form</a></li></ul></li><li><a href="/webui-vue/guide/quickstart/page-anatomy.html" class="sidebar-link">Page Anatomy</a></li><li><a href="/webui-vue/guide/quickstart/store-anatomy.html" class="sidebar-link">Store Anatomy</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="forms"><a href="#forms" class="header-anchor">#</a> Forms</h1> <p>Forms are created using the <a href="https://bootstrap-vue.org/docs/components/form" target="_blank" rel="noopener noreferrer">bootstrap-vue form
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+and validated with the <a href="https://vuelidate.js.org/#sub-installation" target="_blank" rel="noopener noreferrer">Vuelidate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+plugin.</p> <h2 id="form-component"><a href="#form-component" class="header-anchor">#</a> Form component</h2> <p>When creating a new form, use the <code>&lt;b-form&gt;</code> <a href="https://bootstrap-vue.org/docs/components/form" target="_blank" rel="noopener noreferrer">form
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Use the <code>.prevent</code>
+event modifier on submit to prevent the submit event from reloading the page.</p> <h2 id="form-group-component"><a href="#form-group-component" class="header-anchor">#</a> Form group component</h2> <p>The <code>&lt;b-form-group&gt;</code> <a href="https://bootstrap-vue.org/docs/components/form-group" target="_blank" rel="noopener noreferrer">form group
+component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+pairs form controls with a legend or label, helper text, invalid/valid
+feedback text, and visual validation state feedback. Learn more about
+commonly used form components:</p> <ul><li><a href="https://bootstrap-vue.org/docs/components/form-checkbox" target="_blank" rel="noopener noreferrer">Form checkbox<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.org/docs/components/form-input" target="_blank" rel="noopener noreferrer">Form input<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.org/docs/components/form-radio" target="_blank" rel="noopener noreferrer">Form radio<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.org/docs/components/form-select" target="_blank" rel="noopener noreferrer">Form select<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="/guide/components/file-upload">Form file custom component</a></li></ul> <p>When helper text is provided, use the <code>&lt;b-form-text&gt;</code> component and <code>aria-describedby</code> on the
+form group component the helper text describes.</p> <h2 id="validation"><a href="#validation" class="header-anchor">#</a> Validation</h2> <p>For custom form validation messages, disable browser native HTML5
+validation by setting the <code>novalidate</code> prop on <code>&lt;b-form&gt;</code>. Use Vuelidate to
+check the form validation state and add
+custom validation messages in the <code>&lt;b-form-invalid-feedback&gt;</code> component.</p> <p>When creating a new form add the <code>VuelidateMixin</code>
+to the <code>scripts</code> block and import any
+<a href="https://vuelidate.js.org/#validators" target="_blank" rel="noopener noreferrer">validators<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> needed
+such as: <code>required</code>, <code>requiredIf</code>, etc. The use of built-in validators is
+preferred.</p> <h2 id="complete-form"><a href="#complete-form" class="header-anchor">#</a> Complete form</h2> <p>A complete form will look like this.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form</span> <span class="token attr-name">novalidate</span> <span class="token attr-name">@submit.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-group</span>
+      <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageName.form.inputLabel<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span>
+      <span class="token attr-name">label-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-input-id<span class="token punctuation">&quot;</span></span>
+    <span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-text</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-input-helper-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        {{ $t('pageName.form.helperText') }}
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-text</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-input</span>
+        <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-input-id<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.input<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-input-helper-text<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">:state</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getValidationState($v.form.input)<span class="token punctuation">&quot;</span></span>
+        <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$v.form.input.$touch()<span class="token punctuation">&quot;</span></span>
+      <span class="token punctuation">/&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-form-invalid-feedback</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>alert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>!$v.form.input.required<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          {{ $t('global.form.fieldRequired') }}
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-invalid-feedback</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form-group</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      {{ $t('global.action.save') }}
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-button</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-form</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> VuelidateMixin <span class="token keyword">from</span> <span class="token string">'@/components/Mixins/VuelidateMixin'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> required <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuelidate/lib/validators'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  name<span class="token operator">:</span> <span class="token string">'PageName'</span><span class="token punctuation">,</span>
+  components<span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token operator">...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  mixins<span class="token operator">:</span> <span class="token punctuation">[</span>VuelidateMixin<span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+    form<span class="token operator">:</span> <span class="token punctuation">{</span>
+      input<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">validations</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      form<span class="token operator">:</span> <span class="token punctuation">{</span>
+        input<span class="token operator">:</span> <span class="token punctuation">{</span> required <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  methods<span class="token operator">:</span><span class="token punctuation">{</span>
+    <span class="token function">handleSubmit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$v<span class="token punctuation">.</span><span class="token function">$touch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$v<span class="token punctuation">.</span>$invalid<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$store
+        <span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>
+          <span class="token string">'pageName/updateFormData'</span><span class="token punctuation">,</span>
+          formData
+        <span class="token punctuation">)</span>
+        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">success</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">successToast</span><span class="token punctuation">(</span>success<span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+        <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">errorToast</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">)</span>
+        <span class="token punctuation">.</span><span class="token function">finally</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token keyword">this</span><span class="token punctuation">.</span>$v<span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">$reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">endLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/components/toasts/" class="prev">
+        Toasts
+      </a></span> <span class="next"><a href="/webui-vue/guide/quickstart/page-anatomy.html">
+        Page Anatomy
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/33.b9e5db10.js" defer></script>
+  </body>
+</html>
diff --git a/guide/quickstart/page-anatomy.html b/guide/quickstart/page-anatomy.html
new file mode 100644
index 00000000..27e5a63e
--- /dev/null
+++ b/guide/quickstart/page-anatomy.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Page Anatomy | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/34.0e496acd.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Quick Start</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/quickstart/forms.html" class="sidebar-link">Forms</a></li><li><a href="/webui-vue/guide/quickstart/page-anatomy.html" aria-current="page" class="active sidebar-link">Page Anatomy</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/page-anatomy.html#template-block" class="sidebar-link">Template block</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/page-anatomy.html#scripts-block" class="sidebar-link">Scripts block</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/page-anatomy.html#style-block" class="sidebar-link">Style block</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/page-anatomy.html#complete-single-file-component-sfc" class="sidebar-link">Complete single-file component (SFC)</a></li></ul></li><li><a href="/webui-vue/guide/quickstart/store-anatomy.html" class="sidebar-link">Store Anatomy</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="page-anatomy"><a href="#page-anatomy" class="header-anchor">#</a> Page Anatomy</h1> <p>Single-file components (SFC) consist of a <code>template</code>, <code>script</code> and <code>style</code>
+block.</p> <h2 id="template-block"><a href="#template-block" class="header-anchor">#</a> Template block</h2> <p>When creating a new page, each template consists of at least 3 components:</p> <ul><li><code>&lt;b-container&gt;</code></li> <li><code>&lt;page-title&gt;</code></li> <li><code>&lt;page-section&gt;</code></li></ul> <p>Learn more about the <a href="/guide/components/page-title">page title</a>and <a href="/guide/components/page-section">page
+section</a> components.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span> <span class="token attr-name">fluid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-title</span> <span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageName.sectionTitle<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      // Page content goes here
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>page-section</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="scripts-block"><a href="#scripts-block" class="header-anchor">#</a> Scripts block</h2> <p>In the scripts section, be sure to import the <code>PageTitle</code> and <code>PageSection</code>
+components and declare them in the <code>components</code> property.</p> <p>Importing <code>BContainer</code> in the <a href="#scripts-block">scripts block</a> is not required as
+it is already registered globally.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> PageTitle <span class="token keyword">from</span> <span class="token string">'@/components/Global/PageTitle'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> PageSection <span class="token keyword">from</span> <span class="token string">'@/components/Global/PageSection'</span><span class="token punctuation">;</span>
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  name<span class="token operator">:</span> <span class="token string">'PageName'</span><span class="token punctuation">,</span>
+  components<span class="token operator">:</span> <span class="token punctuation">{</span> PageTitle<span class="token punctuation">,</span> PageSection <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="style-block"><a href="#style-block" class="header-anchor">#</a> Style block</h2> <p>Add the <code>scoped</code> attribute to the style block to keep the styles isolated to the
+SFC. While the <code>scoped</code> attribute is optional, it is preferred and global
+changes should be done in global style sheets.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="complete-single-file-component-sfc"><a href="#complete-single-file-component-sfc" class="header-anchor">#</a> Complete single-file component (SFC)</h2> <p>The final SFC will look like this.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b-container</span> <span class="token attr-name">fluid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-title</span> <span class="token attr-name">:description</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageName.pageDescription<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageName.sectionTitle<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      // Page content goes here
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>page-section</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b-container</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> PageTitle <span class="token keyword">from</span> <span class="token string">'@/components/Global/PageTitle'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> PageSection <span class="token keyword">from</span> <span class="token string">'@/components/Global/PageSection'</span><span class="token punctuation">;</span>
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  name<span class="token operator">:</span> <span class="token string">'PageName'</span><span class="token punctuation">,</span>
+  components<span class="token operator">:</span> <span class="token punctuation">{</span> PageTitle<span class="token punctuation">,</span> PageSection <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+    <span class="token selector">.example-class</span> <span class="token punctuation">{</span>
+      <span class="token comment">/* Styles go here */</span>
+    <span class="token punctuation">}</span>
+ </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/quickstart/forms.html" class="prev">
+        Forms
+      </a></span> <span class="next"><a href="/webui-vue/guide/quickstart/store-anatomy.html">
+        Store Anatomy
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/34.0e496acd.js" defer></script>
+  </body>
+</html>
diff --git a/guide/quickstart/store-anatomy.html b/guide/quickstart/store-anatomy.html
new file mode 100644
index 00000000..d8af5808
--- /dev/null
+++ b/guide/quickstart/store-anatomy.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Store Anatomy | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/35.49b0ff49.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Quick Start</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/quickstart/forms.html" class="sidebar-link">Forms</a></li><li><a href="/webui-vue/guide/quickstart/page-anatomy.html" class="sidebar-link">Page Anatomy</a></li><li><a href="/webui-vue/guide/quickstart/store-anatomy.html" aria-current="page" class="active sidebar-link">Store Anatomy</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/store-anatomy.html#store" class="sidebar-link">Store</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/quickstart/store-anatomy.html#complete-store" class="sidebar-link">Complete store</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="store-anatomy"><a href="#store-anatomy" class="header-anchor">#</a> Store Anatomy</h1> <h2 id="store"><a href="#store" class="header-anchor">#</a> Store</h2> <p>A &quot;store&quot; is a container that holds the application's state. <a href="https://vuex.vuejs.org/" target="_blank" rel="noopener noreferrer">Learn more about
+Vuex.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token comment"># Store structure</span>
+└── store
+    ├── api.js                             <span class="token comment"># axios requests</span>
+    ├── index.js                           <span class="token comment"># import store modules</span>
+    ├── plugins
+    └── modules
+        └── FeatureName                    <span class="token comment"># feature module</span>
+            ├── FeatureStore.js            <span class="token comment"># feature store</span>
+            ├── AdditionalFeatureStore.js  <span class="token comment"># additional features per store</span>
+            ├── AnotherFeatureStore.js     <span class="token comment"># additional features per store</span>
+</code></pre></div><h3 id="modules"><a href="#modules" class="header-anchor">#</a> Modules</h3> <p>The application store is divided into modules to prevent the store from getting
+bloated. Each module contains its own state, mutations, actions, and getters.
+<a href="https://vuex.vuejs.org/guide/modules.html" target="_blank" rel="noopener noreferrer">Learn more about Vuex modules.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="module-anatomy"><a href="#module-anatomy" class="header-anchor">#</a> Module Anatomy</h4> <ul><li><strong>State:</strong> You cannot directly mutate the store's state. <a href="https://vuex.vuejs.org/guide/state.html" target="_blank" rel="noopener noreferrer">Learn more about
+state.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><strong>Getters:</strong> Getters are used to compute derived state based on store state.
+<a href="https://vuex.vuejs.org/guide/getters.html" target="_blank" rel="noopener noreferrer">Learn more about getters.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><strong>Mutations:</strong> The only way to mutate the state is by committing mutations,
+which are synchronous transactions. <a href="https://vuex.vuejs.org/guide/mutations.html" target="_blank" rel="noopener noreferrer">Learn more about
+mutations.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><strong>Actions:</strong> Asynchronous logic should be encapsulated in, and can be composed
+with actions. <a href="https://vuex.vuejs.org/guide/actions.html" target="_blank" rel="noopener noreferrer">Learn more about
+actions.<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Import new store modules in <code>src/store/index.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// `src/store/index.js`</span>
+
+<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">import</span> FeatureNameStore <span class="token keyword">from</span> <span class="token string">'./modules/FeatureNameStore'</span><span class="token punctuation">;</span>
+
+Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  state<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  mutations<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  actions<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  modules<span class="token operator">:</span> <span class="token punctuation">{</span>
+    feature<span class="token operator">:</span> FeatureNameStore<span class="token punctuation">,</span> <span class="token comment">// store names can be renamed for brevity</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h2 id="complete-store"><a href="#complete-store" class="header-anchor">#</a> Complete store</h2> <p>A store module will look like this.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> api <span class="token keyword">from</span> <span class="token string">'@/store/api'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> i18n <span class="token keyword">from</span> <span class="token string">'@/i18n'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">const</span> FeatureNameStore <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// getters, actions, and mutations will be namespaced</span>
+  <span class="token comment">// based on the path the module is registered at</span>
+  namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+  state<span class="token operator">:</span> <span class="token punctuation">{</span>
+    exampleValue<span class="token operator">:</span> <span class="token string">'Off'</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  getters<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// namespace -&gt; getters['featureNameStore/getExampleValue']</span>
+    <span class="token function-variable function">getExampleValue</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>exampleValue<span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  mutations<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// namespace -&gt; commit('featureNameStore/setExampleValue)</span>
+    <span class="token function-variable function">setExampleValue</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>exampleValue<span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  actions<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// namespace -&gt; dispatch('featureNameStore/getExampleValue')</span>
+    <span class="token keyword">async</span> <span class="token function">getExampleValue</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">await</span> api
+        <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/redfish/v1/../..'</span><span class="token punctuation">)</span>
+        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setExampleValue'</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>Value<span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+        <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token comment">// namespace -&gt; ('featureNameStore/saveExampleValue', payload)</span>
+    <span class="token keyword">async</span> <span class="token function">saveExampleValue</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">await</span> api
+        <span class="token punctuation">.</span><span class="token function">patch</span><span class="token punctuation">(</span><span class="token string">'/redfish/v1/../..'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> Value<span class="token operator">:</span> payload <span class="token punctuation">}</span><span class="token punctuation">)</span>
+        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setExampleValue'</span><span class="token punctuation">,</span> payload<span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+        <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> FeatureNameStore<span class="token punctuation">;</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/quickstart/page-anatomy.html" class="prev">
+        Page Anatomy
+      </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/35.49b0ff49.js" defer></script>
+  </body>
+</html>
diff --git a/guide/unit-testing/index.html b/guide/unit-testing/index.html
new file mode 100644
index 00000000..8fcac6c1
--- /dev/null
+++ b/guide/unit-testing/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Unit Testing | OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/37.c48db488.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" aria-current="page" class="active sidebar-link">Unit Testing</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#test-libraries" class="sidebar-link">Test Libraries</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#test-specification-location-and-naming-conventions" class="sidebar-link">Test specification location and naming conventions</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#running-tests" class="sidebar-link">Running Tests</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#guidelines" class="sidebar-link">Guidelines</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#components" class="sidebar-link">Components</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#vuex-store" class="sidebar-link">Vuex Store</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#vue-router" class="sidebar-link">Vue Router</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/unit-testing/#resources" class="sidebar-link">Resources</a></li></ul></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="unit-testing"><a href="#unit-testing" class="header-anchor">#</a> Unit Testing</h1> <p>The goal of a unit test is to improve code quality and assure future
+development or refactoring does not result in broken builds and functionality.
+Tests that require consistent updating when refactoring code are likely tightly
+coupled to the internals of the component.</p> <blockquote><p>Writing unit tests is a constant struggle between writing enough tests and
+not writing too many. I call this the unit testing Goldilocks rule—not too
+many, not too few, but just enough. Thousands of tests for a small
+application can be as damaging to development time as no tests.</p> <p>-- <cite>Ed Yerburgh, Testing Vue Applications (New York: Manning
+Publications, 2019)</cite></p></blockquote> <h2 id="test-libraries"><a href="#test-libraries" class="header-anchor">#</a> Test Libraries</h2> <p>The OpenBMC Web UI unit test framework uses the Jest test runner and relies on
+the following libraries:</p> <ul><li>@vue/cli-plugin-unit-jest</li> <li>@vue/test-utils</li></ul> <h2 id="test-specification-location-and-naming-conventions"><a href="#test-specification-location-and-naming-conventions" class="header-anchor">#</a> Test specification location and naming conventions</h2> <ul><li>Create the test files in the /tests/unit directory</li> <li>The naming convention is to replicate the folder and component name</li></ul> <h3 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3> <ul><li>The AppHeader.vue single-file component's (SFC) spec file is named
+<code>AppHeader.spec.js</code></li> <li>Create a global component like <code>PageSection.vue</code> in the <code>/tests/global</code>
+directory with the name <code>PageSection.spec.js</code></li> <li>Create a mixin like BVToastMixin  in the <code>/tests/mixins</code> directory with the
+name <code>BVToastMixin.spec.js</code> Running Tests</li></ul> <h2 id="running-tests"><a href="#running-tests" class="header-anchor">#</a> Running Tests</h2> <p>The <code>test:unit</code> script will run all the test suites. Until the integration of
+the test script with the continuous integration tool is complete, it needs to be
+run manually before pushing up code for review. If you are working on fixing a
+test that is failing, follow the guidelines for debugging a failed tests or
+fixing failed snapshot tests.</p> <h3 id="debugging-a-failed-test"><a href="#debugging-a-failed-test" class="header-anchor">#</a> Debugging a failed test</h3> <p>The <code>test:unit:debugger</code> script will help to debug failing tests using the
+Chrome Developer Tools. To debug a test:</p> <ol><li>Add a <code>debugger</code> statement in the specifications file</li> <li>Run the unit test in debugger mode</li> <li>Open the Chrome browser and go to <code>chrome://inspect</code></li></ol> <h3 id="fixing-failed-snapshot-tests"><a href="#fixing-failed-snapshot-tests" class="header-anchor">#</a> Fixing failed snapshot tests</h3> <p>The <code>test:update</code> script will update snapshot tests. If the UI has changed and
+the snapshot tests are failing, after manually verifying the UI changes, run the
+update script to update the snapshots. Running <code>test:update</code> can be dangerous,
+as it will update all snapshot tests.</p> <p>It is critical to verify all snapshot tests before running the update script.
+The easiest way is to run the unit test in watch mode, <code>npm run test:unit -- --watch</code> and verify each snapshot.</p> <h2 id="guidelines"><a href="#guidelines" class="header-anchor">#</a> Guidelines</h2> <ul><li>Avoid coupling test code to source code when testing functionality
+<ul><li>If test cases fail during refactoring, the test case may be tightly
+coupled with the application structure.</li></ul></li> <li>A test should not break if the functionality it tests has not changed</li> <li>To maintain test readability, only pass in the data needed for the test to
+work in your mock object</li> <li>Avoid the creation of side-effects whenever possible</li> <li>There is no return on investment for testing presentational HTML</li> <li>Use <code>shallowMount</code> rather than mount unless child component rendering is
+required</li> <li>Avoid leaky tests by using <code>localVue</code> for all plugin installs, for example,
+when testing a plugin like Vuex</li></ul> <h2 id="components"><a href="#components" class="header-anchor">#</a> Components</h2> <h3 id="what-to-test"><a href="#what-to-test" class="header-anchor">#</a> What to test</h3> <ol><li>Test the function's inputs and outputs
+<ul><li>Test only dynamically generated output</li> <li>Test only output that is part of the component contract</li></ul></li> <li>Test any side-effects</li> <li>Test correct rendering using a snapshot test</li></ol> <h3 id="what-not-to-test"><a href="#what-not-to-test" class="header-anchor">#</a> What not to test</h3> <ol><li>Don't test third-party functionality</li> <li>Don't test the internals of your components or that specific functions are
+called. This can lead to unnecessary refactoring.</li> <li>Don't go beyond the input and outputs of the component</li> <li>Don't test the functionality of other libraries</li> <li>Static components do not need unit tests, use snapshot testing</li></ol> <h3 id="strategy"><a href="#strategy" class="header-anchor">#</a> Strategy</h3> <ol><li>Define a component contract that is based upon the component API</li> <li>Create smaller functions with a specific purpose to make testing easier</li> <li>Test the component API by writing tests first and then writing code to fix
+the tests</li> <li>Add a snapshot test once the presentational layer is validated through manual
+visual testing</li></ol> <h3 id="snapshot-testing"><a href="#snapshot-testing" class="header-anchor">#</a> Snapshot Testing</h3> <p>A snapshot test is a comparison of the code from two different points in time.
+When the view is rendering as expected, a snapshot is taken and when the test
+suite is run, this snapshot is compared to the current code to make sure nothing
+has changed.</p> <p>This type of testing is good for testing that static content output has not
+changed due to any code updates or refactoring. Too many snapshots can slow down
+development during refactors. Typically, these are written once the UI
+presentational layer is complete and validated.</p> <h2 id="vuex-store"><a href="#vuex-store" class="header-anchor">#</a> Vuex Store</h2> <p>There are two testing strategies for testing a Vuex store, which include testing
+store parts separately or testing a running store instance. Each strategy has
+its pros and cons. Given the size of the store and the number of developers that
+could potentially contribute to the project, the suggested strategy is to <code>test store parts separately</code>.</p> <h3 id="testing-store-parts-separately"><a href="#testing-store-parts-separately" class="header-anchor">#</a> Testing Store Parts Separately</h3> <p>Testing the parts separately is easy since each of the parts is a JavaScript
+function. Store parts to test include <code>actions</code>, <code>getters</code>, and <code>mutations</code>.</p> <h4 id="actions"><a href="#actions" class="header-anchor">#</a> Actions</h4> <p>Since HTTP calls should never be used in a test, actions require extreme
+mocking. Mocking tests rely on assumptions and can lead to faulty tests.</p> <h4 id="getters"><a href="#getters" class="header-anchor">#</a> Getters</h4> <p>Getters are JavaScript functions that return an output. These are basic
+functions that may not require testing unless there is getter logic. Any logic
+in a getter should be tested.</p> <h4 id="mutations"><a href="#mutations" class="header-anchor">#</a> Mutations</h4> <p>Mutations are JavaScript functions that mutate the store state. These are basic
+functions that may not require testing unless there is mutation logic. Any logic
+in a mutation should be tested.</p> <h4 id="pros"><a href="#pros" class="header-anchor">#</a> Pros</h4> <ul><li>Easier to debug</li> <li>Smaller tests</li></ul> <h4 id="cons"><a href="#cons" class="header-anchor">#</a> Cons</h4> <ul><li>Requires extreme mocking when testing actions</li> <li>Tightly coupled with implementation details</li> <li>More maintenance required when refactoring</li></ul> <h3 id="testing-store-instance"><a href="#testing-store-instance" class="header-anchor">#</a> Testing Store Instance</h3> <ul><li>Uses mutations and actions as inputs</li> <li>State is the output</li> <li>Requires the use of <code>localVue</code> when creating the store to avoid leaky tests</li></ul> <h4 id="pros-2"><a href="#pros-2" class="header-anchor">#</a> Pros</h4> <ul><li>Avoids mocking and brittle tests</li> <li>Refactoring does not break test unless contract changes</li></ul> <h4 id="cons-2"><a href="#cons-2" class="header-anchor">#</a> Cons</h4> <ul><li>Debugging is more difficult</li></ul> <h2 id="vue-router"><a href="#vue-router" class="header-anchor">#</a> Vue Router</h2> <ul><li>Our current structure does not warrant testing the vue router</li> <li>If there is logic used for creating <code>RouteLink</code> items, we should unit test
+that functionality, which requires stubbing</li> <li>When testing a vue router, it is important to use localVue</li></ul> <p><a href="https://vuex.vuejs.org/guide/testing.html" target="_blank" rel="noopener noreferrer">Vuex Testing<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="resources"><a href="#resources" class="header-anchor">#</a> Resources</h2> <ul><li><a href="https://vue-test-utils.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue Test Utils<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuejsdevelopers.com/2019/08/26/vue-what-to-unit-test-components/" target="_blank" rel="noopener noreferrer">Knowing What To Test — Vue Component Unit
+Testing<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.dev-tips-and-tricks.com/how-to-unit-test-a-vuex-store" target="_blank" rel="noopener noreferrer">How to unit test a vuex
+Store<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/webui-vue/guide/guidelines/typography.html" class="prev">
+        Typography
+      </a></span> <span class="next"><a href="/webui-vue/guide/components/">
+        Overview
+      </a>
+      →
+    </span></p></div> </main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/37.c48db488.js" defer></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..14115d4c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>OpenBMC Web UI Style Guide</title>
+    <meta name="generator" content="VuePress 1.8.2">
+    
+    <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+    
+    <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/38.2cecf29e.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+    <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" aria-current="page" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+  Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
+  Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="openbmc-logo.svg" alt="hero"> <h1 id="main-title">
+      Style Guide and Coding Conventions
+    </h1> <p class="description">
+      Guidance on code style and development for the OpenBMC browser-based UI
+    </p> <p class="action"><a href="/webui-vue/guide/" class="nav-link action-button">
+  Getting Started
+</a></p></header> <!----> <div class="theme-default-content custom content__default"></div> <!----></main></div><div class="global-ui"></div></div>
+    <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/38.2cecf29e.js" defer></script>
+  </body>
+</html>
diff --git a/openbmc-logo.svg b/openbmc-logo.svg
new file mode 100644
index 00000000..d0fa158c
--- /dev/null
+++ b/openbmc-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 241.23 240.05"><defs><style>.cls-1{fill:#a6a8ab;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}.cls-5{fill:url(#linear-gradient-4);}.cls-6{fill:#626366;}</style><linearGradient id="linear-gradient" x1="82.9" y1="11.55" x2="82.9" y2="154.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00b0da"/><stop offset="1" stop-color="#008abf"/></linearGradient><linearGradient id="linear-gradient-2" x1="81.55" y1="27.55" x2="81.55" y2="158.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="156.66" y1="51.54" x2="156.66" y2="154.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a5d440"/><stop offset="1" stop-color="#8cce3f"/></linearGradient><linearGradient id="linear-gradient-4" x1="158.41" y1="51.54" x2="158.41" y2="154.8" xlink:href="#linear-gradient-3"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M241.23,205.77a18.66,18.66,0,1,0-.24,16L237.26,220a14.51,14.51,0,1,1,.21-12.46Z"/><path class="cls-2" d="M65.85,81.86a53.68,53.68,0,0,0,11.61,33.41c-.1.29-.15.6-.22.9a10.81,10.81,0,0,0-.34,2.57,11,11,0,1,0,11-11,10.75,10.75,0,0,0-1.2.07c-.31,0-.61.08-.91.13A42.82,42.82,0,0,1,99.95,43.86h0V2.07l-.77.21q-3.63.94-7.12,2.2c-1.29.47-2.58,1-3.84,1.48h0V38.19l-.13.1A53.79,53.79,0,0,0,65.85,81.86Z"/><path class="cls-3" d="M120.28,96.58a14.54,14.54,0,0,1-14.55-14.37H93.59v0a26.29,26.29,0,0,0,21,25.65v45.35A71.13,71.13,0,0,1,63.9,38.1c.31.06.63.1,1,.13s.64,0,1,0a10.83,10.83,0,1,0-10.25-7.41,82.23,82.23,0,0,0,64.18,133.6c1.41,0,2.81-.06,4.2-.14l1.63-.09h0V95.57A14.47,14.47,0,0,1,120.28,96.58Z"/><path class="cls-4" d="M171.95,68.54a53.78,53.78,0,0,0-9.85-19.71,11.31,11.31,0,0,0,.32-1.3,10.78,10.78,0,0,0,.24-2.17,11,11,0,1,0-8.89,10.8,42.83,42.83,0,0,1-14.17,64.08V162c1.08-.27,2.14-.56,3.2-.87a82.35,82.35,0,0,0,8.53-3V125.91a53.91,53.91,0,0,0,20.6-57.37Z"/><path class="cls-5" d="M184.63,132.75A82.21,82.21,0,0,0,119.79,0c-1.64,0-3.26.06-4.87.16h-.11V68.55h0A14.53,14.53,0,0,1,120,67.48h.27A14.56,14.56,0,0,1,134.87,82s0,.07,0,.11,0,.08,0,.13h11.08A26.21,26.21,0,0,0,125.81,56.8V11.3A71.14,71.14,0,0,1,176,125.83h-.07a11,11,0,0,0-12.58,10.88,11,11,0,0,0,11,11h0a11,11,0,0,0,10.54-14.13C184.82,133.3,184.73,133,184.63,132.75Z"/><polygon class="cls-1" points="201.22 231.42 201.22 195.65 196.53 195.65 182 225.14 167.47 195.65 162.72 195.65 162.72 231.42 166.89 231.42 166.89 204.21 180.33 231.42 183.67 231.42 197.1 204.21 197.1 231.42 201.22 231.42"/><path class="cls-6" d="M119.82,208.4a10.6,10.6,0,0,0-7.9-3.34,10.15,10.15,0,0,0-4.16.83,15.94,15.94,0,0,0-3.62,2.24v-2.7H99.91v26h4.23V216.64a7.74,7.74,0,0,1,2.08-5.5,7.48,7.48,0,0,1,10.66,0,7.76,7.76,0,0,1,2.08,5.48v14.78h4.11v-15a11.12,11.12,0,0,0-3.24-8"/><path class="cls-6" d="M63.68,224.4a12.41,12.41,0,0,1-4.86,5.17,13.54,13.54,0,0,1-7,1.85H45.54V240h-4V205.43H51.64a13.41,13.41,0,0,1,9.57,3.76,12.73,12.73,0,0,1,2.47,15.21m-18.14,3.24h5.77A9.48,9.48,0,0,0,58.05,225a8.59,8.59,0,0,0,2.76-6.54,8.38,8.38,0,0,0-2.7-6.41,9.43,9.43,0,0,0-6.68-2.51H45.54Z"/><path class="cls-6" d="M96.44,219.75a4.56,4.56,0,0,0,.14-1.36c0-7.38-6.27-13.36-14-13.36s-14,6-14,13.36,6.27,13.36,14,13.36a14,14,0,0,0,11.93-6.52l-3.25-2.45a9.89,9.89,0,0,1-8.68,5,9.43,9.43,0,1,1,0-18.83,9.8,9.8,0,0,1,9.35,6.54c0,.07.15.63.17.7H76.59v3.52Z"/><path class="cls-6" d="M33.19,213.53A14.53,14.53,0,1,1,18.66,199a14.53,14.53,0,0,1,14.53,14.53m4.12,0a18.66,18.66,0,1,0-18.66,18.66,18.66,18.66,0,0,0,18.66-18.66"/><path class="cls-1" d="M154.37,220.69a6.77,6.77,0,0,1-6.75,6.79H132.14V213.9h15.49a6.78,6.78,0,0,1,6.75,6.79m-2.29-15.93a5.08,5.08,0,0,1-5.05,5.08l-14.89,0V199.67H147a5.07,5.07,0,0,1,5.05,5.08m.94,6.7a9,9,0,0,0-5.69-15.75H128v35.75h20.14l.28,0v0A10.73,10.73,0,0,0,153,211.46"/></g></g></svg>
+\ No newline at end of file
author	GitHub Action <action@github.com>	2022-03-25 21:22:29 +0300
committer	GitHub Action <action@github.com>	2022-03-25 21:22:29 +0300
commit	6d8f40c4ac31386460f33d0b4522ea8357e03894 (patch)
tree	dead2423a6c240256a28d4eb9c55cac2b45d71d0
download	webui-vue-gh-pages.tar.xz