(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-376c6d21"],{"8c48":function(t,e,o){"use strict";o.r(e);var a=function(){var t=this,e=t._self._c;return e("div",[e("b-alert",{staticClass:"alert alert-custom alert-white alert-shadow fade show gutter-b",attrs:{show:"",variant:"light"}},[e("div",{staticClass:"alert-icon"},[e("span",{staticClass:"svg-icon svg-icon-lg"},[e("inline-svg",{attrs:{src:"media/svg/icons/Tools/Compass.svg"}})],1)]),e("div",{staticClass:"alert-text"},[e("b",[t._v("Modals")]),t._v(" Modals are streamlined, but flexible dialog prompts powered by JavaScript and CSS. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more. "),e("a",{staticClass:"font-weight-bold",attrs:{href:"https://bootstrap-vue.js.org/docs/components/media",target:"_blank"}},[t._v(" See documentation. ")])])]),e("div",{staticClass:"row"},[e("div",{staticClass:"col-md-6"},[e("KTCodePreview",{attrs:{title:"Modal"},scopedSlots:t._u([{key:"preview",fn:function(){return[e("div",[e("b-button",{directives:[{name:"b-modal",rawName:"v-b-modal.modal-1",modifiers:{"modal-1":!0}}]},[t._v("Launch demo modal")]),e("b-modal",{attrs:{id:"modal-1",title:"BootstrapVue"}},[e("p",{staticClass:"my-4"},[t._v("Hello from modal!")])])],1)]},proxy:!0},{key:"html",fn:function(){return[t._v(" "+t._s(t.code1.html)+" ")]},proxy:!0}])}),e("KTCodePreview",{scopedSlots:t._u([{key:"title",fn:function(){return[t._v(" Using "),e("code",[t._v("v-b-modal")]),t._v(" directive ")]},proxy:!0},{key:"preview",fn:function(){return[e("div",[e("b-button",{directives:[{name:"b-modal",rawName:"v-b-modal.my-modal",modifiers:{"my-modal":!0}}],staticClass:"mr-3"},[t._v("Show Modal")]),e("b-button",{directives:[{name:"b-modal",rawName:"v-b-modal",value:"my-modal",expression:"'my-modal'"}],staticClass:"mr-3"},[t._v(" Show Modal ")]),e("b-modal",{attrs:{id:"my-modal"}},[t._v("Hello From My Modal!")])],1)]},proxy:!0},{key:"html",fn:function(){return[t._v(" "+t._s(t.code2.html)+" ")]},proxy:!0}])})],1),e("div",{staticClass:"col-md-6"},[e("KTCodePreview",{scopedSlots:t._u([{key:"title",fn:function(){return[t._v(" Using "),e("code",[t._v("this.$bvModal.show()")]),t._v(" and "),e("code",[t._v("this.$bvModal.hide()")]),t._v(" instance methods ")]},proxy:!0},{key:"preview",fn:function(){return[e("p",[t._v(" When "),e("code",[t._v("BootstrapVue")]),t._v(" is installed as a plugin, or the "),e("code",[t._v("ModalPlugin")]),t._v(" plugin is used, BootstrapVue will inject a "),e("code"),t._v(" object into every Vue instance (components, apps). "),e("code",[t._v("$bvModal")]),t._v(" exposes several methods, of which two are for showing and hiding modals: ")]),e("div",[e("b-button",{staticClass:"mr-3",attrs:{id:"show-btn"},on:{click:t.showModal}},[t._v(" Open Modal ")]),e("b-button",{staticClass:"mr-3",attrs:{id:"toggle-btn"},on:{click:t.toggleModal}},[t._v(" Toggle Modal ")]),e("b-modal",{ref:"my-modal",attrs:{"hide-footer":"",title:"Using Component Methods"}},[e("div",{staticClass:"d-block text-center"},[e("h3",[t._v("Hello From My Modal!")])]),e("b-button",{staticClass:"mt-3",attrs:{variant:"outline-danger",block:""},on:{click:t.hideModal}},[t._v(" Close Me ")]),e("b-button",{staticClass:"mt-2",attrs:{variant:"outline-warning",block:""},on:{click:t.toggleModal}},[t._v(" Toggle Me ")])],1)],1)]},proxy:!0},{key:"html",fn:function(){return[t._v(" "+t._s(t.code3.html)+" ")]},proxy:!0},{key:"js",fn:function(){return[t._v(" "+t._s(t.code3.js)+" ")]},proxy:!0}])}),e("KTCodePreview",{scopedSlots:t._u([{key:"title",fn:function(){return[t._v(" Using "),e("code",[t._v("show()")]),t._v(", "),e("code",[t._v("hide()")]),t._v(", and "),e("code",[t._v("toggle()")]),t._v(" component methods ")]},proxy:!0},{key:"preview",fn:function(){return[e("p",[t._v(" You can access modal using "),e("code",[t._v("ref")]),t._v(" attribute and then call the "),e("code",[t._v("show()")]),t._v(", "),e("code",[t._v("hide()")]),t._v(" or "),e("code",[t._v("toggle()")]),t._v(" methods. ")]),e("div",[e("b-button",{staticClass:"mr-3",attrs:{id:"show-btn"},on:{click:t.showModal}},[t._v(" Open Modal ")]),e("b-button",{staticClass:"mr-3",attrs:{id:"toggle-btn"},on:{click:t.toggleModal}},[t._v(" Toggle Modal ")]),e("b-modal",{ref:"my-modal",attrs:{"hide-footer":"",title:"Using Component Methods"}},[e("div",{staticClass:"d-block text-center"},[e("h3",[t._v("Hello From My Modal!")])]),e("b-button",{staticClass:"mt-3 mr-3",attrs:{variant:"outline-danger",block:""},on:{click:t.hideModal}},[t._v(" Close Me ")]),e("b-button",{staticClass:"mt-2 mr-3",attrs:{variant:"outline-warning",block:""},on:{click:t.toggleModal}},[t._v(" Toggle Me ")])],1)],1)]},proxy:!0},{key:"html",fn:function(){return[t._v(" "+t._s(t.code4.html)+" ")]},proxy:!0},{key:"js",fn:function(){return[t._v(" "+t._s(t.code4.js)+" ")]},proxy:!0}])})],1)])],1)},s=[],l=o("d968"),n=o("0bce"),i={data:function(){return{code1:{html:'<div>\n  <b-button v-b-modal.modal-1>Launch demo modal</b-button>\n\n  <b-modal id="modal-1" title="BootstrapVue">\n    <p class="my-4">Hello from modal!</p>\n  </b-modal>\n</div>'},code2:{html:'<div>\n  \x3c!-- Using modifiers --\x3e\n  <b-button v-b-modal.my-modal>Show Modal</b-button>\n\n  \x3c!-- Using value --\x3e\n  <b-button v-b-modal="\'my-modal\'">Show Modal</b-button>\n\n  \x3c!-- The modal --\x3e\n  <b-modal id="my-modal">Hello From My Modal!</b-modal>\n</div>'},code3:{html:'<div>\n    <b-button id="show-btn" @click="showModal">Open Modal</b-button>\n    <b-button id="toggle-btn" @click="toggleModal">Toggle Modal</b-button>\n\n    <b-modal ref="my-modal" hide-footer title="Using Component Methods">\n      <div class="d-block text-center">\n        <h3>Hello From My Modal!</h3>\n      </div>\n      <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>\n      <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>\n    </b-modal>\n  </div>',js:"export default {\n    methods: {\n      showModal() {\n        this.$refs['my-modal'].show()\n      },\n      hideModal() {\n        this.$refs['my-modal'].hide()\n      },\n      toggleModal() {\n        // We pass the ID of the button that we want to return focus to\n        // when the modal has hidden\n        this.$refs['my-modal'].toggle('#toggle-btn')\n      }\n    }\n  }"},code4:{html:'<div>\n    <b-button id="show-btn" @click="showModal">Open Modal</b-button>\n    <b-button id="toggle-btn" @click="toggleModal">Toggle Modal</b-button>\n\n    <b-modal ref="my-modal" hide-footer title="Using Component Methods">\n      <div class="d-block text-center">\n        <h3>Hello From My Modal!</h3>\n      </div>\n      <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>\n      <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>\n    </b-modal>\n  </div>',js:"export default {\n    methods: {\n      showModal() {\n        this.$refs['my-modal'].show()\n      },\n      hideModal() {\n        this.$refs['my-modal'].hide()\n      },\n      toggleModal() {\n        // We pass the ID of the button that we want to return focus to\n        // when the modal has hidden\n        this.$refs['my-modal'].toggle('#toggle-btn')\n      }\n    }\n  }"}}},components:{KTCodePreview:l["a"]},methods:{showModal:function(){this.$refs["my-modal"].show()},hideModal:function(){this.$refs["my-modal"].hide()},toggleModal:function(){this.$refs["my-modal"].toggle("#toggle-btn")}},mounted:function(){this.$store.dispatch(n["a"],[{title:"Vue Bootstrap",route:"alert"},{title:"Modal"}])}},d=i,r=o("2877"),c=Object(r["a"])(d,a,s,!1,null,null,null);e["default"]=c.exports},d968:function(t,e,o){"use strict";var a=function(){var t=this,e=t._self._c;return e("KTCard",{ref:"preview",attrs:{title:t.title,example:!0},scopedSlots:t._u([t.hasTitleSlot?{key:"title",fn:function(){return[e("h3",{staticClass:"card-title"},[t._t("title")],2)]},proxy:!0}:null,{key:"toolbar",fn:function(){return[e("div",{staticClass:"example-tools justify-content-center"},[e("span",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top",value:"View code",expression:"'View code'",modifiers:{hover:!0,top:!0}}],staticClass:"example-toggle",attrs:{"data-toggle":"tooltip"}}),e("span",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.top",value:"Copy code",expression:"'Copy code'",modifiers:{hover:!0,top:!0}}],staticClass:"example-copy",attrs:{"data-toggle":"tooltip"}})])]},proxy:!0},{key:"body",fn:function(){return[e("div",{staticClass:"example-code mb-5"},[t.hasGeneralCode||t.hasSingleCodeType?t._e():e("ul",{staticClass:"example-nav nav nav-tabs nav-bold nav-tabs-line nav-tabs-line-2x",attrs:{role:"tablist"}},[t.hasHtmlCode?e("li",{staticClass:"nav-item"},[e("a",{staticClass:"nav-link active",attrs:{"data-tab":"0","data-toggle":"tab",href:"#",role:"tab","aria-selected":"true"},on:{click:t.setActiveTab}},[t._v(" HTML ")])]):t._e(),t.hasJsCode?e("li",{staticClass:"nav-item"},[e("a",{staticClass:"nav-link",attrs:{"data-tab":"1","data-toggle":"tab",href:"#",role:"tab","aria-selected":"false"},on:{click:t.setActiveTab}},[t._v("  JS  ")])]):t._e(),t.hasScssCode?e("li",{staticClass:"nav-item"},[e("a",{staticClass:"nav-link",attrs:{"data-tab":"2","data-toggle":"tab",href:"#",role:"tab","aria-selected":"false"},on:{click:t.setActiveTab}},[t._v(" SCSS ")])]):t._e()]),t.hasGeneralCode?e("div",[t._t("code")],2):t._e(),t.hasGeneralCode||t.hasSingleCodeType?t._e():e("div",[e("b-tabs",{staticClass:"hide-tabs",attrs:{"content-class":"mt-3"},model:{value:t.tabIndex,callback:function(e){t.tabIndex=e},expression:"tabIndex"}},[e("b-tab",{staticClass:"example-highlight",attrs:{active:""}},[e("highlight-code",{staticClass:"language-html",attrs:{lang:"html"}},[t._t("html")],2)],1),e("b-tab",{staticClass:"example-highlight"},[e("highlight-code",{staticClass:"language-js",attrs:{lang:"js"}},[t._t("js")],2)],1),e("b-tab",{staticClass:"example-highlight"},[e("highlight-code",{staticClass:"language-scss",attrs:{lang:"scss"}},[t._t("scss")],2)],1)],1)],1),t.hasSingleCodeType?e("div",{staticClass:"example-highlight"},[t.hasHtmlCode?e("highlight-code",{staticClass:"language-html",attrs:{lang:"html"}},[t._t("html")],2):t._e(),t.hasJsCode?e("highlight-code",{staticClass:"language-js",attrs:{lang:"js"}},[t._t("js")],2):t._e(),t.hasScssCode?e("highlight-code",{staticClass:"language-scss",attrs:{lang:"scss"}},[t._t("scss")],2):t._e()],1):t._e()]),t._t("preview")]},proxy:!0}],null,!0)})},s=[],l=(o("d3b7"),o("159b"),function(){var t=this,e=t._self._c;return e("div",{staticClass:"card card-custom gutter-b",class:t.classes},[t.hasTitleSlot||t.title?e("div",{staticClass:"card-header",class:t.headClass},[e("div",{staticClass:"card-title"},[t.hasTitleSlot?t._t("title"):t._e(),t.hasTitleSlot?t._e():e("h3",{staticClass:"card-label"},[t._v(" "+t._s(t.title)+" ")])],2),e("div",{staticClass:"card-toolbar"},[t._t("toolbar")],2)]):t._e(),e("div",{staticClass:"card-body",class:{bodyClass:t.bodyClass,"body-fit":t.bodyFit,"body-fluid":t.bodyFluid}},[t._t("body")],2),t.hasFootSlot?e("div",{staticClass:"card-footer"},[t._t("foot")],2):t._e()])}),n=[],i={name:"KTCard",props:{title:String,headSize:String,fluidHeight:Boolean,fluidHalfHeight:Boolean,headOverlay:Boolean,cardClass:String,headClass:String,bodyClass:String,bodyFit:Boolean,bodyFluid:Boolean,example:Boolean},components:{},methods:{},computed:{classes:function(){var t={"example example-compact":this.example,"height-fluid":this.fluidHeight,"height-fluid-half":this.fluidHalfHeight,"head-overlay":this.headOverlay};return t[this.headSizeClass]=this.headSizeClass,this.cardClass&&(t[this.cardClass]=!0),t},hasTitleSlot:function(){return!!this.$slots["title"]},hasFootSlot:function(){return!!this.$slots["foot"]},headSizeClass:function(){return!!this.headSize&&"head-".concat(this.headSize)}}},d=i,r=o("2877"),c=Object(r["a"])(d,l,n,!1,null,null,null),h=c.exports,m=o("b2e9"),u={name:"KTCodePreview",props:{title:String},data:function(){return{tabIndex:0,isOpen:!1}},components:{KTCard:h},mounted:function(){var t=this;this.$nextTick((function(){m["a"].init([t.$el]);var e=t.$el.querySelectorAll(".hljs");e.forEach((function(t){t.classList.add("language-".concat(t.classList[1])),t.classList.remove("hljs")}))}))},methods:{setActiveTab:function(t){for(var e=t.target.closest('[role="tablist"]'),o=e.querySelectorAll('[data-toggle="tab"]'),a=0;a<o.length;a++)o[a].classList.remove("active");t.target.classList.add("active"),this.tabIndex=parseInt(t.target.getAttribute("data-tab"))}},computed:{hasTitleSlot:function(){return!!this.$slots["title"]},hasSingleCodeType:function(){var t=this,e=0;return["html","js","scss"].forEach((function(o){t.$slots.hasOwnProperty(o)&&e++})),1===e},hasGeneralCode:function(){return!!this.$slots["code"]},hasJsCode:function(){return!!this.$slots["js"]},hasScssCode:function(){return!!this.$slots["scss"]},hasHtmlCode:function(){return!!this.$slots["html"]}}},b=u,v=Object(r["a"])(b,a,s,!1,null,null,null);e["a"]=v.exports}}]);
//# sourceMappingURL=chunk-376c6d21.234ab078.js.map