{"version":3,"sources":["webpack:///./src/views/components/overlay/code.js"],"names":["codeBasic","codeBackdrop","codeFade","codeSpinner","codeCornerRounded","codeCustomContent","codeNoWrapMode","codeForm","codeBusyState"],"mappings":"kHAAA,6ZAAO,IAAMA,EAAY,wyCA4DZC,EAAe,miGAoIfC,EAAW,w0CA6DXC,EAAc,ogCAgDdC,EAAoB,s/CAwEpBC,EAAoB,m/CA6DpBC,EAAiB,u8CA8DjBC,EAAW,u4JAmNXC,EAAgB","file":"js/chunk-2d0ac372.ac564f4c.js","sourcesContent":["export const codeBasic = `\n<template>\n  <div>\n    <b-overlay\n      :show=\"show\"\n      rounded=\"sm\"\n    >\n      <div>\n        <b-card-text>\n          <span>BootstrapVue's custom </span>\n          <code>b-overlay</code>\n          <span>\n            component is used to visually obscure a particular element or component and its content. It signals to the\n            user of a state change within the element or component and can be used for creating loaders,\n            warnings/alerts, prompts, and more.\n          </span>\n        </b-card-text>\n\n        <b-button\n          v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n          :disabled=\"show\"\n          variant=\"outline-primary\"\n          @click=\"show = true\"\n        >\n          Show overlay\n        </b-button>\n      </div>\n    </b-overlay>\n\n    <b-button\n      v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n      variant=\"primary\"\n      class=\"mt-1\"\n      @click=\"show = !show\"\n    >\n      Toggle overlay\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport { BOverlay, BButton, BCardText } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BOverlay,\n    BButton,\n    BCardText,\n  },\n  directives: {\n    Ripple,\n  },\n  data: () => ({\n    show: false,\n  }),\n}\n</script>\n`\n\nexport const codeBackdrop = `\n<template>\n  <b-row>\n    <b-col\n      lg=\"6\"\n      aria-controls=\"overlay-background\"\n    >\n      <b-form-group\n        label=\"Variant\"\n        label-for=\"bg-variant\"\n        label-cols-sm=\"4\"\n        label-cols-lg=\"12\"\n      >\n        <b-form-select\n          id=\"bg-variant\"\n          v-model=\"variant\"\n          :options=\"variants\"\n        />\n      </b-form-group>\n      <b-form-group\n        label=\"Opacity\"\n        label-for=\"bg-opacity\"\n        label-cols-sm=\"4\"\n        label-cols-lg=\"12\"\n      >\n        <b-input-group>\n          <b-form-input\n            id=\"bg-opacity\"\n            v-model=\"opacity\"\n            type=\"range\"\n            number\n            min=\"0\"\n            max=\"1\"\n            step=\"0.01\"\n          />\n          <b-input-group-append\n            is-text\n            class=\"text-monospace\"\n          >\n            {{ opacity.toFixed(2) }}\n          </b-input-group-append>\n        </b-input-group>\n      </b-form-group>\n      <b-form-group\n        label=\"Blur\"\n        label-for=\"bg-blur\"\n        label-cols-sm=\"4\"\n        label-cols-lg=\"12\"\n        class=\"mb-2 mb-lg-0\"\n      >\n        <b-form-select\n          id=\"bg-blur\"\n          v-model=\"blur\"\n          :options=\"blurs\"\n        />\n      </b-form-group>\n    </b-col>\n    <b-col lg=\"6\">\n      <b-overlay\n        id=\"overlay-background\"\n        show\n        :variant=\"variant\"\n        :opacity=\"opacity\"\n        :blur=\"blur\"\n        rounded=\"sm\"\n      >\n        <b-card\n          title=\"Card with overlay\"\n          aria-hidden=\"true\"\n          class=\"mb-0\"\n        >\n          <b-card-text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et\n            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip\n            ex ea commodo consequat.\n          </b-card-text>\n          <b-button\n            v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n            disabled\n            variant=\"primary\"\n          >\n            Button\n          </b-button>\n        </b-card>\n      </b-overlay>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\n  import {\n    BRow,\n    BCol,\n    BFormGroup,\n    BFormSelect,\n    BFormInput,\n    BInputGroupAppend,\n    BCard,\n    BOverlay,\n    BButton,\n    BInputGroup,\n  } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\n  export default {\n    components: {\n      BRow,\n      BCol,\n      BFormGroup,\n      BFormSelect,\n      BFormInput,\n      BInputGroupAppend,\n      BCard,\n      BOverlay,\n      BButton,\n      BCardText,\n      BInputGroup,\n    },\n    directives: {\n    Ripple,\n  },\n    data: () => ({\n      variant: 'light',\n      opacity: 0.85,\n      blur: '2px',\n      variants: ['transparent', 'white', 'light', 'dark', 'primary', 'secondary', 'success', 'danger', 'warning', 'info'],\n      blurs: [{ text: 'None', value: '' }, '1px', '2px', '5px', '0.5em', '1rem'],\n    }),\n  }\n</script>\n`\n\nexport const codeFade = `\n<template>\n  <div>\n    <b-overlay\n      :show=\"show\"\n      rounded=\"sm\"\n      no-fade\n    >\n      <div\n        title=\"Card with overlay\"\n        :aria-hidden=\"show ? 'true' : null\"\n      >\n        <b-card-text>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptatibus doloremque dolor nesciunt\n          est nobis consequuntur maxime ea ipsam? Doloribus quidem doloremque ad laudantium ullam eos, consequuntur\n          velit quas vero.\n        </b-card-text>\n\n        <b-button\n          v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n          :disabled=\"show\"\n          variant=\"outline-primary\"\n          @click=\"show = true\"\n        >\n          Show overlay\n        </b-button>\n      </div>\n    </b-overlay>\n\n    <!-- trigger button -->\n    <b-button\n      v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n      variant=\"primary\"\n      class=\"mt-1\"\n      @click=\"show = !show\"\n    >\n      Toggle overlay\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport { BOverlay, BButton, BCardText } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\n  export default {\n    components: {\n      BOverlay,\n      BButton,\n      BCardText,\n    },\n    directives: {\n    Ripple,\n  },\n    data: () => ({\n      show: false,\n    }),\n  }\n</script>\n`\n\nexport const codeSpinner = `\n<template>\n  <b-overlay\n    show\n    spinner-variant=\"primary\"\n    spinner-type=\"grow\"\n    spinner-small\n    rounded=\"sm\"\n  >\n    <b-card\n      title=\"Card with spinner style\"\n      aria-hidden=\"true\"\n      class=\"mb-0\"\n    >\n      <b-card-text>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et\n        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex\n        ea commodo consequat.\n      </b-card-text>\n      <b-button\n        v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n        disabled\n        variant=\"primary\"\n      >\n        Button\n      </b-button>\n    </b-card>\n  </b-overlay>\n</template>\n\n<script>\nimport { BOverlay, BButton, BCard, BCardText} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BOverlay,\n    BButton,\n    BCard,\n    BCardText,\n  },\n  directives: {\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeCornerRounded = `\n<template>\n  <div>\n    <b-button\n      v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n      variant=\"primary\"\n      @click=\"show = !show\"\n    >\n      Toggle overlay\n    </b-button>\n\n    <b-row class=\"text-center mt-2\">\n      <b-col md=\"6\">\n        <b-card-text>With rounding</b-card-text>\n        <b-overlay\n          :show=\"show\"\n          class=\"d-inline-block\"\n          rounded=\"circle\"\n        >\n          <b-img\n            rounded=\"circle\"\n            height=\"300\"\n            :src=\"require('@/assets/images/banner/banner-27.jpg')\"\n            alt=\"Image 1\"\n          />\n        </b-overlay>\n      </b-col>\n      <b-col\n        md=\"6\"\n        class=\"mt-1 mt-md-0\"\n      >\n        <b-card-text>Without rounding</b-card-text>\n        <b-overlay\n          :show=\"show\"\n          class=\"d-inline-block\"\n        >\n          <b-img\n            rounded=\"circle\"\n            height=\"300\"\n            :src=\"require('@/assets/images/banner/banner-27.jpg')\"\n            alt=\"Image 1\"\n          />\n        </b-overlay>\n      </b-col>\n    </b-row>\n  </div>\n</template>\n\n<script>\nimport {BOverlay, BButton, BImg, BRow, BCol, BCardText} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BOverlay,\n    BButton,\n    BCardText,\n    // eslint-disable-next-line vue/no-unused-components\n    BImg,\n    BRow,\n    BCol,\n  },\n  directives: {\n    Ripple,\n  },\n  data: () => ({\n    show: false,\n  }),\n}\n</script>\n`\n\nexport const codeCustomContent = `\n<template>\n  <div>\n    <b-overlay :show=\"show\" rounded=\"sm\" @shown=\"onShown\" @hidden=\"onHidden\">\n    <div>\n      <h6>Card with custom overlay content</h6>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n      <p>Click the button to toggle the overlay:</p>\n      <b-button v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\" ref=\"show\" :disabled=\"show\" variant=\"primary\" @click=\"show = true\">\n        Show overlay\n      </b-button>\n    </div>\n    <template #overlay>\n      <div class=\"text-center\">\n        <b-icon icon=\"stopwatch\" font-scale=\"3\" animation=\"cylon\" />\n        <p id=\"cancel-label\">\n          Please wait...\n        </p>\n      <b-button\n          ref=\"cancel\"\n          v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n          variant=\"outline-danger\"\n          size=\"sm\"\n          aria-describedby=\"cancel-label\"\n          @click=\"show = false\"\n        >\n          Cancel\n      </b-button>\n    </template>\n  </div>\n</template>\n\n<script>\nimport { BOverlay, BButton } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BOverlay,\n    BButton,\n  },\n  directives: {\n    Ripple,\n  },\n  data: () => ({\n    show: false,\n  }),\n  methods: {\n    onShown() {\n      // Focus the cancel button when the overlay is showing\n      this.$refs.cancel.focus()\n    },\n    onHidden() {\n      // Focus the show button when the overlay is removed\n      this.$refs.show.focus()\n    },\n  },\n}\n</script>\n`\n\nexport const codeNoWrapMode = `\n<template>\n <div>\n    <div class=\"position-relative p-2 bg-info\">\n      <b-card-text class=\"text-white font-weight-bold\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      </b-card-text>\n      <b-card\n        title=\"Card with parent overlay\"\n        class=\"mb-1\"\n      >\n        <b-card-text>Laborum consequat non elit enim exercitation cillum.</b-card-text>\n        <b-card-text>Click the button to toggle the overlay:</b-card-text>\n        <b-button\n          v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n          :disabled=\"show\"\n          variant=\"outline-primary\"\n          @click=\"show = true\"\n        >\n          Show overlay\n        </b-button>\n      </b-card>\n      <b-card-text class=\"text-white font-weight-bold mb-0\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      </b-card-text>\n      <b-overlay\n        :show=\"show\"\n        no-wrap\n      />\n    </div>\n    <b-button\n      v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n      class=\"mt-3\"\n      variant=\"primary\"\n      @click=\"show = !show\"\n    >\n      Toggle overlay\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport { BOverlay, BButton, BCard, BCardText } from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BOverlay,\n    BButton,\n    BCard,\n    BCardText,\n  },\n   directives: {\n    Ripple,\n  },\n  data: () => ({\n    show: false,\n  }),\n}\n</script>\n`\n\nexport const codeForm = `\n<template>\n  <div>\n    <b-form\n      class=\"position-relative\"\n      @submit.prevent=\"onSubmit\"\n    >\n      <b-form-group\n        label=\"Name\"\n        label-for=\"form-name\"\n        label-cols-lg=\"2\"\n      >\n        <b-input-group>\n          <b-input-group-prepend is-text>\n            <b-icon icon=\"person-fill\" />\n          </b-input-group-prepend>\n          <b-form-input\n            id=\"form-name\"\n            :disabled=\"busy\"\n          />\n        </b-input-group>\n      </b-form-group>\n      <b-form-group\n        label=\"Email\"\n        label-for=\"form-mail\"\n        label-cols-lg=\"2\"\n      >\n        <b-input-group>\n          <b-input-group-prepend is-text>\n            <b-icon icon=\"envelope-fill\" />\n          </b-input-group-prepend>\n          <b-form-input\n            id=\"form-email\"\n            type=\"email\"\n            :disabled=\"busy\"\n          />\n        </b-input-group>\n      </b-form-group>\n      <b-form-group\n        label=\"Image\"\n        label-for=\"form-image\"\n        label-cols-lg=\"2\"\n      >\n        <b-input-group>\n          <b-input-group-prepend is-text>\n            <b-icon icon=\"image-fill\" />\n          </b-input-group-prepend>\n          <b-form-file\n            id=\"form-image\"\n            :disabled=\"busy\"\n            accept=\"image/*\"\n          />\n        </b-input-group>\n      </b-form-group>\n      <div class=\"d-flex justify-content-center\">\n        <b-button\n          v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n          ref=\"submit\"\n          type=\"submit\"\n          :disabled=\"busy\"\n        >\n          Submit\n        </b-button>\n      </div>\n\n      <b-overlay\n        :show=\"busy\"\n        no-wrap\n        @shown=\"onShown\"\n        @hidden=\"onHidden\"\n      >\n        <template v-slot:overlay>\n          <div\n            v-if=\"processing\"\n            class=\"text-center p-4 bg-primary text-light rounded\"\n          >\n            <b-icon\n              icon=\"cloud-upload\"\n              font-scale=\"4\"\n            />\n            <div class=\"mb-3\">\n              Processing...\n            </div>\n            <b-progress\n              min=\"1\"\n              max=\"20\"\n              :value=\"counter\"\n              variant=\"success\"\n              height=\"3px\"\n              class=\"mx-n4 rounded-0\"\n            />\n          </div>\n          <div\n            v-else\n            ref=\"dialog\"\n            tabindex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"false\"\n            aria-labelledby=\"form-confirm-label\"\n            class=\"text-center p-3\"\n          >\n            <p><strong id=\"form-confirm-label\">Are you sure?</strong></p>\n            <div class=\"d-flex\">\n              <b-button\n                v-ripple.400=\"'rgba(234, 84, 85, 0.15)'\"\n                variant=\"outline-danger\"\n                class=\"mr-3\"\n                @click=\"onCancel\"\n              >\n                Cancel\n              </b-button>\n              <b-button\n                v-ripple.400=\"'rgba(40, 199, 111, 0.15)'\"\n                variant=\"outline-success\"\n                @click=\"onOK\"\n              >\n                OK\n              </b-button>\n            </div>\n          </div>\n        </template>\n      </b-overlay>\n    </b-form>\n  </div>\n</template>\n\n<script>\nimport {\n  BButton,\n  BOverlay,\n  BForm,\n  BProgress,\n  BIcon,\n  BFormGroup,\n  BInputGroup,\n  BInputGroupPrepend,\n  BFormInput,\n  BFormFile,\n} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BOverlay,\n    BForm,\n    BProgress,\n    BIcon,\n    BFormGroup,\n    BInputGroup,\n    BInputGroupPrepend,\n    BFormInput,\n    BFormFile,\n  },\n  directives: {\n    Ripple,\n  },\n  data: () => ({\n    busy: false,\n    processing: false,\n    counter: 1,\n    interval: null,\n  }),\n  beforeDestroy() {\n    this.clearInterval()\n  },\n  methods: {\n    clearInterval() {\n      if (this.interval) {\n        clearInterval(this.interval)\n        this.interval = null\n      }\n    },\n    onShown() {\n      // Focus the dialog prompt\n      this.$refs.dialog.focus()\n    },\n    onHidden() {\n      // In this case, we return focus to the submit button\n      // You may need to alter this based on your application requirements\n      this.$refs.submit.focus()\n    },\n    onSubmit() {\n      this.processing = false\n      this.busy = true\n    },\n    onCancel() {\n      this.busy = false\n    },\n    onOK() {\n      this.counter = 1\n      this.processing = true\n      // Simulate an async request\n      this.clearInterval()\n      this.interval = setInterval(() => {\n        if (this.counter < 20) {\n          this.counter += 1\n        } else {\n          this.clearInterval()\n          this.$nextTick(() => {\n            // eslint-disable-next-line\n            this.busy = this.processing = false\n          })\n        }\n      }, 350)\n    },\n  },\n}\n</script>\n `\n\nexport const codeBusyState = `\n<template>\n  <div>\n    <b-overlay\n      :show=\"busy\"\n      rounded=\"lg\"\n      opacity=\"0.6\"\n      @hidden=\"onHidden\"\n    >\n      <template v-slot:overlay>\n        <div class=\"d-flex align-items-center\">\n          <b-spinner\n            small\n            type=\"grow\"\n            variant=\"secondary\"\n          />\n          <b-spinner\n            type=\"grow\"\n            variant=\"dark\"\n          />\n          <b-spinner\n            small\n            type=\"grow\"\n            variant=\"secondary\"\n          />\n          <!-- We add an SR only text for screen readers -->\n          <span class=\"sr-only\">Please wait...</span>\n        </div>\n      </template>\n      <b-input-group\n        size=\"lg\"\n        :aria-hidden=\"busy ? 'true' : null\"\n      >\n        <b-form-input\n          v-model=\"value\"\n          :disabled=\"busy\"\n        />\n        <b-input-group-append>\n          <b-button\n           v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n            ref=\"button\"\n            :disabled=\"busy\"\n            variant=\"primary\"\n            @click=\"onClick\"\n          >\n            Do something\n          </b-button>\n        </b-input-group-append>\n      </b-input-group>\n    </b-overlay>\n  </div>\n</template>\n\n<script>\nimport { BOverlay, BInputGroup, BFormInput, BInputGroupAppend, BButton, BSpinner} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BOverlay,\n    BInputGroup,\n    BFormInput,\n    BInputGroupAppend,\n    BButton,\n    BSpinner,\n  },\n    directives: {\n    Ripple,\n  },\n  data: () => ({\n    value: 'Some value',\n    busy: false,\n    timeout: null,\n  }),\n  beforeDestroy() {\n    this.clearTimeout()\n  },\n  methods: {\n    clearTimeout() {\n      if (this.timeout) {\n        clearTimeout(this.timeout)\n        this.timeout = null\n      }\n    },\n    setTimeout(callback) {\n      this.clearTimeout()\n      this.timeout = setTimeout(() => {\n        this.clearTimeout()\n        callback()\n      }, 5000)\n    },\n    onHidden() {\n      // Return focus to the button\n      this.$refs.button.focus()\n    },\n    onClick() {\n      this.busy = true\n      // Simulate an async request\n      this.setTimeout(() => {\n        this.busy = false\n      })\n    },\n  },\n}\n</script>\n`\n"],"sourceRoot":""}