{"version":3,"sources":["webpack:///./src/views/components/modal/code.js"],"names":["codeBasic","codeThemes","codeSize","codeFormScroll","codeVariant","codeDisableFooter","codeFooterSize","codeMessageBox","codeMethod","codeMultiple","codePrevent","codeVmodal"],"mappings":"kHAAA,+hBAAO,IAAMA,EAAY,07GAmIZC,EAAa,o2KA2LbC,EAAW,uoHAsHXC,EAAiB,yzOA8LjBC,EAAc,qrGAyIdC,EAAoB,siCA+CpBC,EAAiB,w6DAuEjBC,EAAiB,22DA+EjBC,EAAa,gxDAmFbC,EAAe,yoDAqFfC,EAAc,onFAyHdC,EAAa","file":"js/chunk-2d0dd13b.21ef574a.js","sourcesContent":["export const codeBasic = `\n<template>\n  <div>\n    <!-- modal trigger button -->\n    <div class=\"demo-inline-spacing\">\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-1\n        variant=\"outline-primary\"\n      >\n        Basic Modal\n      </b-button>\n\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-center\n        variant=\"outline-primary\"\n      >\n        Vertically Center\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-no-backdrop\n        variant=\"outline-primary\"\n      >\n        Disabled Backdrop\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-no-animation\n        variant=\"outline-primary\"\n      >\n        Disabled Animation\n      </b-button>\n    </div>\n\n    <!-- basic modal -->\n    <b-modal\n      id=\"modal-1\"\n      title=\"Basic Modal\"\n      ok-only\n      ok-title=\"Accept\"\n    >\n      <b-card-text>\n        <h5>Check First Paragraph</h5>\n        Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.\n        Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice.\n      </b-card-text>\n    </b-modal>\n\n    <!-- disable animation-->\n    <b-modal\n      id=\"modal-no-animation\"\n      content-class=\"shadow\"\n      title=\"Disabled Animation\"\n      no-fade\n      ok-only\n      ok-title=\"Accept\"\n    >\n      <b-card-text>\n        Chocolate bar jelly dragée cupcake chocolate bar I love donut liquorice.\n        Powder I love marzipan donut candy canes jelly-o.\n        Dragée liquorice apple pie candy biscuit danish lemon drops sugar plum.\n      </b-card-text>\n      <b-alert\n        show\n        variant=\"success\"\n      >\n        <div class=\"alert-body\">\n          Well done! You successfully read this important alert message.\n        </div>\n      </b-alert>\n    </b-modal>\n\n    <!-- modal vertical center -->\n    <b-modal\n      id=\"modal-center\"\n      centered\n      title=\"Vertically Centered\"\n      ok-only\n      ok-title=\"Accept\"\n    >\n      <b-card-text>\n        Croissant jelly-o halvah chocolate sesame snaps.\n        Brownie caramels candy canes chocolate cake marshmallow icing lollipop I love.\n        Gummies macaroon donut caramels biscuit topping danish.\n      </b-card-text>\n    </b-modal>\n\n    <!-- modal backdrop -->\n    <b-modal\n      id=\"modal-no-backdrop\"\n      hide-backdrop\n      ok-only\n      no-close-on-backdrop\n      content-class=\"shadow\"\n      title=\"Disabled Backdrop\"\n      ok-title=\"Accept\"\n    >\n      <b-card-text>\n        <span>We've added the utility class</span>\n        <code>'shadow'</code>\n        <span>to the modal content for added effect.</span>\n      </b-card-text>\n      <b-card-text>\n        Candy oat cake topping topping chocolate cake. Icing pudding jelly beans I love chocolate carrot cake wafer\n        candy canes. Biscuit croissant fruitcake bonbon soufflé.\n      </b-card-text>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport { BModal, BButton, VBModal, BAlert} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BCardCode,\n    BButton,\n    BModal,\n    BAlert,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeThemes = `\n<template>\n  <div>\n    <!-- button trigger -->\n    <div class=\"demo-inline-spacing\">\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-primary\n        variant=\"outline-primary\"\n      >\n        Primary\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(186, 191, 199, 0.15)'\"\n        v-b-modal.modal-seconday\n        variant=\"outline-secondary\"\n      >\n        Secondary\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(40, 199, 111, 0.15)'\"\n        v-b-modal.modal-success\n        variant=\"outline-success\"\n      >\n        Success\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(234, 84, 85, 0.15)'\"\n        v-b-modal.modal-danger\n        variant=\"outline-danger\"\n      >\n        Danger\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(255, 159, 67, 0.15)'\"\n        v-b-modal.modal-warning\n        variant=\"outline-warning\"\n      >\n        Warning\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(0, 207, 232, 0.15)'\"\n        v-b-modal.modal-info\n        variant=\"outline-info\"\n      >\n        Info\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(30, 30, 30, 0.15)'\"\n        v-b-modal.modal-dark\n        variant=\"outline-dark\"\n      >\n        Dark\n      </b-button>\n    </div>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-primary\"\n      ok-only\n      ok-title=\"Accept\"\n      modal-class=\"modal-primary\"\n      centered\n      title=\"Primary Modal\"\n    >\n      <b-card-text>\n        Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love\n        fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder\n        cupcake ice cream tootsie roll jelly.\n      </b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-seconday\"\n      ok-only\n      ok-variant=\"secondary\"\n      ok-title=\"Accept\"\n      modal-class=\"modal-secondary\"\n      centered\n      title=\"Secondary Modal\"\n    >\n      <b-card-text>\n        Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love\n        fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder\n        cupcake ice cream tootsie roll jelly.\n      </b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-success\"\n      ok-only\n      ok-variant=\"success\"\n      ok-title=\"Accept\"\n      modal-class=\"modal-success\"\n      centered\n      title=\"Success Modal\"\n    >\n      <b-card-text>\n        Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love\n        fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder\n        cupcake ice cream tootsie roll jelly.\n      </b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-danger\"\n      ok-only\n      ok-variant=\"danger\"\n      ok-title=\"Accept\"\n      modal-class=\"modal-danger\"\n      centered\n      title=\"Danger Modal\"\n    >\n      <b-card-text>\n        Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love\n        fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder\n        cupcake ice cream tootsie roll jelly.\n      </b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-info\"\n      ok-only\n      ok-variant=\"info\"\n      ok-title=\"Accept\"\n      modal-class=\"modal-info\"\n      centered\n      title=\"Info Modal\"\n    >\n      <b-card-text>\n        Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love\n        fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder\n        cupcake ice cream tootsie roll jelly.\n      </b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-warning\"\n      ok-only\n      ok-variant=\"warning\"\n      ok-title=\"Accept\"\n      modal-class=\"modal-warning\"\n      centered\n      title=\"Warning Modal\"\n    >\n      <b-card-text>\n        Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love\n        fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder\n        cupcake ice cream tootsie roll jelly.\n      </b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-dark\"\n      ok-only\n      ok-variant=\"dark\"\n      ok-title=\"Accept\"\n      modal-class=\"modal-dark\"\n      centered\n      title=\"Dark Modal\"\n    >\n      <b-card-text>\n        Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love\n        fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder\n        cupcake ice cream tootsie roll jelly.\n      </b-card-text>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport { BButton, BModal, VBModal } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BModal,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeSize = `\n<template>\n  <div>\n    <!-- trigger button -->\n    <div class=\"demo-inline-spacing\">\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-xs\n        variant=\"outline-primary\"\n      >\n        Extra Small\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-sm\n        variant=\"outline-primary\"\n      >\n        Small Modal\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-default\n        variant=\"outline-primary\"\n      >\n        Default Modal\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-lg\n        variant=\"outline-primary\"\n      >\n        Large Modal\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-xl\n        variant=\"outline-primary\"\n      >\n        Extra Large Modal\n      </b-button>\n    </div>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-xs\"\n      cancel-variant=\"secondary\"\n      ok-only\n      ok-title=\"Accept\"\n      centered\n      size=\"xs\"\n      title=\"Extra Small Modal\"\n    >\n      <b-card-text>Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder cupcake ice cream tootsie roll jelly.</b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-sm\"\n      cancel-variant=\"secondary\"\n      ok-only\n      ok-title=\"Accept\"\n      centered\n      size=\"sm\"\n      title=\"Small Modal\"\n    >\n      <b-card-text>Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder cupcake ice cream tootsie roll jelly.</b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-default\"\n      ok-only\n      ok-title=\"Accept\"\n      centered\n      title=\"Default Modal\"\n    >\n      <b-card-text>Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder cupcake ice cream tootsie roll jelly.</b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-lg\"\n      ok-only\n      ok-title=\"Accept\"\n      centered\n      size=\"lg\"\n      title=\"Large Modal\"\n    >\n      <b-card-text>Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder cupcake ice cream tootsie roll jelly.</b-card-text>\n    </b-modal>\n\n    <b-modal\n      id=\"modal-xl\"\n      ok-only\n      ok-title=\"Accept\"\n      centered\n      size=\"xl\"\n      title=\"Extra Large Modal\"\n    >\n      <b-card-text>Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love marshmallow tiramisu I love fruitcake I love gummi bears. Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder cupcake ice cream tootsie roll jelly.</b-card-text>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport { BButton, BModal, VBModal } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BModal,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeFormScroll = `\n<template>\n  <div>\n     <div class=\"demo-inline-spacing\">\n      <!-- modal login button -->\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-login\n        variant=\"outline-primary\"\n      >\n        Login Form\n      </b-button>\n\n      <!-- modal scrolling content button -->\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-tall\n        variant=\"outline-primary\"\n      >\n        Scrolling Long Content\n      </b-button>\n\n      <!-- button Scrolling Content inside Modal-->\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-scrollable\n        variant=\"outline-primary\"\n      >\n        Scrolling Content inside Modal\n      </b-button>\n\n      <!-- select 2 demo -->\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-select2\n        variant=\"outline-primary\"\n      >\n        Select2 With Modal\n      </b-button>\n    </div>\n\n    <!-- modal login-->\n    <b-modal\n      id=\"modal-login\"\n      cancel-variant=\"outline-secondary\"\n      ok-title=\"Login\"\n      cancel-title=\"Close\"\n      centered\n      title=\"Login Form\"\n    >\n      <b-form>\n        <b-form-group>\n          <label for=\"email\">Email:</label>\n          <b-form-input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"Email Address\"\n          />\n        </b-form-group>\n        <b-form-group>\n          <label for=\"password\">Password</label>\n          <b-form-input\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </b-form-group>\n      </b-form>\n    </b-modal>\n\n    <!-- modal scrolling content -->\n    <b-modal\n      id=\"modal-tall\"\n      title=\"Overflowing Content\"\n      cancel-variant=\"outline-secondary\"\n      cancel-title=\"Close\"\n      ok-title=\"Accept\"\n    >\n      <b-card-text\n        v-for=\"(content,index) in scrollContent\"\n        :key=\"index\"\n      >\n        {{ content }}\n      </b-card-text>\n    </b-modal>\n\n    <!-- modal Scrolling Content inside Modal-->\n    <b-modal\n      id=\"modal-scrollable\"\n      scrollable\n      title=\"Scrollable Content\"\n      cancel-title=\"Close\"\n      ok-title=\"Accept\"\n      cancel-variant=\"outline-secondary\"\n    >\n      <b-card-text\n        v-for=\"(content,index) in scrollContent\"\n        :key=\"index\"\n      >\n        {{ content }}\n      </b-card-text>\n    </b-modal>\n\n    <!-- select 2 demo -->\n    <b-modal\n      id=\"modal-select2\"\n      title=\"Basic Modal\"\n      ok-title=\"submit\"\n      cancel-variant=\"outline-secondary\"\n    >\n      <b-form>\n        <b-form-group\n          label=\"Enter Name\"\n          label-for=\"name\"\n        >\n          <b-form-input\n            id=\"name\"\n            placeholder=\"Enter name\"\n          />\n        </b-form-group>\n        <b-form-group\n          label=\"Choose the country\"\n          label-for=\"vue-select\"\n        >\n          <v-select\n            id=\"vue-select\"\n            v-model=\"selected\"\n            :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n            :options=\"option\"\n          />\n        </b-form-group>\n        <b-form-group\n          label=\"Zip Code\"\n          label-for=\"zip-code\"\n        >\n          <b-form-input\n            id=\"zip-code\"\n            type=\"number\"\n            placeholder=\"Zip Code\"\n          />\n        </b-form-group>\n      </b-form>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport {\n  BButton, BModal, VBModal, BForm, BFormInput, BFormGroup,\n} from 'bootstrap-vue'\nimport vSelect from 'vue-select'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BModal,\n    BForm,\n    BFormInput,\n    BFormGroup,\n    vSelect,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n  data() {\n    return {\n      scrollContent: [\n        'Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake powder pudding pastry.',\n        'Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton candy gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love caramels powder.',\n        'Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing dragée dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice chocolate marzipan muffin pie liquorice.',\n        'Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu. Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps tootsie roll carrot cake soufflé halvah. Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake powder pudding pastry.',\n        'Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton candy gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love caramels powder.',\n        'Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing dragée dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice chocolate marzipan muffin pie liquorice.',\n        'Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu. Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps tootsie roll carrot cake soufflé halvah. Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake powder pudding pastry.',\n        'Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton candy gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love caramels powder.',\n        'Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing dragée dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice chocolate marzipan muffin pie liquorice.',\n        'Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu. Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps tootsie roll carrot cake soufflé halvah. Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake powder pudding pastry.',\n        'Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton candy gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love caramels powder.',\n        'Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing dragée dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice chocolate marzipan muffin pie liquorice.',\n        'Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu. Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps tootsie roll carrot cake soufflé halvah.',\n      ],\n      selected: 'USA',\n      option: ['USA', 'Canada', 'Maxico'],\n    }\n  },\n}\n</script>\n`\n\nexport const codeVariant = `\n<template>\n  <div>\n    <b-button\n      v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n      variant=\"primary\"\n      @click=\"show = true\"\n    >\n      Show Modal\n    </b-button>\n\n    <b-modal\n      v-model=\"show\"\n      title=\"Modal Variants\"\n      :header-bg-variant=\"headerBgVariant\"\n      :header-text-variant=\"headerTextVariant\"\n      :body-bg-variant=\"bodyBgVariant\"\n      :body-text-variant=\"bodyTextVariant\"\n      :footer-bg-variant=\"footerBgVariant\"\n      :footer-text-variant=\"footerTextVariant\"\n    >\n      <b-container fluid>\n        <b-row class=\"mb-1 text-center\">\n          <b-col cols=\"3\" />\n          <b-col>Background</b-col>\n          <b-col>Text</b-col>\n        </b-row>\n\n        <b-row class=\"mb-1\">\n          <b-col cols=\"3\">\n            Header\n          </b-col>\n          <b-col>\n            <b-form-select\n              v-model=\"headerBgVariant\"\n              :options=\"variants\"\n            />\n          </b-col>\n          <b-col>\n            <b-form-select\n              v-model=\"headerTextVariant\"\n              :options=\"variants\"\n            />\n          </b-col>\n        </b-row>\n\n        <b-row class=\"mb-1\">\n          <b-col cols=\"3\">\n            Body\n          </b-col>\n          <b-col>\n            <b-form-select\n              v-model=\"bodyBgVariant\"\n              :options=\"variants\"\n            />\n          </b-col>\n          <b-col>\n            <b-form-select\n              v-model=\"bodyTextVariant\"\n              :options=\"variants\"\n            />\n          </b-col>\n        </b-row>\n\n        <b-row>\n          <b-col cols=\"3\">\n            Footer\n          </b-col>\n          <b-col>\n            <b-form-select\n              v-model=\"footerBgVariant\"\n              :options=\"variants\"\n            />\n          </b-col>\n          <b-col>\n            <b-form-select\n              v-model=\"footerTextVariant\"\n              :options=\"variants\"\n            />\n          </b-col>\n        </b-row>\n      </b-container>\n\n      <template #modal-footer>\n        <div class=\"w-100\">\n          <p class=\"float-left mb-0\">\n            Modal Footer Content\n          </p>\n          <b-button\n            v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n            variant=\"primary\"\n            size=\"sm\"\n            class=\"float-right\"\n            @click=\"show = false\"\n          >\n            Close\n          </b-button>\n        </div>\n      </template>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport {\n  BButton, BModal, VBModal, BContainer, BRow, BCol, BFormSelect,\n} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BCol,\n    BContainer,\n    BFormSelect,\n    BModal,\n    BRow,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n  data: () => ({\n    bodyBgVariant: 'light',\n    bodyTextVariant: 'dark',\n    codeVariant,\n    footerBgVariant: 'warning',\n    footerTextVariant: 'dark',\n    headerBgVariant: 'info',\n    headerTextVariant: 'light',\n    show: false,\n    variants: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'],\n  }),\n}\n</script>\n`\n\nexport const codeDisableFooter = `\n<template>\n  <div>\n    <!-- modal trigger button -->\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-modal.modal-no-footer\n      variant=\"outline-primary\"\n    >\n      Launch Modal\n    </b-button>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-no-footer\"\n      title=\"BootstrapVue\"\n      cancel-disabled\n      ok-disabled\n      cancel-title=\"Close\"\n      cancel-variant=\"outline-secondary\"\n      ok-title=\"Accept\"\n    >\n      <b-card-text>\n        Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton candy gummi bears\n        pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love caramels powder.\n      </b-card-text>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport { BButton, BModal, VBModal } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BModal,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeFooterSize = `\n<template>\n  <div>\n    <!-- modal trigger button -->\n    <div class=\"demo-inline-spacing\">\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-footer-sm\n        variant=\"outline-primary\"\n      >\n        Small Footer Buttons\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        v-b-modal.modal-footer-lg\n        variant=\"outline-primary\"\n      >\n        Large Footer Buttons\n      </b-button>\n    </div>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-footer-sm\"\n      title=\"BootstrapVue\"\n      button-size=\"sm\"\n      ok-title=\"Accept\"\n      cancel-title=\"Close\"\n      cancel-variant=\"outline-secondary\"\n    >\n      <b-card-text>\n        This modal has small footer buttons.\n        Lorem ipsum dolor sit amet consectetur adipisicing elit.\n        A cumque quo delectus, aspernatur quasi sint vitae reiciendis quae? Itaque minima atque quae corporis impedit repellat recusandae consectetur voluptas, at rerum?\n      </b-card-text>\n    </b-modal>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-footer-lg\"\n      title=\"BootstrapVue\"\n      button-size=\"lg\"\n      cancel-title=\"Close\"\n      ok-title=\"Accept\"\n      cancel-variant=\"outline-secondary\"\n    >\n      <b-card-text>\n        This modal has large footer buttons.\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus eligendi, dolorem consequuntur delectus necessitatibus eum expedita culpa laudantium! Quaerat debitis obcaecati doloremque a iusto, soluta ipsa velit. Veritatis, assumenda sapiente?\n      </b-card-text>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport { BButton, BModal, VBModal } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BModal,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeMessageBox = `\n<template>\n  <div>\n    <!-- Modal Buttons -->\n    <div class=\"demo-inline-spacing\">\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        @click=\"showMsgBoxOne\"\n      >\n        Simple msgBoxConfirm\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        @click=\"showMsgBoxTwo\"\n      >\n        msgBoxConfirm with options\n      </b-button>\n    </div>\n\n    <!-- modal status -->\n    <b-card-text class=\"mt-1\">\n      First modal return value: <span class=\"font-weight-bold\">{{ String(boxOne) }}</span>\n    </b-card-text>\n    <b-card-text class=\"mb-0\">\n      Second modal return value: <span class=\"font-weight-bold\">{{ String(boxTwo) }}</span>\n    </b-card-text>\n  </div>\n</template>\n\n<script>\nimport { BButton } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n  },\n  directives: {\n    Ripple,\n  },\n  data: () => ({\n    boxOne: '',\n    boxTwo: '',\n  }),\n  methods: {\n    showMsgBoxOne() {\n      this.boxOne = ''\n      this.$bvModal\n        .msgBoxConfirm('Are you sure?', {\n          cancelVariant: 'outline-secondary',\n        })\n        .then(value => {\n          this.boxOne = value\n        })\n    },\n    showMsgBoxTwo() {\n      this.boxTwo = ''\n      this.$bvModal\n        .msgBoxConfirm('Please confirm that you want to delete everything.', {\n          title: 'Please Confirm',\n          size: 'sm',\n          okVariant: 'primary',\n          okTitle: 'Yes',\n          cancelTitle: 'No',\n          cancelVariant: 'outline-secondary',\n          hideHeaderClose: false,\n          centered: true,\n        })\n        .then(value => {\n          this.boxTwo = value\n        })\n    },\n  },\n}\n</script>\n`\n\nexport const codeMethod = `\n<template>\n  <div>\n    <!-- modal trigger button -->\n    <div class=\"demo-inline-spacing\">\n      <b-button\n        id=\"show-btn\"\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        @click=\"showModal\"\n      >\n        Open Modal\n      </b-button>\n      <b-button\n        id=\"toggle-btn\"\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        @click=\"toggleModal\"\n      >\n        Toggle Modal\n      </b-button>\n    </div>\n\n    <!-- modal -->\n    <b-modal\n      ref=\"my-modal\"\n      hide-footer\n      title=\"Using Component Methods\"\n    >\n      <div class=\"d-block text-center\">\n        <h3>Hello From My Modal!</h3>\n      </div>\n      <b-button\n        v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n        class=\"mt-3\"\n        variant=\"outline-secondary\"\n        block\n        @click=\"hideModal\"\n      >\n        Close Me\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n        class=\"mt-1\"\n        variant=\"outline-primary\"\n        block\n        @click=\"toggleModal\"\n      >\n        Toggle Me\n      </b-button>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport { BButton, BModal } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BModal,\n  },\n  directives: {\n    Ripple,\n  },\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}\n</script>\n`\n\nexport const codeMultiple = `\n<template>\n  <div>\n      <!-- button  -->\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-modal.modal-multi-1\n      variant=\"outline-primary\"\n    >\n      Open First Modal\n    </b-button>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-multi-1\"\n      size=\"lg\"\n      title=\"First Modal\"\n      ok-only\n      ok-title=\"Accept\"\n      no-stacking\n    >\n      <b-card-text class=\"my-2\">\n        First Modal\n      </b-card-text>\n      <b-button\n        v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n        v-b-modal.modal-multi-2\n        variant=\"primary\"\n      >\n        Open Second Modal\n      </b-button>\n    </b-modal>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-multi-2\"\n      title=\"Second Modal\"\n      ok-only\n      ok-title=\"Accept\"\n    >\n      <b-card-text class=\"my-2\">\n        Second Modal\n      </b-card-text>\n      <b-button\n        v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n        v-b-modal.modal-multi-3\n        size=\"sm\"\n        variant=\"primary\"\n      >\n        Open Third Modal\n      </b-button>\n    </b-modal>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-multi-3\"\n      size=\"sm\"\n      title=\"Third Modal\"\n      ok-only\n      ok-title=\"Accept\"\n    >\n      <b-card-text class=\"my-1\">\n        Third Modal\n      </b-card-text>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport { BModal, BButton, VBModal } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BModal,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codePrevent = `\n<template>\n  <div>\n     <!-- button -->\n    <b-button\n      id=\"toggle-btn\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-modal.modal-prevent-closing\n      variant=\"outline-primary\"\n    >\n      Open Modal\n    </b-button>\n\n    <!-- modal data -->\n    <div class=\"mt-1\">\n      <p>Submitted Names:</p>\n      <div v-if=\"submittedNames.length === 0\">\n        --\n      </div>\n      <b-list-group\n        v-else\n      >\n        <b-list-group-item\n          v-for=\"(data,index) in submittedNames\"\n          :key=\"index\"\n        >\n          {{ data }}\n        </b-list-group-item>\n      </b-list-group>\n    </div>\n\n    <!-- modal -->\n    <b-modal\n      id=\"modal-prevent-closing\"\n      ref=\"my-modal\"\n      title=\"Submit Your Name\"\n      ok-title=\"Submit\"\n      cancel-variant=\"outline-secondary\"\n      @show=\"resetModal\"\n      @hidden=\"resetModal\"\n      @ok=\"handleOk\"\n    >\n      <form\n        ref=\"form\"\n        @submit.stop.prevent=\"handleSubmit\"\n      >\n        <b-form-group\n          :state=\"nameState\"\n          label=\"Name\"\n          label-for=\"name-input\"\n          invalid-feedback=\"Name is required\"\n        >\n          <b-form-input\n            id=\"name-input\"\n            v-model=\"name\"\n            :state=\"nameState\"\n            required\n          />\n        </b-form-group>\n      </form>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport {\n  BButton, BFormGroup, BFormInput, BModal, VBModal, BListGroup, BListGroupItem,\n} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BFormGroup,\n    BFormInput,\n    BListGroup,\n    BListGroupItem,\n    BModal,\n  },\n  directives: {\n    'b-modal': VBModal,\n    Ripple,\n  },\n  data: () => ({\n    name: '',\n    nameState: null,\n    submittedNames: [],\n  }),\n  methods: {\n    checkFormValidity() {\n      const valid = this.$refs.form.checkValidity()\n      this.nameState = valid\n      return valid\n    },\n    resetModal() {\n      this.name = ''\n      this.nameState = null\n    },\n    handleOk(bvModalEvt) {\n      // Prevent modal from closing\n      bvModalEvt.preventDefault()\n      // Trigger submit handler\n      this.handleSubmit()\n    },\n    handleSubmit() {\n      // Exit when the form isn't valid\n      if (!this.checkFormValidity()) {\n        return\n      }\n      // Push the name to submitted names\n      this.submittedNames.push(this.name)\n      // Hide the modal manually\n      this.$nextTick(() => {\n        this.$refs['my-modal'].toggle('#toggle-btn')\n      })\n    },\n  },\n}\n</script>\n`\n\nexport const codeVmodal = `\n<template>\n  <div>\n    <b-button\n      v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n      variant=\"primary\"\n      @click=\"modalShow = !modalShow\"\n    >\n      Launch Modal\n    </b-button>\n\n    <b-modal\n      v-model=\"modalShow\"\n      title=\"Using v-model property\"\n      ok-title=\"Accept\"\n      ok-only\n    >\n      Bonbon caramels muffin.\n      Chocolate bar oat cake cookie pastry dragée pastry.\n      Carrot cake chocolate tootsie roll chocolate bar candy canes biscuit.\n      Gummies bonbon apple pie fruitcake icing biscuit apple pie jelly-o sweet roll.\n      Toffee sugar plum sugar plum jelly-o jujubes bonbon dessert carrot cake.\n      Cookie dessert tart muffin topping donut icing fruitcake. Sweet roll cotton candy dragée danish Candy canes chocolate bar cookie.\n      Gingerbread apple pie oat cake. Carrot cake fruitcake bear claw. Pastry gummi bears marshmallow jelly-o.\n    </b-modal>\n  </div>\n</template>\n\n<script>\nimport { BButton, BModal } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BModal,\n  },\n  directives: {\n    Ripple,\n  },\n  data: () => ({\n    modalShow: false,\n  }),\n}\n</script>\n`\n"],"sourceRoot":""}